Accesso al processo di progettazione del sito Web dal browser

"Ecco i pazzi, i disadattati, i ribelli, i piantagrane, i pioli rotondi nei buchi quadrati... quelli che vedono le cose in modo diverso - non amano le regole... Puoi citarle, non essere d'accordo con loro, glorificare o diffamarli, ma l'unica cosa che non puoi fare è ignorarli perché cambiano le cose…” — Campagna Think Different di Apple, Steve Jobs, 1997.

Nella maggior parte dei casi, i designer continuano a creare modelli statici di schermate utilizzando gli strumenti di progettazione tradizionali durante il processo di progettazione del sito web. Ma alcuni designer stanno facendo un grande passo avanti e li aggirano, passando direttamente al codice, costruendo e adattando i progetti nel browser e testando i loro progetti come apparirebbero alle persone in tempo reale. Sono i pazzi, i disadattati, i ribelli?

In genere, il processo di sviluppo del sito Web tradizionale prevede molte fasi, tra cui pianificazione, strategia dei contenuti, progettazione, wireframing, prototipazione, test, sviluppo, pubblicazione e così via. Ma durante la fase di progettazione, potrebbe esserci un altro modo per produrre progetti di siti reattivi "perfetti al pixel" e aggirare del tutto gli strumenti di progettazione?

Con l'aumento del design reattivo e la varietà di dispositivi in ​​uso (cellulari, tablet, laptop, desktop, orologi), è molto più difficile mantenere tutto coerente e con più parti mobili da tenere in considerazione, l'approccio alla progettazione di siti Web e interfacce sta cambiando.

Sebbene non sia necessario che un designer diventi un programmatore esperto, una soluzione è che i designer inizino a lavorare direttamente con il codice che guida un sito web. I progettisti che possono gestire il codice con solo un po' di HTML e CSS si troveranno una grande risorsa per qualsiasi team e avranno un enorme vantaggio in generale.

