Kolory

Paleta kolorów Smart Chip odzwierciedla jego zabawny i dynamiczny charakter. Nasze główne kolory – czerń i biel – tworzą odważną i ponadczasową podstawę. Kolory akcentujące dodają elastyczności i żywiołowości, pomagając nam dostosować się do różnych nastrojów i kontekstów, a jednocześnie sprawiają, że całość wygląda świeżo i spójnie.

Pobierz ikonę chipa

Kolory podstawowe

Paleta kolorów to Czarny oraz Biały w połączeniu z Kolor zaznaczenia. Czerń i biel to proste kolory, które zapewniają jak największy kontrast i czytelność. Różne kolory wyróżnień, przedstawione w formie liniowego gradientu, dodają odrobinę energii i odzwierciedlają zabawny sposób, w jaki Smart Chip ułatwia życie.

Czarny

CMYK (gęsta czerń)
60/40/40/100

Hex
#000000

Biały

CMYK
0/0/0/0

Hex
#ffffff

Kolory zaznaczeń

Kolory akcentujące uzupełniają i wzbogacają kolory podstawowe. Stanowią one kluczowy element naszej dynamicznej tożsamości wizualnej. Wykorzystujemy je, aby urozmaicić projekty i tchnąć życie w nasz język wizualny.

Wybierając kolor, weź pod uwagę nastrój lub charakter swojego projektu. Każdy gradient wywołuje inne odczucia. Na przykład, Fioletowy chłodny jest to spokojny kolor, dzięki czemu idealnie nadaje się do bardziej swobodnych tematów. Z drugiej strony, Żywa pomarańczowa jest żywy i energiczny, idealnie nadaje się do treści dynamicznych lub nastawionych na akcję. Zastanów się, jakie przesłanie chcesz przekazać, i wybierz kolor, który najlepiej podkreśli tę narrację.

Obowiązuje jedna bardzo ważna zasada: nie należy używać więcej niż jednego koloru w tym samym układzie. Każdy kolor wyróżniający powinien być samodzielny.

Żywa pomarańczowa

CMYK
0/46/78/0 > 0/86/70/0

Hex
#ffa041 > #fc3a3c

Deep Blue

CMYK
79/24/6/2 > 90/69/0/0

Hex
#0393bc > #004cd5

Fioletowy chłodny

CMYK
47/59/0/0 > 80/82/0/0

Hex
#9d77c4 > #554195

Miedź

CMYK
0/46/78/0 > 24/58/86/15

Hex
#ffa041 > #b26e31

Elektryczny błękit

CMYK
65/0/0/0 > 70/54/0/0

Hex
#23c8fe > #647cff

Ciepły fiolet

CMYK
40/72/0/0 > 68/74/0/0

Hex
#a85fa2 > #6e539e

Ładny róż

CMYK
5/54/34/0 > 0/85/69/0

Hex
#ea9091 > #ed4343

Spokojna zieleń

CMYK
62/0/92/0 > 86/29/88/16

Hex
#71b541 > #197642

Czerwony alarm

CMYK
0/76/55/0 > 0/100/68/0

Hex
#ff5a5a > #e6003c

Gradienty i krzywe

Tam, gdzie to możliwe, stosujemy gradienty w kolorach wyróżniających, w połączeniu z centralnym elementem projektu zwanym Krzywe. Tutaj dowiesz się, jak je wykonać i jak z nich korzystać.

Krzywe

Krzywe są wykorzystywane głównie jako tło. Nadają mu one większą atrakcyjność wizualną, głębię oraz wrażenie ruchu.

Krzywe powstają poprzez skalowanie, obracanie i kadrowanie ikony chipa. Skala, obrót i kadr zależą od Ciebie, ale nie pokazuj zbyt dużej części ikony. Powinny wyglądać jak abstrakcyjne krzywe i paski, a nie jak rzeczywista ikona.

Krzywe są zawsze umieszczane na tle. Tło wykorzystuje ten sam gradient co krzywe, ale w innym kierunku.

Kierunek gradientów nie jest ustalony na stałe. Można je dowolnie zmieniać w każdym nowym projekcie, a nawet animować. Dzięki temu krzywe zachowują dynamikę i świeżość.

