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
3 Marzo 2016
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
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.
- 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.
Elementi fondamentali del web design, strumenti e linguaggi
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.