10 AÑOS DE DISEÑO WEB, ¿QUÉ COSAS HAN CAMBIADO?

Sitelicon, padre de Contrabase y de este blog, está de aniversario. Cumple 10 años, y queremos hacer balance de lo que hemos aprendido y mejorado en este tiempo. En 2005, el diseño web había llegado a cierta madurez y ya no era el horror de los inicios, pero aún así, muchas cosas han seguido evolucionando hasta llegar al día de hoy y nosotros nos hemos ido adaptando a ello. Te contamos algunos de los cambios más significativos de los últimos 10 años en el diseño web:

tamanopantalla

TAMAÑO DE PANTALLA

1024px vs multipantalla

2005  Solo nos conectábamos desde el ordenador, con una pantalla que probablemente tendría 1024 px de ancho o similar, y todas las webs se diseñaban para encajar en ese tamaño estándar.

2015  Ahora nos podemos conectar a internet desde una gran variedad de dispositivos grandes o pequeños: desde la tele de casa hasta el móvil que llevamos en el bolsillo. Incluso, más recientemente, desde las aplicaciones de los nuevos relojes de pulsera inteligentes. Probablemente este gran cambio es lo que más ha influido a la hora de diseñar.


 

fijoresponsive

ESTRUCTURA

Ancho fijo vs diseño responsive

2005  Casi todas las webs se diseñaban con un ancho fijo. También existía el diseño fluido, que permitía que el contenido se expandiera según el ancho de la pantalla, pero era algo minoritario y no válido para cualquier diseño.

2015  ante la proliferación de diferentes dispositivos y tamaños lo que se ha impuesto es el diseño responsive, que adapta o reubica el contenido de la web para garantizar que siempre se vea bien desde cualquier pantalla.


 

webclasicaapp

APLICACIONES

Web clásica vs app

2005  Nos conectábamos a internet para visitar páginas web.

2015  Además de navegar por las webs tradicionales, con la generalización del mundo móvil (smartphones, tablets…), también realizamos tareas en internet a través de apps. Éstas se conciben de manera diferente a una web y han marcado nuevas normas a la hora de diseñar.


 

animaciones

ANIMACIONES

Fash vs HTML5 & CSS3, jQuery

2005  Flash era gran recurso para los diseñadores. Permitía introducir en la web animaciones visualmente muy atractivas, contenido interactivo y otros efectos. Sin embargo, esto era fundamentalmente ornamental y presentaba muchos problemas: flash no se visualizaba en cualquier dispositivo, y el contenido en este formato no era indexado por los buscadores.

2015  HTML5, CSS3 y jQuery abren nuevas posibilidades. No solo ha cambiado la tecnología, mucho más amigable para buscadores y para mejorar la experiencia de usuario. El estilo de las animaciones ha cambiado, ya no buscan el efectismo sin más, sino apoyar la usabilidad y mejorar de forma sutil y práctica la experiencia de usuario.


 

esteticaux

ENFOQUE

Estética vs UX

2005  En esta época las posibilidades de diseño se estaban ampliando enormemente. Cada vez había menos límites en el uso de colores, tipografías, imágenes, etc. y crecía el interés por crear sitios web visualmente profesionales y estéticos.

2015  Hoy tenemos más recursos técnicos de diseño que nunca y la preocupación por crear webs atractivas continúa. Sin embargo, la usabilidad y la experiencia del usuario son la máxima prioridad en el proceso de diseño.


 

introhome

PÁGINA DE INICIO

Página intro vs home directa

2005  No todas las webs eran así, pero estaban de moda las páginas intro. Eran una especie de presentación previa, a menudo en flash, que debías “saltar” si querías ir directamente al contenido de la web.

2015  Diseñar bien la página de inicio es vital, tanto de cara al usuario como para buscadores. Esto implica que la home debe ser atractiva, pero también contener la información principal.


 

cortasparallax

SCROLL

Páginas cortas vs parallax

2005  En general se evitaban las páginas demasiado largas que requerían hacer mucho scroll. El usuario podía molestarse o aburrirse si tenía que bajar demasiado para encontrar la información que quería, y de cara a buscadores, las páginas infinitas tampoco eran óptimas. Esto hacía que a veces se “apelotonara” un poco el contenido cuando éste tenía mucho volumen.

2015  Con la variedad de tamaños de pantalla, el pánico por el scroll casi se ha dado la vuelta. Ahora es casi un recurso necesario, sobre todo para navegar cómodamente desde el móvil. Incluso ha dado pie a la creatividad, como los efectos parallax que han proliferado últimamente.


 

iconosimagenfuente

ICONOS

Imagen vs fuente

2005  Cuando queríamos incluir iconos en la web normalmente eran imágenes png o jpg.

2015  Ahora podemos insertar los iconos como una tipografía. ¿Ventajas?: son escalables y no se pixelan, se les puede añadir estilos mediante CSS y se reducen las solicitudes al servidor.


 

imagenesornametocontenido

IMÁGENES

Ornamento vs contenido

2005  En esta época ya se utilizaban fotos y gráficos de buena calidad para acompañar a los textos o apoyar la identidad de la web. Cada vez hay menos restricciones en la maquetación, pero las imágenes aún son un elemento complementario u ornamental.

2015  Las imágenes tienen protagonismo total y hay múltiples opciones para su uso: fotazas a pantalla completa, gráficos animados, gifs modernizados, galerías de todo tipo… Las imágenes aportan valor.


 

video

VIDEO

Reproductor insertado vs integración total

2005  Nace Youtube y poder insertar vídeos en webs y blogs supone toda una revolución. En los inicios el reproductor de vídeo estaba basado en Flash.

2015  El vídeo adquiere protagonismo en la web. Supone un tipo de contenido muy valioso y también es atractivo para el usuario. La tecnología y el estilo de los reproductores ha evolucionado enormemente e incluso se pueden insertar vídeos como elemento de diseño, como fondo de una web, por ejemplo.


 

BALANCE

Internet evoluciona y cada vez más rápido ¿Cuáles serán los próximos retos del diseño web? Parece que los wearables van a marcar las próximas tendencias. Relojes y gafas inteligentes, realidad aumentada, mayor interactividad… ¿Qué opináis? ¡Seguimos aprendiendo!

Sitelicon
sitelicon@gmail.com