approccio al web
Post on 05-Jul-2015
113 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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.
top related