(Breve) Storia del Web Design

2,280 views

Published on

Prima lezione del corso "Web & Graphic Design" in collaborazione con l'associazione studentesca Link Udu Lecce.

Il percorso illustra come si è arrivati all'attuale Responsive, dopo un periodo condito da <tables> e Flash, per poi arrivare al full-CSS grazie anche al Web 2.0 e Wordpress.

CONTENUTI DEL CORSO:
HTML 5 + CSS 3
Responsive Web Design
Tipografia
Drupal 7
Content Strategy
Information Architecture
Tips & Tricks
Web Designer e Social Media
Guida al Freelancing

TUTOR del corso: Andrea Riezzo - web designer - Freelance - Blogger Professionista - Content Strategist - Videomaker


http://androe.com

http://follow.androe.com

http://altroportaleunisalento.jimdo.com/progetti-corsi/archivio-a-a-2012-13/10-corso-di-web-graphic-designer/

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,280
On SlideShare
0
From Embeds
0
Number of Embeds
883
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

(Breve) Storia del Web Design

  1. 1. WEB DESIGNERmartedì 22 gennaio 13
  2. 2. WEB DESIGNERmartedì 22 gennaio 13
  3. 3. WEB DESIGNER VISTO DALLA SOCIETÀ http://www.flickr.com/photos/vancouverfilmschoolmartedì 22 gennaio 13
  4. 4. WEB DESIGNER VISTO DAI MIEI GENITORI http://www.flickr.com/photos/8362710@N03/4700161983/sizes/o/in/photostream/martedì 22 gennaio 13
  5. 5. WEB DESIGNER VISTO DAI MIEI CLIENTI http://www.flickr.com/photos/slworkingmartedì 22 gennaio 13
  6. 6. WEB DESIGNER VISTO DAI MIEI CLIENTI http://www.flickr.com/photos/onthetowermartedì 22 gennaio 13
  7. 7. WEB DESIGNER VISTO DA CHI NON HA LE IDEE BEN CHIARE http://www.flickr.com/photos/eldavemartedì 22 gennaio 13
  8. 8. WEB DESIGNER VISTO DA CHI NON HA LE IDEE BEN CHIARE http://www.flickr.com/photos/tyle_rmartedì 22 gennaio 13
  9. 9. WEB DESIGNER COSA PENSAVO DI DIVENTAREmartedì 22 gennaio 13
  10. 10. WEB DESIGNER COME SONO IN REALTÀmartedì 22 gennaio 13
  11. 11. WEB DESIGNERmartedì 22 gennaio 13
  12. 12. DI COSA DI OCCUPA UN WEB DESIGNER ?martedì 22 gennaio 13
  13. 13. DESIGN ≠ disegnomartedì 22 gennaio 13
  14. 14. martedì 22 gennaio 13
  15. 15. DESIGN NOUN a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is made [mass noun] the art or action of conceiving of and producing a plan or drawing of something before it is made VERB do or plan (something) with a specific purpose in mind fonte: Oxford Dictionaries Online http://oxforddictionaries.com/definition/english/designmartedì 22 gennaio 13
  16. 16. DESIGN = progettazionemartedì 22 gennaio 13
  17. 17. DI COSA DI OCCUPA UN WEB DESIGNER ?martedì 22 gennaio 13
  18. 18. WEB DESIGNERmartedì 22 gennaio 13
  19. 19. WEB DESIGNER programmazionemartedì 22 gennaio 13
  20. 20. PHP WEB DESIGNER programmazionemartedì 22 gennaio 13
  21. 21. javascript PHP WEB DESIGNER programmazionemartedì 22 gennaio 13
  22. 22. javascript PHP WEB DESIGNER programmazione HTMLmartedì 22 gennaio 13
  23. 23. javascript CSS PHP WEB DESIGNER programmazione HTMLmartedì 22 gennaio 13
  24. 24. javascript SEO CSS PHP WEB DESIGNER programmazione HTMLmartedì 22 gennaio 13
  25. 25. javascript SEO CSS PHP WEB DESIGNER programmazione HTML TIPOGRAFIAmartedì 22 gennaio 13
  26. 26. javascript SEO CSS PHP WEB DESIGNER programmazione HTML UX TIPOGRAFIAmartedì 22 gennaio 13
  27. 27. javascript SEO CSS PHP WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  28. 28. javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  29. 29. javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  30. 30. jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  31. 31. USER INTERFACE jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  32. 32. jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA CMSmartedì 22 gennaio 13
  33. 33. jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA USO DEI SOCIAL MEDIA CMSmartedì 22 gennaio 13
  34. 34. jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP USO DEI SOCIAL MEDIA CMSmartedì 22 gennaio 13
  35. 35. content strategy jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP USO DEI SOCIAL MEDIA CMSmartedì 22 gennaio 13
  36. 36. content strategy GRAPHIC DESIGN jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP USO DEI SOCIAL MEDIA CMSmartedì 22 gennaio 13
  37. 37. content strategy GRAPHIC DESIGN jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP USO DEI SOCIAL MEDIA economia CMSmartedì 22 gennaio 13
  38. 38. content strategy GRAPHIC DESIGN jQuery USER INTERFACE LEGGI javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economiamartedì 22 gennaio 13
  39. 39. GRAPHIC DESIGN web marketing content strategy USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economiamartedì 22 gennaio 13
  40. 40. animazione GRAPHIC DESIGN web marketing content strategy USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economiamartedì 22 gennaio 13
  41. 41. animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economiamartedì 22 gennaio 13
  42. 42. animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia IMPRENDITORIAmartedì 22 gennaio 13
  43. 43. animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia IMPRENDITORIA FREELANCINGmartedì 22 gennaio 13
  44. 44. animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding IMPRENDITORIA FREELANCINGmartedì 22 gennaio 13
  45. 45. INFORMATION ARCHITECTURE animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding IMPRENDITORIA FREELANCINGmartedì 22 gennaio 13
  46. 46. PSICOLOGIA INFORMATION ARCHITECTURE animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding IMPRENDITORIA FREELANCINGmartedì 22 gennaio 13
  47. 47. PSICOLOGIA INFORMATION ARCHITECTURE animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding team management IMPRENDITORIA FREELANCINGmartedì 22 gennaio 13
  48. 48. PSICOLOGIA INFORMATION ARCHITECTURE animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding team management IMPRENDITORIA FREELANCING WEB PUBLISHINGmartedì 22 gennaio 13
  49. 49. PSICOLOGIA PROJECT MANAGEMENT INFORMATION ARCHITECTURE animazione CSS3 + HTML5 GRAPHIC DESIGN content strategyweb marketing USER INTERFACE LEGGI jQuery javascript SEO CSS PHP accessibilità WEB DESIGNER programmazione HTML UX TIPOGRAFIA MARKUP CMS USO DEI SOCIAL MEDIA SOCIAL NETWORKING economia branding team management IMPRENDITORIA FREELANCING WEB PUBLISHINGmartedì 22 gennaio 13
  50. 50. WEB DESIGNERmartedì 22 gennaio 13
  51. 51. martedì 22 gennaio 13
  52. 52. il Web Design è una cosa seria, da non prendere sottogamba.martedì 22 gennaio 13
  53. 53. UN PO’ DI STORIA http://www.flickr.com/photos/conqenatormartedì 22 gennaio 13
  54. 54. HTMLmartedì 22 gennaio 13
  55. 55. HTML HYPERTEXT MARKUP LANGUAGEmartedì 22 gennaio 13
  56. 56. HTML HYPERTEXT MARKUP LANGUAGEmartedì 22 gennaio 13
  57. 57. HTML HYPERTEXT MARKUP LANGUAGE Testo visualizzato su dispositivi elettronici dotato di hyperlink cliccabili. Lettura del documento non lineare.martedì 22 gennaio 13
  58. 58. HTML HYPERTEXT MARKUP LANGUAGE Testo visualizzato su Regole che definiscono la dispositivi elettronici rappresentazione di un testo, dotato di hyperlink affidata (nel caso di HTML) a cliccabili. un software. Lettura del documento non lineare.martedì 22 gennaio 13
  59. 59. CSS CASCADE STYLESHEETSmartedì 22 gennaio 13
  60. 60. CSS CASCADE STYLESHEETS Fogli di stile Regolano l’aspetto di un documento HTMLmartedì 22 gennaio 13
  61. 61. CSS CASCADE STYLESHEETS Fogli di stile Regolano l’aspetto di un documento HTML SEPARAZIONE TRA CONTENUTO E FORMAmartedì 22 gennaio 13
  62. 62. con CSSmartedì 22 gennaio 13
  63. 63. senza CSSmartedì 22 gennaio 13
  64. 64. le prime pagine web: - spartane - poche immagini - formattazione contenuta nell’htmlmartedì 22 gennaio 13
  65. 65. <font>martedì 22 gennaio 13
  66. 66. <font>martedì 22 gennaio 13
  67. 67. <font> XHTMLmartedì 22 gennaio 13
  68. 68. le prime pagine web: - spartane - poche immagini - formattazione contenuta nell’htmlmartedì 22 gennaio 13
  69. 69. uso delle tabelle per il layout <table>martedì 22 gennaio 13
  70. 70. HEADER NAVIGATION CONTENT FOOTERmartedì 22 gennaio 13
  71. 71. uso delle tabelle per il layout <table>martedì 22 gennaio 13
  72. 72. uso delle tabelle per il layout <table> facili da usare uso improprio WYSIWYG codice sporco struttura “solida” ... anzi sporchissimo IE ... fuori standardmartedì 22 gennaio 13
  73. 73. 2002 CSS 2.1martedì 22 gennaio 13
  74. 74. tableless layout CSS is better focus on CONTENTmartedì 22 gennaio 13
  75. 75. tableless layout <div>martedì 22 gennaio 13
  76. 76. <table border=”1”> <tr> <td>Titolo della pagina</td> </tr> <tr> <td>Menu1</td> <td>Menu2</td> <td>Menu3</td> </tr> <tr> <td>Contenuto della pagina</td> </tr> </table>martedì 22 gennaio 13
  77. 77. <table border=”1”> <tr> <td>Titolo della pagina</td> </tr> <tr> <td>Menu1</td> <td>Menu2</td> <td>Menu3</td> </tr> <tr> <td>Contenuto della pagina</td> </tr> </table>martedì 22 gennaio 13
  78. 78. <table style=”width: 700px;” border=”1”> <tr style=”width: 700px;” > <td style=”color: #ff0000; font-size: 32px;” >Titolo della pagina</td> </tr> <tr> <td style=”font-size:16px;”>Menu1</td> <td style=”font-size:16px;”>Menu2</td> <td style=”font-size:16px;”>Menu3</td> </tr> <tr> <td style=”font-size:32px;” >Contenuto della pagina</td> </tr> </table>martedì 22 gennaio 13
  79. 79. <table style=”width: 700px;” border=”1”> <tr style=”width: 700px;” > <td style=”color: #ff0000; font-size: 32px;” >Titolo della pagina</td> </tr> <tr> <td style=”font-size:16px;”>Menu1</td> <td style=”font-size:16px;”>Menu2</td> <td style=”font-size:16px;”>Menu3</td> </tr> <tr> <td style=”font-size:32px;” >Contenuto della pagina</td> </tr> </table>martedì 22 gennaio 13
  80. 80. martedì 22 gennaio 13
  81. 81. <div> <h1>Titolo della pagina</h1> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> <p>Contenuto della pagina</p> </div>martedì 22 gennaio 13
  82. 82. <div> <h1>Titolo della pagina</h1> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> <p>Contenuto della pagina</p> </div>martedì 22 gennaio 13
  83. 83. martedì 22 gennaio 13
  84. 84. <div> <h1>Titolo della pagina</h1> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> <p>Contenuto della pagina</p> </div>martedì 22 gennaio 13
  85. 85. focus on CONTENTmartedì 22 gennaio 13
  86. 86. focus on CONTENT HTML semanticomartedì 22 gennaio 13
  87. 87. focus on CONTENT HTML semantico <p> <ul> <h1> etc.martedì 22 gennaio 13
  88. 88. 2003martedì 22 gennaio 13
  89. 89. 2003martedì 22 gennaio 13
  90. 90. CMS opensource scritto in PHPmartedì 22 gennaio 13
  91. 91. fondato da Automattic di Matt Mullenwegmartedì 22 gennaio 13
  92. 92. Matt Mullenweg ma.ttmartedì 22 gennaio 13
  93. 93. Matt Mullenweg ma.tt classe 1984martedì 22 gennaio 13
  94. 94. Matt Mullenweg ma.tt classe 1984 nominato tra le 50 persone più influenti del Web da PC Worldmartedì 22 gennaio 13
  95. 95. Bloggingmartedì 22 gennaio 13
  96. 96. Blogging Web 2.0martedì 22 gennaio 13
  97. 97. Blogging Web 2.0 CSS-only templatesmartedì 22 gennaio 13
  98. 98. Kubrick Thememartedì 22 gennaio 13
  99. 99. ✓ Facile da usaremartedì 22 gennaio 13
  100. 100. ✓ Facile da usare ✓ Leggeromartedì 22 gennaio 13
  101. 101. ✓ Facile da usare ✓ Leggero ✓ Community entusiastamartedì 22 gennaio 13
  102. 102. ✓ Facile da usare ✓ Leggero ✓ Community entusiasta X poco sicuromartedì 22 gennaio 13
  103. 103. ✓ Facile da usare ✓ Leggero ✓ Community entusiasta X poco sicuromartedì 22 gennaio 13
  104. 104. martedì 22 gennaio 13
  105. 105. martedì 22 gennaio 13
  106. 106. ✓ Robustomartedì 22 gennaio 13
  107. 107. ✓ Robusto ✓ Ottima gestione contenutimartedì 22 gennaio 13
  108. 108. ✓ Robusto ✓ Ottima gestione contenuti ✓ Community solidamartedì 22 gennaio 13
  109. 109. ✓ Robusto ✓ Ottima gestione contenuti ✓ Community solida X inizialmente osticomartedì 22 gennaio 13
  110. 110. Web 2.0martedì 22 gennaio 13
  111. 111. Web 2.0 BLOGmartedì 22 gennaio 13
  112. 112. Web 2.0 BLOGmartedì 22 gennaio 13
  113. 113. Web 2.0 BLOGmartedì 22 gennaio 13
  114. 114. Web 2.0 BLOGmartedì 22 gennaio 13
  115. 115. Web 2.0 HEADER grandi e illustratimartedì 22 gennaio 13
  116. 116. Web 2.0 ROUNDED CORNERSmartedì 22 gennaio 13
  117. 117. Web 2.0 ROUNDED CORNERS ✓ “accoglienti” ✓ “rassicuranti” ✓ focus all’interno dell’oggettomartedì 22 gennaio 13
  118. 118. Web 2.0 SOCIAL ICONSmartedì 22 gennaio 13
  119. 119. Web 2.0 SOCIAL ICONSmartedì 22 gennaio 13
  120. 120. Web 2.0 SOCIAL ICONSmartedì 22 gennaio 13
  121. 121. Web 2.0 AJAX effetti javascript anche nell’interfaccia (div che scompaiono, si ricaricano etc.)martedì 22 gennaio 13
  122. 122. Web 2.0 FEEDSmartedì 22 gennaio 13
  123. 123. Web 2.0 FEEDS le informazioni possono essere visualizzate in modo personalizzato dall’utentemartedì 22 gennaio 13
  124. 124. Web 2.0 COLORI uso di colori pastello nel web designmartedì 22 gennaio 13
  125. 125. Web 2.0 BUTTONS gli oggetti che richiedono azione (call-to actions) sono volutamente sproporzionatimartedì 22 gennaio 13
  126. 126. Web 2.0 BUTTONS ISCRIVITImartedì 22 gennaio 13
  127. 127. Web 2.0 ONE PAGE SITESmartedì 22 gennaio 13
  128. 128. Web 2.0 FORM inviamartedì 22 gennaio 13
  129. 129. Web 2.0 USER GENERATED CONTENT inviamartedì 22 gennaio 13
  130. 130. Web 2.0 USER GENERATED CONTENT i siti web diventano contenitori di contenuti piuttosto che di oggettimartedì 22 gennaio 13
  131. 131. USER GENERATED CONTENT i siti web diventano contenitori di contenuti piuttosto che di oggettimartedì 22 gennaio 13
  132. 132. i CMS opensource più famosi etcmartedì 22 gennaio 13
  133. 133. tools WYSIWYG per web publishing etcmartedì 22 gennaio 13
  134. 134. FLASHmartedì 22 gennaio 13
  135. 135. FLASHmartedì 22 gennaio 13
  136. 136. FLASHmartedì 22 gennaio 13
  137. 137. FLASH 2008martedì 22 gennaio 13
  138. 138. FLASHmartedì 22 gennaio 13
  139. 139. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  140. 140. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  141. 141. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  142. 142. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  143. 143. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  144. 144. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  145. 145. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  146. 146. RESPONSIVE WEB DESIGN « in essence, RWD is adapting a website to best fit the device viewport. »martedì 22 gennaio 13
  147. 147. RESPONSIVE WEB DESIGN ✓ Accessibilità (canonical web location) ✓ Conservabilità (un solo HTML) ✓ Usabilità (facile da navigare su tutti i dispositivi)martedì 22 gennaio 13
  148. 148. RESPONSIVE WEB DESIGN FRAMEWORKmartedì 22 gennaio 13
  149. 149. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  150. 150. RESPONSIVE WEB DESIGNmartedì 22 gennaio 13
  151. 151. RESPONSIVE WEB DESIGN Google approva ufficialmentemartedì 22 gennaio 13
  152. 152. RESPONSIVE WEB DESIGN Google approva ufficialmente Navigazione sito tap-orientedmartedì 22 gennaio 13
  153. 153. RESPONSIVE WEB DESIGN Google approva ufficialmente Navigazione sito tap-oriented Interfaccia web che trascura l’hover dei link?martedì 22 gennaio 13
  154. 154. follow.androe.commartedì 22 gennaio 13

×