60 questioni da considerare per progettare un sito websixrevisions.com/web_design/60-questions-to-consider-when-designing-a-website/

Simmetria e Asimmetria nel Webdzineblog.com/2010/12/the-secrets-of-symmetry-and-asymmetry-design.html

User Experiencefedeweb.net/user-experience-usabilita/

Miscelare varie fontswebdesignledger.com/resources/mastering-font-combinations

Teoria dei Colori per il Webhongkiat.com/blog/basics-behind-color-theory-for-web-designer/

Uso del colore nel Web Designinspiredology.com/us-of-color-in-web-design/

Web Design 101webdesign.tutsplus.com/articles/web-design-101-the-college-students-guide/

Rompere le regolespeckyboy.com/2011/09/29/breaking-the-norm-unusual-and-creative-web-layouts/

La metafora nel Web Designwebdesign.tutsplus.com/articles/design-theory/using-metaphors-in-web-design/

L’importanza dello spazio biancodesigner-daily.com/how-to-convince-your-clients-of-the-importance-of-white-space-22971

10 regole d’oro per avere un design pulitospeckyboy.com/2012/07/10/the-10-golden-rules-of-simple-clean-design/

I 10 principi di Dieter Ramwebdesignerdepot.com/2012/06/applying-dieter-rams-ten-principles-to-web-design/

Lo Skeumorfismowebdesign.tutsplus.com/articles/design-theory/skeuomorphism-in-interface-design/

Wireframe per UIwebdesignledger.com/inspiration/inspiring-ui-wireframe-sketches

Le regole per un gran designtympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/

La guida per il Design Web del sito della BBCtomstardust.com/archives/bbc-css-design/

Guidare l’occhio dell’utenteinspiredology.com/guiding-user-eye-in-your-designs/

Leggi di UsabilitàDon’t make me think - Steve Krug

Fonti

Una parte importante, enorme, gigante, fondamentale, del web design è basata sull’usabilità.

I siti web non sono piu’ delle paginette carine da consultare, ma delle complete esperienze visive.

USABILITA’ E’ NECESSITA’

1. UNIFORMITA’2. INFLUENZA3. ESPERIENZA4. PERCEZIONE

Usare elementi comuniDecidere per l’utente

Aiutare la navigazioneRestituire i feedback giusti

1. Uniformità

Non reinventate la ruota

1. Non far pensare l’utente.2. Non giocare con la sua pazienza.3. Testare, provare e ritestare.4. Eliminare l’aria fritta.5. Dare un motivo per ritornare.6. Avere i contatti a portata di mano.7. Caricare in meno tempo possibile.8. Il contenuto è il Re.

2. Influenza

Creare Ritmo

Dobbiamo focalizzare l’attenzione dell’utente su particolari funzioni o Call-to-Action creando delle gerarchie sfruttando la prospettiva o il colore.

Geometria!

Le proporzioni, le distanze e gli spazi giocano un ruolo fondamentale. Non bisogna avere paura di essere troppo “schematici”

Tipografia

La tipografia sul web ci aiuta a definire l’importanza di alcuni contenuti rispetto ad altri, stuzzicando la nostra attenzione

Piccola Parentesi!Beh, forse non tanto piccola.

*Qua si paga, aiutoo AARRGH!

*

3. Esperienza

Spazio Negativo

In cucina, cosi’ come sul web, la presentazione migliore e quando la portata ha tanto spazio nel piatto!

Rompere qualche regola

Non necessariamente dovete seguire tutto quello che vi diciamo. A volte, per esigenze di una comunicazione adeguata, non dovete ripetere per forza la solita storia di header, footer e sidebar.

Flowcharts

Create la mappa mentale per organizzare le informazioni del cliente e non disperdere gli utenti.

HOMECHI SIAMO

SERVIZISOCIAL NETWORK

CONTATTI

PROGETTI Web

Stampa

Video

SEO

Consulenza

Pagina Facebook

Twitter

Form interattiva

GALLERY

4. Percezione

Usa le metafore.

La simulazione di elementi reali è fondamentale per fornire un’esperienza friendly e gradevole.

Tracce e sfumature

Ombra senza sfocatura

Coerenza.

Gli inglesi la chiamano Consistency, e infatti è quella che darà “consistenza” al vostro design.Un grigio diverso in ogni pagina farà crollare l’impalcatura che andate a progettare.

Quindi?

Let’s see!Ovvero fine della lezione.

Tutto parte da una ricerca approfondita, un’analisi precisa di tutte le future fasi della progettazione.

ECommerceMagazine

AttivitàIstituzionale

Portfolio

CreativoProdotto singolo

In pratica!Ovvero fine della lezione.

Purtroppo (o per fortuna) il designer che si avvicina al web deve imparare un bel pò di codice.

Codice?Quale codice?!?!

LINGUAGGIO COMPRENSIBILE

Possiamo creare siti web con qualsiasi software che lo permetta.

JSCSSHTML

CONTENUTOSTILE

INTERAZIONE

COM’E’

COME LO VEDIAMO

HTML CSSNon dimenticarti di collegare

CSS al file HTML!!!!

Cascade Style Sheet

I CSS sono la ragione per la quale oggi il web è cosi bello. La sua funzione è quella di “agganciarsi” al file HTML per definire forme, colori e posizioni dei vari elementi.

L’HTML ha stile

La maggior parte degli elementi HTML ha una propria pre-formattazione (grazie al quale si progettavano i siti tanti anni fa) che dobbiamo azzerare se vogliamo applicare un “nostro” stile attraverso i CSS.

L’importanza del percorso

Ogni singolo elemento, deve avere il suo giusto riferimento: immagini, file e URL in una pagina web devono richiamare la nomenclatura e il percorso esatto di dove risiedono fisicamente.

index.htmlcontatti.htmlservizi.htmlstile.cssimg immagine_titolo.jpg

barra-laterale.gifpartner001.png

*

*Domanda! Quale sarà il percorso delle immagini?

DemoOvvero fine della lezione.

Una pagina web e il suo stile si compone come una serie di scatole cinesi.

LA STRUTTURA DI UNA PAGINA

Vi presento Tag, Classi e ID

All’interno del foglio HTML, le varie scatole andranno nominate attraverso il sistema delle tag, delle classi e degli ID. Questi elementi andranno stilati all’interno del foglio CSS collegato.

A cascata!

Ogni proprietà CSS di un elemento ricadrà sulle “scatole” che contiene se non specifichiamo diversamente.

Ad esempio: mi basta specificare la font adatta ad una “scatola” per far si che quella font sarà usata da tutti gli elementi inclusi.

DemoOvvero fine della lezione.