Progettare nel browser usato per spaventarmi. Non perché sembrasse difficile ma perché pensavo di finire con un design composto da tante piccole scatole, qualcosa di così generico e blando che avrei finito per rifarlo in Photoshop.
Quella paura si è rivelata del tutto ingiustificata. Non solo i miei progetti sono diventati più focalizzati, li ho anche completati più velocemente e ho coinvolto i clienti prima nel processo attraverso l'interazione e la discussione.
Il design è design. Non importa se viene fatto in un programma software o scritto in codice. La progettazione nel browser non è più difficile della progettazione in Photoshop. Come ogni strumento che hai bisogno di usarlo per impararlo e alla fine controllarlo.
Il design è un processo iterativo, reso più difficile lavorando per i clienti. A volte è difficile per i clienti immaginare esattamente ciò che stai descrivendo; la progettazione nel browser può coinvolgerli durante il processo piuttosto che nella fase di progettazione.
In sostanza, le fasi di progettazione e sviluppo si stanno unendo e, se sei naturalmente bravo nel design e nello sviluppo del front-end, dovrai progettare nel browser come un papero che prende l'acqua.
Uno dei principali vantaggi del design nel browser è che possiamo progettare in base a aspettative realistiche. A volte la progettazione nel software può creare problemi imprevisti per lo sviluppo front-end. Gli elementi dell'interfaccia utente potrebbero essere disegnati in modo vistoso o forse non hanno alcun senso, è difficile spiegare a un cliente perché hai cambiato qualcosa, non perché non capiranno, ma perché lo hai già inserito nel progetto e lo hai già approvato. La progettazione nel browser si presta all'idea di semplicità.
Prima ancora di pensare al design ho bisogno di avere un piano. Solo perché sto usando uno strumento diverso non significa che il mio processo cambi. Mi piace avere un piano piuttosto solido prima di iniziare a progettare e ho bisogno di sapere cosa sto progettando, perché sto progettando, per chi sto progettando, cliente background e qualsiasi servizio o informazione di prodotto che avrò bisogno di focalizzare sopra.
Dopo aver determinato queste cose avrò un'idea migliore di cosa sia il prodotto o cosa faccia il cliente, da quanto tempo lo fanno, cosa li distingue dalla concorrenza, da chi è la base di utenti e da cosa è primario e secondario gli obiettivi del sito web saranno.
Personalmente mi piace avere documentazione di tutto. In genere, dispongo di documentazione per la mappa del sito, i contenuti, gli inviti all'azione e l'architettura del sito. Quando avrò iniziato a progettare dovrei avere una strategia chiara per la progettazione e tutti i contenuti dovrebbero essere stati raccolti.
Lo sketch è fondamentale se ho intenzione di progettare qualsiasi cosa nel browser. Riesco a sgrossare le aree di contenuto con carta e penna, ottenere feedback e scorrere rapidamente le basi del mio progetto.
Disegno in base al piano che ho descritto sopra e mi assicuro di avere tutte le aree di contenuto e gli inviti all'azione presentati. Lo sketch dovrebbe essere veloce, non passare molto tempo a perfezionare nulla. Dovrebbe essere abbastanza solido da mostrare ad un cliente ma abbastanza sciatto da poter essere completato in meno di un'ora.
Successivamente mi piace prototipare il sito dai miei schizzi in HTML e CSS. Il prototipo è un sacco di scatole grigie con testo e immagini per segnaposto. Le scatole grigie fungono da contenitori per i contenuti quando inizio effettivamente la progettazione. Il più grande vantaggio nella prototipazione con il codice è che il client può interagire con il prototipo e vedere come funziona l'architettura del sito, in questo modo, se qualcosa è disattivato o ha bisogno di essere perfezionato, possiamo gestirlo ora piuttosto che il giorno del lancio.
Prima di iniziare a progettare abbiamo bisogno di una sorta di stile per basare il nostro design. Dobbiamo determinare i colori e i caratteri che useremo con potenziali trame e motivi. È qui che entrano in gioco le tessere stile.
Tessere stile sono stati creati da Samantha Warren e li sto usando da un po 'di tempo. Aiutano i clienti a vedere una guida di stile precoce e molto semplice che possiamo usare per iniziare a progettare con. Mi piace creare molti di questi per vedere quale il cliente preferisce in quel modo che posso restringere a uno solo. Trovo che questi sono anche molto importanti nel processo di approvazione e aiuta a prevenire il rifiuto definitivo.
Ora siamo pronti per iniziare la progettazione. Se sei abituato a progettare in un programma software come Photoshop o Sketch, questo non è molto diverso. Usando il nostro file prototipo, iniziamo ad aggiungere contenuti simulati nel nostro markup. A questo punto sappiamo esattamente cosa sta succedendo in ciascuna sezione del contenuto nel markup e la griglia è già stata definita in modo da non richiedere molto tempo.
Ora inizierò a sovrapporre stili ai miei contenuti. Aggiungerò gli stili di base per colore, tipografia e layout. Una volta che gli stili di base sono finiti, me ne andrò e lo guarderò. Mi piace proiettare sullo schermo alcune parti del disegno per fare riferimento più tardi.
Una volta che sono soddisfatto del livello base, mi piace prendere appunti su cosa affinare. Basandomi su quelle note userò molto probabilmente Photoshop o Schizzo per aggiungere texture o altro con un tocco tangibile. Photoshop e Sketch sono ottimi strumenti per perfezionare velocemente gli elementi dell'interfaccia utente complessi, quindi salvo qualsiasi cosa che potrebbe essere difficile da codificare più di una volta
La ragione per cui lo faccio è che voglio che il mio codebase sia snello e pulito e più codice, commento ed eliminazione, più diventa sciatta e gonfia la tua base di codice.
Se dovessi progettare ogni volta nel browser da zero, le cose potrebbero sembrare che dureranno per sempre, ma se inizi da una base personalizzata, un framework, puoi eliminare qualsiasi passaggio ripetitivo. Per cominciare ho una versione personalizzata di Initializr che uso con una griglia reattiva personalizzata costruita in Sass (http://sass-lang.com/). L'utilizzo di un framework personalizzato mi dà un vantaggio per la prototipazione e il design.
Avere una libreria di pattern UI comuni è anche un ottimo modo per costruire un prototipo veloce e rende più efficiente la progettazione nel browser. Io uso Testo sublime per codificare e una cosa che ho imparato a sfruttare è i frammenti personalizzati che è possibile creare. Ho aggiunto diverse varianti di navigazione, elenchi, barre laterali e altri elementi comuni all'elenco dei miei frammenti in modo da poterli inserire rapidamente nel mio markup con una semplice azione. Uso anche account su Codepen e JSFiddle per salvare i modelli. Dan Cederholm ha creato un grande tema WordPress per la memorizzazione di modelli comuni chiamati Pere . Utilizza i post per memorizzare il codice che puoi modificare dal vivo nel front-end per testare e visualizzare in anteprima le modifiche.
Pratica e pratica applicazione ti renderanno più bravo a progettare nel browser. Le probabilità sono che se fai qualche sviluppo front-end hai già un framework di base da cui partire e hai già alcuni modelli comuni da usare.
Ora tutto ciò che devi fare è iniziare a progettare nel browser e alla fine ti verrà proposto un flusso di lavoro efficiente e funzionante all'interno del tuo processo. Con la pratica diventerai solo più veloce.