En base a mi experiencia como profesional del diseño web, analizando las páginas web de los mejores diseñadores y programadores que marcan tendencia, y un poco de imaginación, elaboré esta lista de tendencias en Diseño Web para el 2013.
Este 2013 va a traer grandes cambios en el diseño web. La rápida difusión de tablets y smartphones está cambiando la forma de concebir el diseño de una página web.
Avances como HTML5 y CSS3 que, años anteriores fueron novedad, en 2013 se convertirán en estándar gracias a que la mayoría de los usuarios ya tiene navegadores compatibles.
1. Responsive Web Design
La pongo primera por ser la más importante. Pero más que una tendencia es una obligación a esta altura. Pensar el Diseño Web sólo para ordenadores y que se vean igual en smartphones, tablets, etc, es obsoleto.
Probablemente 2013 será el año en que todos los diseñadores/as comiencen a diseñar pensando en todos los dispositivos y tamaños de pantalla a la vez.
“Responsive Web Design” es una técnica que detecta el tamaño de pantalla del dispositivo mediante el cual el usuario está viendo una página web y muestra un diseño especialmente adaptado al tamaño de pantalla. Ajusta el tamaño y disposición de textos e imágenes para facilitar su lectura.
Al diseñar y programar la página web, el diseñador determina la posición y tamaño de los elementos para cada tamaño de pantalla.
2. WordPress
¿Joomla o WordPress? Tanto diseñadores como clientes se deben haber hecho esta pregunta muchas veces.
WordPress se consagrará como estándar absoluto en 2013 y Joomla va camino a quedar en el museo de CMS’s.
WordPress es el CMS más recomendado por consultores SEO porque su código es perfecto para posicionamiento en buscadores.
Para diseñadores web es flexible y permite una total integración con cualquier diseño por complejo que sea.
Para el cliente final es extremadamente fácil de usar, con uno o dos unas horas de práctica.
Además la comunidad WordPress y la colaboraciones plugins y módulos han crecido de tal forma que hoy en día casi cualquier función, por compleja que sea, se puede resolver con WordPress.
Y si te queda alguna duda, mira las tendencias de búsqueda de los últimos años para los términos “wordpress” y “joomla”.
3. Influencia Metro, Pinterest y Timeline de Facebook
Metro: No me sorprendería ver una avalancha de páginas web imitando el estilo “Metro” de Windows 8 con íconos, titulos y fotos ordenados en una cuadrícula.
Pantalla dividida o en zig-zag: Imitando el “Timeline” de Facebook los contenidos se organizan con la pantalla dividida a la mitad. Es una forma bastante efectiva de mantener la atención, ya que provoca una lectura en zig-zag.
Pinterest: Y para organizar trabajos en un portfolio el estilo Pinterest con su cuadrícula dinámica que varía según la altura de las fotos.
4. Webs de una sóla página.
A diferencia de la mayoría de las páginas web que tiene cada sección en páginas diferentes que deben cargarse luego de hacer clic en un botón del menú, las páginas web de una sola página tienen todo el contenido en la “Home”.
El contenido se organiza verticalmente, y permite navegarlas cómodamente con sólo desplazarse verticalmente. Lo que las hace ideales para visualizarse desde tablets o smartphones.
No las recomendaría para cualquier proyecto. Pero pueden ser muy efectivas para productos que requieran gran impacto visual y comunicar un mensaje muy concreto con poco contenido. Por ejemplo para “landing page” de un producto o servicio concreto, eventos, etc.
EJEMPLO: https://exposanten.belgianboatshow.be/nl/
5. Animaciones asociadas al desplazamiento vertical
Las posibilidades de CSS3 apenas están siendo exploradas en la mayoría de las páginas web.
Un nuevo recurso poco explotado todavía es la posibilidad de que elementos del diseño se muevan, aparezcan o desaparezcan a medida que el usuario se desplaza verticalmente (scroll down). Ya sea con el mouse, trackpad o touchscreen.
6. Cinemagraphs
¿Cinemagraphs? Sí, ¿porque no? Porqué poner sólo imágenes estaticas si por unos Kb más se puede poner un simpático “cinemagraph”
Un “cinemagraph” es un gif de pocos cuadros en que se repite en blucle.
Por ejemplo:
