Ghidurile de stil, cunoscute și sub denumirea de biblioteci de modele, sunt o modalitate excelentă de a vă asigura că designul dvs. se desfășoară așa cum este intenționat pe măsură ce site-ul dvs. crește sau pe măsură ce noii membri ai echipei lucrează la un proiect web. Fiecare stil sau model este o grupare de markupuri și stiluri pentru elementele de design ale site-ului dvs. web.

Ghidurile de stil moderne sunt de obicei afișate ca o pagină web reală, care arată diferitele elemente dintr-un site web sau design de aplicație. Atunci când mai multe persoane sau chiar mai multe echipe lucrează la un proiect web, un ghid de stil elimină cum ar trebui să arate elementele vizuale. Este o modalitate excelentă de a menține pe toată lumea pe aceeași pagină pentru coerența proiectului.

Ține-ți echipa pe drumul cel bun și codul tău USCAT

Pe lângă designul vizual, un ghid de stil vă ajută să vă asigurați că fișierul CSS nu scapă de sub control. Cu toții am experimentat coduri repetitive, așa că haideți să ne străduim să păstrăm codul care poate fi întreținut și fără nimic absolut necesar. Dacă toată lumea din echipa ta poate vedea toate stilurile într-un singur loc, va fi ușor evident care există în prezent, astfel încât să nu fie duplicate în foaia de stil.

Deoarece ghidul tău de stil servește ca o colecție care include designul modulelor și al altor elemente de design, este ușor să vezi dacă noile elemente de design se încadrează în standardele stabilite.

Ce ar trebui să meargă într-un ghid de stil web?

După cum știm, designul web are tendința de a rula puțin. Vestea bună este că designul web eficient, mai ales atunci când utilizați un ghid de stil, este în controlul dumneavoastră. Ghidurile de stil variază de la foarte simplu la foarte complex. Am inclus câteva idei aici pentru a începe.

Palete de culori

Este o idee grozavă să includeți mostre care au culoarea hexazecimală notă. Viitorul tău sine strâns de timp îți va mulțumi! Nu-mi amintesc de câte ori am întrebat sau am fost întrebat „Care este culoarea aia hexagonală din nou?” A avea o referință rapidă va fi cu siguranță util pentru toată lumea.

Tipografie și ierarhie

Substituenții de titluri descriptive pot ajuta în mare măsură echipa să înțeleagă în ce fel de context trebuie utilizate elementele din aspectul dvs.

Ghidurile de stil ar trebui să includă și o ierarhie de antet sugerată. Care este h1, h2, h3 și așa mai departe? Cuvintele descriptive cum ar fi antetul principal, subtitlul și antetul widget din bara laterală scot, de asemenea, o mulțime de presupuneri viitoare.

Nu uitați să includeți elemente de tipografie mai puțin obișnuite, cum ar fi ghilimele bloc, de exemplu. Trebuie să specificați toate exemplele de text, chiar și cele utilizate rar. Dacă aveți un anumit antet și un stil de corp pentru citatele bloc sau mărturiile, specificați-le cu același detaliu pe care îl faceți pentru elementele mai frecvent utilizate.

Imagini

Includeți un tratament general al imaginilor pentru proiectul dvs. Imaginile necesită chenare sau un efect unic de opacitate? Există o interacțiune cu hover? Dacă da, obțineți asta în ghidul dvs. de stil. Dacă există mai multe tratamente, includeți-le pe fiecare și definiți când sunt utilizate anumite tratamente.

Link, navigare și stiluri de formulare

Din perspectiva UX, linkurile, navigarea și elementele de formular sunt trei rațe foarte importante pe care trebuie să le aveți la rând. Fără îndoială știi că linkurile text, butoanele și stilurile de navigare trebuie incluse în ghidul tău de stil. Cu toate acestea, poate fi ușor să uitați să includeți exemple de stiluri normale, hover, vizitate și active pentru fiecare dintre acestea. Obțineți-le documentate pentru a asigura coerența în fiecare detaliu al site-ului dvs.

