De fiecare dată când primesc un logo doar ca fișier JPG, știu că urmează cel puțin trei întrebări prin e-mail. Ce nuanță exactă de albastru? Există și o variantă pentru fundal închis? Ce font e ăsta? Un manual de identitate vizuală e documentul care răspunde la întrebările astea înainte să apuce cineva să le pună: variantele de logo, culorile cu valorile lor exacte, tipografia, spațiile libere și regulile de aplicare pe fiecare suport.
Mai jos e ce conține un astfel de manual, luat pe bucăți, cu exemple din proiecte reale de identitate de brand.
Ce este un manual de identitate vizuală?
E setul de reguli scrise care transformă un logo într-un sistem. Diferența contează mai mult decât pare. Un logo e un fișier pe care îl trimiți mai departe. O identitate vizuală e un set de decizii care se pot repeta de oricâte ori, de către oricine, fără să sune la designer.
Îi mai spune și brand guidelines, sau brand book, sau manual de brand. Denumirea contează mai puțin decât conținutul, iar conținutul bun se recunoaște după un lucru: răspunde la întrebări practice. Ce fac dacă logo-ul trebuie pus pe negru? Sub ce dimensiune nu se mai citește? Ce font folosesc într-o ofertă scrisă în Word, când fontul de brand nu e instalat pe calculatorul colegului?
Ce conține un manual de identitate vizuală?
Structura diferă de la proiect la proiect, dar zonele acoperite sunt cam aceleași peste tot:
- sistemul de logo, cu varianta principală și toate variantele secundare
- regulile de folosire: spațiu liber în jur, dimensiune minimă, ce nu ai voie să faci
- paleta cromatică, cu valori exacte pentru tipar și pentru ecran
- tipografia, adică fonturile de brand, ierarhia lor și alternativele de siguranță
- elementele de sprijin (pattern-uri, iconografie, direcția fotografică), acolo unde brandul are nevoie de ele
- aplicațiile, adică cum arată totul pus la treabă
Le iau pe rând, cu câte un exemplu din portofoliul Lucăi Eva, designerul cu care lucrez pe partea de branding.
Sistemul de logo: primar, submark, badge, wordmark
Un brand construit ca lumea nu are un logo. Are patru sau cinci variante ale aceluiași logo, fiecare pentru alt context. Tailkin, un brand de suplimente pentru animale, are paginile de manual etichetate exact așa:
- logo primar, versiunea completă, pentru când ai spațiu și vrei impact
- submark, o formă redusă, pentru contexte mici sau care se repetă des
- badge, varianta circulară cu numele pe contur, care merge bine pe ambalaj
- wordmark, doar numele scris, fără simbol, pentru antete și situații orizontale
Merită știut și vocabularul, pentru că apare în orice discuție cu un designer. Simbolul singur e icon-ul. Numele scris e wordmark-ul. Cele două împreună formează logo-ul.
Ce mi se pare interesant la proiectul ăsta e că variantele nu arată ca patru logo-uri diferite. E același caracter grafic, aceeași literă cursivă cu aceeași curbă, decupat la niveluri diferite de detaliu. Asta e diferența dintre un sistem și o colecție de fișiere.
Cum arată logo-ul pe fundaluri diferite?
Regula pe care o sare aproape toată lumea când face brandul în grabă. Logo-ul trebuie să funcționeze pe alb, pe închis și pe culoarea de accent, iar manualul trebuie să spună clar care versiune merge unde.
Windoors Automatic arată bine treaba asta: monograma „Wo” apare în două variante cromatice, deschis pe antracit și închis pe galben. Aceeași formă, două seturi de valori, ambele documentate. (E un proiect personal din portofoliul Lucăi, un concept de rebranding, nu o lucrare livrată unui client. Zic asta pentru că exemplul e bun oricum, dar nu vreau să pară altceva decât e.)
Dacă pagina asta lipsește din manual, prima dată când cineva pune logo-ul peste o poză întunecată o să apară un dreptunghi alb în jurul lui. N-am văzut încă excepție.
Paleta cromatică: câte culori sunt prea multe?
În practică, două culori dominante plus una de accent acoperă nevoile majorității firmelor mici și mijlocii. Numărul nu e problema, precizia e. „Albastru corporate” nu e o culoare, e o intenție. În manual trebuie să existe valorile exacte în toate spațiile în care brandul chiar ajunge să fie reprodus: HEX pentru web, RGB pentru ecran, CMYK pentru tipar, plus Pantone dacă se tipărește ceva unde fidelitatea contează.
Trei abordări destul de diferite, ca să se vadă că nu există o rețetă:
- Tailkin merge pe o paletă caldă în trei tonuri, brun închis, crem și corai, care se potrivește unui brand de wellness
- Windoors folosește antracit plus un singur galben de semnalizare, foarte industrial
- PORCHWAVE, o identitate pentru un festival de muzică, stă pe negru, alb și roșu, contrast maxim
Un exemplu de cum arată asta scris ca lumea: paleta Tailkin are cinci culori numite, fiecare cu HEX-ul ei, COCOA #372C25, CORAL #F99A78, SAND #E8D5BC, TAUPE #AF9F8D și CREAM #E6C9A7. Nimeni nu mai trebuie să ghicească ce înseamnă „coraiul acela”. Manualul Windoors merge mai departe și dă pentru fiecare culoare și RGB, și CMYK, ceea ce e exact ce-ți trebuie când ajungi la tipografie.
Niciuna nu e „mai bună”. Fiecare face ce trebuie pentru brandul ei, ceea ce e singurul criteriu care contează la final.
Tipografia: alegi o pereche, nu un font
De obicei tipografia de brand înseamnă două fonturi cu roluri clare. Unul cu personalitate, pentru titluri și nume, altul neutru și lizibil, pentru textul curent. La Tailkin, numele e scris cu o cursivă groasă, iar descriptorul de sub el, „PET WELLNESS”, e un sans-serif cu spațiere largă. Cursiva dă caracterul. Sans-serif-ul face textul citibil pe un ambalaj de opt centimetri. În rest, textele brandului stau pe Poppins pentru partea funcțională și pe Sylfaen acolo unde e nevoie de un ton mai cald.
În manual mai trebuie să intre ierarhia (ce mărime și ce grosime pentru titlu, subtitlu, text curent) și, obligatoriu, fontul de rezervă. Ultimul e partea pe care o uită toată lumea. În momentul în care cineva din firmă scrie o ofertă în Word, fontul de brand nu e instalat nicăieri, iar dacă manualul nu spune ce se folosește în locul lui, se folosește Calibri. La fel și în semnătura de e-mail.
Testul dimensiunilor mici
Un logo care arată bine doar în prezentarea de proiect nu e terminat. Testul serios e reproducerea la dimensiuni mici și într-o singură culoare: brodat, gravat, ștanțat, sau ca favicon de 16 pixeli în tab-ul browserului.
În proiectul PORCHWAVE, insigna circulară (un contur cu o casă și o notă muzicală) apare brodată pe o șapcă. Broderia iartă foarte puțin. Dacă linia e prea subțire sau formele stau prea aproape una de alta, iese o pată de ață. Faptul că marca trece testul ăsta e un semn bun pentru tot restul aplicațiilor.
În manual, asta se traduce într-o singură propoziție scrisă undeva: dimensiunea minimă, în milimetri pentru tipar și în pixeli pentru digital, sub care se trece obligatoriu pe varianta simplificată.
Aplicațiile: unde se vede dacă sistemul chiar funcționează
Ultima parte a manualului arată identitatea aplicată. Nu e decor. E verificarea propriu-zisă, pentru că un sistem poate să arate impecabil izolat și să pice în momentul în care ajunge pe un ambalaj cu informație obligatorie pe el.
- Papetărie. Cărți de vizită, antet, semnătură de e-mail. Setul de la Windoors, cu galben pe hârtie neagră, e un exemplu bun
- Ambalaj. Cel mai dur test, pentru că aduce cu el sub-branduri de produs și text legal. Wolfgang Brewery și PHYTOLUMA duc identitatea peste game întregi de produse
- Semnalistică. Logo-ul Tailkin apare și pe firmă exterioară, unde distanța de citire schimbă complet regulile de contrast
- Print și expoziție. Standul SEOmonitor pentru BrightonSEO arată cum se comportă identitatea la scară mare, într-un spațiu fizic
- Sobrietate. Farmacia Sisești, pentru cazurile în care minimalismul nu e stil, ci cerință
Greșelile care fac un manual inutilizabil
Există destule manuale care există pe hârtie și pe care nu le deschide nimeni. Motivele se repetă cam mereu:
- o singură variantă de logo, care se rupe la primul fundal închis
- culori descrise în cuvinte, nu specificate în valori, ceea ce face din fiecare reproducere o aproximare
- lipsa dimensiunii minime, după care logo-ul ajunge favicon și devine o pată
- lipsa fontului de rezervă, după care toate documentele interne ies din brand în prima săptămână
- livrare doar în PDF, fără fișierele sursă vectoriale, așa că orice modificare cere designerul inițial
- zero specificații pentru digital, ceea ce merită o secțiune separată
De la manual la cod: ce cere un dezvoltator
Aici se pierde cel mai des valoarea unei identități bine făcute și, sincer, e partea despre care nu prea scrie nimeni.
Un manual clasic e gândit pentru tipar. Milimetri, CMYK, spațiu liber măsurat în raport cu înălțimea unei litere. Când documentul ajunge la implementarea site-ului, o bună parte din informație nu e direct utilizabilă, iar dezvoltatorul interpretează. Fiecare interpretare e o mică abatere de la brand, și se adună.
Ce cer eu, concret, ca să pot implementa o identitate fără să inventez nimic pe parcurs:
- logo-ul în SVG, în toate variantele, cu textul convertit în contururi
- culorile în HEX, cu roluri numite. Nu „corai”, ci „culoare de accent, se folosește pe butonul principal”
- contrastul verificat pe combinațiile reale de text și fundal. O paletă frumoasă care pică testul WCAG AA nu mai e o discuție de gust, e o problemă de accesibilitate
- stările interactive: cum arată un buton la hover, la focus, când e dezactivat. Tiparul nu are stări, interfața are
- scara tipografică în pixeli sau rem, nu în puncte, plus ce se întâmplă pe ecran de telefon
- dimensiunile minime în pixeli și setul complet de favicon
- varianta pe fundal închis, dacă site-ul are dark mode
Cu lucrurile astea la mână, identitatea devine un set de design tokens, adică variabile CSS și configurație de temă, din care se construiesc componentele. Culorile nu mai sunt scrise de mână în douăzeci de locuri, ci definite o dată și folosite peste tot. Peste doi ani, când se ajustează ceva la brand, se schimbă variabilele și nu site-ul.
De asta prefer să lucrez cu un singur partener de design în loc să primesc un PDF de la o agenție și să mă descurc după. Discuția despre stări, contrast și dimensiuni minime se poartă în timpul proiectării, nu după livrare. Cum funcționează colaborarea am scris pe pagina despre noi, iar lista de servicii de design și dezvoltare e pe pagina de servicii.
Cât costă și cât durează un manual de identitate vizuală?
Depinde aproape numai de câte aplicații intră în scop. Un set de bază, adică logo cu variante, paletă, tipografie, reguli de folosire și papetărie, e un proiect de ordinul săptămânilor. Un sistem care acoperă și ambalaj, și semnalistică, și o gamă de produse ia considerabil mai mult, pentru că fiecare aplicație nouă e o rundă de testat sistemul, nu doar încă o pagină în PDF.
Pentru partea de implementare, adică site-ul sau aplicația construită peste identitate, ordinele de mărime sunt pe pagina de prețuri, cu ore și intervale pe tip de proiect. Pentru partea de design, cel mai simplu e să ne scrii cu lista de aplicații de care ai nevoie și primești o estimare.
Întrebări frecvente
Care e diferența dintre logo și identitate vizuală?
Logo-ul e un element. Identitatea vizuală e sistemul întreg: logo cu toate variantele, culori, tipografie, elemente grafice și regulile care spun cum se combină între ele. Un logo fără sistem se aplică altfel de fiecare dată.
Am nevoie de manual dacă am o firmă mică?
Dacă logo-ul ajunge vreodată pe mâna altcuiva, un colaborator, o tipografie, un dezvoltator, atunci da. Nu ține de mărimea firmei, ci de câți oameni ating brandul. Pentru o firmă mică poate să aibă zece pagini și tot își face treaba.
Ce format primesc la final?
Un PDF cu regulile, plus fișierele sursă vectoriale (AI, EPS, SVG) pentru toate variantele de logo, fonturile sau licențele lor și, dacă urmează și implementare digitală, specificațiile în HEX și pixeli.
Cât de des se actualizează?
Regulile de bază țin ani buni. Ce se adaugă în timp sunt aplicațiile noi, un tip de ambalaj care n-a existat, un canal de comunicare apărut între timp. Un rebranding complet e o decizie de poziționare, nu una de design, și se ia mult mai rar decât cred majoritatea firmelor.
Pot să folosesc un logo generat cu AI?
Ca punct de plecare pentru o discuție, sigur. Ca identitate finală, apar exact problemele de mai sus: nu primești variante coerente, nu primești un vector curat, nu primești reguli, iar la broderie sau la 16 pixeli se vede imediat. Plus că situația drepturilor asupra rezultatului e încă departe de a fi limpede.
Concluzie
Un manual de identitate vizuală nu e un document de imagine, e o unealtă de lucru. Se măsoară în deciziile pe care nu mai trebuie să le ia nimeni a doua oară și în cât de puțin se abate brandul de la el însuși pe măsură ce firma crește. Dacă ai deja un logo, dar n-ai regulile din jurul lui, ăsta e pasul care lipsește.
Mai multe proiecte de identitate de brand sunt în portofoliul complet al Lucăi, pe Behance. Iar despre partea dinainte de design, poziționare, valori, public țintă, am scris separat în articolul despre cum construiești identitatea vizuală a brandului.
