Your SlideShare is downloading. ×
Siti Web: introduzione, guida al corretto uso colori, strutturazione dei contenuti e loro posizionamento nel layout
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Siti Web: introduzione, guida al corretto uso colori, strutturazione dei contenuti e loro posizionamento nel layout

585

Published on

Lezione #1 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: introduzione, guida al corretto uso colori, strutturazione dei …

Lezione #1 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: introduzione, guida al corretto uso colori, strutturazione dei contenuti e loro posizionamento nel layout".

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
585
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UniTE lezione #1 WINTER Template Siti WebIntroduzione, guida al corretto usocolori, strutturazione dei contenuti e loro posizionamento nel layout dott. Paolo Gatti - paolo.gatti@gmail.com www.paologatti.it - www.webedintorni.eu
  • 2. Agenda WINTERIntroduzione (requisiti, tipologie) TemplateObbiettivi (progettazione erealizzazione)Uso corretto dei coloriStrutturazione dei contenutiPosizionamento dei contenuti nellayout
  • 3. Siti web: macro-categorieI siti web vengono poi comunemente divisi incategorie per inquadrarne il settore dioperatività o i servizi offerti: Siti personali Siti aziendali Siti di e-commerce Siti di e-learning Siti di comunità Forum / WiKi Motori di ricerca Portali web
  • 4. Siti web: introduzioneUn sito web è un insieme di pagine webcorrelate, ovvero una struttura ipertestualedi documenti.Esso risiede, tramite hosting (ovvero unamacchina sempre accesa), su un webserver che permette laccesso agli utentiche ne fanno richiesta utilizzando un webbrowser, sul World Wide Web della reteInternet (porta 80), digitando in esso ilrispettivo URL (nome a dominio) odirettamente lindirizzo IP.
  • 5. Siti web: introduzione (2)Dal punto di vista della struttura e dellatecnologia utilizzata, i siti web si possonodistinguere in 2 tipologie: Statici (presentano contenuti che solitamente vengono aggiornati con una bassa frequenza che, per essere modificati, necessitano di modifiche al codice HTML della pagina web. Web 1.0) Dinamici (presentano invece contenuti redatti dinamicamente, alla “chiamata” della pagina da parte dellutente, grazie al collegamento ad un database, e forniscono contenuti che possono variare in base a più fattori. I siti web dinamici sono caratterizzati da unalta interazione fra sito e utente (web 2.0).
  • 6. Obbiettivi di un sito webRaggiungibileNavigabile (regola dei 3 click ed essere userfriendly)Interattivo (web 2.0 → siti dinamici)Rappresentativo (è un presentazione alcliente!)Contaminato (apertura e contaminazioneda/verso altri siti → generano fiducia)Convertibile (convertire il navigatore adeffettuare determinate azioni → call-to-actionE importantissimo luso corretto dei colori!)
  • 7. Progettazione e realizzazioneLa progettazione di un sito web necessita diuna definizione/pianificazione iniziale di ciò chedeve essere realizzato a livello logico(analisi/definizione delle specifiche,strutturazione dei contenuti egrafica/formattazione), seguita dalla faseimplementativa, dalla fase di testing edalleventuale correzione delle incongruenzecon le specifiche o lusabilità del sito stesso.
  • 8. I ColoriLa distinzione tra Colori Caldi e Freddi viene fattain base allintonazione che psicologicamenteevoca un colore: le sfumature che tendono alrossiccio, al giallo, e ovviamente gli stessi gialli erossi, sono considerati colori "caldi" perchèevocano il fuoco, il sole... le sfumature chetendono al blu e al verde sono considerati colori"freddi" perchè evocano lacqua, il cielo... Tuttaviala distinzione non è così rigida in verità, non tutti iblu sono freddi.
  • 9. I Colori: fattori importanti Cultura: in culture diverse troviamo interpretazioni diverse per uno stesso colore; ad esempio il bianco che per loccidente è il colore della purezza, in Cina è il colore della morte. Tempi di acquisto: i compratori impulsivi prediligono i colori emozionali come il rosso, il nero e il blu elettrico; i più riflessivi preferiscono colori più pragmatici come il rosa, locra e lazzurro. Status: generalmente coloro che percepiscono un reddito medio basso sono attratti da colori sfavillanti e pieni, mentre coloro che hanno una vita agiata preferiscono i colori tenui ed evanescenti. Geografia: nei paesi caldi vengono preferiti colori forti e brillanti, le regioni più fredde apprezzano di più i colori naturali.I colori caldi (giallo, arancione e rosso) sono aggressivi, irrequietio stimolanti e positivi, mentre quelli freddi (violetti, blu e verdi) sononegativi, scostanti o riservati, tranquilli e sereni.
  • 10. Associazione colori/sensazioniOgni uomo tende ad associare, consapevolmente oinconsapevolmente, un colore a un particolaresentimento o sensazione.
  • 11. Colori e leggibilitàPer una questione di leggibilità, sonoassolutamente da evitare i colori complementari:Uno studio fatto da un’Università del Texassulla leggibilità ha riportato i seguenti risultati:
  • 12. Colori e leggibilità (2)È sempre consigliabile non usare troppi coloriall’interno dello stesso layout, ed è sempremeglio, a parte casi eccezionali, evitare gli sfondi conimmagini elaborate che diminuiscono drasticamentela leggibilità e affaticano inutilmente l’occhio.Se ci troviamo davanti a dilemmi o problemicromatici, ad esempio, abbiamo un colore di basema non sappiamo come associargliene un altro,possiamo ricorrere a strumenti che ci aiutano adassociare bene i colori, tenendo anche conto di quelliweb safe.http://colorschemedesigner.com
  • 13. Uso dei colori nel marketingLe grandi multinazionali del cibo, adesempio, hanno capito ben prestolimportanza della psicologia dei colori nelmarketing, ed usano per il loro brand coloricome il rosso e larancione che incoraggianoi clienti a mangiare più velocemente in mododa aumentare le vendite in un minore lassodi tempo. Perché i colori scelti abbianoleffetto desiderato è necessario considerarealcuni aspetti legati al target di destinazione.
  • 14. Uso coerente dei coloriUnazienda che intende presentarsi al pubblico,deve farlo in modo coerente, anche sul web. Inquesto caso, limmagine aziendale online e offlinedevono essere coordinate. I colori aziendali sonolelemento unificante dellimmagine coordinata.Biglietti da visita, brochure e leaflet, depliant,marchio e sito Internet: per tutte queste componentidella comunicazione sarà necessario assumere icolori aziendali come elemento di coerenza eunione nellimmagine coordinata. Nel sito Web, ilcolore aziendale (e il marchio, se discreto) potràessere lelemento unificante di tutte le pagine al finedi rendere sempre riconoscibile lazienda.
  • 15. Diversi modi di strutturare i contenutiPer raggiungere il miglior risultato in termini di esperienza dinavigazione è fondamentale strutturare i contenuti in modoche la risposta alle potenziali domande dell’utente siasempre facilmente raggiungibile, indipendentemente dal“mood” di navigazione in cui si trova.
  • 16. Strutturare al meglio i contenutiEd ecco le principali regole per poter raggiungere questoobiettivo: Raggruppare tematicamente i contenuti secondo criteri logici comunemente utilizzati in rete. Attribuire ai menu nomi chiari ed inequivocabili utilizzando parole normalmente usate su Internet per quel tipo di contenuti (l’originalità in questo caso non paga). Normalmente in tutti i siti Internet commerciali dovrebbero esistere almeno queste 3 sezioni principali: Area istituzionale (Chi sei?), in cui si parla dell’azienda e dei suoi valori aggiunti (profilo, mission, certificazioni, partnership, ecc.). Area relativa all’offerta (Che vuoi? Che vendi?), in cui si descrivono i prodotti e/o i servizi promossi attraverso il sito. Area di contatto (Dove sei? Come ti contatto?), in cui si riportano le modalità di contatto (attraverso form o alti mezzi), gli indirizzi, i numeri di telefono, le mappe geolocalizzate, ecc.
  • 17. Strutturare al meglio i contenuti (2)Utilizzare nei menù parole chiave ricercate sul web e fortementeattinenti ai temi trattati nelle pagine di destinazione, in modo daagevolare, oltre agli utenti umani, anche i motori di ricerca.Offrire una doppia possibilità di navigazione tra i contenutiprincipali del sito, pensata sia per chi già conosce l’azienda e cercainformazioni specifiche (ad es. una scheda tecnica o le istruzioni diun prodotto), ma anche per i nuovi utenti che devono essere messinelle condizioni di capire molto rapidamente (in pochi secondi) dicosa si tratta e se quello che sta guardando può tornagli utile.I contenuti proposti dovrebbero avere una struttura “progressiva”,dovrebbero cioè partire nelle pagine più esterne da testi moltosemplici, brevi e chiari (ma di richiamo), che puntino a pagine diapprofondimento in specifiche sezioni del sito. Unottima strategia èla scelta di inserire eventuali documenti di dettaglio in PDF scaricabili(ad es. schede tecniche, istruzioni, ecc.) .Un menu di massimo 6-8 voci e l’uso di box “scorciatoia” e dialtri elementi grafici di richiamo diretti a contenuti interni importanticonsentono di rendere intuitiva ed efficace la navigazione del sito.
  • 18. Esempio pratico di un sito ben strutturato Prendiamo come esempio il sito Cordivari (no, non mi hanno pagato! :)
  • 19. Posizionamento dei contenutiGeneralmente analizziamoi contenuti di un sito più omeno come faremmo conquelli di un giornale.Scansioniamo velocementele pagine dei siti con unoschema di analisi che disolito segue un percorsoad “F”, che partedall’estremità superioresinistra della pagina.Il colore più rosso e la dimensione delle frecce indicano forza e profondità della scansione
  • 20. Rappresentazione dei contenutiPer posizionare al meglio gli elementi che compongono unlayout web è necessario avere un elenco dei contenuti inordine di importanza così dare ad ognuno di essi la giustarilevanza.I contenuti prescelti possono essere rappresentati con: testo esteso: si propone direttamente tutto il contenuto; testi di sintesi con link di approfondimento: una breve introduzione con link che punta a una pagina interna; voce di menù o link testuale; link grafico: collegamento con immagine o altri elementi grafici (principalmente box animati/statici, banner, icone); box interattivo, offre normalmente video o contenuti multimediali ed è caratterizzato da segni grafici che identificano il player (sostanzialmente il triangolo di play e la barra di scorrimento in basso).
  • 21. Rappresentazione dei contenuti (2)Il tempo (e le analisi di usabilità) hanno dimostrato che tuttiquesti elementi trovano di solito collocazione ottimale instrutture a 3 colonne:
  • 22. Rappresentazione dei contenuti (3)I criteri principali per definire l’importanza che si vuoleconferire a ogni elemento prescelto per la pagina sono invece iseguenti: posizione, più si è vicini all’angolo superiore sinistro, più il contenuto sarà messo in evidenza e reso visibile. prominenza rispetto al contesto che circonda l’elemento, si ottiene grazie a: dimensione (elementi più grandi → più importanti); segni grafici (loghi, icone, riquadri di delimitazione, ecc.), immagini e animazioni (se usate senza eccessi, sono anche in grado di migliorare l’impatto emozionale del sito); cambio di caratteri (font) ed evidenziazione del testo; punti elenco (favoriscono l’approfondimento della lettura); colore (dell’elemento o dello sfondo che lo circonda); isolamento (un elemento “immerso” in uno spazio vuoto, attrae molto di più l’attenzione che se mischiato in altro).
  • 23. Thats all!DOMANDE?! :)

×