Contenuto
- Vantaggi della progettazione con il codice
- Prima i dati
- Bontà mobile gratuitamente
- Trovare una lingua comune
- Impara più velocemente
- Rapida iterazione
- Tempo di lancio più veloce
- Perché HTML5?
- L'attributo magico dei dati
- CSS3: è il nuovo Photoshop
- Sass + Compass: magicamente delizioso
- jQuery: oh, sì, puoi
- Quadri
- Pensieri finali
Questo articolo è apparso per la prima volta nel numero 235 di .net magazine, la rivista più venduta al mondo per web designer e sviluppatori.
Non sono mai stato un grande fan di fare più lavoro del necessario. Tendo a valutare metodi e strumenti in base alla loro capacità di rendere me o il mio team più efficaci. Quanto velocemente ci portano a un prodotto funzionante? Quanto sono efficaci nel comunicare? Restano fuori dalla nostra strada?
Nel corso degli anni ho adattato il mio processo di progettazione e gli strumenti. Immagino che continuerò a farlo. Questa è la natura della progettazione per la tecnologia e il Web. Questo settore è in continua evoluzione; anche il nostro processo e gli strumenti devono evolversi.
HTML5 e CSS3 semplificano la transizione di una parte maggiore del processo di progettazione a monte, lontano da Photoshop e più verso un design vivo e vitale. Strumenti come Foundation, Bootstrap e jQuery rendono più accessibile il passaggio di una parte maggiore del processo di progettazione al codice.
Vantaggi della progettazione con il codice
Innanzitutto, non sto sostenendo di eliminare Photoshop o qualsiasi altro editor di progettazione visiva dal tuo flusso di lavoro. Invece, mi concentrerò sui vantaggi di spostare quel progetto nel codice il prima possibile.
Prima i dati
La cosa che mi è sempre piaciuta della progettazione con HTML è che incoraggia a pensare da una prospettiva basata sui dati. Al contrario, utilizzando programmi di disegno come Illustrator, OmniGraffle o Balsamiq, inizi con una casella e la riempi di dati.
In HTML costruisci il DOM (document object model), un po 'come costruire un sommario. È un ritorno al vero design delle informazioni con gerarchie significative. HTML5 fa un ulteriore passo avanti con l'aggiunta di nuovi elementi semantici: articolo, sezione, intestazione, parte, piè di pagina e così via. Questo approccio basato sui dati si fonde perfettamente con i design reattivi e mobile first.
Bontà mobile gratuitamente
Se stai leggendo questo articolo, probabilmente stai progettando per dispositivi mobili. E probabilmente dovrai progettare un modulo o due. Con HTML5, sei fortunato. Prima di HTML5, i tuoi tipi di input erano praticamente un campo di testo o password. HTML5 ha introdotto una serie di tipi di input aggiuntivi, tra cui:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
La cosa davvero fantastica di questi tipi di input unici e aggiuntivi è che i browser mobili su iOS e Android li riconoscono e sostituiscono automaticamente una tastiera sensibile al contesto, senza che siano necessari plug-in o hack jQuery speciali. Oh, e se il tuo browser non sa cosa sia input type = "email"> è, quindi il valore predefinito è solo un input di testo.
Trovare una lingua comune
"È fantastico come i nostri designer e sviluppatori possano lavorare nella stessa lingua" - John Drago, sviluppatore di applicazioni presso Inflection.
Vedi se suona familiare. Sono in una sala conferenze con una mezza dozzina di sviluppatori di applicazioni lato server che possono codificare cerchi intorno a me in Ruby, Python, Java o .NET. Sono l'unico designer. Alcuni dei miei suggerimenti vengono inizialmente respinti in quanto troppo complicati da attuare. Mi avvicino alla lavagna e inizio a scrivere un po 'di HTML e CSS sulla lavagna per capire come implementare il design. All'improvviso il tono della conversazione cambia e uno degli sviluppatori dice con riluttanza: "Beh, sì, se lo facciamo in questo modo, potrebbe funzionare".
Spostare una parte maggiore del mio processo di progettazione nel codice ha migliorato le conversazioni con gli sviluppatori. C'è un ulteriore livello di rispetto guadagnato sapendo come creare i tuoi progetti in codice. Non devi essere un esperto per guadagnarti questo rispetto. Sebbene le mie abilità HTML e CSS siano solide, le mie abilità JavaScript sono al massimo mediocri. E non mi vergogno di ammetterlo. Tuttavia, quando si lavora con frontend, o sviluppatori lato server, il fatto di poter parlare in un linguaggio comune, o incontrarsi a metà strada, è un enorme vantaggio.
Impara più velocemente
Mentre wireframe e compositi visivi possono aiutare nella pianificazione, questi artefatti statici sono teorici. Quante volte hai provato a spiegare un'interazione a qualcuno, solo per fargli rispondere: "Immagino che dovrò vederlo". Prima si arriva a un prototipo, qualcosa con cui le persone possono interagire, prima si può sperimentare il design e vedere se le idee funzionano.
Rapida iterazione
Quand'è stata l'ultima volta che un progetto finale spedito alla produzione corrispondeva esattamente alla tua composizione di Photoshop? Quasi mai. Con la progettazione di prodotti digitali, il cambiamento avviene costantemente. Inoltre, modifiche come l'aumento delle dimensioni delle intestazioni da 22pt a 24pt su un paio di dozzine di schermate possono richiedere ore in Photoshop. Gli oggetti avanzati offrono un certo livello di progettazione orientata agli oggetti in Photoshop. Sfortunatamente, la maggior parte dei designer visivi che conosco non utilizza abbastanza gli oggetti intelligenti. Con i CSS, poiché incoraggia un approccio più sistematico al design, le modifiche tipografiche richiedono minuti anziché ore.
Che ne dici di cambiare i gradienti lineari su tutti i tuoi pulsanti? O la dimensione di un confine? Che ne dici di passare da angoli squadrati a angoli arrotondati di 2px? In Photoshop, questo può richiedere ore e devi ancora codificarlo. La capacità di progettare in codice aiuta a evitare il viaggio di andata e ritorno di tornare in Photoshop per iterare sul design visivo. Quando sposti queste modifiche a monte nel codice, utilizzando CSS3 e Sass (che tratterò più avanti in questo articolo) possono avvenire in tempo reale e richiedere solo pochi minuti.
Tempo di lancio più veloce
Nel corso degli anni, mentre trasferivo una parte maggiore del mio flusso di lavoro di progettazione a monte nel codice, ho riscontrato un reale miglioramento: una riduzione del tempo di commercializzazione del 20-30% circa. Più lo faccio, meno tempo dedico a duplicare gli sforzi. Sto spendendo meno cicli andando in Photoshop o Fireworks e poi ripetendo il lavoro nel codice.
Ad un certo punto il design deve interfacciarsi con qualche tipo di backend, che si tratti di un CMS, di un'app Rails o di qualcos'altro. Poiché la maggior parte del mio lavoro di progettazione è in codice, l'integrazione avviene prima o poi. Un paio di anni fa, uno dei miei clienti, PointRoll, è passato dal prototipo alla produzione in cinque giorni.
Perché HTML5?
HTML5 è più semplice rispetto alle versioni precedenti di HTML. Prendiamo ad esempio la dichiarazione del tipo di documento. Nelle versioni precedenti di HTML, il DOCTYPE assomigliava a questo:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
E c'erano sei versioni differenti. Fortunatamente l'HTML5 DOCTYPE Somiglia a questo:
! DOCTYPE HTML>
Sul serio. Questo è tutto. Incredibilmente semplice.
Quando si crea una pagina HTML standard, ci sono una serie di elementi comuni, come un'intestazione, un'area del contenuto principale, una barra laterale e un piè di pagina. Sono sicuro che hai già visto qualcosa di simile prima:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Niente fuori dall'ordinario lì. Ma una volta riempito con il contenuto, questo modello si trasforma in zuppa div. Al contrario, con i nuovi elementi semantici di HTML5, ottieni qualcosa di molto più semplice e facile da scansionare, come questo:
intestazione> nav> / nav> / header> articolo> a parte> / a parte> / articolo> piè di pagina> / piè di pagina>
Guarda quello. Qualcosa che abbia un senso.
L'attributo magico dei dati
HTML5 viene fornito con un altro fantastico hook che ti dà la possibilità di creare il tuo significato semantico: il file dati-. In precedenza, se volevi assegnare qualcosa di significativo a un elemento DOM, eri limitato a ID, classi e ruoli.
Sfortunatamente, gli ID devono essere univoci. Le lezioni sono universali (yippee!), Ma usarle può trasformarsi rapidamente in un pasticcio. I ruoli sono una risorsa sottoutilizzata che fornisce un significato significativo per ARIA. Di recente, ho utilizzato i dati per una piattaforma di analisi del monitoraggio degli eventi che stiamo sviluppando presso Inflection.Siamo grandi fan del test dei nostri progetti. Quando lavoriamo su applicazioni o pagine che hanno una grande quantità di interattività, ci piacerebbe avere una visione più granulare del coinvolgimento dei clienti all'interno della pagina.
Inserisci il dati-. Con esso puoi assegnare, trasmettere e collegare in un modello di significato "definisci il tuo". Quindi, ad esempio, puoi fare questo:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Possiamo allegare un listener con JavaScript alla pagina e ogni volta che un cliente passa il mouse sopra o fa clic su questo pulsante, possiamo tenere traccia di tale attività. Invece di essere in grado di monitorare solo qualcuno registrato tramite OAuth con Twitter, possiamo vedere che si è spostato su Facebook, poi Twitter, poi LinkedIn e infine ha deciso di scegliere Twitter per il proprio modello OAuth.
Immagina di estenderlo a un sito come Pinterest o al nuovo design di Myspace in cui i clienti trascinano e rilasciano le tessere per riordinarle in base agli interessi. O forse nascondere le tessere a cui non sono interessati dati- l'attributo ti consente di collegare o assegnare un ulteriore livello di significato semantico alle cose che puoi definire. Per i siti e le app che fanno molto affidamento su Ajax, apre opportunità illimitate.
CSS3: è il nuovo Photoshop
CSS3 ha portato un livello completamente nuovo di progettazione dell'aspetto grafico che richiedeva immagini di sfondo, sezioni e la famigerata tecnica delle "porte scorrevoli". Per fortuna, è tutto un ricordo del passato.
Diamo un'occhiata alla creazione di un pulsante di fantasia con una sfumatura lineare, angoli arrotondati, un'ombra del testo che gli conferisca un piacevole effetto di stampa a lettere e un bagliore al passaggio del mouse. L'apprendimento di queste tecniche andrà molto lontano. Ognuno di essi può essere utilizzato in modo indipendente o in varie combinazioni per tirare fuori quasi tutti gli attuali hotness visivi di tendenza del web oggi.
Innanzitutto, apportiamo alcune modifiche all'impostazione predefinita pulsante> e input type = "submit"> elementi. Supponendo che utilizzi uno dei ripristini CSS standard, aggiungeremo solo un po 'di dimensionamento e spazio per respirare.
/ * Pulsanti pulsanti, di cui ha i pulsanti. ======================================= * * / pulsante, input [type = "submit"] {height: 2.7em; imbottitura: .4em .7em; line-height: 1.9; }
Suggerimento: I pulsanti e gli input inviati possono essere difficili da rinnovare. Ho scoperto che regolando l'altezza della linea a 1,6 o superiore, puoi evitare l'hack di aver bisogno di un div o di uno span extra all'interno del pulsante> etichetta.
Ora che abbiamo "risolto" il problema del pulsante, possiamo creare un file .btn class per darci un bel pulsante pulito con angoli arrotondati, una sfumatura lineare, un contorno e un aspetto tipografico.
.btn {display: inline-block; bordo: 1px solido # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; imbottitura: .4em .7em; sfondo: # edeff2; sfondo: -webkit-gradiente (lineare, 0% 0%, 0% 100%, da (#fefefe), color-stop (0.55, # edeff2), a (# e4e6e9)); sfondo: -moz-linear-gradient (center top, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; colore: # 6c7786; dimensione del carattere: 1.1em; text-shadow: #fefefe 1px 0 1px; line-height: 1.375em; cursore: puntatore; }
E poi un bell'effetto hover con un bagliore sottile usando il scatola-ombra metodo:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; sfondo: # e6e9eb; sfondo: -webkit-gradiente (lineare, 0% 0%, 0% 100%, da (# f7f7f7), color-stop (0.55, # f6f6f7), a (# e6e9eb)); sfondo: -moz-lineargradient (center top, # f7f7f7, # f6f6f7 55%, # e6e9eb); colore: # 45484b; text-shadow: rgb (255,255,255) 1px 1px 0; colore del bordo: # c9c9c0; }
Ora, non sono un grande fan della scrittura del codice del gradiente lineare. È lungo e confuso. Come puoi vedere, ho incluso solo la versione per -moz, -webkite il modello standard. Se vuoi includere le versioni -o e -ms, dovrai raddoppiare il codice.
Ci sono altre due opzioni. Uno è un generatore CSS3; ce ne sono diversi disponibili sul web, incluso ColorZilla. Ma se vuoi migliorare un po 'il tuo gioco, prendi in considerazione l'idea di immergerti in Sass: combinato con Compass, è una manna dal cielo.
Sass + Compass: magicamente delizioso
Puoi smettere di sperare nell'edizione unicorno CSS4. È qui e si chiama Sass + Compass. Sass è l'acronimo di Syntactically Awesome Stylesheets: erediti tutti i vantaggi tradizionali dei CSS3 con le gioie aggiunte di variabili, mixin, estensori e altre chicche.
Di recente ho riformattato un file CSS di 5.000 righe che aveva più di 30 variazioni sulla stessa tonalità di blu. Con Sass ho sostituito ogni variazione con questo codice:
colore: $ blu;
Definendo $ blu nel mio _variables.scss file, posso creare un colore predefinito a cui può fare riferimento ogni file CSS o SCSS. Chiunque scriva CSS può usare $ blu e non devi preoccuparti di usare un contagocce, trovare un codice esadecimale o un colore RGB, RGBA o HSL.
Ricordi quel codice gradiente lineare? Invece di scrivere diverse righe di codice, che ne dici di questo:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Lascia che Sass e Compass facciano il lavoro pesante e generino la sintassi corretta per te: fatto. Supponiamo che tu voglia una versione più scura o più chiara di un colore. Puoi spostare il contagocce in Photoshop, o semplicemente usare i comandi schiarisci / scurisci in Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Ciò creerà un gradiente lineare con un 2% di oscurità $ lite-grigio e il 5% oscurato bianco. Voil! Non hai nemmeno bisogno dei codici HEX o RGB.
jQuery: oh, sì, puoi
Ho una confessione da fare. JavaScript usato per intimidirmi. Poi ho trovato jQuery. Non pretendo di essere un guru di JavaScript, ma sono abbastanza fiducioso di poter realizzare praticamente qualsiasi tipo di transizione o funzione di cui ho bisogno utilizzando jQuery.
Prendi, ad esempio, la possibilità di visualizzare un numero di telefono secondario sullo schermo facendo clic sul collegamento Aggiungi nuovo numero. Usando jQuery, scrivi semplicemente questo:
// - Rivelazione progressiva - // $ (’. New-number’). Click (function () {$ (’. Alt-number’). FadeIn (’fast’);});
Cerchi qualcosa di più avanzato? Probabilmente c'è un plug-in per questo. I comportamenti di base sono facili e quelli complessi sono accessibili con jQuery.
Quadri
Due dei framework più robusti oggi sono Foundation e Bootstrap. Ora, prima di ignorare i framework CSS, lascia che ti chieda una cosa. Usi jQuery? Ruby on Rails? Django? Tutti i framework.
Proprio come jQuery e RoR, Foundation e Bootstrap sono nati dal riconoscere che ci sono un buon numero di cose che facciamo più e più volte (come ripristini, tipografia, griglie, moduli, pulsanti, navigazione ed elenchi). Foundation e Bootstrap offrono entrambi supporto per progetti reattivi attraverso l'uso di classi di supporto. Entrambi sono ben documentati e sono stati testati su strada, quindi puoi usarli con sicurezza.
Una differenza fondamentale tra i due: Bootstrap si basa sul sistema LESS per la preelaborazione CSS, mentre Foundation è basato su Sass. Preferisco Sass a LESS per via delle sue capacità aggiuntive, ma sia Sass che LESS riducono a pezzi i CSS tradizionali.
Un ultimo pensiero sui framework. Per coloro che non vogliono ereditare il rigonfiamento extra del framework di qualcun altro, prendi in considerazione la possibilità di sceglierne uno esistente e spogliarlo fino all'osso, o sceglierne alcuni per farlo tuo. In ogni caso, non c'è davvero alcun motivo per ricominciare da capo ogni volta.
Pensieri finali
Vuoi un maggiore controllo su come verrà finalmente il tuo design? Spostare più processi a monte nel codice. HTML5 porta finalmente un po 'di senso al DOM. Buona liberazione a sciocchezze DOCTYPEse diviti. CSS3 è il nuovo Photoshop: gradienti lineari, borderradius e box-shadows FTW! E con strumenti come Bootstrap, Foundation, Sass e jQuery, spostare il design a monte nel codice non è mai stato così facile.
Scopri 55 fantastici esempi di HTML5 su Creative Bloq.
