Da un po 'di tempo fa Piastrelle di stile sono stati portati in questo mondo dal genio di uno Samantha Warren . Per quelli di voi che potrebbero averli guardati una volta e poi aver dimenticato cosa sono, ecco una rapida spiegazione:
Le piastrelle di stile sono una sorta di modello che consente di testare rapidamente e visualizzare in anteprima vari colori, tipi di carattere, trame e altre opzioni relative allo stile estetico per i progetti prima di creare un mockup ad alta fedeltà, ma dopo aver realizzato i wireframe. Devono essere presentati ai clienti, alle parti interessate o a qualsiasi altra parte interessata abbastanza presto nel processo di progettazione. In questo modo, puoi superare le preoccupazioni sulla scelta del font e domande come "Possiamo avere un rosso 'più luminoso'?"
In parole povere, dovresti usarli, anche se solo per te stesso. Potrebbe sembrare un grosso problema aggiungere un altro passo al processo di progettazione; ma posso dirti per esperienza personale che ne vale la pena. Disegno nel browser: fissare una tela vuota di Photoshop può essere scoraggiante; fissare una finestra del browser vuota sembra colpire molto più forte.
Il senso dell'orientamento fornito creando una Style Tile rende molto più semplice la progettazione del resto del sito. Non è niente di così complesso o costrittivo come una guida di stile; quindi, dà sia un punto di partenza, sia la libertà di regolare le cose man mano che si procede.
Ciò tuttavia solleva un piccolo problema con le piastrelle di stile originali. Sono PSD. Progettisti basati su browser come me vorranno Style Tiles basati su browser. Vogliamo vedere come questa roba sta andando a cercare nel Web, dopo tutto, e sul maggior numero di dispositivi possibile.
Diverse persone sono già andate molto avanti a noi su questo fronte. Esistono modelli predefiniti per le persone che desiderano iniziare a creare Style Tiles nel proprio browser. Controllali:
Le persone adorabili di Sparkbox hanno creato a modello di tessere stile reattivo basato su HTML e Sass. È una delle opzioni più semplici, come visto nella demo, ma il codice è ben commentato. Sono persino andati e hanno incluso degli script opzionali per renderlo compatibile con IE 7 e seguenti, nel caso in cui il client non abbia aggiornato il proprio browser in ... per sempre.
Creato da Namanyay Goel , Webstiles hanno molto in comune con le altre soluzioni di questo elenco. Ciò che li rende diversi è che sono stati costruiti con il pre-processore Stylus CSS meno conosciuto (alcuni direbbero sottovalutato).
Se lavori con il framework Compass, insieme a cose come Ruby e Sass, prova questo acceso per taglia. Può essere installato come qualsiasi altra gemma di Ruby, quindi dovrebbe cadere abbastanza ordinatamente nel flusso di lavoro. È interessante notare che la copia del corpo può essere "generata" tramite una variabile Sass e il contenuto: attributo. Il tutto è progettato in modo da non dover mai toccare l'HTML.
Il Caldaia reattiva per piastrelle di stile porta con sé alcune ombre d'impatto piuttosto dure, ma è reattivo e non usa niente di più complicato del classico HTML e CSS. Niente quadri, niente pre-processori, niente. È un buon punto di partenza se vuoi solo aprirlo in un editor di testo e andare.
Con queste numerose opzioni pre-impostate, perché vorresti creare da zero le tue Tessere Stile HTML / CSS? Sembra una perdita di tempo? Bene, sì e no.
Se stai realizzando un sito semplice e non hai ancora pianificato tutti i contenuti, o il client non lo ha inviato, una delle opzioni pre-fatte andrà bene. Tuttavia, se stai creando un'app Web complessa o un sito molto grande con molti tipi di contenuti o elementi dell'interfaccia utente distinti, potresti voler creare un modello di Tile di stile da zero.
Quelle esistenti semplicemente non tengono conto della pura gamma di possibili contenuti e tipi di elementi là fuori. Pertanto, potresti desiderare una tessera stile che includa un video incorporato, un lettore audio o una mappa. Potresti volerne uno che mostri un'interfaccia a schede o un menu a fisarmonica.
Se stai costruendo un sito che dipende da alcuni elementi di interfaccia utente rari, potresti voler creare un modello di Tile di stile che includa tali funzioni.
Non deve essere così difficile. Basta impostare un semplice layout di due-tre colonne e iniziare a includere gli elementi visivi che saranno più importanti per il tuo progetto, in base al contenuto / funzionalità. Questi includeranno:
Generalmente non è necessario renderlo un codice pronto per la produzione per tutti i browser. Mantienilo semplice, tienilo in HTML5. A meno che tu non stia utilizzando un elemento dell'interfaccia utente non standard che deve essere codificato da zero in HTML e CSS, non preoccuparti di JavaScript.
La parte migliore? Puoi perfezionare e riutilizzare tutti i CSS pertinenti mentre inizi a codificare il tuo mockup basato su browser!
Le piastrelle di stile meritano di essere esaminate se non le stai già utilizzando.
Mostrali ai clienti, tienili a te stesso, usa le opzioni prefabbricate o fai il tuo ... non importa. Solo avere quel senso di direzione stilistica renderà molto più facile riempire quella finestra del browser vuota.
Immagine in evidenza, studio di progettazione attraverso Anne-Sophie Leens