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:
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.
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.
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
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.
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.
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.
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.
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.
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
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!