Când stilurile grozave se îmbină cu forma, nu există o modalitate mai bună de a arăta toate elementele formularului web decât în ​​ghidul de stil. Este o modalitate excelentă de a mapa și de a face inventarul tuturor elementelor de formular, a ceea ce funcționează, a ceea ce nu funcționează și a ceea ce lipsește.

Mai exact, iată câteva componente cheie de inclus pentru stilurile de formulare:

• Stare normală a câmpului de intrare
• Starea câmpului de intrare focalizat
• Stiluri de etichete
• Formează text substituent
• Text activ utilizator
• Utilizatorul a introdus text
• Buton de trimitere
• Mesaj de eroare
• Stiluri de casete de selectare

Mai multe idei de inclus în ghidul tău de stil

Este dificil să enumerați fiecare element pe care îl puteți întâlni, dar iată câteva altele pe care le puteți găsi benefice:

• Căsuță de apelare
• Legături orizontale
• Elemente de comentariu
• Etichete de categorie
• Model pop-up

Cum să-ți faci propriul ghid de stil web

Dacă ești norocosul care a abordat isprava eroică de a crea un ghid de stil de la zero, am câteva considerații utile pentru tine.

Personal îmi place să încep cu un fișier HTML gol și să merg de acolo. Conectați acest ghid de stil la CSS-ul site-ului web sau al aplicației actuale. În acest fel, modificările sunt reflectate în ambele locuri și nu trebuie să vă faceți griji cu privire la menținerea a două fișiere CSS.

Începeți prin a face un inventar al tuturor elementelor site-ului dvs. și apoi adăugați marcajul exact de care aveți nevoie pentru fiecare în ghidul dvs. de stil. Sună intimidant?

Mai întâi evaluați grila paginii și apoi completați ghidul de stil cu elemente importante, cum ar fi tipografia și paleta de culori, adăugând mai multe modele pe măsură ce vă avansați. Mai multe modele de design pot include lucruri precum imagini, ghilimele, stiluri de bară laterală, butoane și stiluri de formular.

Aveţi încredere în mine. Acesta este timpul bine petrecut. De asemenea, este bine să ne amintim că nimic nu este permanent și că totul poate fi ușor ajustat și extins.

Dacă doriți viteza și introducerea manuală a tuturor stilurilor nu este pentru dvs., există câteva instrumente grozave care facilitează crearea și utilizarea modelelor reutilizabile.

De exemplu, Pattern Primer al lui Jeremy Keith va genera o listă cu toate modelele dintr-un folder. Acesta este un instrument PHP simplu pentru a transforma fragmentele de cod într-o bibliotecă de modele. Veți vedea modelul redat ca HTML.

O altă opțiune excelentă este KSS-ul lui Kyle Neath, care este, de asemenea, un instrument excelent pentru documentarea ghidului de stil. Aceste stiluri automate generate sunt un set de linii directoare care vă ajută să produceți un ghid de stil HTML legat de documentația CSS. KSS este proiectat să funcționeze bine cu preprocesoarele CSS și găzduiește multe cadre CSS.

După cum știm cu toții, un site web nu este niciodată terminat. Dacă sunt necesare elemente noi, este ușor să extindeți ghidul de stil de viață prin simpla adăugare la acesta.

Ghidul dvs. de stil inițial poate să nu fie identic cu paginile pe care le creați în cele din urmă, dar este o oportunitate excelentă de a testa noi stiluri și este deosebit de util pentru proiectarea pentru mai multe browsere.

Exemple de ghiduri de stil

Vrei câteva exemple din viața reală de ghiduri de stil grozave? Ai inteles:

Cod pentru America
Mailchimp
Forta de vanzare

Oferind consecvență designului dvs., ghidul dvs. de stil facilitează extinderea site-ului și îmbunătățirile viitoare ale site-ului. Pe măsură ce stilurile sunt adăugate și modificate, acest document este o modalitate excelentă de a ține echipa informată și de a vă prezenta proiectul de styling.