Jak wybrać idealną paletę kolorów i pary czcionek

Wpływ witryny internetowej polega na wizualnej reprezentacji marki i jej kulturze korporacyjnej. Oprócz kompozycji, pary kolorów i czcionek podświadomie wpływają na wrażenia użytkowników dotyczące Twojej witryny oraz produktów lub usług. W projektowaniu stron internetowych hierarchia wizualna podkreśla znaczenie niektórych części, wykorzystując rozmiar, wagę, styl i kolor czcionki, aby zwrócić uwagę na określone elementy. Ostatecznie wpływają na doświadczenie i zaangażowanie użytkowników. Celem jest uzyskanie właściwej równowagi kombinacji kolorów i czcionek.

Reprezentowanie Marki

Jaka jest Twoja marka? Co to reprezentuje? Jaka jest jego osobowość? Kto jest waszym dobiorcą docelowym? Jakie typy osób kupują Twoje produkty lub usługi? Kluczowe zasady projektowania powinny pomóc odpowiedzieć na te pytania.

Minimalista, maksymalista czy „w sam raz”?

Typowe jest bardzo czyste i minimalistyczne interfejsy, które zawierają jedynie logo firmy i trochę tekstu, co zapewnia schludny i czysty wygląd emanujący wyrafinowaniem. Apple robi to najlepiej, eksperymentując z wieloma krojami i układami czcionek.

Zazwyczaj bardzo proste schematy kolorów mieszają się z szarościami, bielą i dużymi obszarami negatywnej przestrzeni. Jeśli jednak sprzedajesz wiele rzeczy, maksymalizacja powierzchni ekranu działa lepiej — eBay i Amazon.com są świetnymi przykładami. Paleta kolorystyczna stron internetowych jest prosta, ale dominujące kolory pochodzą z produktów.

Sezonowość

Odcienie błękitu i bieli zimą, żółci i zieleni wiosną, czerwieni i zieleni latem oraz pomarańczy, żółci i czerwieni jesienią dobrze sprawdzają się w przypadku produktów sezonowych, takich jak artykuły modowe i designerskie, ale mogą nie być odpowiednie w przypadku produktów niesezonowych .

Tablice nastrojów

Moodboardy dla każdej kampanii lub planu strony internetowej pozwalają na natychmiastową wizualizację stylu lub koncepcji, do której dążysz. Można interaktywnie wybierać i zmieniać elementy, aby szybko testować pomysły oraz kombinacje kolorów i czcionek.

Czytanie witryn

Strony do czytania, takie jak gazety, strony z tekstami, blogi i inne, zawierają dużo tekstu. Większość przeglądarek udostępnia tryby czytania w trybie zen, więc weź to pod uwagę – wybierz tylko dwie do trzech czcionek lub jedną rodzinę czcionek. Dołącz obrazy i elementy projektu, aby podzielić długie sekcje tekstu.

Wybór idealnej palety kolorów

Kolory przekazują więcej niż tylko piękno i styl — wywołują także emocjonalne reakcje odbiorców; pamiętaj, że symbolika kolorów jest uniwersalna w różnych kulturach. Kolor to tylko jeden z aspektów projektowania, który warto wziąć pod uwagę, a istnieje wiele nieodpartych palet kolorów dla stron internetowych.

Oprócz projektowania stron internetowych te zasady dotyczące kolorów można zastosować do dostosowywania produktów, na przykład podczas tworzenia własnych koszulek przez klientów. Umożliwienie im wyboru spośród szerokiej gamy kolorów zwiększa możliwości personalizacji i zapewnia zgodność z ich indywidualnymi preferencjami stylistycznymi.

Schematy kolorów (Kombinacje palet kolorów)

Schemat kolorów łączy kilka kolorów z jednej lub większej liczby palet kolorów, aby spełnić jakiś cel projektowy, który przekazuje określony styl, nastrój lub przekaz wizualny. Oto kilka przykładów:

• Monochromatyczne schematy kolorów (jeden kolor) – różnicuj barwy, odcienie, tony i odcienie. Neutralne odcienie, takie jak biel, szarość lub czerń, poszerzają paletę, zapewniając jasne i ciemne odcienie, aby uniknąć płaskiego wyglądu.
• Neutralny schemat kolorów (achromatyczne odcienie bieli, szarości i czerni w połączeniu z niemal neutralnymi odcieniami, takimi jak beż, brąz, złamana biel itp.). Nienasycone kolory przekazują neutralną estetykę, mogą być klasyczne i dobrze komponować się z jaskrawymi kolorami.
• Uzupełniający schemat kolorów (przeciwne strony koła kolorów) – popularne to niebieski i pomarańczowy, czerwony i zielony oraz żółty i fioletowy.
• Analogiczny schemat kolorów (grupa trzech kolorów obok siebie na kole kolorów) – odcień podstawowy i dwa sąsiednie odcienie dobrze ze sobą współgrają, np. odcienie czerwieni, różu i pomarańczy, które nawiązują do motywu wschodu lub zachodu słońca.
• Triadyczny schemat kolorów (trzy kolory umieszczone w równej odległości od siebie na kole kolorów) – przykładami są niebieski, czerwony i żółty jako jeden zestaw oraz fioletowy, zielony i pomarańczowy jako drugi zestaw. Pamiętaj, aby używać odcieni i zmniejszać nasycenie, aby uniknąć konfliktów kolorów.

