- 1. H I S T O R I A Y E V O L U C I O N D E L D I S E Ñ O W E B
- 2. I N I C I O S D E L O S A Ñ O S 9 0 Texto plano http://blog.froont.com/content/images/2014/12/01-Tab_keys-1.gif
- 3. I N I C I O S D E L O S A Ñ O S 9 0 • Eran módems de acceso telefónico, por lo tanto, los sitios web de estos primeros días necesitaban ser construidos para conexiones lentas. • Estaban compuestos en gran parte de texto, y lo que ahora damos por sentado como "la disposición de diseño" no existía. T E X T O P L A N O
- 4. A PA R I E N C I A D E L P R I M E R S I T I O W E B 1 9 9 2
- 5. I N I C I O S D E L O S A Ñ O S 9 0 • Mientras que las versiones posteriores de HTML permitían diseños más complejos, todavía eran extremadamente básicos, consistían principalmente de etiquetas para los encabezados, párrafos y enlaces. • Consideraciones visuales tales como la tipografía, imágenes, y la navegación eran todavía las cosas de un futuro no muy lejano. T E X T O P L A N O
- 6. YA H O O 1 9 9 5
- 7. A M A Z O N 1 9 9 5
- 8. M E D I A D I O S D E L O S A Ñ O S 9 0 • Aunque los sitios seguían consistiendo en texto plano se empezó a observar el uso de efectos en el texto • Texto de color, barras de scroll • Se podían observar muchos sitios con contadores de visitas
- 9. M E D I A D O S D E L O S A Ñ O S 9 0 Sitios estructurados con tablas http://blog.froont.com/content/images/2014/12/02-Tables-1.gif
- 10. D I S E Ñ O B A S A D O E N TA B L A S • Sitios con múltiples columnas y secciones • Layouts dinámicos no sólo basados en texto • Estructura lo más cercana a un "grid"
- 11. E B AY 1 9 9 7
- 12. N E W Y O R K T I M E S 1 9 9 6
- 13. W E AT H E R C H A N N E L 1 9 9 6
- 14. A M E R I C A N E X P R E S S 1 9 9 6
- 15. A P P L E 1 9 9 6
- 16. M E D I A D O S D E L O S A Ñ O S 9 0 Inclusión de Javascript http://blog.froont.com/content/images/2014/12/03-Javascript-1.gif
- 17. M E D I A D O S D E L O S A Ñ O S 9 0 • Los textos cambiaban de color en sus diferentes estados • Algunos sitios integraron música y audio • Color para los fondos • Inclusión de imágenes • GIF's animados
- 18. M E D I A D O S D E L O S A Ñ O S 9 0 • Inclusión de Javascript • Menús de navegación con menús desplegables (dropdown menu) y formularios
- 19. G O O G L E 1 9 9 8
- 20. N E T F L I X 1 9 9 7
- 21. M S N 2 0 0 0
- 22. YA H O O 2 0 0 2
- 23. M E D I A D O S - F I N A L E S D E L O S A Ñ O S 9 0 Creación de sitios utilizando la tecnología Flash http://blog.froont.com/content/images/2014/12/04-Flash-1.gif
- 24. U S O D E F L A S H E N L A C R E A C I O N D E S I T I O S W E B • Abrían una gama de posibilidades que no se lograban únicamente con HTML • Gráficos + Interacción
- 25. U S O D E F L A S H E N L A C R E A C I O N D E S I T I O S W E B • Podían contener música, elementos gráficos, navegación no convencional • Uso de tipografía pequeña • Intros animados • Mayor inclusión de audio y video
- 26. E J E M P L O D E S I T I O F L A S H 2 0 0 8
- 27. W E B 2 . 0 • Implementación de contenido interactivo • Surgimiento de las Redes Sociales
- 28. L I N K E D I N 2 0 0 2
- 29. FA C E B O O K 2 0 0 4
- 30. Y O U T U B E 2 0 0 5
- 31. T W I T T E R 2 0 0 6 http://s.wsj.net/public/resources/images/OB-SH610_Obama1_F_20120321105020.jpg
- 32. I N I C I O S D E L A D É C A D A D E 2 0 0 0 Hojas de estilo http://blog.froont.com/content/images/2014/12/05-CSS-2.gif
- 33. I N I C I O S D E L A D É C A D A D E 2 0 0 0 • Popularización de las Hojas de Estilo en Cascada (CSS) • Las Hojas de Estilo permitían agregar color de fondo, color, tamaño y estilo al texto desde el código
- 34. I N I C I O S Y M E D I A D O S D E L A D É C A D A D E 2 0 0 0 • Mayor soporte a CSS, lo que permitía separar el contenido del diseño • Esta división facilitó el diseño, desarrollo y mantenimiento lo que generó sitios más flexibles y ligeros
- 35. F I N A L E S D E L A D É C A D A D E 2 0 0 0 Atención a móviles http://blog.froont.com/content/images/2014/12/06-Grids-1.gif
- 36. M E D I A D O S Y F I N A L E S D E L A D É C A D A D E 2 0 0 0 • Desde el punto de vista del diseño hubo mejor comprensión del color, teniendo un incremento en los espacios blancos y eliminando las tonalidades neon • Los links comenzaron a asociarse a íconos en vez de puro texto • La USABILIDAD comenzó a cobrar mayor importancia
- 37. M E D I A D O S Y F I N A L E S D E L A D É C A D A D E 2 0 0 0 • Desde el punto de vista del diseño se empezó a poner más atencion aún en el uso del color, íconos y tipografía • Mayor atención a las Herramientas de Optimización de Búsqueda (SEO)
- 38. P R E S E N T E • Diseño responsivo • Priorización del diseño para móviles (Mobile First) • Navegación One Page y Endless Scrolling • Imágenes, animaciones o videos a pantalla completa • Flat Design • Card design
