fbpx

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.