Come mai? Quando si impegna un progetto di progettazione di un sito Web reattivo con tutte le sue complessità, i designer in genere non hanno il tempo di creare un design statico di un componente (diciamo un'intestazione o un piè di pagina) su 10 diverse risoluzioni e finestre. Anche se progettano solo per i dispositivi più popolari, dovranno comunque considerare 4-5 schermi con diverse proporzioni, densità dello schermo e dimensioni dello schermo. Non è un compito da poco a dir poco.

Risolvere le sfide di progettazione di siti Web con carta e penna prima di tutto

Esploriamo un approccio alla progettazione di siti Web e un processo di pianificazione diversi.

La prima fase inizia con un questionario per il cliente che richiede informazioni sugli obiettivi generali del progetto da una prospettiva aziendale, il pubblico di destinazione, le strategie di conversione, le varie aspettative di performance e così via. Questo viene fatto prima che venga avviata la fase di progettazione vera e propria per comprendere meglio le esigenze del cliente e il progetto in generale e per essere più efficienti su tutta la linea.

Il passo successivo è scrivere una bozza del progetto per confermare che il brief è stato compreso. Questo è utile quando si lavora su progetti in una nicchia in cui potresti non avere molta esperienza o competenza. Chiamalo una specifica funzionale, ma meno tecnica.

Questo aiuta a definire terminologie, parole chiave e processi. A seconda della complessità del progetto, è una buona idea eseguire diversi scenari e flussi utente, in genere il flusso di onboarding, la ricerca e la navigazione in un sito o un flusso "aggiungi al carrello" e checkout se si tratta di un sito di eCommerce.

Wireframing e prototipazione

La prototipazione è la fase successiva del processo di progettazione del sito web. Costruire wireframe veloci per parlare del layout della pagina, delle funzionalità e dell'aspetto delle pagine del sito su dispositivi diversi è un buon inizio. Non ci vuole molto tempo per costruire dozzine di wireframe di diversi modelli e componenti. Da questi è possibile creare un semplice prototipo di sito Web e, a seconda della complessità del progetto, è possibile utilizzare strumenti di prototipazione come InVision, Adobe XD, Balsamiq, Moqups o Axure.

Moodboard e inventario delle interfacce

Il passo successivo è mettere insieme una mood board: una raccolta di cose che il designer, il cliente e altre parti interessate potrebbero apprezzare su altri siti Web: layout, aspetto grafico, colori o caratteri, icone, immagini e così via. Ciò contribuirà a definire l'aspetto generale del sito. Se il cliente ha una guida allo stile del marchio, dovrebbe essere considerata e incorporata nel nuovo design del sito.

Una volta che vari artefatti sono stati approvati (wireframe, prototipi, modelli, moodboard, ecc.), è una buona idea fare un inventario dell'interfaccia.

Un inventario dell'interfaccia è una raccolta completa dei bit e dei pezzi che compongono la tua interfaccia.

Brad Gelo

Se fai un web design reattivo da zero, inizia scrivendo tutti i componenti e gli elementi da cui verrà costruito il progetto. Una lista non ordinata andrà benissimo ed è decisamente meglio di niente. Ad esempio tabelle, pulsanti, immagini, tipografia, media, moduli, navigazione, componenti, ecc.

Progettare nel browser

"Progettare nel browser" è un termine che è diventato popolare con l'ascesa del responsive web design. Al fine di ridurre al minimo le ore trascorse in programmi di progettazione come Sketch, i designer sono stati invitati a spostare la fase di progettazione nel browser e a utilizzare CSS per il layout e lo stile. Questo approccio alla progettazione di siti Web si rivela più efficiente in quanto elimina molti passaggi.

Concentrandosi sul mockup HTML e testando le idee di progettazione "in-browser" con CSS, è possibile risparmiare tempo solitamente speso per creare modelli statici di pagine in altri strumenti di progettazione come Sketch. È una buona idea per i progettisti procurarsi un buon editor di codice e trovare un buon metodo di aggiornamento del browser in modo che possano vedere le modifiche in tempo reale. Sublime Text e Codekit, ad esempio, sono un'ottima combinazione.

HTML e CSS, strutturati come sono, ti costringono a pensare a schemi e ti tengono sotto controllo. È più facile pensare alla modularità quando si creano componenti HTML che possono essere facilmente copiati, duplicati e riempiti con dati dinamici mantenendo la stessa struttura. Se vuoi creare una modifica specifica, devi scegliere esplicitamente come target quell'elemento o aggiungere un'altra classe CSS.

Quando modifichi le intestazioni, a meno che non vengano sovrascritte, saranno coerenti in tutto il sito. Lo stesso vale per gli altri elementi. Questo tipo di pensiero ti costringe a standardizzare, raggruppare elementi comuni, riutilizzare il più possibile elementi già stilizzati e, soprattutto, mantenere tutto modulare.

Con un'unica dichiarazione CSS, puoi modificare il riempimento sui pulsanti per target touch migliori e testare direttamente su un telefono cellulare, tablet e desktop. Questo non è facile in Photoshop o Sketch perché altri elementi non sono consapevoli l'uno dell'altro nel layout e devi riorganizzare gli oggetti ogni volta che ridimensioni qualcosa.

Vuoi provare una diversa combinazione di colori dell'intestazione? Lavorando con poche righe di codice CSS, le modifiche sono visibili istantaneamente su tutti i modelli HTML, su tutti i dispositivi e gli schermi. Questo tipo di flessibilità non può essere emulato facilmente quando hai 20 prototipi statici. Certo, potresti usare "simboli" in Sketch o Adobe XD per componenti riutilizzabili, ma non sono versatili come CSS.

In questa fase dovranno essere prese diverse decisioni tecniche. Le domande a cui sarà necessario rispondere sono:

• Utilizzerai un preprocessore CSS? (consigliato)
• Che tipo di griglia reattiva utilizzerai per il layout?
• I caratteri che desideri utilizzare sono disponibili per l'acquisto? Il cliente ha il budget per i caratteri Web premium o tornerai a utilizzare i caratteri Web gratuiti disponibili?
• Utilizzerai icone multicolori o monocolore? Le dimensioni variano in tutto il sito? In seguito, fai affidamento su icone disegnate su misura o su un pacchetto di icone già esistente? Quali dimensioni dovranno contenere le tue icone?

Il problema con i caratteri e il web design reattivo

La scelta dei caratteri per un progetto di web design reattivo può essere difficile. Ci sono molte possibilità e altrettante insidie. Poiché il design verrà utilizzato nel browser, questo è il posto migliore per provarli. La leggibilità dei caratteri può variare in base a dimensioni, peso, colori e rendering, quindi, provando i caratteri direttamente nel browser, i designer possono assicurarsi che le cose appaiano a posto e che le aspettative desiderate siano soddisfatte.

Esistono molti strumenti online per selezionare e testare i caratteri e provare le combinazioni di caratteri. Su Typetester e Typecast è possibile trovare e testare diversi tipi di carattere da vari servizi e fonderie. Quando si lavora con un servizio di abbonamento di font specifico come Typekit o Fonts.com, i designer possono generare font e testare direttamente i modelli di pagina. Generare un pacchetto Typekit con nuovi font è semplice e veloce e puoi facilmente vedere come determinati font influenzeranno le prestazioni delle pagine web.

Icone che si adattano allo stile del marchio

Se si disegnano icone personalizzate, sarà necessario definire la dimensione, la griglia e lo stile. Lavorando in Illustrator, ogni tavola da disegno rappresenterebbe un'icona, ad esempio. Le icone possono essere facilmente esportate da Illustrator come SVG o PNG, che possono essere successivamente trasformate in un carattere icona con servizi come Icomoon. Si consiglia di utilizzare le icone vettoriali (SVG) perché i vettori sono indipendenti dalla risoluzione, quindi non ci sono preoccupazioni su come vengono visualizzati sugli schermi ad alta definizione (Retina).

Una guida di stile e CSS per tenere sotto controllo il processo di progettazione del sito web

Anche se progettiamo nel browser, con dozzine di modelli e componenti potremmo potenzialmente perdere traccia di dove viene utilizzato qualcosa e in che modo. È una buona idea creare una guida di stile di tutti i componenti come repository centrale. Modelli di pagina specifici verranno creati da questa guida di stile combinando componenti ed elementi dell'interfaccia utente in pagine Web.

I componenti dell'interfaccia utente possono essere cose come l'impaginazione, l'elenco dei prodotti, la galleria di immagini, le finestre modali, gli elementi dei moduli, ecc. e vengono utilizzati come elementi costitutivi per i modelli. Tenere tutto in un unico posto è davvero utile quando è il momento di testare la build di un componente dell'interfaccia utente specifico.

Con CSS, è consigliabile separare gli stili dei componenti in file separati. Ad esempio, lo stile di impaginazione sarà in _pagination.scss , gli elementi del modulo in _form.scss e tutti questi file saranno inclusi in un unico file SCSS con altri file (variabili, mixin, ecc.).

Sebbene style.scss possa essere composto da dozzine di "piccoli file", quando più persone stanno lavorando allo stesso progetto, è più facile tenere traccia delle modifiche (utilizzando o meno il controllo del codice sorgente) se tutto è separato in blocchi più piccoli. È importante continuare a mantenere la guida di stile dopo che il progetto di progettazione del sito Web è in produzione, poiché il team dovrà tenere traccia di ogni componente del sito.

Utilizzo di fogli di stile – CSS modulare

Dal punto di vista dello sviluppo, ci sono molti approcci alla scrittura di CSS modulari. I più conosciuti sono SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​e OOCSS (Object Oriented CSS). C'è molto da imparare, anche se finisci per sviluppare il tuo approccio. A questo punto, dovresti avere una bella raccolta di componenti dell'interfaccia utente e pagine Web, che ti consentiranno di creare facilmente nuove pagine Web. Puoi copiare e incollare elementi dalla guida di stile e riordinarli secondo necessità.

Poiché tutto è modulare, non devi preoccuparti del design e della coerenza del codice; ma non dimenticare che se modifichi un componente dell'interfaccia utente a livello di sistema, dovrai aggiornare la guida di stile con le modifiche (o aggiungere il nuovo componente). Per mantenere tutto organizzato, è meglio utilizzare una sorta di approccio di creazione di modelli/automazione per lavorare su pagine Web come Gulp o Grunt.

Qual è il prossimo? Progettare nel browser

Ora hai un repository centrale di componenti dell'interfaccia utente, ogni elemento documentato e pagine Web create da quei componenti. Da questo momento in poi, è più che probabile che i progettisti non avranno più bisogno di aprire i loro strumenti di progettazione preferiti poiché la maggior parte della "progettazione" verrà eseguita direttamente nel codice e visualizzata in anteprima nel browser.

Non sei sicuro di come una modifica specifica influirà sul design? Ora puoi visualizzare in anteprima il tuo design su diversi dispositivi e browser contemporaneamente per vedere come un carattere è cambiato su un'intestazione o la modifica delle dimensioni e del colore di un pulsante influirà sul design.

Quando si utilizzano caratteri Web personalizzati, in che modo l'aggiunta di più pesi dei caratteri influirà sulle prestazioni di caricamento della pagina? Possiamo testare le prestazioni delle pagine Web in corso utilizzando servizi come WebPageTest e prendere decisioni informate sui risultati effettivi. Non possiamo assolutamente farlo in Photoshop o Sketch.

Lavorare con HTML e CSS e lavorare nel browser potrebbe non essere adatto a tutti i designer durante il processo di progettazione di un sito web. Ma se i designer si preoccupano davvero dell'aspetto del loro lavoro su vari dispositivi e dimensioni dello schermo, devono assicurarsi che sia sempre perfetto. Qualcosa che sembra sorprendente come un modello di design statico potrebbe sembrare tutt'altro che desiderabile se visualizzato in un browser Web su un dispositivo mobile. Sarebbe opportuno che i designer esperti costruissero e testassero progetti web in un ambiente in cui tutti li vedranno... nel browser.

Ulteriori letture sul blog di Toptal Design:

• Design reattivo: migliori pratiche e considerazioni
• Come progettare una pagina di destinazione efficace
• La guida definitiva alla progettazione di siti Web di e-commerce
• I fondamenti della riprogettazione del sito Web: un caso di studio
• Le forze trainanti del design: un case study sulla riprogettazione del sito Web