Design e creatività sono 2 facce della stessa medaglia. Anche nella costruzione di un sito web, per "design" possiamo avere diversi significati: in particolare stiamo parlando almeno sia dell'aspetto grafico che dell'aspetto di navigazione. Questo è un altro motivo per cui dobbiamo capire che rapporto ci deve essere tra design e creatività e perché il concetto stesso di creatività deve cambiare ed evolvere.
Pochi giorni fa, durante un corso, ci stavamo confrontando con alcuni ragazzi di un'altra agenzia di comunicazione sul trade-off tra estetica e funzionalità di un sito web. Esiste un sito perfetto? Se sì, come è fatto un sito perfetto?
Non è difficile rispondere alla prima domanda. Il sito perfetto esiste non in assoluto ma in relazione agli obiettivi che vuoi raggiungere. Quindi rigiriamo la domanda: quando hai disegnato il tuo sito, avevi chiaro in mente l'obiettivo che avrebbe dovuto soddisfare? O ancora, il tuo sito ti porta i risultati che ti aspetti? Diciamo che spesso un sito è disegnato perché "quello che abbiamo adesso non ci piace più" ma non è questo il motivo per cui cambiare un sito.
In realtà, per rispondere correttamente alla domanda sul sito perfetto, la risposta è no. Non esiste il sito perfetto, ma ci si può avvicinare con il duro lavoro e la sperimentazione (vedi ad esempio il growth hacking). Sicuramente per potersi avvicinare al sito perfetto, o al sito che risponda ai propri obiettivi, il primo passo è parlare la stessa lingua di chi vi disegnerà il sito web.
Quali sono i termini tecnici del web design? Qual è il dizionario del web designer? Come capire un web developer?
Agenzia di comunicazione, tra web designer e web developer
Le figure che lavoreranno al sito sono almeno due: un web designer e un web developer. In realtà esistono anche altre figure professionali che potrebbero entrare nel processo di creazione del sito web, ad esempio un UX designer (User Experience) o un interface designer ma non vorrei complicare troppo.
Nella configurazione minima del team di lavor, web designer e web developer dovrebbero prendere parte alla costruzione di un sito perché ognuno apporta il suo contributo di professionalità. Quando lavora uno solo dei 2, tendenzialmente, si avrà uno sbilanciamento su grafica, creatività o design oppure sulla parte tecnologica.
Design e creatività: coordinare web design e web development
Eccoci. Ci hai mai parlato con un web dev? Non è sempre facile capirsi con chiarezza. Ecco i termini pricipali a cavallo tra web design e web development che servono per iniziare e tenere sotto controllo un progetto di sviluppo di un nuovo sito.
Redirect 301
Si tratta di un reindirizzamento permanente da un url ad un altro. Si usa soprattutto quando si cambia l'indirizzo di una pagina già pubblicata oppure quando non vogliamo che quella pagina sia più visibile. Qui la parola importante è "permanente", stiamo dicendo a Google che quella pagina non esiste più e che se la deve dimenticare.
Errore 404
Lo incontri quando c'è un url rotto, quando un link porta ad una pagina inesistente per qualsiasi motivo (l'indirizzo è sbagliato o la pagina non è pubblicata). Per rimanere in tema di design, la pagina di atterraggio di un 404 (la più classica dei "ops, questa pagina non esiste") dovrebbe in realtà dare la possibilità all'utente di scegliere cosa poter fare (torna alla home, guarda contenuti interessanti) per rischiare di perdere meno traffico possibile.
Call to action (CTA)
Una CTA (Call to action) è un bottone che invita l'utente a compiere una determinata azione. Su una landing page o in una qualsiasi altra pagina dove l'obiettivo che gli abbiamo assegnato è chiaro, solitamente c'è una sola CTA (o più CTA, anche diverse tra loro, che rimandano alla stessa azione). L'obiettivo è quello di essere chiaro con l'utente: voglio che tu faccia questo. Non vogliamo confonderlo con altre cose, anche se spesso la tentazione è forte. Un CTA è fatta proprio come questo bottone giallo qui sotto.
Content Management System (CMS)
Il CMS è una piattaforma di back-end che consente di gestire i contenuti del tuo sito web senza la necessità di toccare direttamente il codice. Un Content Management System è quindi uno strumento oggi fondamentale per la gestione in autonomia del proprio sito. Aggiungere pagine, gestire il blog, modificare le immagini. Per intenderci, Wordpress è un CMS, Prestashop è un CMS.
Wireframe
Si tratta del disegno di una landing page, di una pagina web o di un sito nella sua versione diciamo scheletrica: senza grafica, senza progettualità, solo la forma della pagina (lorem ipsum, placeholder per le immagini etc). Ha lo scopo di concordare in via preventiva la struttura di pagine e sito e il loro contenuto (lo scheletro), consentendo di concentrarsi sulla sostanza e non sulla forma.
Architettura dell'informazione
È un modello informativo del sito, che solitamente si esprime in un menu di navigazione e in un wireframe di ogni pagina del sito. In definitiva si tratta del sito che stiamo disegnando in forma embrionale, senza grafica. La grafica è la cosa che arriva per ultima, anche se è una cosa che sembra difficile da capire. La grafica, che per ogni azienda è la cosa più importante, per chi disegna un sito è la cosa che ha priorità inferiore.
Dominio
Molto semplicemente il dominio è l'indirizzo univoco che, se digitato in un browser, porta irrimediabilmente al sito web corrispondente. Meno semplicemente abbiamo 3 livelli di dominio. Il primo livello definisce l'appartenenza geografica del sito (.it, .com, .eu etc). Il dominio di secondo livello è il nome del sito (ofg nel caso). Il dominio di terzo livello è un sotto dominio del secondo e viene indicato come una o più parole seguite da un punto che lo separa dal dominio di secondo livello (blog.ofg.it nel caso di questo sito).
IP e DNS
L'IP è il codice numerico del server che definisce un sito web. Avendo questa forma xxx.xxx.xx.xx (dove le "x" sono numeri) rimane difficile da ricordare per cui ecco che entra in gioco il DNS (Domain Name Server) che si presenta agli utenti con la forma classica di un URL (www.ofg.it) ed è un sistema di reinidirizzamento che associa in modo univoco l'URL scelta al giusto server.
Menu di navigazione
È il menu che ci guida all'interno del sito. Il menu prevede ovviamente tutte le pagine (o almeno le pagine principali) e le pagine di categoria. Le categorie non sono da sottovalutare perché una categorizzazione poco chiara per l'utente non gli consente di compiere le azioni che vogliamo che faccia sul nostro sito.
- Hamburger Menu. Il menu di navigazione, nella sua versione responsive (anche se oggi è usato anche nella versione desktop), spesso si chiama menu "a panino" e si presenta con 3 linee che, se cliccate, aprono un menu più ampio di solito in overlay.
- Sticky menu. Quando il menu di un sito resiste allo scroll e rimane visibile, solitamente appiccicandosi in alto allo schermo, parliamo di sticky menu.
Overlay
Apertura di un popup che consente di compiere delle azioni diverse rispetto a quelle previste nella pagina, senza cambiare pagina.
Navigazione (elementi di navigazione)
Tipicamente stiamo parlando del menu di navigazione ma anche di tutti quegli elementi che aiutano a navigare il sito web (ad esempio i link contenuti nel footer).
Responsive design
È la caratteristica dei siti che si adattano alla dimensione dello schermo su cui sono visualizzati, dove gli elementi del sito vengono ricombinati rispetto all'ordine originale, garantendo la migliore visibilità e lettura. Nell'epoca del mobile first è una caratteristica indispensabile.
Usabilità e user experience
Spesso confusi e sovrapposti, parliamo di usabilità quando vogliamo definire la capacità di un sito di svolgere la sua funzione e portare senza frizioni gli utenti che lo navigano al raggiungimento degli obiettivi (solitamente conversioni). La user experience è un concetto più ampio che comprende anche emozioni, sensazioni, il senso che viene attribuito dall'utente all'esperienza stessa valutata in termini di semplicità, efficienza, utilità.
Luca Bizzarri