Na pewno jako projektant niejednokrotnie doszedłeś do momentu gdy patrząc na projekt można było zauważyć, że coś nie gra z kolorami. Stosując paletę kolorów bardzo łatwo zgubić proporcje przez co projekt staje się mało harmonijny.
Istnieje jednak pewna bardzo prosta zasada, która zapewni równowagę kolorystyczną w Twoim interfejsie. Reguła 60+30+10 to znana i ponadczasowa zasada wywodząca się z branży dekorowania i wyposażenia wnętrz. Jednak z powodzeniem wykorzystywana jest w innych dziedzinach jak marketing czy projektowanie graficzne. Liczby 60 30 oraz 10 to po prostu proporcje między kolorami.
60% to dominujący odcień, 30% to kolor wtórny, a 10% to kolor akcentujący. W urządzaniu mieszkania stosuje się ją mniej więcej w taki sposób:
- 60% pokoju składa się ze ścian, podłóg, sufitów
- 30% pokoju przypada na meble, dywaniki, drewniane wykończenia, tkaniny
- 10% to akcenty czyli dekoracje, obrazy, poduszki, koce i mniejsze przedmioty
Proporcja 60% + 30% + 10% ma zapewnić równowagę kolorów. Ta formuła działa, ponieważ tworzy poczucie równowagi i pozwala na wygodne poruszanie się oka z jednego punktu centralnego do drugiego. Jest również niezwykle prosta w użyciu.
60-30-10 w grafice
Jak pewnie się domyślasz łatwo przełożyć tą regułę na projektowanie interfejsów:
- 60% – tyle powinien zajmować kolor dominujący – na stronach i projektach jest to często kolor biały lub jasno szary
- 30% – to miejsce na zabarwienie projektu naszym głównym kolorem np. niebieskim
- 10% – to miejsce na kolory, które coś zaakcentują, często mocne, wyraziste barwy np. przyciski CTA
Tworząc projekt wybierz jeden odcień, który będzie zajmował większą część powierzchni czyli 60%. W większości przypadków będzie to barwa biała lub szara. To właśnie te barwy dominują dzisiaj w projektach stron i aplikacji. Niech nie zmyli Cię tutaj fakt, że patrząc na jakąś stronę przypisujesz jej jakiś kolor. Na przykład patrząc na Facebooka, kojarzysz go z niebieskim. Jednak dominującym kolorem na tym portalu jest tak naprawdę biały.
Następnie w 30% stosujesz kolor, który będzie przewijał się w Twój projekt. Jest to często kolor, który charakteryzując Twoją firmę, branding. Przywołując znowu przykład Facebooka to właśnie jest kolor niebieski.
Wreszcie pora na dodanie akcentu, który jest najodważniejszym odcieniem i powinien stanowić pozostałe 10 procent.
Podsumowanie
Znając odpowiednią proporcję, możesz z powodzeniem łączyć kolory bez ryzyka zmiany projektu w kolorowy bałagan. A jeśli chcesz poznać więcej porad z tematów UX/UI zajrzyj na nasz Instagram.
Jeśli spodobały Ci się porady z tego artykułu, to zapraszam Cię do zapoznania się z naszym ebookiem “przeprojektowani”, gdzie znajdziesz mnóstwo wiedzy z zakresu projektowania Ui/Ux.
