Share
La creazione di guide di stile sta rapidamente diventando una pratica comune per i web designer, specialmente quando si tratta di siti con contenuti pesanti. Con una guida allo stile del sito Web, i designer sono in grado di impostare e mantenere un aspetto grafico creando una serie di regole seguite dal design. Il processo diventa flessibile, facilmente aggiornabile e coerente.
Durante questo tutorial mostrerò come implementare una guida di stile nel tuo sito o progetto.
Le guide di stile sono in circolazione da un po 'di tempo. Anche prima dei giorni del web, le aziende spesso avevano bisogno di creare immagini coerenti e unificate per il loro marchio. Questo è stato ed è ancora ottenuto attraverso l'uso di linee guida di marca o identità. Tali linee guida sono solitamente contenute in un documento e possono contenere informazioni quali:
Esattamente ciò che è contenuto in una marca / guida di identità dipende dall'azienda. Può essere qualsiasi cosa, da un documento a pagina singola, fino a un documento estremamente completo come il canale TV inglese, la guida di stile di Channel 4.
Le guide di stile Web funzionano in modo simile alle linee guida per brand / identità, con l'unica differenza che non stai creando un'identità per un brand, ma piuttosto un'identità per un sito web. Questa volta il marchio è il sito Web e, come tale, una guida di stile è impostata per creare coerenza e unità all'interno del design di un sito web.
Non sto dicendo che dovrebbe essere scritta una guida di stile ogni sito web con cui sei coinvolto, ma a volte ha molto senso crearne uno.
Ad esempio, potrebbe essere una buona idea ...
Il modo in cui progettiamo i siti Web sta attualmente attraversando un cambiamento. Stiamo iniziando a renderci conto che progettare siti Web su base pagina per pagina potrebbe non essere più la soluzione appropriata in alcune circostanze. Creando un sistema e una struttura come una guida di stile, ci permette di vedere l'immagine più grande di come un sito web può adattarsi, rendendo l'intero processo di aggiornamento del sito molto più gestibile.
Ora che hai capito un po 'di più sulla guida allo stile di un sito Web, diamo un'occhiata ad alcuni esempi.
Probabilmente le regole di stile più conosciute per un sito web possono essere trovate all'interno di Bootstrap di Twitters. Sebbene non sia specificamente una guida di stile per twitter.com, alcuni dei suoi componenti possono essere trovati su twitter.com e sono utilizzati molto per le applicazioni interne di Twitter.
Github è un buon esempio di un sito web che deve utilizzare una guida di stile. Github ha un team di designer e sviluppatori che lavorano al suo prodotto ed è quindi essenziale per mantenere la coerenza, indipendentemente da chi sta lavorando su nuove funzionalità e sezioni per il sito.
Se guardi questa immagine della guida di stile di MailChimp vedrai vari componenti da tutto il sito Web MailChimp. Una cosa che potresti aver notato è l'approccio umano user-friendly di MailChimp al dialogo che usa in tutto il suo sito. Questo è coerente perché Mailchimp ha creato una serie di regole a cui questo tono di voce deve attenersi.
Ciò che decidi di includere nella guida allo stile varia a seconda del sito che stai progettando. Ad esempio, un sito di social networking avrà componenti diversi da quelli di un sito di recensioni cinematografiche.
Puoi essere il più dettagliato o il più breve che desideri, ma più sei dettagliato e più unificato sarà il tuo design.
Quando crei una guida di stile è importante includere tutte le situazioni in cui un elemento o un componente potrebbero trovarsi. Ad esempio, dovresti prendere in considerazione diversi stati per pulsanti e input, oltre alle voci di menu correnti ecc. Questi dovrebbero essere dimostrati all'interno del tuo. File PSD.
Mancia: È possibile attivare vari stati visivi all'interno di Photoshop utilizzando Composizioni di livelli. Dai un'occhiata al nostro recente tutorial sull'argomento.In questo esempio creerò una guida di stile per un blog. La guida allo stile del blog sarà composta da componenti: questi sono:
Inoltre userò i seguenti sei colori:
Tutti gli input e i pulsanti useranno un raggio di 5px, mentre tutti i widget di componenti avranno un raggio di 0px che li rende di forma rettangolare.
In primo luogo, imposta un nuovo spazio di lavoro del documento. Ho deciso di impostare il mio a 580 px di larghezza. Questa è una dimensione confortevole su cui lavorare e rappresenta uno spazio di dimensioni adeguate per un design basato su moduli.
Sto usando una griglia (Visualizza> Mostra> Griglia) per aiutarmi nel mio progetto e mantenere tutto ben allineato. Ho scelto di usare una griglia 20px x 20px con una suddivisione ogni 10px. Questo può essere modificato andando su Preferenze> Guide, Griglia e Fette.
Vedrai quindi la schermata qui sotto. Qui puoi cambiare la spaziatura della griglia con qualsiasi cosa tu scelga, ma trovo che una griglia di 20px con suddivisioni impostate su 2 funzioni bene. Ho anche creato delle guide a 460px su entrambi i lati del mio documento per darmi una mano. Inoltre, può essere utile attivare lo snap facendo clic su Visualizza> Snap. Ciò garantirà che i tuoi elementi finiscano con misurazioni esatte dei pixel e non si allontanino con misurazioni sub-pixel vaganti.
La prima cosa che creeremo è il modulo componente autore. I social network come Twitter hanno reso queste schede di autore abbastanza popolari di recente e ho pensato che sarebbe stato carino utilizzarle come parte della nostra guida allo stile del sito web. In questo modo ogni autore del nostro blog può avere la propria scheda autore.
Inizia selezionando lo strumento forma e seleziona un colore di primo piano di bianco. Con questo selezionato, crea un rettangolo 380x250px. Una volta creato, fai clic con il pulsante destro del mouse sul livello per quella forma e seleziona "Opzioni di fusione". Ora dovrebbe apparire il pannello delle opzioni di fusione. Dalla barra laterale di sinistra del popup seleziona "Traccia" e dargli una dimensione del tratto di 1px. Il colore che useremo è il grigio chiaro # e7e2de tratto dal nostro set di colori.
Ora seleziona 'Outer glow' e imposta il colore del bagliore esterno allo stesso colore ma abbassa l'opacità di esso a 80. Imposta la diffusione del bagliore al 100% e la dimensione di esso a 4. Questo darà al nostro componente un confine con un bagliore denso che è mascherato da un bordo.
Gli stili di livello che abbiamo appena creato verranno utilizzati molto negli altri elementi che creeremo in seguito, ma ecco un suggerimento rapido su come utilizzare gli stessi stili di livello su qualsiasi altro elemento. Se fai clic destro sul livello dell'elemento che abbiamo appena creato e fai clic su "Copia stili di livello". Questo farà esattamente quello che dice e ti permetterà di incollarlo su qualsiasi altro livello che hai. Per fare ciò, fai semplicemente clic con il pulsante destro del mouse sul livello a cui desideri aggiungere lo stile e seleziona "incolla stile livello". Prendi nota di ciò poiché lo useremo un po 'durante questo tutorial. Faremo riferimento a questo particolare stile di livello per questo elemento come lo 'stile di livello principale'.
Per l'avatar dell'autore, fai un esempio di una foto e ridimensionala a 75 x 75 px. Quindi seleziona lo strumento "Selezione ellittica" e trascina il cursore sull'immagine, partendo dall'angolo in alto a sinistra in basso a destra. Tieni premuto Maiusc mentre fai questo per limitare le proporzioni e creare un cerchio perfetto. Quindi, una volta creata una selezione sull'immagine, copiala e incollala nel documento della guida di stile. Copia e incolla il nostro elemento 'stile di livello principale', quindi modifica gli stili di livello e rimuovi il tratto.
Per creare le tre caselle di statistiche, crea innanzitutto tre forme rettangolari bianche che possono essere divise in parti uguali tra 380 px. Dopo averlo fatto, prendine uno e apri nuovamente il pannello degli stili di livello facendo clic con il pulsante destro del mouse sul livello. Quindi seleziona "Ombra interna". Assicurati che la "modalità di fusione" sia impostata su normale e l'opacità al 100%. Imposta l'angolo su "-90" e cambia la distanza a 5px. Per il colore, usa il nostro colore blu principale # a4d4e8. Quindi ripeti questo processo sulle altre 2 caselle di statistiche, ma questa volta cambia i colori delle loro ombre interne a ciascuno dei nostri colori secondari; verde # aee1a3 e rosso # f67f77. Quindi aggiungi il testo per ogni statistica. Nella mia ho scelto di mostrare il numero di follower, follower e post.
Per aggiungere il testo e la biografia dell'autore, ho scelto di utilizzare "Droid Sans", disponibile come carattere web di Google.
Per il piccolo triangolo d'angolo in alto a destra della carta autore crea un quadrato 50 x 50 px con il nostro colore primario blu e quindi seleziona lo "strumento lazo poligonale". Disegna una linea retta in alto a sinistra del quadrato in basso a destra e quindi disegna intorno alla parte sinistra del quadrato. Una volta fatto questo, seleziona Livello> Maschera di livello> Nascondi selezione e questo creerà il triangolo.
Per la stella seleziona lo strumento forma "Poligono". Assicurati che i lati siano impostati su "5" nel menu in alto. Quindi seleziona la piccola freccia che si trova accanto alla parola "Lati". Seleziona la stella e "Rientri i lati di" al 50%. Quindi disegna una stella bianca sopra il triangolo e posizionala nell'angolo in alto a destra della carta dell'autore.
Il componente del post del blog viene creato nello stesso modo in cui abbiamo creato l'elemento principale della scheda autore sopra.
Ho quindi aggiunto lo 'stile del livello principale' a questo. La miniatura dell'immagine 70 x x 70 pixel è posizionata nella parte interna sinistra di questa. Ho creato tre diversi stili di testo; il titolo principale, la data e il testo del paragrafo. In basso a destra ho aggiunto un pulsante "leggi di più". Vedi il punto 6 per creare i pulsanti.
Per creare la bolla di commento effettiva, crea un rettangolo arrotondato di 316 x x 90 pixel e aggiungi lo 'stile di livello principale'.
Crea una forma quadrata di 15 x 15 px e ruota questo Modifica> Trasforma percorso> Ruota, quindi ruotalo di 45 gradi dal menu opzioni. Seleziona il livello attuale della forma e vai a Modifica> Copia poi vai al rettangolo arrotondato grande che abbiamo appena creato. Assicurati che il quadrato sia allineato dove vuoi che la punta vada. Quindi vai su Modifica> Incolla e questo unirà le due forme. Aggiungi lo stile del livello principale a questo e c'è il fumetto!
Ho deciso di aggiungere due componenti per i commenti post; uno è un componente di commento standard e l'altro è un commento dell'autore. Per l'esempio dell'autore, ho cambiato il tratto per essere il colore blu principale.
I pulsanti sono relativamente facili da creare perché abbiamo stabilito alcune linee guida prima di entrare nella nostra guida allo stile.
Per creare un pulsante grande seleziona lo strumento 'rettangolo arrotondato'. Dalla barra delle "opzioni" assicurati che il raggio sia impostato su "5px" e disegni un rettangolo blu primario di 125 px x 40 px. Quindi aggiungi il testo di tua scelta. Duplica il livello facendo clic con il tasto destro sul livello e selezionando "Duplica livello". Una volta che hai fatto questo cambia il suo colore in uno dei nostri colori secondari. Ripeti questa procedura per il pulsante con l'altro colore secondario. Inoltre, ripeti questa procedura per i pulsanti piccoli, ma questa volta fai i rettangoli di 30 x x 105 px e per il pulsante "call to action" rendilo a 374 x 40 px.
Per gli stati al passaggio del mouse ho aggiunto una leggera sfumatura aggiungendo uno stile di livello 'Sovrapposizione sfumatura'. Imposta la modalità colore su "Normale" e l'opacità al 10% con la sfumatura che va dal nero al bianco. Questo sarà sufficiente di un suggerimento che un utente ha rotolato sul pulsante.
Per il gruppo di pulsanti raggruppati, crea un rettangolo arrotondato di 380 px x 30 px di larghezza, quindi suddividilo in quattro pulsanti di dimensioni uguali. Puoi farlo disegnando una linea a matita da 1px o tagliando le sezioni con uno strumento "rettangolare" di 1px.
L'impaginazione viene creata in modo simile al set di pulsanti raggruppati appena creato sopra. Ma questa volta, invece di crearlo in quattro pulsanti di uguali dimensioni, crea dieci pulsanti quadrati di uguali dimensioni con i pulsanti freccia su entrambe le estremità un po 'più grandi. L'immagine qui sotto lo dimostra. Per le frecce ho usato alcune forme prefabbricate che sono specifiche per le frecce di web design.
Ormai dovresti aver realizzato quanto sia facile realizzarci la vita ripetendo molti elementi e stili. La cosa grandiosa di questo è che crea coerenza all'interno del nostro design.
Gli input e le aree di testo per questo set sono creati usando i metodi che abbiamo usato in precedenza. Per gli input disegnare un rettangolo arrotondato di 380 x 40 px e applicare il colore del tratto. Estendi l'altezza della textarea un po 'a circa 90 px. Per il focus sugli elementi ho usato il nostro 'main layer style' e aggiunto un elemento extra per i messaggi di errore e di successo.
Spetta a te quanti elementi desideri creare per la tua guida di stile. Conoscerai i requisiti per il sito su cui stai lavorando e sarai consapevole di ciò che desideri e di cui non avrai bisogno. La cosa grandiosa della creazione di una guida di stile è che tutti gli elementi che introduci in futuro avranno regole e pratiche che devono essere bloccate e permetteranno la coerenza all'interno di questo.
Creerà familiarità con gli utenti e permetterà un'esperienza complessiva migliore sia esteticamente che funzionalmente.
Accentsconagua