Share
Crearea de ghiduri de stil devine rapid o practică obișnuită pentru designerii web, în special atunci când se ocupă de site-uri cu conținut greu. Cu un ghid de stil de site, designerii sunt capabili să stabilească și să mențină un aspect și să se simtă prin crearea unui set de reguli pe care le urmează. Procesul devine flexibil, ușor de actualizat și coerent.
În timpul acestui tutorial vă voi demonstra modul în care puteți implementa un ghid de stil în propriul dvs. site sau proiect.
Ghizii de stil au fost în jur de ceva timp acum. Chiar înainte de zilele de pe web, companiile au avut de multe ori nevoie să creeze imagini coerente și unificate pentru marca lor. Acest lucru a fost și este încă atins prin utilizarea unor reguli de brand sau identitate. Aceste linii directoare sunt de obicei prezentate într-un document și pot conține informații precum:
Exact ceea ce este conținut într-un ghid de brand / identitate depinde de companie. Poate fi orice, de la un document cu o singură pagină, până la un document extrem de cuprinzător, cum ar fi canalul TV în limba engleză, ghidul de stil al canalului 4.
Ghidurile de stil web funcționează în mod similar cu ghidurile de brand / identitate, singura diferență fiind aceea că nu creați o identitate pentru un brand, ci mai degrabă o identitate pentru un site web. De această dată, marca este site-ul web și, ca atare, un ghid de stil este stabilit pentru a crea coerență și unitate în cadrul designului unui site web.
Nu spun că ar trebui să fie scris un ghid de stil fiecare site-ul cu care sunteți implicat (ă), dar uneori este foarte util să creați unul.
De exemplu, ar putea fi o idee bună ...
Modul în care proiectăm site-uri Web trece în prezent printr-o schimbare. Începem să realizăm că proiectarea site-urilor pe o pagină de pagină nu mai poate fi soluția potrivită în anumite circumstanțe. Prin crearea unui sistem și a unei structuri, cum ar fi un ghid de stil, ne permite să vedem o imagine mai amănunțită a modului în care un site web se poate potrivi împreună, făcând întregul proces de actualizare a site-ului mult mai ușor de gestionat.
Acum că înțelegeți mai mult despre ghidul de stil al unui site web, să aruncăm o privire la câteva exemple.
Probabil cele mai cunoscute reguli de stil pentru un site web pot fi găsite în Twitters 'Bootstrap. Deși nu este în mod specific un ghid de stil pentru twitter.com, o serie de componente pot fi găsite pe twitter.com și sunt folosite foarte mult pentru aplicațiile interne Twitter.
Github este un bun exemplu de site web care trebuie să utilizeze un ghid de stil. Github are o echipă de designeri și dezvoltatori care lucrează la produsul său și este, prin urmare, esențial să se mențină coerența indiferent de cine lucrează la noi caracteristici și secțiuni pentru site.
Dacă vă uitați la această imagine a ghidului de stil al MailChimp veți vedea diferite componente din jurul site-ului Web MailChimp. Un lucru pe care l-ați observat este abordarea umană prietenoasă a utilizatorului MailChimp față de dialogul pe care îl folosește pe întreg site-ul său. Acest lucru este consecvent deoarece Mailchimp a creat un set de reguli pe care acest ton de voce trebuie să le respecte.
Ceea ce decideți să includeți în ghidul de stil va varia în funcție de site-ul pe care îl proiectați. De exemplu, un site de socializare va avea componente diferite de cele ale unui site de revizuire a filmelor.
Puteți fi cât mai detaliat sau mai scurt pe cât doriți, dar cu cât sunteți mai detaliată, cu atât veți fi mai unificați.
Când creați un ghid de stil, este important să includeți toate situațiile în care s-ar găsi un element sau o componentă. De exemplu, ar trebui să luați în considerare diferite stări pentru butoane și intrări, precum și elemente de meniu curente etc. Acestea ar trebui să fie demonstrate în cadrul dvs. Dosar PSD.
Bacsis: Aveți posibilitatea să comutați diferite stări vizuale în Photoshop folosind Layer Comps. Aruncați o privire la tutorialul nostru recent despre acest subiect.În acest exemplu voi crea un ghid de stil pentru un blog. Ghidul stilului blogului va consta din componente - acestea sunt:
De asemenea, voi folosi următoarele șase culori:
Toate intrările și butoanele vor folosi o rază de graniță de 5px, în timp ce toate widgeturile componente vor avea o rază de graniță de 0px, făcându-le dreptunghiulare.
Mai întâi, configurați un nou spațiu de lucru pentru documente. Am hotărât să-mi pun mina la 580px. Aceasta este o dimensiune confortabilă pentru a lucra și reprezintă un spațiu de dimensiune bună pentru un design pe bază de module.
Folosesc o grilă (View> Show> Grid) pentru a mă ajuta în designul meu și pentru a păstra totul bine aliniat. Am ales să utilizez o grilă de 20px x 20px cu o subdiviziune la fiecare 10px. Acest lucru poate fi modificat prin accesarea opțiunilor Preferințe> Ghidaje, Grilă și felii.
Veți vedea apoi ecranul de mai jos. Aici puteți schimba spațierea rețelei la orice alegeți, dar găsesc că o linie de 20px cu subdiviziuni setată la 2 funcționează bine. De asemenea, am stabilit niște ghiduri cu lățimea de 460 de pixeli pe fiecare parte a documentului meu pentru a-mi da o mână de ajutor. În afară de aceasta, poate fi bine să activați funcția "Snap" accesând View> Snap. Acest lucru vă va asigura că elementele dvs. se termină la măsurători precise ale pixelilor și nu se răsfrâng cu ajutorul măsurătorilor sub pixelii rătăciți.
Primul lucru pe care îl vom crea este modulul component al autorului. Rețelele sociale precum Twitter au făcut aceste cărți de autor destul de populare recent și am crezut că ar fi frumos să le folosesc ca parte a ghidului nostru de stil web. În acest fel, fiecare autor al blogului nostru poate avea propriul card de autor.
Începeți prin selectarea instrumentului pentru formă și selectați o culoare albă din prim plan. Cu această opțiune selectată, creați un dreptunghi de 380x250px. După ce a fost creat, faceți clic dreapta pe stratul pentru acea formă și selectați opțiunile de amestecare. Panoul de opțiuni de amestecare ar trebui să apară acum. Din bara laterală din stânga a pop-ului selectați "Accident vascular cerebral" și dați-i o dimensiune a stroke de 1px. Culoarea pe care o vom folosi este gri # e7e2de gri luate din setul nostru de culori.
Acum, selectați "Strălucire exterioară" și setați culoarea strălucirii exterioare la aceeași culoare, dar reduceți opacitatea acesteia la 80. Setați răspândirea strălucirii la 100%, iar dimensiunea acesteia la 4. Aceasta va da componentei noastre o cu o strălucire groasă care este deghizată ca graniță.
Stilurile de straturi pe care tocmai le-am creat vor fi folosite foarte mult în alte elemente pe care le creăm mai târziu, dar aici este un sfat rapid privind utilizarea acelorași stiluri de straturi pe orice alt element. Dacă faceți clic dreapta pe stratul elementului pe care tocmai l-am creat și faceți clic pe "Copiați stilurile de strat". Acest lucru va face exact ceea ce spune și vă va permite să îl lipiți pe orice alt strat pe care îl aveți. Pentru a face acest lucru, faceți clic dreapta pe stratul în care doriți să adăugați stilul și selectați "stil strat paste". Faceți o notă de acest lucru, deoarece o vom folosi destul de mult în acest tut. Vom face referire la acest stil de strat special pentru acest element ca "stilul stratului principal".
Pentru autorul autorului, luați un exemplu de fotografie și redimensionați-o la 75px x 75px. Apoi selectați instrumentul "Elliptical marquee" și trageți cursorul peste imagine, pornind de la colțul din stânga sus la dreapta jos. Țineți schimbarea în timp ce faceți acest lucru pentru a restrânge proporțiile și a crea un cerc perfect. Apoi, după ce ați creat o selecție asupra imaginii, copiați-o și apoi inserați-o în documentul dvs. de ghidare de stil. Copiați și inserați elementul "element principal al stratului", apoi editați stilurile de straturi și eliminați cursa.
Pentru a crea cele trei casete statistice, creați mai întâi trei forme de dreptunghi alb care pot fi împărțite în mod egal între 380px. Odată ce ați făcut acest lucru, luați unul dintre ele și deschideți din nou panoul de stiluri de straturi, făcând clic dreapta pe strat. Apoi selectați "Umbra interioară". Asigurați-vă că "modul de amestecare" este setat la normal și opacitatea la 100%. Setați unghiul la "-90" și schimbați distanța până la 5px. Pentru culoare, folosiți culoarea albastră primară # a4d4e8. Apoi, repetați acest proces pe celelalte 2 cutii statale, dar de data aceasta schimbați culorile umbrelor interioare pentru fiecare dintre culorile noastre secundare; verde # aee1a3 și roșu # f67f77. Apoi adăugați textul pentru fiecare statistică. În al meu am ales să arate numărul de adepți, urmări și postări.
Pentru a adăuga textul și bio-ul autorului, am ales să folosesc "Droid Sans", disponibil ca font web Google.
Pentru triunghiul de colț mic din partea dreaptă sus a cartelei autorului creați un pătrat de 50px x 50px cu culoarea noastră primară albastră și apoi selectați "instrumentul lasso poligonal". Desenați o linie dreaptă din partea din stânga sus a pătratului în dreapta jos și trageți în jurul părții din stânga a pătratului. Odată ce ați terminat, selectați Layer> Mask Layer> Hide Selection și acest lucru va crea triunghiul.
Pentru steluță, selectați instrumentul de formă "Poligon". Asigurați-vă că laturile sunt setate la "5" în meniul superior. Apoi selectați săgeata mică situată lângă cuvântul "Sides". Selectați stea și "Împărțiți-vă cu" până la 50%. Apoi trageți o stea albă pe vârful triunghiului și plasați-o în colțul din dreapta sus al cărții autorului.
Componenta postului de blog este creată în același mod în care am creat elementul principal al cărții de autor de mai sus.
Apoi am adăugat "stilul stratului principal" la acest. Miniatura de imagine de 70 x 70 pixeli este plasată în partea stângă a acestuia. Am creat trei stiluri diferite de text; titlul principal, data și textul paragrafului. În partea dreaptă din partea dreaptă am adăugat un buton "citește mai mult". Consultați pasul 6 pentru crearea butoanelor.
Pentru a crea bulele de comentarii actuale creați un dreptunghi rotunjit de 316px x 90px și adăugați "stilul stratului principal".
Creați o formă pătrată de 15px x 15px și rotiți această opțiune Editați> Traseu de transformare> Rotire, apoi din meniul de opțiuni, rotiți-o cu 45 de grade. Selectați stratul de formă reală și mergeți la Edit> Copy și apoi mergeți la dreptunghiul rotund mare, pe care tocmai l-am creat. Asigurați-vă că pătratul este aliniat oriunde vreți să mergeți. Apoi mergeți la Edit> Paste și acest lucru va îmbina cele două forme. Adăugați stilul principal al stratului și includeți bule de vorbire!
Am decis să adaug două componente post comment; una fiind o componentă de comentariu standard, iar cealaltă fiind un comentariu autor. Pentru exemplul autorului am schimbat cursorul pentru a fi culoarea albastră primară.
Butoanele sunt relativ ușor de creat deoarece am stabilit câteva reguli înainte de a intra în ghidul nostru de stil.
Pentru a crea un buton mare, selectați instrumentul "dreptunghi rotunjit". Din bara "Opțiuni", asigurați-vă că raza este setată la "5px" și trasați un dreptunghi albastru primar de 125px x 40px. Apoi adăugați textul dorit. Duplicați stratul făcând clic dreapta pe strat și selectând "Duplicat layer". Odată ce ați făcut această schimbare, culoarea sa într-una din culorile noastre secundare. Repetați acest proces pentru butonul cu cealaltă culoare secundară. De asemenea, repetați acest proces pentru butoanele mici, dar de această dată faceți dreptunghiurile de 30px x 105px, iar pentru butonul "apel la acțiune" faceți-l 374px x 40px.
Pentru stările de hover am adăugat un gradient subtil prin adăugarea unui strat de strat de "suprapunere gradient". Setați modul de culoare la "Normal", iar opacitatea la 10%, iar gradientul trece de la negru la alb. Acest lucru va fi de ajuns doar ca un indiciu pe care un utilizator la trecut peste buton.
Pentru setul de butoane grupate, creați un dreptunghi rotunjit de 380px x 30px lățime și apoi împărțiți-l în patru butoane de dimensiuni egale. Puteți face acest lucru fie prin desenarea unei linii de creion 1px, fie prin tăierea secțiunilor cu un instrument 1px "rectangular marquee".
Paginarea este creată în mod similar cu setul de butoane grupate pe care tocmai l-am creat mai sus. Dar de data aceasta, în loc să-l creați în patru butoane cu dimensiuni egale, creați zece butoane pătrate la fel de mari, cu butoanele săgeată de la un capăt un pic mai mare. Imaginea de mai jos demonstrează acest lucru. Pentru săgețile le-am folosit câteva forme pre-făcute, care sunt în mod specific pentru săgețile de design web.
Până acum ar fi trebuit să vă dați seama cât de ușor ne facem viața prin repetarea multor elemente și stiluri. Lucrul cel mai bun în acest sens este acela că creează coerență în cadrul designului nostru.
Intrările și textarea pentru acest set sunt create folosind metodele pe care le-am folosit mai devreme. Pentru intrările, trageți un dreptunghi rotunjit de 380px x 40px și aplicați culoarea stroke. Extindeți înălțimea textarea un pic la aproximativ 90 de pixeli. Pentru a vă concentra asupra elementelor pe care le-am folosit "stilul principal al stratului" și a adăugat un element suplimentar pentru mesajele de eroare și de succes.
Depinde de tine câte elemente doriți să creați pentru ghidul dvs. de stil. Veți cunoaște cerințele pentru site-ul pe care lucrați și veți fi conștienți de ce veți dori și de care nu veți avea nevoie. Lucrul grozav în crearea unui ghid de stil este că orice elemente pe care le introduceți în viitor va avea reguli și practici care trebuie să fie blocate și vor permite o coerență în cadrul acestui.
Acesta va crea familiarizarea cu utilizatorii și va permite o experiență generală mai bună atât din punct de vedere estetic, cât și din punct de vedere funcțional.
Accentsconagua