Top 10 Tendencias de Diseño Web del 2013

Ya que el mundo no llegó a su fin el 21 de diciembre pasado, lo mejor es ir prestando atención a las nuevas tendencias de diseño web para el 2013.

En el 2012 hemos sido testigos de cómo las tendencias del diseño web se han ido implantando como piedras fundamentales en el rediseño de toda web. Al parecer, el 2013 continuará el mismo sendero: Webs adaptables, que hagan uso de los estándares y enfocadas en la usabilidad y velocidad son las premisas. Este es nuestro Top 10 Tendencias de Diseño Web del 2013, que no podemos dejar de conocer.

1. Diseño Responsivo (Responsive design)

Aún no sabemos bien como traducirlo, pero el responsive design ya es toda una tendencia en el mundo. En los últimos meses, muchos de los sitios más populares de internet ya han rediseñado sus web teniendo en cuenta este enfoque. ¿Qué es Responsive Web Design?.

2. Transparencias con CSS

Las nuevas propiedades de CSS3 nos permite modificar la opacidad de cualquier elemento de una página web. Esto significa que podemos controlar la transparencia de las imágenes, los divs, etc. Para dar un look moderno a nuestro sitio web, Photoshop ya no es necesario. Sin embargo, hay que tener en cuenta que los navegadores más arcaicos pueden tener dificultad en mostrar las transparencias correctamente.

Ejemplo | blog.squarespace.com

3. Barras fijas en la cabecera de la web

No sé si ya se han percatado, pero muchos nuevos rediseños incluyen esta característica. Cuando hacemos scroll en la página, automáticamente la cabecera (que incluye el menú principal) flota fija en la parte superior de la web. En varios casos, se reduce su altura para no ocupar mucho espacio y permitir una cómoda lectura.

Ejemplo | elcomercio.pe

4. Tipografías variadas y bien diseñadas

Los días de Arial y Verdana parece que llegan a su fin. En el 2013 esperamos que la mayoría de rediseños incluyan fuentes únicas o especiales, que se integren bien con el diseño de la web y que contribuyan a mejorar el aspecto creativo de la web. La tipografía se ha convertido en una parte importante de cualquier diseño web.

Ejemplo | moresoda.co.uk

5. Cajas que resaltan

Los populares slideshows están teniendo competencia. Por lo general los diseñadores solían recurrir a carruseles o slideshows para destacar un contenido sobre el resto. Eso parece que esta cambiando, ya que hoy por hoy empiezan a abundar los sitios con cajas estáticas que destacan el contenido.

Estas cajas suelen ser estáticas, de un ancho y alto fijo, con una imagen como fondo y el título del contenido sobre ella. Podemos ver varios ejemplos de este, por ejemplo nosotros lo utilizamos en nuestra sección de videos y un ejemplo mucho más claro lo podemos apreciar en el rediseño de theverge.com.

6. Animaciones con HTML5

Flash aún sigue en la lucha, pero durante este año ya no podemos decir que Flash es el rey. Si bien aún existe una infinidad de sitios (legado) que usan Flash, en el 2013 empezaremos a ver como el número de sitios animados con HTML5 incrementan. Una prueba de esto podemos verlo en el sitio del juego del increíble hombre araña, el cual previamente estaba diseñado en flash.

7. Soporte Retina

Aún no se aplica, pero con el incremento de dispositivos que ofrecen retina display (sobre todo los de Apple), esperamos que los nuevos diseños además de responsivos también muestren gráficos de alta densidad. Es decir, el número de píxeles físicos se mantiene, pero digitalmente la cantidad de píxeles se duplican en el mismo espacio. Las pantallas Retina son básicamente dos veces más densas que un LCD promedio.

Retina.js es una librería JavaScript que automáticamente muestra copias de imágenes optimizadas para equipos con retina display. Sería bueno ir dándole una mirada.

8. Scroll infinito

Empiezan a aumentar la cantidad de sitios que permiten cargar más contenido haciendo scroll al navegador. Si bien, esto ya era una práctica en sitios populares como Google Images, es en los últimos meses cuando un mayor número de sites empiezan a crear la tendencia. Por ejemplo, Pinterest o Tumblr.

9. Ocultar y Mostrar el menú de navegación en los dispositivos móviles

Una de las cosas más complicadas a la hora de diseñar con responsive design es construir un menú de navegación sencillo y útil. Una de las tendencias que se esta imponiendo, a propósito del uso de frameworks CSS, es la forma de Mostrar y ocultar el menú en los dispositivos móviles, pulsando en un botón.

Un claro ejemplo, lo podemos apreciar en cualquier sitio (de los muchos) que usan Twitter Bootstrap (No olvides reducir el ancho de la ventana del navegador, para observar como cambia el navbar).

10. Una imagen como background de toda la página

Ya muchos sitios tienen en cuenta esta aproximación: Una imagen vale más que mil palabras. Y una imagen bien elegida es suficiente para resaltar la marca del sitio web. Plus: El diseño se mantiene sencillo y limpio.

Ejemplo | Davidia

¿Se me pasó alguna?

Espero que tengas en mente estas tendencias y el efecto que tendrán en los diseños de las próximas web. Ya hemos visto ejemplos tanto en sitios pequeños como muy populares. Pero, si crees que estoy olvidando alguna tendencia o consideras que alguna no debería aparecer en esta lista, deja tu comentario.