Cum de a crea un ghid de stil pentru web design

Crearea site-ului devine o sarcină din ce în ce mai complexă, ceea ce implică implicarea unui număr tot mai mare de oameni. Este important ca rezultatul să pară holistic și organic, să îndeplinească cerințele afacerii și să creeze o experiență plăcută pentru utilizatori.

Când o mulțime de specialiști lucrează la o singură sarcină, devine necesară crearea unei documentații de proiectare sau a unui ghid de stil. În acest caz, chiar dacă diferiți specialiști lucrează pe pagini diferite, designul general va fi holistic și compatibil. De asemenea, veți avea un ghid pentru stilul care vă va ajuta în viitor.

Cum de a crea un ghid de stil?

Ce este un ghid de stil?

Ghidul de stil este o colecție de elemente de design și grafică pre-proiectate, precum și regulile pe care trebuie să le urmeze designerii și dezvoltatorii pentru a se asigura că rezultatul final, asupra căruia au lucrat diferiți oameni, arăta holistic și armonios.

Cum de a crea un ghid de stil pentru web design

Airbnb UI Toolkit - Web de la Derek Bradley

De ce este important acest lucru?

Acest lucru este foarte important atunci când mai mult de un designer lucrează la proiect. Asigurați-vă că nu vor aduce prea multe în plus, plecând de la conceptul general de design. În zona de dezvoltare, ghidul de stil este, de asemenea, util, deoarece dezvoltatorii primesc inițial o listă de elemente care pot fi create și reutilizate. Ei vor înțelege ce elemente să scrie și cum ar trebui să arate în final.

Pentru a face viața unui dezvoltator mai ușoară, designerul trebuie să includă în manual cea mai completă descriere a elementelor: starea lor când faceți clic, mouse-ul, etc.

Crearea unui ghid de stil

1. Explorează marca

În primul rând, trebuie să studiezi marca pentru a înțelege ce se află în spatele ei. Aflați despre istoria companiei, a echipei, aflați viziunea, scopul și valorile acestora. Este important să pătrundeți mai profund în marcă și să descrieți componentele sale vizuale și emoționale în ghidul de stil.

Dacă sunteți un designer care nu este familiarizat cu limbile de programare, trebuie doar să deschideți Photoshop și să oferiți documentului un titlu și o scurtă descriere a tipului de document și a motivului pentru care este necesar.

Dacă știți html, creați o html-pagină în care veți crea elementele deja descrise în cod, pe care le puteți utiliza în mod repetat.

2. Decideți cu privire la tipografie

Tipografia reprezintă 95% din întregul design web.

Ar trebui să ridicați cu atenție și corectă tipografia, vedele fiind principalul instrument de comunicare cu vizitatorii site-ului.

Cum de a crea un ghid de stil pentru web design

3. Paleta de culori

Începeți prin a face culorile de bază pentru ghidul dvs. de stil. Acestea sunt culorile care vor prevala pe site. Includeți nuanțele lor acceptabile. În unele cazuri, este posibil să aveți nevoie de culori minore și chiar de a treia culoare, pe care trebuie să le includeți și în ghid. De asemenea, în manual arată culori neutre: gri, alb negru.

Cum de a crea un ghid de stil pentru web design

Ați studiat marca și ați aflat că aceasta este, de exemplu, tinerețea și tendința. Reflectă acest lucru în tonul adresării utilizatorului. De exemplu, în loc de "Ai 404 eroare" / "Eroare 404", poți scrie "Oh boy, ai rupt interwebs. 404 eroare. "/" Oh, Doamne, ai spart Internetul! Eroare 404 ". Dacă marca dvs. este mai solidă și serioasă, așa că nu. Ideea este că starea de spirit și tonul de comunicare cu utilizatorul pot fi transmise în detalii mici.

Cum de a crea un ghid de stil pentru web design

Iconfinderul este un instrument excelent pentru găsirea icoanelor.

Cum de a crea un ghid de stil pentru web design

NounProject este o altă sursă de icoane clare.

6. Imagini

Imaginile pot spune foarte mult. Includeți în ghidul de stil exemple de imagini pe care le puteți utiliza pe site. Asigurați-vă că reflectă starea de spirit și stilul mărcii. De exemplu, un proiect de caritate utilizează imagini puternice și emoționale, care vă vor face să vă simțiți recunoscători că trăiți în condiții de confort, cu apă, alimente, electricitate și educație.

Cum de a crea un ghid de stil pentru web design

Următoarele sunt exemple excelente de ghiduri de stil. Faceți clic pe ele pentru a vedea versiunea completă. Fiți inspirați și creați ghizii proprii. Totuși, amintiți-vă că totul este individual și că urmați orbește exemplul celorlalți nu ar trebui, deoarece ceea ce este bun pentru o marcă poate fi ilogic pentru altul.

Spotify - Ghidul mărcii pentru parteneri (PDF)

Cum de a crea un ghid de stil pentru web design

Dropbox Branding și Logos

Cum de a crea un ghid de stil pentru web design

Ghidul stilului de tip Kickstarter

Cum de a crea un ghid de stil pentru web design

Ghidul de proiectare Lonely Planet

Cum de a crea un ghid de stil pentru web design

Găsiți linii directoare - cea mai rapidă cale către activele de marcă

Cum de a crea un ghid de stil pentru web design

Traduceri - Duty Officer

Articole similare