Pagina de branding a unui proiect – esențială în dezvoltarea web

DE CE ESTE ESENȚIALĂ? TÂRZIU AM DESCOPERIT CE SIMPLU SE DEZVOLTĂ, ATUNCI CÂND AI TOATE MATERIALELE ÎNTR-UN SINGUR LOC. PE LÂNGĂ TIMPUL CÂȘTIGAT (NU MAI BĂNĂNĂI DUPĂ MATERIALELE CLIENTULUI).
februarie 21, 2020
Nivel: Începători
6+

Brandingul reprezintă identitatea vizuală a unei persoane / companie / corporație. Implică mai multe elemente precum logo, paleta de culori, tiplul de font + alte materiale solicitate de client. Materialele printabile precum cărți de vizită sau pagină cu antet (pe care eu le consider deprecated – învechite). Toate aceste elemente și materiale trebuie corelate unitar între ele.

Pagina de branding spune o mică poveste a brand-ului și trebuie să includă toate capitolele (ca-n poveste). Mai jos încerc sumar să exemplific, cât mai simplu posibil, elementele de bază.

Afișarea logo-ului

Logo-ul este ca o insignă milenială, pentru care trebuie să ai reguli de purtare (afișare). Dacă nu, la un moment dat există șansa să te înțepi, așa ca este bine sa explici, cum și în ce circumstanțe se afișează logo-ul.

Al meu are doar două stări “YIN & YANG” (cizmarul are cele mai ponosite încălțări) și asta ușurează afișarea.

Eu în general când pornesc un proiect, încep prin realizarea logo-ului (minim 3 variante, pofta vine mâncând). Alegerea clientului, mă ajută să vad linia grafica (mai bine zis ce-i place).

Mai jos vă prezint 3 dintre propunerile mele de logo, care au stat la baza proiectelor de branding.

Balta Chița 2
Beauty Tour
Tudi's Pizza & More
Pentru cei care vor sa dezvolte subiectul recomand articolul “freepik.com, librărie cu resurse grafice gratuite (găsiți și elemente premium)”

Font / Titlu (h1...h6)

Este prea devreme să menționez importanța font-ului! Este o armă cu două tăișuri, nu te lua dus de val (știu ai de unde să alegi). Recomand utilizarea a maxim 2 familii de fonturi cu 1-2 variații. Pe site-ul muug.ro am folosit o singură familie ”Montserrat”, cu două variații Regular (400) și Black (900).

Desktop / Laptop / Tablet

H1 - Montserrat Black - 56px

H2 - Montserrat Regular - 44px

H3 - Montserrat Regular - 32px

H4 - Montserrat Black - 28px

H5 - MONTSERRAT REGULAR - 22PX
H6 - Montserrat Black - 18px

Mobile

H1 - Montserrat Black - 36px

H2 - Montserrat Regular - 28px

H3 - Montserrat Regular - 24px

H4 - Montserrat Black - 20px

H5 - MONTSERRAT REGULAR - 18PX
H6 - Montserrat Black - 16px

Pentru implementarea într-o temă de WordPress, eu folosesc zona Theme Style, caracteristică a plugin-ului Elementor, lansată de curând (Februarie 2020). Este panoul de control al modului de afișare pe site. Eu am un șablon pentru pagina de branding, pe care-l folosesc la toate proiectele.

Cei de la Elementor au doua tutoriale excelente (așa cum ne-au obișnuit) despre nouă caracteristică Theme Style.

Introducing Elementor Theme Style: We're Bringing Global Theme Design Into Elementor
How to Design Your WordPress Theme with Elementor Theme Style

Nota: în general fugi de abonări Newsletter și alte mesaje nedorite pe email, poate trebuie să schimbi puțin abordarea. Printr-o filtrare a informației în funcție de importanța, te ține up to date (la curent).

Paleta de culori

Doar feeling-ul tău conteaza, nu vei da greș. Dar dacă inspirația nu bate astăzi la ușă, ne îmbrăcăm și ieșim la un “Party“. Ce vreau sa zic prin asta (chiar este bine să socializezi), sunt 2 cluburi de culori unde trebuie să intri cel puțin odată în viața.

Adobe Color
Coolors

Paleta nu trebuie să depașescă 5 culori, dar nu este o regulă scrisă pentru asta și ca exemplu simplu prezint o paletă principală și una secundară.

Paletă principală
Paletă secundară

Rămâne la latitudinea designer-ului, în funcție și de specificațiilor proiectului câte culori adaugă în paletă. Un exemplu de caz cand poți folosi o paletă foarte largă de culori este un magazin de jucării. Aici poți crea un flux de culori asociat categoriilor. La polul opus sunt site-urile de știri sau prezentare, unde se poate ajunge să folosești doar doua culori. Dar cum am zis, fiecare designer are propria lui abordare.

Monocrom
http://www.routalempi.fi/
Colorat
https://nova-smarthome.ueno.co/
In cazul meu am folosit o paleta de 5 culori prezentata mai jos.
#081738
#1A499F
#4970B7
#82B7D0
#FF5C05
Pentru cei avansați am să pregătesc în viitorul apropiat, articole mai extinse pentru fiecare element de branding în parte.