Web Designer: strumenti e problematiche di sviluppo
Il Web Designer
Il Web Designer è la figura professionale che si occupa della progettazione e
dello sviluppo dell'interfaccia grafica di un sito web. Per svolgere questo lavoro è
necessario avere una molteplicità di competenze sia a livello di linguaggi di
markup (prevalentemente HTML e CSS) che di grafica, ma anche avere una
profonda conoscenza di concetti quali usabilità ed accessibilità.
Un lavoro di squadra
In realtà, in situazioni di sviluppo particolarmente semplici, il Web Designer può
occuparsi in prima persona di tutte le fasi del progetto ma in situazioni più
complesse deve necessariamente avvalersi del supporto di un team. Il Web
Designer è spesso una delle figure di riferimento all'interno di una Web Agency
al cui interno è possibile trovare differenti professionalità come:
● Content Editor - E' colui che gestisce i contenuti del sito: definisce una
strategia editoriale e scrive i contenuti in prima persona o avvalendosi
dell'aiuto di un copywriter. ● Developer - E' colui che sviluppa gli aspetti dinamici di interazione con
l'utente e l'elaborazione dei dati svolgendo un lavoro di programmazione
vero e proprio. Deve conoscere uno o più linguaggi di sviluppo web sia
lato server (ad esempio PHP, JSP o ASP) che lato client (Javascript) e
deve saper utilizzare i più diffusi DBMS (MySQL, SQL Server, ecc.).
● Graphic Designer - E' colui che realizza il bozzetto grafico del sito, realizza
gli elementi grafici (ad esempio il logo) e decorativi. Deve conoscere e
saper utilizzare software di elaborazione grafica (come ad esempio
Photoshop) e deve avere delle competenze in ambito di design, conoscere
i principi dell'impaginazione e della composizione grafica, nonchè la teoria
dei colori.
● Sysadmin - E' colui che si occupa della gestione dei sistemi informatici:
effettua il setup dei server web, gestisce piattaforme cloud, installa librerie
e risolve eventuali problemi legati ai sistemi o alle Reti.
● Web Marketer - E' colui che si occupa degli aspetti legati alla visibilità del
sito: si occupa della SEO, delle strategie di posizionamento sui motori di
ricerca, dei social media, ecc.
1 rif: www.mrwebmaster.it
Tipologie di web
Il Web Designer, essendo colui che studia e realizza l'involucro di un sito web,
prima di cimentarsi col codice, deve analizzare con attenzione le richieste che gli
sono state fatte dal cliente e capire, prima di tutto, che tipo di sito dovrà
sviluppare. Esistono, infatti, diverse tipologie di siti web caratterizzate da aspetti peculiari
che devono essere tenuti in debita considerazione soprattutto nella fase
preliminare, quando cioè si concepisce il progetto e lo si plasma nelle sue
fondamenta.
Sarebbe sbagliato, volendo fare un esempio banale, approcciare il lavoro per lo
sviluppo di un e-commerce come se fosse stato richiesto un sito aziendale o un
blog. Questo perchè cambiando la finalità del sito cambia anche il modo di
presentare i contenuti e di conseguenza anche la disposizione degli elementi sulla
pagina.
Vediamo di riassumere schematicamente le diverse tipologie di siti web coi quali
un web designer dovrà cimentarsi:
● Blog - E' una sorta di diario nel quale l'autore scrive degli articoli che
possono poi essere commentati dagli utenti che si riuniscono attorno al
Blog.
● Community - E' un sito attorno al quale si costituisce una comunità digitale
di persone interessate ad entrare in contatto tra loro attraverso vari
strumenti come forum, chat, messaggi privati, ecc.
● E-commerce - Un sito di commercio elettronico è un negozio on-line
attraverso il quale è possibile acquistare prodotti e/o servizi di vario tipo e
natura; questa tipologia di siti è costruita attorno a dei software che
gestiscono in modo automatico diversi aspetti come l'acquisizione
dell'ordine, il pagamento, la fatturazione, ecc.
● E-zine - Una rivista digitale è qualcosa di molto simile ad un Blog: si
differenzia da questo in quanto prevede la collaborazione di una molteplicità
di autori ed ha, solitamente, una veste più formale, strutturata e
"professionale".
● Gestionali - Si tratta di piattaforme informatiche dedite alla gestione di
dati di vario tipo; si pensi ad esempio ai software per la gestione del
magazzino, per la fatturazione. Normalmente, in questo contesto, il web
2 rif: www.mrwebmaster.it
designer è chiamato per disegnare l'interfaccia utente e renderla il più
possibile intuitiva ed usabile.
● Portale - E' definito portale un sito web che consente di fruire di una
molteplicità di servizi eterogenei e costituisce la "porta d'accesso" a diverse
risorse. Si distingue tra portali "orizzontali" che raccolgono contenuti e
servizi per un pubblico eterogeneo (si pensi, ad esempio, a Libero e Virgilio)
e portali "verticali" che, invece, si concentrano su tematiche precise di un
ben delimitato segmento di utenza (come, ad esempio, Mr.Webmaster).
● Portfolio - E' una tipologia particolare di sito web il cui scopo prevalente è
di mostrare al pubblico una serie di lavori svolti da un professionista (ad
esempio un fotografo o un artista) o da un azienda.
● Sito Corporate - E' il classico sito aziendale, cioè un insieme di pagine web
che hanno lo scopo di presentare un'azienda, la sua storia e i suoi servizi.
● Sito Personale - Scopo di questa tipologia di sito web è di fornire al
proprietario una forma di visibilità on-line. Può avere finalità differenti, sia
professionali (si pensi ad esempio al sito di un professionista) che amatoriali
(siti che parlano di un hobby o di altre tematiche "personali").
Ma quali sono gli strumenti del Web Designer? Quali competenze deve avere chi
vuole intraprendere questa carriera?
Abbiamo visto che il Web Designer normalmente è una figura inserita in un team
ampio e strutturato in quanto gli aspetti da considerare quando si crea un sito web
sono molteplici. Volendo restare aderenti alla definizione, il Web Designer è colui
che traduce in codice il concept grafico ideato dal graphic designer. Spesso,
tuttavia, queste due figure si fondono e pertanto il Web Designer è colui che si
occupa sia del progetto grafico che della sua realizzazione.
Dal punto di vista prettamente tecnico, il Web Designer deve conoscere tutte
quelle tecnologie che gli consentono di tradurre in pratica le idee ed i bozzetti
grafici che ha realizzato in prima persona o che gli sono stati consegnati dal
collega preposto al concept grafico.
Strumenti
Se venisse chiesto di identificare le tre tecnologie sulle quali si fonda lo sviluppo di
un portale internet la risposta da dare è: HTML, CSS e Javascript; questi
strumenti ricoprono tutti gli aspetti che ruotano attorno ad una pagina web, dalla
sua componente strutturale, alla sua disposizione, al mondo in cui questa deve
reagire di fronte a specifici eventi, siano essi scatenati dall’utente, dal browser o
da elementi della pagina.
3 rif: www.mrwebmaster.it
HTML
Nasce nel 1992 e in 20 anni ha subito una marcata evoluzione.
● In principio vigeva l’ipertesto: documenti, principalmente testuali, collegati
fra loro da link che l’utente poteva seguire cliccando. La finalità era
completamente informativa ed ogni utente poteva accedere allo stesso set
di informazioni, il web era un gigantesca “enciclopedia libera” (più o meno
attendibile).
● Oggi il concetto di navigazione è affiancato da quello di azione e siamo
passati dall’ipertesto a vere e proprie applicazioni web, i cui dati sono
prodotti.
Nonostante l’imponente cambio di paradigma l’HTML del 1992 resta la base solida
dell’intero Web; ci sono nuove possibilità, come il poter aggiungere video nelle
pagine, ma la sintassi e gli elementi principali sono rimasti praticamente invariati.
Ad essere cambiato radicalmente è l’approccio degli sviluppatori che, per i quali
l’HTML ha assunto esclusivamente il ruolo di strumento per definire la struttura e il
contenuto della pagina, non la sua rappresentazione grafica.
Utilizzando solo l’Html per creare un sito si rimarrebbe probabilmente delusi… il
risultato infatti è un ammasso disordinato di testo, liste e aree di inserimento che
si susseguono senza coerenza. Per dare un po’ di stile a quanto creato, occorre
utilizzare i fogli si stile ( CSS).
CSS
I CSS sono un insieme di modificatori di proprietà come dimensione, posizione,
colore e altre. Ogni modificatore viene applicato a specifici elementi della pagina
web, identificati attraverso l’uso dei selettori. Facciamo un esempio:
.commento { width: 100px; }
in questo caso impostiamo una larghezza di 100px per tutti gli elementi della
pagina il cui attributo class sia uguale a "commento".
La lista dei selettori è molto vasta, così come quella delle proprietà utilizzabili.
Javascript
Non bastano poche righe per introdurre quello che a tutti gli effetti si presenta
come un completo linguaggio di programmazione. Per ora basti sapere che la sua
funzione più classica è quella di poter eseguire azioni allo scatenarsi di specifici
eventi, come l’invio di un form, il movimento del mouse, il click su di un pulsante
e così via.
Consente quindi di:
● Accedere e modificare elementi della pagina HTML
● Reagire ad eventi generati dall’interazione fra utente e pagina
● Validare i dati inseriti dall’utente
● Interagire con il browser: determinare il browser utilizzato e la dimensione
della finestra in cui viene mostrata la pagina, lavorare con i cookie ecc.
4 rif: www.mrwebmaster.it
CMS Un altro requisito tecnico richiesto al bravo web designer moderno consiste nella
conoscenza dei più popolari CMS (Content Management System). Tra i tanti
software di questo tipo è importante lo studio del funzionamento di WordPress,
Drupal, e Joomla. Nel corso della carriera di Web Designer, infatti, capiterà
spessissimo di doversi confrontare con questi software per la gestione dei
contenuti che oggi costituiscono la base di una grandissima percentuale dei siti
web disponibili in Rete.
Attività di Web Design in ottica SEO
Attività compiute dal Web Designer che hanno un riflesso più o meno diretto sul
SEO:
● creare un layout snello e veloce da caricare ha dei riflessi sul
posizionamento dell'intero sito web
● studiare un design gradevole e fruibile aumenta il tempo di permanenza
sulla pagina e riduce il bounce rate (l’utente abbandona il sito dopo aver visitato
una sola pagina) che è uno dei fattori negativi nell'ottica della SEO
● realizzare un design cross-device (utilizzando, ad esempio, la tecnica del
responsive design) ha dei riflessi positivi sul traffico di ricerca proveniente
dai dispositivi mobili
● la corretta suddivisione dei contenuti della pagina in aree ben delimitate
(meglio ancora se facendo uso dei nuovi tag semantici di HTML5) è
piuttosto importante in quanto consente agli spider di identificare con
chiarezza la struttura della pagina web
● definire correttamente i menu è determinante: è importantissimo, infatti,
che la struttura del menu sia chiara e che le varie sezioni del sito siano
organizzate in modo logico e gerarchico e siano raggiungibili attraverso
una corretta organizzazione dei link di navigazione
● una corretta struttura per gli heading (i tag <h1>, <h2>, ecc.) è
fondamentale per il buon posizionamento di un contenuto web
● l'utilizzo di tecniche obsolete (ad esempio Flash) o l'errata
implementazione di sistemi di gestione dei contenuti (come, ad esempio,
l'utilizzo di contenuti "nascosti" non adeguatamente configurati) possono
comportare gravi problemi in ottica SEO.
Il compito del Web Designer, quindi, non può e non deve trascendere da questi
aspetti anche se, come detto, non gli competono direttamente. Nell'ottica di un
progetto complesso, pertanto, è buona norma che il Web Designer sia affiancato
dal Web Marketer affiché talune scelte siano condivise ed orientate verso
comportamenti virtuosi in ottica SEO. In progetti più semplici, invece, è buona
regola che il Web Designer conosca e rispetti autonomamente alcuni principi e
regole basilari della SEO in quanto, in caso contrario, si rischia di affossare un
progetto web ancora prima del suo lancio.
5 rif: www.mrwebmaster.it
Usabilità e accessibilità
Usabilità
Con il termine usabilità, nel web design, s'intende la capacità di una pagina web
di soddisfare i propri utenti dal punto di vista della semplicità di utilizzo.
L'usabilità, quindi, può essere definita come il metro di soddisfazione dell'utente
quando si relaziona con un'interfaccia: tanto più questa sarà semplice ed
intuitiva e tanto maggiore potrà essere considerata la sua usabilità.
Affinché un sito web risulti usabile è molto importante che chi progetta
l'interfaccia sia in grado di "mettersi nei panni" del futuro utilizzatore riuscendo,
pertanto, a realizzare dei meccanismi di utilizzo il più possibile intuitivi e
coincidenti con le aspettative e le abitudini di quest'ultimo.
Un sito web, quindi, si dice usabile quando:
● è stato ridotto al minimo lo sforzo cognitivo dell'utente per comprendere la
logica del del sito (l'interfaccia è facilmente comprensibile) ● è stata ottimizzata la cosiddetta curva di apprendimento riducendo al
minimo i tempi e gli sforzi necessari ad "interiorizzare" i meccanismi di
funzionamento (l'interfaccia è di semplice apprendimento); ● è stato ridotto al minimo lo sforzo richiesto all'utente per utilizzare il sito
web (l'interfaccia è facilmente utilizzabile).
In estrema sintesi, quindi, un sito web si dice usabile quando è facile da capire,
veloce da apprendere e semplice da utilizzare.
In termini pratici, ciò si traduce in diverse azioni da parte del Web Designer
come, ad esempio:
● disporre gli elementi della pagina in modo logico, dando la precedenza alle
informazioni essenziali rispetto a quelle ausiliarie
● evitare ambiguità e rispettare convenzioni logiche e cromatiche diffuse (si
pensi, ad esempio, all'utilizzo del colore rosso per segnalare errori)
● studiare l'interfaccia in relazione del target e delle attese capacità
cognitive (si pensi, ad esempio, ad un sito destinato ad un pubblico di
bambini).
Accessibilità
Strettamente connesso al usabilità è il concetto di accessibilità il quale
definisce, relativamente al web design, la capacità di una pagina web di essere
utilizzata da diverse tipologie di utilizzatori.
Il concetto di accessibilità, nel web design moderno, è duplice:
● consentire l'accesso ai contenuti anche ad utenti con disabilità
● consentire l'accesso ai contenuti indipendentemente dallo strumento
utilizzato (computer, tablet, smartphone, SmartTV, ecc.).
L'accessibilità, quindi, attiene a due ordini di problemi distinti ed ha la finalità
ultima di eliminare ogni "barriera tecnologica" che possa limitare, per problemi di
natura personale o di peculiarità dello strumento utilizzato, la fruizione dei
contenuti.
6 rif: www.mrwebmaster.it
Il bravo Web Designer, quindi, deve tenere in debita considerazione questo
fondamentale concetto già in fase di progettazione del sito web ed adottare degli
accorgimenti quali:
● utilizzare un markup sintatticamente corretto con codice HTML e CSS
valido
● operare una netta separazione tra la struttura (HTML) della pagina e la
sua presentazione (CSS)
● prevedere un sistema di presentazione dei contenuti adattivo, cioè in
grado di adattarsi alle caratteristiche dello strumento di fruizione utilizzato
dall'utente
● utilizzare sempre un testo alternativo per le immagini e gli elementi
multimediali
● non utilizzare frame
● prestare attenzione nell'uso dei colori e degli sfondi:
○ assicurarsi che vi sia un sufficiente contrasto tra il colore di sfondo e
gli elementi di testo
○ evitare di utilizzare immagini di sfondo per i box testuali in quanto
ne comprometterebbero la leggibilità
○ assicurarsi che comandi e funzioni del sito siano comprensibili anche
se venissero privati del colore (si pensi, ad esempio, a due pulsanti
con la scritta "clicca qui" caratterizzati dai colori verde e rosso
rispettivamente per la conferma e l'annullamento di un'operazione:
cosa succederebbe se un utente non potesse vedere quei colori?)
● prestare attenzione alle dimensioni degli elementi che, in ogni contesto,
devono risultare facilmente fruibili (il testo, ad esempio, deve essere
leggibile anche su display molto piccoli come quelli di uno smartphone).
E' bene precisare che il concetto di accessibilità è stato fatto proprio anche dalla
normativa italiana mediante la cosiddetta Legge Stanca del 9 Gennaio 2004 che
prevede, a pena di nullità dei contratti sottoscritti per la loro realizzazione, la
piena accessibilità per i siti web delle Pubbliche Amministrazioni e degli enti
pubblici ed anche privati concessionari di servizi pubblici.
Scopo di questa normativa è quello di dare piena attuazione al principio di
uguaglianza sancito dall'art. 3 della Costituzione al fine di garantire il diritto di un
pieno accesso ai servizi informatici e telematici della pubblica amministrazione
anche da parte delle persone disabili.
7 rif: www.mrwebmaster.it
Siti web cross-browser e cross-device
Cross-browser
Una pagina web si dice cross browser quando il suo aspetto ed il suo
funzionamento non mutano al cambiare del software di navigazione utilizzato
dall'utente. Oggi, infatti, il mercato dei browser è molto ricco e frammentato
pertanto è necessario prestare attenzione affinchè il sito possa essere fruito
indifferentemente con un browser o con un altro in quanto, purtroppo, non
sempre questi software si comportano alla stessa maniera nell'interpretare il
codice HTML, i CSS e le istruzioni Javascript.
Se fino a qualche anno fa non era insolito trovarsi di fronte a siti web che si
dichiaravano "ottimizzati per Internet Explorer", oggi, nel web design moderno,
simili avvertimenti non sono più accettabili e pertanto viene chiesto al Web
Designer uno sforzo supplementare sia in fase di sviluppo che di test.
E' bene precisare che il problema della compatibilità cross browser deve essere
affrontato sotto due diversi punti di vista; per poter essere definito cross
browser, infatti, un sito web deve poter essere fruito mediante:
● differenti software (IE, Firefox, Chrome, Safari, Opera, ecc.);
● differenti versioni dello stesso software (ad esempio IE7, 8, 9, 10, ecc.).
Cross-device
Un secondo ordine di problemi che attanaglia i Web Designer riguarda la
compatibilità delle pagine web con la moltitudine di device oggi disponibili per la
loro fruizione.
Se fino a qualche tempo fa, infatti, il problema era semplicemente quello di
rispettare le differenti risoluzioni dei vari monitor in commercio, oggi la
questione si è fatta molto più complicata: una pagina web, infatti, può essere
visualizzata non solo mediante i classici computer ma anche attraverso uno
smartphone, un tablet o altri device in grado di connettersi ad Internet (si pensi,
ad esempio, alle nuove SmartTV o a numerose console di gioco).
8 rif: www.mrwebmaster.it
In questo contesto, pertanto, dovremo preoccuparci non solo della possibilità che
un utente navighi con software differenti, ma anche che lo faccia utilizzando
dispositivi hardware molto diversi tra loro!
Vediamo quali sono le possibili soluzioni ad una tale frammentazione e come è
possibile offrire ad ognuno un'adeguata e soddisfacente esperienza di
navigazione.
● Responsive Design - è la tecnica di design più utilizzata oggi e consiste
nella creazione di diverse regole di stile da applicarsi alla medesima
pagina web (il markup non cambia!) a seconda della risoluzione del
display utilizzato dall'utente. Questo tipo di operazione avviene
completamente lato client mediante l'utilizzo delle media-queries di
CSS3 ed è possibile grazie alla netta separazione tra la struttura della
pagina e la sua presentazione.
● Dynamic Serving - questa tecnica è anche detta, impropriamente,
"responsive lato server": in pratica il server analizza il browser dell'utente
e cambia l'aspetto della pagina (anche il markup HTML!) a seconda che
l'utente stia utilizzando un dispositivo piuttosto che un altro; anche in
questo caso le URL delle pagine web non cambiano, ma cambia
dinamicamente il loro contenuto strutturale oltre che la loro
presentazione.
● Creazione di siti web separati per ciascun device - questa tecnica
prevede la creazione di diversi siti web per la presentazione del medesimo
contenuto: in pratica, attraverso la rilevazione del browser, l'utente viene
redirezionato in automatico sul sito ottimizzato per il tipo di device che sta
utilizzando; a differenza del Dynamic Serving le URL delle pagine web
cambiano.
La scelta di quale tecnica utilizzare dipende, ovviamente, anche dalle
caratteristiche del lavoro che si deve affrontare. In linea di massima la tecnica
preferibile è quella del Responsive Design: le altre tecniche prevedono infatti che
il Designer sia affiancato da uno sviluppatore web che si occupi delle operazioni
lato server di rilevazione del browser e delle azioni successive.
9 rif: www.mrwebmaster.it
Le fasi preliminari del web design: Wireframe, Mockup e Prototipo
Queste due fasi sono molto importanti sia per il designer che, soprattutto, per il
cliente: wireframe e mockup, infatti, sono le due fasi nelle quali viene definito
l'aspetto del sito e sono essenziali per una adeguata presentazione del progetto
grafico e per la conseguente raccolta dei feedback da parte del cliente.
Wireframe
Il wireframe può essere definito come la prima bozza del sito: si tratta di un
elaborato grafico "a bassa fedeltà" utilizzato solo per mostrare la struttura del
sito web e la disposizione degli elementi nella pagina. Possiamo definire il
wireframe come una sorta di progetto per la definizione dello scheletro della
pagina web ed, eventualmente, delle principali funzionalità di interazione
pagina/utente.
Lo scopo del wireframe consiste in:
● definire la struttura di base del sito
● identificare le aree della pagina per la corretta distribuzione dei contenuti
secondo logiche di priorità
● raccogliere il consenso del cliente prima di procedere all'elaborazione
grafica degli elementi.
10 rif: www.mrwebmaster.it
Normalmente il wireframe viene definito mediante programmi di elaborazione
grafica oppure utilizzando software ad hoc, non manca, tuttavia, chi preferisce
affrontare questa parte in modo "analogico", cioè munito di carta e penna.
Mockup
Il mockup rappresenta lo step successivo al wireframe: in questa fase, infatti, lo
scheletro definito in precedenza viene "riempito" applicando la grafica
concordata col cliente: colori, immagini, testi segnaposto, font, stili, ecc.
Possiamo dire, quindi, che il mockup è una bozza grafica del sito con un maggior
grado di fedeltà rispetto a quello che sarà l'aspetto finale del lavoro. Anche il
mockup, come il wireframe, è un elaborato statico (un disegno) ed è quindi privo
di interattività ma è comunque una buona soluzione per offrire al cliente
un'anteprima di quello che sarà l'aspetto esteriore del sito web una volta
terminato.
Solitamente col mockup si raccoglie l'approvazione definitiva del cliente ed il
lavoro passa alla fase realizzativa vera e propria; ci sono situazioni nelle quali,
tuttavia, il mockup non conclude la fase preparatoria di un progetto di
web-design: si tratta, solitamente, di lavori molto articolati e complessi per i
quali viene richiesta una terza fase preliminare... quella del prototipo.
Prototipo
Nella fase di prototipizzazione di un progetto web, il team di sviluppo procede
alla realizzazione di un artefatto dinamico (non parliamo più di una bozza
grafica!) al fine di mostrare al cliente non solo l'aspetto grafico ma anche quello
funzionale del sito.
11 rif: www.mrwebmaster.it
Per realizzare un prototipo, quindi, sarà necessario scrivere una bozza del codice
HTML/CSS e preparare gli script (lato client e/o lato server) necessari a mostrare
al cliente quello che sarà il funzionamento degli aspetti essenziali del progetto.
Mediante il prototipo, il cliente ha una percezione completa di quello che sarà
l'elaborato finale in quanto potrà ammirarne non solo l'aspetto estetico ma potrà
anche testarne il funzionamento e le dinamiche di interazione.
Il layout
Distribuzione dei contenuti in colonne
Una prima macro-categoria può essere tracciata sulla base del numero di
colonne e della loro disposizione:
● Layout a singola colonna (o layout monolitico)
I contenuti della pagina sono distribuiti all'interno di un'unica area in
quanto non è prevista una sidebar; in questo caso, solitamente, i
contenuti sono disposti a cascata oppure secondo una griglia. ● Layout a due colonne
I contenuti della pagina sono distribuiti all'interno di un'area principale ed
una colonna (cosiddetta sidebar); i layout di questo tipo si suddividono, a
loro volta, in:
layout con sidebar sulla sinistra
layout con sidebar sulla destra
● Layout a tre colonne
I contenuti della pagina sono distribuiti all'interno di tre aree a sviluppo
verticale: due colonne laterali (sidebar) ed un’area centrale, solitamente
più ampia, dedicata ai contenuti principali.
Sviluppo orizzontale
Un altro tipo di classificazione dei layout dipende dal modo in cui occupano lo
spazio orizzontalmente all'interno del display. In questo caso di distingue tra:
● Layout fisso
L'ampiezza del layout è fissa ed è impostata specificandone il numero di
pixel.
● Layout fluido
L'ampiezza del layout è variabile, quindi si ha un adattamento automatico
della larghezza in base all'ampiezza disponibile; solitamente questo effetto
si ottiene impostando dei valori percentuali per la larghezza del
contenitore oppure applicando un semplice padding al corpo della pagina.
Layout responsivi
I layout responsivi (o adattativi) sono in grado di adattarsi automaticamente
alle caratteristiche del display in uso mediante l'utilizzo delle media-queries di
CSS3. L'utilizzo di questa tecnica (responsive design) consente di realizzare
un'unica versione del sito web che potrà essere visualizzata indistintamente (e
con risultati ottimali) sia sui classici computer che sui moderni device mobili
(come smartphone e tablet).
12 rif: www.mrwebmaster.it
Logo e colori
Il logo
Per quanto riguarda il logo, questo deve essere preso in debita considerazione
già in fase di realizzazione della prima bozza (il wireframe): le sue caratteristiche
dimensionali, infatti, ne condizioneranno necessariamente il collocamento nella
pagina e, di conseguenza, influenzeranno a cascata anche la disposizione di altri
elementi.
Certamente il logo deve essere visibile quindi è necessario posizionarlo in un
punto ad alta visibilità: solitamente questo viene collocato nell'header spostato a
sinistra o al centro (raramente a destra in quanto gli occhi dell'utente tendono a
"scansionare" i contenuti della pagina seguendo la logica della lettura - da
sinistra verso destra - e pertanto una collocazione a destra per il logo
equivarrebbe ad una non immediata visibilità).
Per quanto riguarda le dimensioni, il logo non deve necessariamente essere
"gigante" ma sicuramente deve essere leggibile: se il logo è costituito da una
scritta questa deve essere dimensionata in modo tale da garantirne una buona
leggibilità.
Nella definizione dell'aspetto grafico della pagina web, non si può non prendere
in considerazione le caratteristiche visive del logo: le sue forme ed i suoi colori
dovranno riflettersi sull'intero sito web onde evitare di creare delle disarmonie
tra il brand del cliente e lo stile visivo della pagina.
Sarebbe sbagliato, ad esempio, realizzare un design spigoloso per un logo
arrotondato e paffuto, così come non sarebbe adeguato uno stile cromatico
eccessivamente "caldo" in combinazione ad un logo che gioca sul solo contrasto
di bianco e nero.
I colori
I colori hanno un'importanza duplice all'interno di un progetto di web-design:
● da un lato, infatti, dobbiamo rispettare le scelte cromatiche imposte dal
cliente o dettate dal logo
● dall'altro dobbiamo considerare i colori da un punto di vista tecnico e
comunicativo, dovendone garantire una buona resa visiva ed una
adeguata valenza comunicativa.
Per fare un esempio: se il cliente ci impone di utilizzare i verde mela e l'arancio
in quanto suoi colori distintivi, difficilmente potremo creare una pagina web
utilizzando esclusivamente la combinazione di questi due colori: compito del
bravo web-designer, quindi, sarà quello di rispettare le direttive del cliente
miscelando sapientemente questi due colori (entrambi piuttosto "violenti")
all'interno di un contesto che non affatichi eccessivamente la vista dell'utente,
non comprometta la leggibilità dei testi e non riduca la visibilità dei contenuti
importanti e degli elementi di azione (call to action).
Valenza simbolica dei colori
Un altro fattore da considerare, quando si lavora all'aspetto cromatico di un sito
web, è l'aspetto psicologico del colore (si parla, infatti, non a caso di
psicologia del colore). Come sappiamo, infatti, i colori hanno una forte
13 rif: www.mrwebmaster.it
caratteristica evocativa e simbolica che deve sempre essere tenuta in
considerazione. Per fare un esempio banale si pensi ai colori verde e rosso: il
primo trasmette una sensazione positiva e rilassante, mentre il secondo indica
un errore o uno stato di allerta. Nella definizione degli elementi della pagina (si
pensi, ad esempio, ai titoli o ai pulsanti) dovremo, quindi, considerare questo
aspetto con la dovuta attenzione.
Vediamo di seguito un semplice elenco dei colori più comuni e del significato che,
emotivamente, siamo soliti attribuirgli (più o meno consciamente).
● Giallo
Il giallo è un colore che trasmette energia ed allegria perchè viene
istintivamente associato al sole e all'estate soprattutto se utilizzato nelle
tonalità più accese; le sfumature più cupe (oro e pergamena) trasmettono
un senso di ricchezza e stabilità.
● Rosso
E' il colore del sangue ma anche dell'amore e della passione; solitamente
è utilizzato per i messaggi di errore (sfruttando l'associazione col
"semaforo rosso") ma non è insolito vederlo anche in contesti differenti
quale simbolo di energia ed impulsività.
● Arancio
L'arancio, essendo una via di mezzo tra il giallo ed il rosso, ne riassume le
caratteristiche: trasmette energia e passione ed è simbolo di creatività e
dinamismo.
● Blu
E' il colore del cielo e del mare e trasmette calma e serenità, ma è
evocativo anche di sensazioni di pulizia e purezza; è spesso utilizzato in
associazione col bianco col quale riproduce un effetto molto consueto
(cielo e nuvole) ed efficace per chi desidera trasmettere un senso di
libertà.
● Verde
E' il colore della natura ma anche del danaro; è utilizzato per trasmettere
calma e benessere ed è usato molto di frequente per comunicare
messaggi di successo o per realizzare call to action (si pensi ad
esempio ai bottoni "Acquista" degli e-commerce).
● Viola
E' un colore misterioso ed elegante, è simbolo di ricchezza e nobiltà ma è
evocativo anche di sentimenti di tristezza e penitenza.
● Rosa
Il rosa, per definizione, è il simbolo della femminilità; il rosa trasmette
anche un certo senso di rilassamento e di protezione; nelle tonalità più
scure assume una veste molto elegante e rassicurante.
● Azzurro
E' spesso associato all'infanzia ed alla spensieratezza; ricorda anche
l'acqua e l'aria e pertanto trasmette un senso di freschezza e di libertà.
● Marrone
E' il colore della terra: è quindi un colore rassicurante che trasmette
stabilità e tranquillità.
14 rif: www.mrwebmaster.it
Oltre a questi, ovviamente, esistono i cosiddetti colori neutri:
● Bianco
E' il colore della purezza e dello spirito; ma è anche il colore della carta
pertanto è perfetto quale colore di sfondo per gli elementi di testo scuri
ai quali garantisce la miglior leggibilità.
● Nero
E' un colore elegante e potente allo stesso tempo: trasmette decisione ma
anche violenza; è ottimo per il testo (in contrasto con uno sfondo
chiaro) un po' meno quale colore di sfondo, soprattutto se utilizzato su
superfici molto ampie in quanto finisce con il trasmettere una certa
"cupezza".
● Grigio
E' il colore sobrio per eccellenza ed è molto elegante; si combina molto
bene con una grande varietà di colori e costituisce spesso la soluzione
ottimale quando si è in cerca di un colore neutro col quale combinare
tonalità più decise.
15 rif: www.mrwebmaster.it