Approccio al Web

320 views

Published on

Un paio di cose su come ci si approccia a fare web design.
Qualche concetto su come capire, riconoscere e scrivere codice senza perdere d'occhio l'usabilità.

Published in: Design
  • Be the first to comment

Approccio al Web

  1. 1. Fonti 60 questioni da considerare per progettare un sito web sixrevisions.com/web_design/60-questions-to-consider-when-designing-awebsite/ L’importanza dello spazio bianco designer-daily.com/how-to-convince-your-clients-of-the-importance-of-whitespace-22971 Simmetria e Asimmetria nel Web dzineblog.com/2010/12/the-secrets-of-symmetry-and-asymmetry-design.html 10 regole d’oro per avere un design pulito speckyboy.com/2012/07/10/the-10-golden-rules-of-simple-clean-design/ User Experience fedeweb.net/user-experience-usabilita/ I 10 principi di Dieter Ram webdesignerdepot.com/2012/06/applying-dieter-rams-ten-principles-to-webdesign/ Miscelare varie fonts webdesignledger.com/resources/mastering-font-combinations Teoria dei Colori per il Web hongkiat.com/blog/basics-behind-color-theory-for-web-designer/ Uso del colore nel Web Design inspiredology.com/us-of-color-in-web-design/ Web Design 101 webdesign.tutsplus.com/articles/web-design-101-the-college-students-guide/ Rompere le regole speckyboy.com/2011/09/29/breaking-the-norm-unusual-and-creative-weblayouts/ La metafora nel Web Design webdesign.tutsplus.com/articles/design-theory/using-metaphors-in-web-design/ Lo Skeumorfismo webdesign.tutsplus.com/articles/design-theory/skeuomorphism-in-interfacedesign/ Wireframe per UI webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches Le regole per un gran design tympanus.net/codrops/2012/10/15/the-unwritten-rules-of-a-great-design-critique/ La guida per il Design Web del sito della BBC tomstardust.com/archives/bbc-css-design/ Guidare l’occhio dell’utente inspiredology.com/guiding-user-eye-in-your-designs/ Leggi di Usabilità Don’t make me think - Steve Krug
  2. 2. Una parte importante, enorme, gigante, fondamentale, del web design è basata sull’usabilità.
  3. 3. I siti web non sono piu’ delle paginette carine da consultare, ma delle complete esperienze visive.
  4. 4. USABILITA’ E’ NECESSITA’
  5. 5. 1. UNIFORMITA’ 2. INFLUENZA 3. ESPERIENZA 4. PERCEZIONE Usare elementi comuni Decidere per l’utente Aiutare la navigazione Restituire i feedback giusti
  6. 6. 1. Uniformità
  7. 7. Non reinventate la ruota
  8. 8. 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.
  9. 9. 2. Influenza
  10. 10. Creare Ritmo Dobbiamo focalizzare l’attenzione dell’utente su particolari funzioni o Call-to-Action creando delle gerarchie sfruttando la prospettiva o il colore.
  11. 11. Geometria! Le proporzioni, le distanze e gli spazi giocano un ruolo fondamentale. Non bisogna avere paura di essere troppo “schematici”
  12. 12. Tipografia La tipografia sul web ci aiuta a definire l’importanza di alcuni contenuti rispetto ad altri, stuzzicando la nostra attenzione
  13. 13. Piccola Parentesi! ola. n tanto picc o Beh, forse n
  14. 14. * RGH! , aiutoo AAR a *Qua si pag
  15. 15. 3. Esperienza
  16. 16. Spazio Negativo In cucina, cosi’ come sul web, la presentazione migliore e quando la portata ha tanto spazio nel piatto!
  17. 17. 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.
  18. 18. PROGETTI Web Stampa CONTATTI Flowcharts Video Form interattiva HOME Create la mappa mentale per Pagina Facebook organizzare le informazioni del Twitter cliente e non disperdere gli utenti. SOCIAL NETWORK CHI SIAMO SERVIZI SEO Consulenza GALLERY
  19. 19. 4. Percezione
  20. 20. Usa le metafore. La simulazione di elementi reali è fondamentale per fornire un’esperienza friendly e gradevole.
  21. 21. Tracce e sfumature Ombra senza sfocatura
  22. 22. 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.
  23. 23. Quindi?
  24. 24. Let’s see! lezione. o fine della Ovver
  25. 25. Tutto parte da una ricerca approfondita, un’analisi precisa di tutte le future fasi della progettazione.
  26. 26. Magazine Attività Creativo Istituzionale Portfolio ECommerce Prodotto singolo
  27. 27. In pratica! lezione. o fine della Ovver
  28. 28. Purtroppo (o per fortuna) il designer che si avvicina al web deve imparare un bel pò di codice.
  29. 29. Codice? e?!?! Quale codic
  30. 30. LINGUAGGIO COMPRENSIBILE
  31. 31. Possiamo creare siti web con qualsiasi software che lo permetta.
  32. 32. HTML CONTENUTO CSS STILE JS INTERAZIONE
  33. 33. COM’E’
  34. 34. COME LO VEDIAMO
  35. 35. HTML i collegare enticar ti d Non dim HTML!!!! CSS al file CSS
  36. 36. 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.
  37. 37. 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.
  38. 38. 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.
  39. 39. index.html contatti.html servizi.html stile.css * immagine_titolo.jpg img barra-laterale.gif partner001.png *Domanda! Quale sarà il percorso delle immagini?
  40. 40. Demo lezione. o fine della Ovver
  41. 41. Una pagina web e il suo stile si compone come una serie di scatole cinesi.
  42. 42. LA STRUTTURA DI UNA PAGINA
  43. 43. 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.
  44. 44. 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.
  45. 45. Demo lezione. o fine della Ovver

×