Web design

Web design: cos’è, a cosa serve e come si fa

Architettura del web, backend e frontend, UI e UX design: una guida per capire una delle professioni del web più richieste e affascinanti

Vuoi dire basta a design noiosi e siti poco usabili? Scopri il Corso Online in User Experience Design di Ninja Academy.

Web design significa, letteralmente, progettare siti web, curare lo sviluppo di un progetto sul web destinato a comunicare del contenuto all’utente. Definizione, questa, che lascia un po’ il tempo che trova se non si vanno ad indagare le competenze coinvolte in un lavoro di progettazione web, se non si affrontano le funzioni di un’interfaccia web, se non si rivolgono tutte le attenzioni, quando si fa web design, alle attese di chi un sito lo usa. Dell’utente, quindi, destinatario del lavoro del web designer.

Web design: progettare e realizzare siti web

Webdesign

Parlare di web design significa coinvolgere diverse professionalità del web: la sezione italiana dell’IWA/HWG, Associazione internazionale dei professionisti del web, stabilisce che ad oggi sono 24 i profili professionali Europei ICT di terza generazione: tra questi ce ne sono diversi che attengono alla sfera del web design, dall’User Experience Designer, al Frontend Web Developer, all’Information Architect.

Backend vs frontend, develoment vs design, UI vs UX

Oggi i confini tra ruoli una volta ben distinti, quando si lavora nel web, si sono fatti più liquidi. Programmatori e sviluppatori di interfacce web continuano sì a svolgere compiti diversi, ma spesso utilizzando i medesimi linguaggi, tanto da confondere le carte frequentemente sui compiti loro assegnati.

Chi lavora prevalentemente nel backend, ossia alle spalle di un sito, prevalentemente è il programmatore, un developer, con le mani “sotto il cofano”, su server e database, esperto in linguaggi di programmazione come PHP o ASP per citare i più noti.

Gestire il frontend, ciò che vede l’utente di un sito, è invece appannaggio esclusivo del designer, web designer in questo caso, che si occupa di realizzare la grafica, applicarla al web e renderla fruibile a tutte le esigenze del navigatore. E qui entrano in gioco le difficoltà dovute alla varietà di sistemi operativi, browser, dispositivi, dimensioni, comportamenti.

Hic sunt leones: interfaccia utente ed esperienza utente, UI (User Interface) e UX (User eXperience). Lo UX design consiste nel capire quali scelte dovrà effettuare l’utente all’interno di un sito e in che modo reagirà ad ognuna di esse, così che chi progetta un’interfaccia possa consentirgli un’esperienza soddisfacente.

Lo UI design è invece la traduzione in atti concreti tecnologici che permette all’uomo di relazionarsi con un prodotto multimediale, grazie all’intervento di chi realizza il sito. UX e UI design non vanno confusi, rappresentano due momenti diversi della produzione di un’interfaccia, ma sono anche due ambiti che lavorano insieme per definire la relazione che l’utente avrà con il prodotto web.

Il web designer, sintetizzando, nell’assumere il ruolo di UI designer deve fare attenzione a:

  • tipografia ed interfaccia, affinché dialoghino bene tra loro nel comunicare un messaggio contenutistico al pubblico destinatario;
  • schema di colori, che sia chiaro e guidi l’utente senza confonderlo nella direzione giusta;
  • struttura del sito, immediatamente riconoscibile, in modo che nei pochi secondi che un visitatore dedica al progetto capisca subito cosa deve fare, ovvero dove debba cliccare.

La via maestra per un buon UI design consiste nel non dimenticare di essere un fruitore, prima che un creatore del web: se in un frontend un designer impiega due secondi a orientare il suo click, un utente medio se ne andrà prima di aver capito cosa fare.

Quando effettua operazioni di UX design, il web designer deve invece tenere in considerazione:

  • semplicità ed immediatezza di navigazione, quindi ottimizzare l’usabilità del prodotto;
  • orientamento dell’utente, evitare che si perda, fornire guide visive per incanalarne l’esperienza;
  • pilotare il click del visitatore velocemente e senza indugi verso l’obiettivo.

Inoltre, mai ignorare gli standard: se un bottone non ha la forma di un bottone, un player non ha il triangolino, un link non si differenzia dal resto del contenuto, l’utente non cliccherà. Il web designer ha fallito. Per fortuna, da qualche tempo, ci hanno pensato i big players a fornire how to per non compiere grossolani scivoloni. Uno di questi è Google con il suo Material design, che vedremo tra poco.

