Ghidul designerului de a lucra cu ghidaje de stil si dale de stil

Crearea unui identitate de brand nu este o sarcină ușoară. Ea necesită eforturi grele, dar este, de asemenea, una dintre cele mai satisfăcătoare sarcini creative. Proiecte Web deseori mix branding cu design de interfață. Acest lucru poate fi confuz, deoarece există atât de mult de făcut în ambele domenii. Ghiduri de stil și stil dale sunt resurse excelente pentru web designeri, și în timp ce ei fac sunet similar, ei realizează două sarcini diferite.

În acest post, aș vrea să vă dau în amândouă și să acoperiți beneficiile pe care le puteți obține de la aceste active creative. Nu toată lumea va avea nevoie (sau ar dori) crearea de ghiduri de stil sau plăci de stil. Dar fiecare designer trebuie cel puțin să înțeleagă ce sunt acestea și cum funcționează.

Ghiduri stil pentru web

Am citit opinii diferite cu privire la ghidurile de stil. Unii spun că acestea sunt machete digitale, în timp ce alții spun că ghidurile de stil bazate pe coduri sunt cele mai utile.

În orice caz, scopul unui ghid de stil este același pentru web ca orice alt proiect. Definește modele coerente, module UI și preferințe creative utilizate în procesul de proiectare. Puteți obține o descriere foarte specifică și să precizați măsurători perfecte ale pixelilor pentru anumite elemente sau puteți rămâne liber și puteți oferi indicații cu exemple vizuale.

Nu există nici o modalitate corectă de a face un ghid de stil. Singura modalitate greșită este de a crea o resursă care pur și simplu nu pot fi înțelese de ceilalți.

Scopul este de a crea un bun care va stați testul timpului. Ar trebui să fie deschis pentru editări dacă sunt create noi resurse. De asemenea, ar trebui să fie accesibil pentru oricine care se alătură echipei să se scufunde în ghid cu ușurință.

Un ghid de stil ar trebui să fie cât de detaliate sunt necesare pentru proiect. De obicei include active reutilizabile, cum ar fi tipografia, butoanele, modelele de culoare, texturile și elementele de pagină comune.

Am acoperit recent instrumente de ghidare stil de viață care vă pot ajuta să construiți ghiduri de stil de viață de la zero. Aceste ghiduri vii sunt mai mult pentru dezvoltatorii frontend, dar ele pot fi la fel de utile pentru designeri. Puteți citi mai multe despre acest subiect în această postare Smashing Magazine.

Resursa mea preferată absolută este StyleGuides.io. Acesta acoperă elementele de bază ale ghidurilor de stil pentru web, inclusiv exemple live și studii de caz.

Biblioteca de modele MailChimp este unul dintre cele mai bune exemple pe care le puteți găsi la StyleGuides.io. Este un ghid on-line de stil live care definește grila, tipografia și elementele de pagină ale MailChimp.

Când proiectați un ghid de stil pentru o companie web, este comun să puneți totul online, dar puteți crea, de asemenea ghiduri interne, și să le păstrați pe un intranet local sau să le găzduiți în particular în spatele unei pagini de conectare a utilizatorilor. Modul în care accesați un ghid de stil nu contează deloc. Toate acestea servesc aceluiași scop de a transmite culori, modele și viziuni specifice potriveste tema unui proiect web.

Pentru a afla mai multe despre subiect, consultați celelalte postări din ghidurile de stil:

• Ghiduri de stil frontal (24ways.org)
• Creați un ghid de stil pentru site-uri web (Creativebloq.com)
• Cum sa faci stilul perfect de design Web Guide (Dtelepathy.com)

Brancharea în plăci de stil

Gresie stil sunt o bestie diferită. Aceste plăci sunt activele creative utilizate în faza de proiectare timpurie când încearcă să creeze o anumită estetică.

Site-ul de Stil Tiles a fost creat de Samantha Warren și are tot ceea ce ar trebui să știți. Există nici un șablon specific pentru proiectarea unei plăci de stil. Dar exemplele lui Samantha folosesc titlurile și tipurile de paragrafe, legăturile, modelele, și posibilele opțiuni de culoare împreună cu a logo-ul de marcă.

Când lucrați cu plăci de stil, obiectivul dvs. este în cele din urmă să prezintă 2-3 plăci de stil diferite clientului sau directorului de creatie. Aceste plăci sunt mai detaliate decât o tablă de dispoziție, inca mult mai puțin detaliat decât un mockup complet.

Placile trebuie să fie suficient de detaliate pentru a da un sentiment identitatea și starea de spirit a site-ului web. Samantha încurajează folosind adjective pentru a descrie fiecare detaliu.

Clienții pot uita-te prin diferite dale, și selectați piesele lor preferate. Acest vă economisește timp când proiectați deoarece clientul a văzut deja activele pe care le doresc, deci există mai puține șanse de revizuiri grele.

Iată un citat grozav de pe site-ul Style Tiles:

Compararea plăcilor de stil cu un set de instrumente de designer de interior este destul de simplă. Nu doriți să turnați efortul într-un mockup perfect pentru pixeli, doar pentru a înțelege clientul că urăsc majoritatea culorilor și fonturilor.

În schimb, utilizați plăci de stil pentru a găsi o temă comună sau limbaj vizual pentru a fi utilizate pe întregul site. Aceasta poate include branding / identitate dar, de asemenea, ar putea include Funcțiile UI, cum ar fi meniurile drop-down sau butoanele CTA.

Ar trebui să le folosiți ca pe bunuri livrabile la începutul procesului. Odată ce ați finalizat o machetă completă, nu este nevoie să faceți referire la plăcile de stil. Cu toate acestea, la început, plăcile de stil pot fi cruciale pentru procesul creativ salvând timpul designerului și oferind clientului mai multe opțiuni de alegere.

Dacă dorești Mai mult în plăcile de stil verificați aceste postări similare.

• Stil de dale și modul în care funcționează
• Style Tiles: O alternativă la comenzile complete de proiectare
• Crearea plăcilor de stil: o abordare ușoară a unei direcții de proiectare

Ghiduri de stil vs. plăci de stil

Diferența dintre ghizii de stil și plăcile de stil este vagă, dar definită. A ghid stilistic este mult mai mult detaliat și ar trebui să fie utilizat ca a ghid de referință continuu pentru echipa de creatie. A stil de țiglă poate fi folosit ca a moodboard la planifică ideile vizual pentru dvs. sau pentru client. Ei sunt adesea obișnuiți explorați ideile, iar odată ce proiectul este terminat, acestea nu servesc mult scop.

Stilul de gresie este adesea mult mai dur în jurul marginilor și sunt utilizate numai în procesul creativ timpuriu. Trebuie folosit un ghid de stil pe tot parcursul procesului de proiectare și chiar și ulterior pentru referințe ulterioare pentru alți designeri care ar putea lucra pe site.

Ambele au avantajele și dezavantajele lor. Stilul de dale este rapid și distractiv, dar efemer în natură. Ghidajele de stil sunt minuțios și se comportă ca o documentație vizuală, dar și ei necesită multă muncă.

Deci cine ar trebui să folosești? În cele din urmă depinde de proiect.

Proiecte mai mici cum ar fi pentru site-urile de afaceri mici funcționează mai bine cu plăci de stil. Construirea unui ghid de stil întreg pentru un site de afaceri mic ar necesita prea multă muncă și ore facturabile. Acest lucru probabil că nu merită costul pentru majoritatea clienților.

Cu toate acestea, a proiect mare cum ar fi reproiectarea NY Times ar beneficia atât de plăci de stil, cât și de ghiduri de stil.

Găsirea unei limbi și a unei dispoziții pentru un nou proiect este întotdeauna un proces valoros. Aceasta este ceea ce face placi de stil perfect pentru aproape fiecare scenariu.

Puteți obține, de asemenea, prin fără a crea niciunul dintre aceste active. Unii designeri merg chiar de la rame la machete detaliate. Și unii clienți nici nu doresc un ghid de stil, deoarece nu se vor folosi.

Lucrați pe baza unui proiect și decideți ce este mai bine pentru fiecare dintre ele.

Exemple live

Să o înfășurăm acoperind exemple a ambelor ghidaje de stil si a dalelor de stil. Am gasit aceste desene in timp ce navighez in Dribbble si cred ca ele exemplifica calitatea dorita in ghizii de stil sau stilul tau.

Ghiduri de stil

Acest ghid incredibil de stil Airbnb a fost creat de Derek Bradley. Este foarte simplu, dar ilustrează în mod clar principalele modele, culori și elemente de pagină pentru a fi găsite în proiect.

Iată un ghid de stil digital mai mare, creat de designerul Naoshad Alam. Acest exemplu este mult mai organizat cu secțiuni pentru culori, tipografie, formulare, elemente de interfață și alte caracteristici ale UI.

Ghiduri de stil mai detaliate ar pune toate aceste elemente de design pe web și includeți fragmente de cod pentru fiecare.

Designerul Cupi Wong a făcut acest ghid pentru AfterShip. Tipografia, butoanele, opțiunile de culoare și elementele de pagină comune sunt atent elaborate și organizate împreună în secțiuni.

Acest lucru ar putea fi, de asemenea, ported pe web, și construit mult mai mare ca documentație de referință on-line.

Designerul UI, Greg Dlubacz, și-a împărtășit propriul ghid de stil UI pentru un proiect web. Acest lucru este foarte mare. Previzualizarea pe ecran complet are o înălțime de 21.000 de pixeli!

Absolut unul dintre cele mai bune ghiduri de stil digital pe care le-am văzut vreodată. Acest lucru ar putea fi, de asemenea, portat la o pagină de documentație online pentru ca membrii echipei să se refere.

Stil de dale

Designerul UI / UX Abdus Salam a creat această țiglă pentru un magazin de produse ecologice. Este foarte simplu cu elemente de design plate, unele caracteristici UI minore, și a paleta de culori.

Designerul Adrian Cantelmi a mers cu adevărat în detaliu cu piesa sa de desfacere. Are culori și tipografie, dar include și ilustrații vectoriale.

Aceste vectori ajută la definiți marca, starea de spirit și schema globală de culori de pe site.

Reproiectarea Cupa Mondială a consultantului a avut propriile sale plăci de stil, cu caracteristici de bază. Cateva icoane, cateva optiuni de culoare, impreuna cu un design de tigari. Simplitate este numele jocului.

Dacă puteți să simțiți cum ar putea arăta site-ul dintr-o privire atunci o faci bine.

Iată un exemplu amuzant al unei plăci de stil respinse utilizate pentru un proiect de călătorie. Designerul Brennan Gleason oferă doar un mic eșantion de țiglă, dar puteți încă obțineți un sentiment pentru ambianța site-ului.

Cuvintele finale

Dacă căutați în jurul paginii web, veți găsi mai multe exemple, sfaturi și resurse pentru ghidaje de stil de construcție și plăci de stil. Dar sper că acest articol poate fi un primar pe ambele și vă poate face fluent înțelegerea și crearea acestor active de design.