Istnieje kilka narzędzi online do tworzenia palet kolorów, a Coolors to jedna z popularnych bezpłatnych witryn. Może pomóc w szybkim i dokładnym generowaniu palet kolorów.

Źródło: Coolors.co, 2023

Projektowanie dla daltonistów

Około 300 milionów ludzi na całym świecie cierpi na jakąś formę ślepoty barw (głównie czerwono-zielonej). Jest to znacząco duża potencjalna baza klientów, która może nie widzieć niektórych lub większości elementów Twojej witryny. Cztery główne formy ślepoty na barwy czerwono-zielone to:

• Protanopia : Odcienie czerwieni są niedostrzegalne i postrzegane jako czerń; kolory są postrzegane jako odcienie błękitu lub złota. Ciemny brąz jest mylony z ciemnymi odcieniami innych kolorów, takich jak czerwony, pomarańczowy lub zielony.
• Deuteranopia : Zieloni są niedostrzegalni; zwykle widać błękit i złoto. Odcienie czerwieni i zieleni są postrzegane zamiennie. Żółte i jasne odcienie zieleni wyglądają tak samo.
• Protanomalia : kolor czerwony pojawia się jako ciemnoszary; wszystkie czerwienie są mniej jasne.
• Deuteranomalia : Zobacz głównie błękity, żółcie i ogólnie stonowane kolory.

Inne typy obejmują między innymi niebiesko-żółtą ślepotę barw. Na szczęście niektóre narzędzia online mogą pomóc w zaprojektowaniu bezpiecznych motywów i dostosowaniu palet kolorów.

Narzędzia dostępności programu Adobe Color umożliwiają przeciąganie suwaków w celu uzyskania prawidłowych wartości kolorów. Możesz także przeciągnąć i upuścić motyw na stronę internetową, aby sprawdzić aktualne schematy palet.

Techniki parowania czcionek

Jak naucza się w wielu internetowych programach studiów graficznych, cztery podstawowe zasady typografii to kontrast, przestrzeń, hierarchia i rozmiar. Głównym celem jest zrównoważenie czytelności i stylu w projekcie. Oto kilka kluczowych pomysłów na łączenie czcionek, które możesz wypróbować:

• Baw się lekkimi, regularnymi i pogrubionymi czcionkami (ta sama czcionka).
• Łącz różne rodziny czcionek i kroje pisma.
• Włącz kerning lub odstępy między pojedynczymi literami w słowie, wyrażeniu lub zdaniu.
• Używaj inicjałów, w których pierwsza litera tekstu głównego jest duża, często stylizowana i otwarta na dowolny projekt. Jest to klasyczna metoda stosowana w starych książkach.
• Estetyka czcionki musi być zrównoważona z ogólnym projektem.
• Spraw, aby niektóre obszary czcionek były dziwaczne lub wyglądały nietypowo, aby przekazać emocje lub nowość, ale zachowaj prostotę, jeśli wymagana jest prostota!
• Dodaj czcionki CJK — pisma chińskie, japońskie i koreańskie, aby uzyskać odrobinę elegancji. Skonsultuj się z native speakerem w sprawie subtelnych niuansów tłumaczeń.
• Używaj drugorzędnych krojów pisma, gdy podstawowy krój pisma nie ma pożądanego stylu lub efektu.

Oto kilka przykładów:

• Abril Fatface i Poppins
• Alegreya (pogrubienie i regularne)
• Skondensowane Barlowa i Montserrat
• Kormoran Garamond i Proza Libre
• DM Serif Display i DM Sans
• Epilog i Ktokolwiek, autorstwa Etcetera Type Company

• IBM Plex Sans Condensed i IBM Plex Sans
• Karla i Inconsolata
• Karla i Merriweather
• Libre Baskerville (pogrubione i regularne)
• Libre Baskerville i Source Sans Pro
• Lobster Two i Kaushan Script, autorstwa Impallari Type
• Montserrat i Hind
• Nunito i PT Sansa
• Nunito Sans (pogrubiony i regularny)
• Oswalda i Source Sans Pro

• Oswalda i Source Serif Pro
• Playfair Display i Lato
• Playfair Display i Source Sans Pro
• Quattrocento i Lora
• Quattrocento i Quattrocento Sans
• Ruchome piaski (pogrubione i regularne)
• Roboto skondensowane i Roboto
• Stint Ultra Expanded i Pontano Sans
• Ultra i PT Serif
• Pracuj Sans i Merriweather
• Yeseva One i Josefin Sans

Narzędzia do parowania czcionek

1. Czcionki Google to obowiązkowa witryna zawierająca ogólne pomysły na wybór par czcionek. Wszystkie czcionki są typu open source i można z nich korzystać bezpłatnie.
2. FontPair umożliwia przeglądanie interaktywnych par czcionek i dowolnych czcionek z Google Fonts, z których można korzystać bezpłatnie.

Rozwijaj swoje czcionki

Dlaczego po prostu nie zrobić czcionek? Apple zmieniło Helvetica Neue na stworzoną przez siebie czcionkę o nazwie San Francisco, która sprawdziła się w ich przypadku. Bezpłatnym narzędziem online jest Birdfont o otwartym kodzie źródłowym — twórz i testuj swoje czcionki!

Kolor i czcionka precz!

Powyższe techniki są wtórne jedynie w stosunku do przekazu i UX. Projekt zależy od opinii i jest iteracyjny — w przypadku testów A/B na małej próbie użytkowników i klientów należy spodziewać się kilku zmian w projekcie. Użyj swojej wyobraźni i stwórz sposób!