Stabilire che UI sia competenza del web designer e UX del developer sarebbe semplicistico e non corrispondente a realtà: il prodotto web ottimale è quello frutto delle competenze multiple di più interazioni umane possibili. Non esiterebbero agenzie web, se bastasse una sola figura professionale a decretare il successo di un prodotto web.

A definitiva conferma è sufficiente uno sguardo a una qualsiasi offerta di lavoro del settore: sempre più spesso chi cerca un professionista della progettazione e realizzazione di siti web chiede una figura che sappia svolgere contemporaneamente sia operazioni di web development che di web design -quando va bene; troppe volte si richiedono anche competenze di community manager, account, analista, esperto SEO e sviluppatore app; offerte che non troveranno mai risposta-. Anche perché, ormai, un ingegnere informatico o un architetto, un sistemista o un grafico, da soli, sono figure professionali troppo esclusive per un progetto web che voglia avere un ampio respiro in un mercato sempre più sfaccettato.

Come riporta Wikipedia, «Il Web Designer è la fusione dello UX designer e dello UI designer, è dunque la figura al centro della catena di produzione di una web agency, colui il quale (sotto la guida dell’Art Director) concepisce il design del progetto, inteso non solo nella sua mera estetica ma in maniera funzionale ed emozionale». Ecco perché questa professione si sta imponendo come una delle più ricercate sul mercato.

Elementi fondamentali del web design, strumenti e linguaggi

web design code

Non si produce un web design di qualità senza una conoscenza multisettoriale che vada dalla programmazione alla grafica ad altri ambienti con i quali l’esperienza prima o poi mette un web designer in contatto. Ma, soprattutto, bisogna amare la tipografia: elemento fondamentale del web, il carattere nella sua scelta, dimensione, colore, contribuisce in maniera essenziale a dare forma ai contenuti.

Ci sono parecchie differenze nell’uso della tipografia sul web rispetto alla carta stampata: chi progetta un sito web deve essere consapevole che formato, colore, contrasto e leggibilità saranno, in base al dispositivo con cui l’utente effettuerà l’accesso (che ovviamente non può conoscere, quindi deve prevedere ogni alternativa), gli strumenti che veicoleranno – o squalificheranno – il messaggio contenutistico.

Croce e delizia di ogni webdesigner, la tipografia è quindi un aspetto essenziale su cui un sito si gioca il primo impatto e la leggibilità, usando i font come strumento ma anche come elemento grafico.

Chiunque progetti siti web sa quanto le incompatibilità cross-browser possano rendere un lavoro difficile e i risultati frustranti, per questo due giganti di internet e del design, ossia Google e Adobe, sono venuti incontro agli architetti del web fornendo uno strumento che semplifica la loro attività e migliora l’esperienza dell’utente.

Chi volesse saperne di più può leggere “Webfonts: la tipografia di un sito migliora con Google e Typekit”.

Passando agli strumenti di lavoro più ampiamente utilizzati, sono essenzialmente software come editor per pagine web e fogli di stile e programmi di elaborazione grafica. Per una veloce panoramica sui più diffusi, blocchi note come Notepad++ o Sublime text su OS windows, Espresso o Coda su MAC e Gedit o Geany su GNU/Linux, grazie a sintassi e indentazione per una molteplicità di linguaggi, agevolano notevolmente la scrittura di codice markup come HTML o di stile in fogli CSS. Grafica raster o vettoriale può essere affrontata con i programmi della creative suite Adobe (PhotoShop, Illustrator) o con alternative libere come The Gimp – GNU Image Manipulation Program o Inkscape.

Accanto a questi più noti, una miriade di altri software che svolgono compiti analoghi, ognuno più o meno adatto alle esigenze di un particolare momento per un particolare compito. Attenzione, però, a non sopravvalutare i ferri del mestiere, tecnologia che non bisogna fare l’errore di rincorrere: i software servono a raggiungere un obiettivo e non importa chi usi quale né dove o come uno sia migliore di un altro. Un utente che affronta un’interfaccia non si domanda certo con quale tool sia stata sviluppata.

I linguaggi di base, pane quotidiano del web design, sono l’HTML per le pagine e il CSS per i fogli di stile collegati alle pagine, ma chiunque abbia dimestichezza con i CMS più diffusi un po’ di PHP lo avrà sicuramente masticato. E con la ricchezza di animazioni cui i nostri gusti si sono abituati, prima dell’avvento della combo HTML5/CSS3 molti webdesigner avranno trovato entusiasmate il Javascript utilizzando il framework jQuery (non che oggi sia caduto in disuso, anzi).

