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

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

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

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 B1 9 9 2

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

YA H O O1 9 9 5

A M A Z O N1 9 9 5

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

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

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"

E B AY1 9 9 7

N E W Y O R K T I M E S1 9 9 6

W E AT H E R C H A N N E L1 9 9 6

A M E R I C A N E X P R E S S1 9 9 6

A P P L E1 9 9 6

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

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

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

G O O G L E1 9 9 8

N E T F L I X1 9 9 7

M S N2 0 0 0

YA H O O2 0 0 2

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

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

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

E J E M P L O D E S I T I O F L A S H2 0 0 8

W E B 2 . 0

• Implementación de contenido interactivo

• Surgimiento de las Redes Sociales

L I N K E D I N2 0 0 2

FA C E B O O K2 0 0 4

Y O U T U B E2 0 0 5

T W I T T E R2 0 0 6

http://s.wsj.net/public/resources/images/OB-SH610_Obama1_F_20120321105020.jpg

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

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

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

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

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

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)

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