Cómo ha evolucionado el diseño web, desde sitios web elaborados en texto plano hasta las tendencias actuales como Diseño Responsivo y Flat Design

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