Con il passare degli anni sempre più utenti si sono trovati a improvvisarsi web designer grazie al recente fiorire dei più svariati compositori WYSIWYG, site builder, editor drag and drop e cms con editor friendly user; spesso anche con buoni risultati: oggi chiunque può costruire il suo sito “in casa” scegliendo un tema e personalizzandolo a suo piacimento, con pochi euro, o addirittura gratuitamente, sui principali CMS come WordPress o Blogspot, senza conoscere una riga di codice. Una piccola rivoluzione digitale che ha portato il contenuto in primo piano lasciando che il “lavoro sporco” lo facciano le automatizzazioni sempre più in voga nel web quasi 3.0.

L’influenza dei social network ha fatto il resto, con un democratico quanto anonimo appiattimento dello stile di ogni comunicazione sullo stesso registro visivo di interfaccia. Un vantaggio che ha dato possibilità anche a chi non poteva permettersi un proprio spazio web di dire la sua e allo stesso tempo ha dotato le aziende e chiunque altro volesse o potesse di un’opportunità in più: dimostrare una propria personalità all’interno di Internet staccandosi dai social per emergere con stile, distinguersi e stimolare un’utenza sempre più esigente. Chiaramente grazie a figure professionali che fanno del miglioramento della reputazione sul web delle aziende il proprio mestiere, web designer in testa.

Nuovi trend del web design nel 2016

Dal 1991 il web ne ha fatta di strada. Il web design con lui. Chi ha avuto la fortuna di assistere alla nascita di Internet ricorderà i primi siti simili a prodotti odierni privi di fogli di stile. Un digital designer tedesco, Fabian Burghardt, si è divertito a ricostruire un sito-tipo anno dopo anno in base alle tendenze del web design dei vari periodi in questo bel progetto.

La fisarmonica della storia ha prima popolato i siti di elementi per poi progressivamente eliminarli, dato ridondanza alle grafiche (ricordate gli effetti glass? le icone 3D? Ecco, passato. No, le GIF animate ancora non è il momento di appenderle al chiodo) eleggendo come faro la semplificazione del design (less is more), l’appiattimento grafico (flat design, come ha fatto Google col suo logo e con le icone geometriche pulitissime) e l’animazione degli elementi, tenendo come orizzonte il responsive design e gli standard imposti dai big players.

Elementi web di oggi e tendenze di domani

Recandosi in uno dei tanti siti che raccolgono esempi di web design e selezioni per premi di realizzazione siti web (awwwards per citarne uno tra i più importanti) ci si può fare un’idea di quali siano le tendenze attuali e i trend per il 2016.

  • La prima linea che salta agli occhi è l’influenza del responsive design, anche su versioni desktop di siti: tanta è la presenza di dispositivi mobili tra le mani del pubblico che quasi non ci si aspetta più di vedere un menu “esploso”, ecco perché l’hamburger menu – le tre barrette orizzontali sovrapposte da cliccare per espandere il menu – è ormai un elemento quasi irrinunciabile in un sito.
  • I consumi del web sono cambiati, negli anni, e oggi per mantenere un rapporto con un utente non si può sperare che sia questo a trovarci: bisogna cercarlo e, quando trovato, tenerselo stretto. Operazioni che attengono al campo del marketing e a competenze che un web designer può e deve conoscere, anche solo marginalmente, ma il suo compito è trovare il modo di agevolare chi lavora per catturare e gestire un’utenza. Una tendenza del web design che è sempre più raro non trovare nei moderni siti web è perciò un leads popup per ottenere contatti, permettere l’iscrizione di un utente, raccogliere informazioni. Meglio se i campi di input sono full screen.
  • Far atterrare un visitatore sulla propria pagina è il primo passo per raggiungere l’obiettivo che il sito si prefigge, ma il tempo di permanenza su una pagina di un qualsiasi utente medio è poco. Inutile frammentare i contenuti in troppe sezioni: vedremo sul web sempre più scroll page, lunghe e compatte, con tutte le informazioni concentrate verticalmente, che consentono di ottenere tutte le risposte in un solo luogo e in un solo indirizzo. Sempre più landing page che siti web, o meglio, landing page in aggiunta a siti web.
  • Tutto iniziò con Pinterest: il famoso mosaico, il template a blocchi che si ridispongono a seconda della superficie disponibile, dopo la fortuna dei primi anni non ha più abbandonato il web e ancora oggi i temi a blocchi (card style), con la loro grande adattabilità ai dispositivi mobili (si pensi alla popolarità del framework bootstrap) hanno ancora molto da dire e sicuramente lunga vita davanti.
  • Si chiama, in gergo, Hero image: è una grande immagine – o un filmato – a tutto schermo che fa da background al blocco di apertura di un sito. Cattura subito l’attenzione grazie all’alta qualità e al soggetto che rappresenta, oltre che alla posizione di primo piano, ed è consuetudine che contenga la call to action a fare qualcosa. Ultimamente se ne fa un uso sempre più intenso (anche in combinazione con l’effetto parallasse, che muove le sezioni con tempi di scorrimento diversi) e c’è da scommettere non vada in pensione troppo presto.
  • In quanto alle animazioni, con javascript o HTML5, nessuno può più farne a meno. Un sito statico e piatto non coinvolge e nessuno vuole più vederne, va da sé che si incontrano sempre maggiori ricchezze di loading animati, menu e navigazioni mobili, effetti visivi al passaggio sopra gli elementi o al click su di essi, gallerie di immagini e slideshow, interpolazioni di movimento e scorrimenti animati.

