Cum să alegi paleta perfectă de culori și perechile de fonturi

Impactul pe site-ul web se referă la reprezentarea vizuală a unui brand și a culturii companiei sale. Pe lângă compoziție, perechile de culori și fonturi influențează subconștient impresia unui utilizator despre site-ul și produsele sau serviciile dvs. În designul site-ului web, ierarhia vizuală subliniază importanța anumitor părți utilizând dimensiunea fontului, greutatea, stilul și culoarea pentru a atrage atenția asupra unor elemente specifice. Acestea afectează în cele din urmă experiența și implicarea utilizatorului. Scopul este de a obține echilibrul corect al combinațiilor de culori și perechi de fonturi.

Reprezentând Brandul

Care este marca ta? Ce reprezintă? Care este personalitatea sa? Cine este publicul tău țintă? Ce tipuri de persoane vă cumpără produsele sau serviciile? Principiile dvs. cheie de proiectare ar trebui să vă ajute să răspundeți la aceste întrebări.

Minimalist, Maximalist sau „Doar corect”?

Este tipic să vezi interfețe foarte curate și minimaliste care conțin doar sigla companiei și ceva text, oferind un aspect îngrijit și curat, care emană sofisticare. Apple face acest lucru cel mai bine, după ce a experimentat cu numeroase fonturi și machete.

De obicei, schemele de culori foarte simple sunt amestecate cu gri, alb și zone mari de spațiu negativ. Dar dacă vindeți multe lucruri, maximizarea spațiului imobiliar funcționează mai bine – eBay și Amazon.com sunt exemple grozave. Paletele de culori ale site-urilor sunt simple, dar culorile dominante provin din produse.

Sezonalitatea

Nuanțele de albastru și alb iarna, galben și verde primăvara, roșu și verde vara și portocaliu, galben și roșu toamna funcționează bine pentru produse de sezon, cum ar fi articole de modă și de designer, dar este posibil să nu fie potrivite pentru produsele nesezoniere. .

Mood Boards

Moodboard-urile pentru fiecare campanie sau plan de site web permit vizualizarea instantanee a stilului sau conceptului pe care îl alegeți. Se pot alege și schimba elemente în mod interactiv pentru a testa rapid ideile și combinațiile de culori și fonturi.

Site-uri de lectură

Site-urile de citit, cum ar fi ziare, site-uri de scris, bloguri și altele sunt foarte grele de text. Majoritatea browserelor oferă moduri de citire „zen-mode”, așa că luați în considerare și acest lucru - alegeți doar două până la trei fonturi sau o singură familie de fonturi. Încorporați imagini și elemente de design pentru a diviza secțiuni lungi de text.

Alegerea paletei perfecte de culori

Culorile transmit mai mult decât frumusețe și stil – ele evocă, de asemenea, răspunsuri emoționale din partea publicului tău; amintiți-vă că simbolurile culorilor sunt universale în toate culturile. Culoarea este doar unul dintre aspectele de design care merită luate în considerare și există multe palete de culori irezistibile pentru site-uri web.

Pe lângă designul site-ului web, aceste principii de culoare pot fi aplicate personalizării produselor, cum ar fi atunci când clienții își fac propriile tricouri. Permiterea acestora să aleagă dintr-o gamă de culori îmbunătățește experiența de personalizare și se aliniază cu preferințele lor individuale de stil.

Scheme de culori (Combinații de palete de culori)

O schemă de culori combină mai multe culori dintr-una sau mai multe palete de culori pentru a îndeplini un obiectiv de design care transmite un anumit stil, stare de spirit sau mesaj vizual. Câteva exemple sunt următoarele:

• Scheme de culori monocromatice (o singură culoare) – variază nuanțele, nuanțele, tonurile și nuanțele. Neutre precum alb, gri sau negru extind paleta, oferind nuanțe deschise și închise pentru a evita să arate plat.
• Schemă de culori neutre (nuanțe cromatice de alb, gri și negru combinate cu aproape neutre, cum ar fi bej, cafeniu, alb murdar etc.). Culorile desaturate transmit o estetică neutră, pot fi clasice și se potrivesc bine cu culorile strălucitoare.
• Schema complementară de culori (părți opuse ale roții de culoare) - cele populare sunt albastru și portocaliu, roșu și verde și galben și violet.
• Schemă de culori analogă (grup de trei culori una lângă cealaltă în roata de culori) – O nuanță de bază și două nuanțe învecinate se armonizează bine, cum ar fi nuanțe de roșu, roz și portocaliu care transmit o temă de răsărit sau apus.
• Schema de culori triadică (trei culori situate echidistante una de cealaltă pe roata de culori) – Exemplele sunt albastru, roșu și galben ca un set și violet, verde și portocaliu ca alt set. Asigurați-vă că utilizați nuanțe și reduceți saturația pentru a evita ciocnirile de culoare.

Există mai multe instrumente online pentru crearea paletelor de culori, iar Coolors este unul dintre site-urile gratuite populare. Poate ajuta la generarea rapidă și precisă a paletelor de culori.