Nie musisz wykorzystywać całego zakresu gradientu od początku do końca. Możesz “powiększyć” tylko jego fragment. Dzięki temu jeszcze bardziej poszerzamy naszą paletę barw, zachowując jednocześnie rozpoznawalność kolorów.

Zadbaj jednak o to, by nadal dało się rozpoznać, że jest to gradient. Nie wybieraj fragmentu, który jest tak mały, że wygląda jak jednolity kolor.

Krzywe nie są konieczne – czasami mniej znaczy więcej. Należy unikać stosowania ich w przypadku mniejszych elementów, takich jak przyciski czy małe obrazki.

Tworzenie nowych kolorów

Paleta kolorów wyróżniających została zaprojektowana tak, aby jej elementy dobrze ze sobą współgrały i sprawdzały się w wielu różnych kontekstach. Jeśli jednak żaden z gotowych gradientów nie pasuje do Twojego konkretnego projektu, możesz stworzyć własny.

Tworzenie nowych gradientów jest szczególnie przydatne przy łączeniu nagłówka z obrazem. W tym przykładzie w nagłówku zastosowano niestandardowy gradient, który idealnie pasuje do obrazu.

Kolory uzyskano poprzez pobranie próbek z obrazu, a następnie zwiększenie nasycenia i jasności. Dzięki temu nowy gradient harmonijnie komponuje się z istniejącą paletą barw.

Podczas tworzenia nowych kolorów należy przestrzegać kilku zasad:

Nie przesadzaj! Staraj się trzymać zatwierdzonej palety kolorów i twórz nowe kolory tylko w razie potrzeby.

Nie twórz nowego gradientu, który jest zbyt podobny do już istniejącego. Jeśli dany kolor się sprawdza, po prostu go zachowaj.

Stosuj połączenia w tej samej tonacji. Nie przechodź od czerwonego do niebieskiego, tylko od jasnoczerwonego do średnio czerwonego.

Wartości powinny być zgodne z istniejącymi gradientami. Nie należy stosować zbyt nasyconych, stonowanych, jasnych ani ciemnych odcieni.

Podstawowe zasady dotyczące kolorów

Projektując nowy układ strony, możesz wybrać między czarnym a białym tłem. Białe tło sprawia wrażenie przejrzystego, otwartego i zachęcającego. Czarne tło kojarzy się z technologią, elegancją i siłą. Wybierz to, które najlepiej pasuje do Twojego projektu, przekazu i docelowej grupy odbiorców.

Niezależnie od tego, którą opcję wybierzesz, użyj koloru akcentującego, aby urozmaicić układ, wyróżnić określone informacje, skierować uwagę czytelnika lub podkreślić jakiś punkt.

Tworząc projekty wielostronicowe, nie przechodź gwałtownie od jednego koloru do drugiego. Podziel swój projekt na tematy lub rozdziały, i przypisz każdemu z nich własny kolor. Trzymaj się tego koloru w obrębie każdego rozdziału. Zapewni to spójność i pozwoli uniknąć wrażenia bałaganu na stronach.

Możesz używać kolorów jako tła, w nagłówkach, ikonach lub w dowolnych innych elementach, w których odrobina koloru będzie pasować.

Aby zachować przejrzysty i spójny wygląd, nigdy nie mieszać różne kolory na tej samej stronie, z wyjątkiem sytuacji, gdy jest to konieczne ze względu na elementy funkcjonalne (takie jak komunikaty o błędach lub ostrzeżenia).

Czego nie należy robić

Proszę unikać poniższych błędów.

Nie należy używać różnych kolorów w tym samym układzie.

Nie używaj krzywych bez tła.

Nie należy stosować krzywych na tle o innym kolorze.

Nie pokazuj zbyt dużej części ikony chipa.

Nie łącz gradientu z innym kolorem.

Nie twórz nowych gradientów, które naruszają zasady.

Nie należy używać kolorów do zaznaczania fragmentów tekstu ani całych bloków tekstu.

Nie używaj jednolitych kolorów, chyba że jest to absolutnie konieczne.

Przykłady

Oto kilka przykładów zastosowania kolorów i krzywych. Zwróć uwagę na różnice w skali, współczynniku kadrowania, obrocie oraz zakresie gradientu krzywych.