Responsive e Material design

material-web-design

Come sottolineano tutti i trend, è il design ispirato alla navigazione su dispositivi mobili la tendenza che guida ogni realizzazione di siti web. Analizzando solo il segmento italiano – che per accesso a Internet, purtroppo, è sotto la media europea – risultano per Audiweb (dati 2015) 30,6 milioni gli italiani 11-74 anni che dichiarano di accedere a Internet da smartphone (+19,5% in un anno) e 11,6 milioni da tablet (+27,4%).

I dati Censis di fine 2015 sottolineano inoltre che gli utenti Internet in Italia sono il 70.9% della popolazione. Tra i giovani, 9 su 10 sono connessi. Gli smartphone sono impiegati regolarmente da oltre la metà degli italiani (il 52,8%), e i tablet praticamente raddoppiano la loro diffusione e diventano di uso comune per un italiano su quattro (26,6%). Visti questi numeri, data la prevalenza di dispositivi mobili per l’accesso a Internet e il loro sicuro aumento da qui ai prossimi anni, non poteva essere altrimenti.

Web design su ogni dispositivo: una guida per un’interfaccia web a prova di Google

Ma in pratica, come si realizza un web design multidispositivo? Quali indicazioni tenere in considerazione non sapendo con quale device l’utente effettuerà l’accesso ad un sito? Ad esempio, quanto deve essere grande un’icona su un particolare smartphone? Quali colori adottare per i link attivi e inattivi? Dove posizionare informazioni e elementi grafici in uno spazio ridotto? Che dimensioni dare al font?

Queste e mille altre domande hanno ora una risposta nel Material Design, standard già impostosi a livello mondiale dal quale non si potrà più trascendere, dato che l’utente ha imparato in breve tempo ad attendersi questi modelli in una pagina web. Material Design è l’interfaccia di Android che Google applica ai suoi dispositivi, con l’obiettivo di fornire una base comune per sviluppare siti ottimali in ogni loro elemento grafico.

Dalle animazioni agli stili, dal template ai componenti, un completo how to non solo per quanto attiene ai dispositivi mobili ma per ogni prodotto web. Un lungo elenco di specifiche, fornitissimo di do e don’t, che un web designer dovrebbe inserire tra i suoi segnalibri e consultare quotidianamente.

Le interazioni nel responsive design hanno regole precise, le loro animazioni direzioni obbligatorie in ingresso e in uscita, e il touch – così come il click: su desktop, in questo caso, valgono le stesse regole del mobile – deve innescare reazioni previste e prevedibili, pena un deficit di usabilità che può spingere l’utente a lasciare la pagina.

Su Ninja Marketing ne abbiamo parlato illustrando la guida online al Material design scritta da Google stesso per insegnarci cosa fare e come farlo, se vogliamo realizzare siti all’altezza dei gusti dell’utenza che l’azienda di Mountain View ha forgiato.

Più web design per tutti

Magari non tutti lo sanno, ma un po’ di web design, visto quanto analizzato finora, in un modo o in un altro sono molti gli utenti che lo mettono in pratica. Chi attivamente e chi come tester, siamo tutti un po’ designer nel web di oggi. Soprattutto se vediamo la realizzazione di siti web con l’ottica con cui un web designer si orizzonta: rendere ogni giorno il web più bello, piccolo contributo per fare di Internet un posto migliore.