Web Designer: strumenti e problematiche di sviluppo · 2018-02-04 · Web Designer: strumenti e...

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


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.


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.


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.


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.


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.


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).


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.


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.


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.


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).


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


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à.


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.


Web Designer: strumenti e problematiche di sviluppo · 2018-02-04 · Web Designer: strumenti e...

Documents

Transcript of Web Designer: strumenti e problematiche di sviluppo · 2018-02-04 · Web Designer: strumenti e...