Le guide di stile, note anche come librerie di modelli, sono un ottimo modo per garantire che il tuo design continui come previsto mentre il tuo sito Web cresce o mentre i nuovi membri del team lavorano su un progetto web. Ogni stile, o pattern, è un raggruppamento di markup e stili per gli elementi di design del tuo sito web.

Le guide di stile moderne vengono generalmente visualizzate come una vera e propria pagina Web, che mostra i diversi elementi in un sito Web o nel design di un'applicazione. Quando più persone o anche più team stanno lavorando a un progetto web, una guida di stile elimina le congetture su come dovrebbero apparire gli elementi visivi. È un ottimo modo per mantenere tutti sulla stessa pagina per coerenza del progetto.

Mantieni la tua squadra in pista e il tuo codice ASCIUTTO

Oltre al design visivo, una guida di stile aiuta ad assicurarsi che il file CSS non perda il controllo. Abbiamo tutti sperimentato codice ripetitivo, quindi cerchiamo di mantenere il codice gestibile e senza nulla di assolutamente necessario. Se tutti i membri del tuo team possono vedere tutti gli stili in un unico posto, sarà subito evidente quali esistono attualmente in modo che non vengano duplicati nel foglio di stile.

Poiché la tua guida di stile funge da raccolta che include il design di moduli e altri elementi di design, è facile vedere se i nuovi elementi di design rientrano negli standard stabiliti.

Cosa dovrebbe contenere una guida di stile web?

Come sappiamo, il web design ha la tendenza a correre un po' selvaggio. La buona notizia è che un web design efficace, soprattutto quando si utilizza una guida di stile, è sotto il tuo controllo. Le guide di stile vanno da molto semplici a molto complesse. Ho incluso alcune idee qui per iniziare.

Tavolozze di colori

È un'ottima idea includere i campioni che hanno il colore esadecimale indicato. Il tuo futuro sé a corto di tempo ti ringrazierà! Non riesco a ricordare quante volte ho chiesto o mi è stato chiesto: "Qual è di nuovo quel colore esadecimale?" Avere un rapido riferimento sarà sicuramente utile per tutti.

Tipografia e gerarchia

I segnaposto di intestazione descrittivi possono fare molto per aiutare il tuo team a capire in quale tipo di contesto devono essere utilizzati gli elementi nel tuo layout.

Le guide di stile dovrebbero includere anche una gerarchia di intestazione suggerita. Qual è h1, h2, h3 e così via? Anche parole descrittive come intestazione primaria, intestazione secondaria e intestazione del widget della barra laterale eliminano molte congetture future.

Non dimenticare di includere elementi tipografici meno comuni, come ad esempio le virgolette. Devi specificare tutti gli esempi di testo, anche quelli usati raramente. Se hai un determinato stile di intestazione e corpo per citazioni in blocco o testimonianze, specificali con lo stesso dettaglio che fai per gli elementi più comunemente usati.

immagini

Includi un trattamento generale delle immagini per il tuo progetto. Le immagini richiedono bordi o un effetto di opacità unico? C'è un'interazione al passaggio del mouse? Se è così, prendilo nella tua guida di stile. Se sono presenti più trattamenti, includi ciascuno di essi e definisci quando vengono utilizzati determinati trattamenti.

Stili di collegamento, navigazione e modulo

Dal punto di vista dell'esperienza utente, i collegamenti, la navigazione e gli elementi del modulo sono tre anatre molto importanti da avere di seguito. Senza dubbio sai che i collegamenti di testo, i pulsanti e gli stili di navigazione devono essere inclusi nella tua guida di stile. Tuttavia, può essere facile dimenticare di includere istanze di stili normale, al passaggio del mouse, visitato e attivo per ciascuno di questi. Ottieni quelli documentati per garantire la coerenza in ogni dettaglio del tuo sito.

Quando i grandi stili si fondono con il modulo, non c'è modo migliore per mostrare tutti gli elementi del modulo Web che nella tua guida di stile. È un ottimo modo per mappare e fare l'inventario di tutti gli elementi del modulo, cosa funziona, cosa non funziona e cosa manca.

In particolare, ecco alcuni componenti chiave da includere per gli stili di modulo:

• Stato del campo di input normale
• Stato del campo di input focalizzato
• Stili di etichetta
• Testo segnaposto del modulo
• Testo attivo dell'utente
• Testo inserito dall'utente
• Pulsante Invia
• Messaggio di errore
• Stili caselle di controllo

Altre idee da includere nella tua guida di stile

È difficile elencare tutti gli elementi che potresti incontrare, ma eccone alcuni altri che potresti trovare utili:

• Casella di richiamo
• Collegamenti orizzontali
• Elementi di commento
• Tag di categoria
• Modello a scomparsa

Come creare la tua guida allo stile web

Se sei il fortunato ad affrontare l'impresa eroica di creare una guida di stile da zero, ho alcune considerazioni utili per te.

Personalmente mi piace iniziare con un file HTML vuoto e andare da lì. Collega questa guida di stile al CSS del sito Web o dell'applicazione reale. In questo modo le modifiche si riflettono in entrambi i punti e non devi preoccuparti di mantenere due file CSS.

Inizia facendo l'inventario di tutti gli elementi del tuo sito e quindi aggiungi il markup esatto di cui hai bisogno per ciascuno alla tua guida di stile. Suona intimidatorio?

Per prima cosa valuta la griglia della pagina e poi riempi la guida di stile con elementi importanti come la tipografia e la tavolozza dei colori, aggiungendo più motivi man mano che procedi. Altri modelli di progettazione possono includere elementi come immagini, citazioni in blocco, stili della barra laterale, pulsanti e stili di modulo.

Fidati di me. Questo è tempo ben speso. È anche bene ricordare che nulla è permanente e che tutto può essere facilmente regolato ed ampliato.

Se stai cercando la velocità e l'inserimento manuale di tutti gli stili non fa per te, ci sono alcuni ottimi strumenti disponibili che semplificano la creazione e l'utilizzo di modelli riutilizzabili.

Ad esempio, Pattern Primer di Jeremy Keith genererà un elenco di tutti i modelli in una cartella. Questo è un semplice strumento PHP per trasformare frammenti di codice in una libreria di modelli. Vedrai il modello reso come HTML.

Un'altra grande opzione è KSS di Kyle Neath, che è anche un ottimo strumento per la documentazione delle guide di stile. Questi stili automatici generati sono un insieme di linee guida per aiutarti a produrre una guida di stile HTML legata alla documentazione CSS. KSS è progettato per funzionare bene con i preprocessori CSS e ospita molti framework CSS.

Come tutti sappiamo, un sito web non è mai finito. Se sono necessari nuovi elementi, è facile espandere la tua guida allo stile di vita semplicemente aggiungendovi.

La tua guida di stile iniziale potrebbe non essere identica alle pagine che crei alla fine, ma è una grande opportunità per testare nuovi stili ed è particolarmente utile per la progettazione per più browser.

Esempi di guide di stile

Vuoi alcuni esempi di vita reale di grandi guide di stile? Avete capito bene:

Codice per l'America
Mailchimp
forza vendita

Fornendo coerenza nel tuo design, la tua guida di stile semplifica l'espansione del sito Web e i futuri miglioramenti del Web. Man mano che gli stili vengono aggiunti e modificati, questo documento è un ottimo modo per tenere informato il team e mostrare il tuo progetto di stile.