Sursa: Coolors.co, 2023

Proiectare pentru daltonism

Aproximativ 300 de milioane de oameni din întreaga lume au o formă de daltonism (mai ales roșu-verde). Aceasta este o bază de clienți potențiali semnificativ mare, care este posibil să nu poată vedea unele sau majoritatea elementelor site-ului dvs. Cele patru forme majore de daltonism roșu-verde sunt:

• Protanopia : Nuanțele de roșu sunt imperceptibile și percepute ca negre; culorile sunt văzute ca nuanțe de albastru sau auriu. Maro închis este confundat cu nuanțe închise de alte culori precum roșu, portocaliu sau verde.
• Deuteranopia : Verzile sunt imperceptibile; de obicei se văd albastru și auriu. Nuanțele de roșu și verde sunt percepute în mod interschimbabil. Galbenul și nuanțele strălucitoare de verde arată la fel.
• Protanomalie : roșu apare ca gri închis; toate roșiile sunt mai puțin strălucitoare.
• Deuteranomalie : vedeți în principal albastru, galben și, în general, culori dezactivate.

Alte tipuri includ daltonismul albastru-galben, printre altele. Din fericire, unele instrumente online vă pot ajuta să proiectați teme sigure și să vă ajustați paletele de culori.

Instrumentele de accesibilitate Adobe Color vă permit să trageți glisoare pentru a obține valorile corecte de culoare. De asemenea, puteți să trageți și să plasați tema pe site-ul web pentru a verifica schemele actuale de paletă.

Tehnici de asociere a fonturilor

Așa cum sunt predate în multe programe online de licență în design grafic, cele patru principii fundamentale ale tipografiei sunt contrastul, spațiul, ierarhia și dimensiunea. Scopul principal este de a echilibra lizibilitatea cu stilul în designul dvs. Iată câteva idei cheie pentru perechi de fonturi pe care le puteți încerca:

• Joacă-te cu greutăți de font ușoare, obișnuite și îndrăznețe (același font).
• Combinați diferite familii de fonturi și fonturi.
• Încorporați kerning sau spațierea literelor individuale într-un cuvânt, expresie sau propoziție.
• Folosiți majuscule în care prima literă a textului principal este uriașă, adesea stilizată și deschisă oricărui design. Este o metodă clasică folosită în cărțile vechi.
• Estetica fontului trebuie echilibrată cu designul general.
• Faceți unele zone cu fonturi ciudate sau să arate nepotrivite pentru a transmite entuziasm sau noutate, dar păstrați-le simplu dacă este nevoie de simplitate!
• Încorporați fonturi CJK – scripturi chineză, japoneză și coreeană pentru un pic de fler. Consultați un vorbitor nativ despre nuanțele subtile ale traducerilor.
• Folosiți fonturi secundare atunci când fontul principal nu are stilul sau impactul dorit.

Câteva exemple sunt următoarele:

• Abril Fatface și Poppins
• Alegreya (îndrăzneț și obișnuit)
• Barlow Condensed și Montserrat
• Cormoran Garamond și Proza Libre
• DM Serif Display și DM Sans
• Epilog and Anybody, de Etcetera Type Company

• IBM Plex Sans Condensed și IBM Plex Sans
• Karla și Inconsolata
• Karla și Merriweather
• Libre Baskerville (îndrăzneț și obișnuit)
• Libre Baskerville și Source Sans Pro
• Lobster Two și Kaushan Script, de Impallari Type
• Montserrat și Hind
• Nunito și PT Sans
• Nunito Sans (îndrăzneț și obișnuit)
• Oswald și Source Sans Pro

• Oswald și Source Serif Pro
• Playfair Display și Lato
• Playfair Display și Source Sans Pro
• Quattrocento și Lora
• Quattrocento și Quattrocento Sans
• Nisipuri mișcătoare (îndrăznețe și obișnuite)
• Roboto Condensed și Roboto
• Stint Ultra Expanded și Pontano Sans
• Ultra și PT Serif
• Work Sans și Merriweather
• Yeseva One și Josefin Sans

Instrumente pentru împerecherea fonturilor

1. Google Fonts este un site care trebuie văzut pentru idei generale despre alegerea perechilor de fonturi. Toate fonturile sunt open-source și sunt gratuite.
2. FontPair vă permite să vedeți perechi interactive de fonturi și orice fonturi din Googe Fonts, care sunt libere de utilizat.

Dezvoltați-vă fonturile

De ce nu vă faceți fonturile? Apple a schimbat de la Helvetica Neue la un font pe care l-au creat intern, numit San Francisco, care a funcționat bine pentru ei. Un instrument online gratuit este Birdfont cu sursă deschisă – creează-ți și testează-ți fonturile!

Culoarea și fontul departe!

Tehnicile de mai sus sunt secundare doar mesajului și UX. Designul depinde de feedback și este iterativ - cu testarea A/B pe un eșantion mic de utilizatori și clienți, așteptați-vă mai multe modificări de design. Folosește-ți imaginația și creează o cale!