Las tendencias web que aparecieron en 2013

Ya a escasos días de que concluya el año empiezan a gobernar los artículos de internet lo mejor de lo mejor del año. No es raro ver que cada quien hace sus propias listas de lo bueno y lo malo del año, y aquí en Vida MRR no va a ser la excepción. Dado que nuestro tema aquí es el de diseño web que mejor que empezar a hablar sobre las mejores tendencias web que aparecieron en 2013.

No es como que hubieran nacido muchos estilos y maneras diferentes de hacer sitios web en un año, de hecho la mayoría de los que les presento ya existían en 2012, pero por pura moda y simplicidad se pusieron de moda en estos doce meses. Muchos, sino es que todos, los vimos aquí en el blog conforme se iban desarrollando, así que a los más fieles no les sorprenderá nada cada estilo.

1. El responsive design

Con la proliferación de los dispositivos móviles se hizo fuerte y muy necesario el poder adaptar un diseño web a diferentes formatos de pantalla. El responsive design nos ayuda en el cometido, y aunque sigue siendo una técnica con muchas variantes para implementar sigue siendo mucho más eficiente que crear otro sitio web desde cero.

2. Flat design

Con Apple poniendo fin al skeumorfismo, aquel que el no inventó pero si fue el único en usar en prácticamente todo su ecosistema nació el flat design. El flat design nos enseña que hay un intermedio entre el minimalismo que es la ausencia de cualquier elemento no necesario, a tener elementos secundarios en un diseño sin sombras ni degradados ni texturas que asemejen a cualquier cosa real.

3. Headers estáticos

Algo tan sencillo como declarar en CSS un elemento como fijo hizo de este año un gran boom en el uso de headers estáticos. Pueden variar los headers a simplemente el logo que siempre aparece en la pantalla, o a menús que no se ocultan conforme se baja y navega por el sitio web. Un tanto molesto si no se sabe distribuir el espacio entre lo que el usuario debería de ver ya que sino se asemejará a esas fechas en que IE podía tener miles de barras ancladas en su interfaz y el sitio web apenas tenía unos pocos pixeles de altura.

4. Efecto parallax

El efecto más vistoso sin duda de cualquiera que exista en la lista. El efecto parallax ya tiene sus años en la lista de efectos de los sitios web, y sin embargo cada año sale alguien agregando un detalle nuevo, o un nuevo toque diferente que hace que irremediablemente todos quieran copiarlo. El efecto parallax recordemos, no es exclusivo de los sitios web, data desde la animación clásica de Disney al poner profundidad a los diferentes niveles de paisaje y personajes en 2D, de tal manera que al iniciar una escena ningún elemento se mueva a la misma velocidad, sino que de verdad parezca que hay algo detrás o enfrente, simulando la velocidad de la vida real.

El efecto parallax también no tiene una única implementación. Carece de muchas cosas como adaptabilidad, pero si se decide usar este efecto nada más los resultados pueden ser asombrosos. Lo bueno de este efecto es que al paso que vamos en 2014 seguiremos viendo nuevas formas de aprovechar este truquito de magia entre Javascript y CSS.

5. Scroll infinito

Twitter fue el pionero en colocar un scroll infinito a timeline, de manera que aunque lleguemos al final de la página se carguen más tweets. Facebook también ya implementa esto, Pinterest igual y con esa constancia y moda que imponen las redes sociales también ya son muchos los sitios web, especialmente blogs, los que añaden este recurso que evita que se tenga que refrescar la página. Todo esto es gracias a la tecnología AJAX y sus peticiones asíncronas, lo que nos facilita mucho la vida, al tener que esperar unos cuantos segundos o menos en que el nuevo contenido cargue dentro de una capa.

6. Soporte para las pantallas retina

Muchos creen que a estas alturas Apple sigue imponiendo nuevas formas de desarrollar para internet. Lo hizo con Safari y HTML5 cuando aún no tenía App Store, pero ahora que ya tiene su ecosistema controlado para que usemos en lo mínimo posible tanta tecnología abierta, decide que todos deberían adaptarse a las pantallas Retina Display de sus productos.

Las pantallas retina no son más que pantallas con una densidad de pixeles por pulgada muy grande, una forma de tener muchos pixeles en una pantalla pequeña, haciendo que la nitidez sea excelente y el pixelado mínimo. Al tener una pantalla así la computadora no tiene más remedio que agrandar aquellos elementos que no están hechos para dicha resolución, provocando un pixelado en estos últimos. Con el responsive deisgn podemos especificar cargar imágenes de mayor resolución si nos encontramos con dichas pantallas, o dejar las imágenes actuales que son más eficientes y menos pesadas.

7. Uso de tipografías

Google Fonts empezó a estandarizar el uso de fuentes web, para evitar lidiar con el dolor de cabeza de los font-face. Además de esta forma se podían usar fuentes libres para cualquier fin o propósito en un sitio web. Con ello nacieron también otras opciones y a nivel de desarrollador un nuevo nivel de formas de diseño, donde podemos embeber cualquier tipo de fuente para hacer mucho más atractivos los títulos y textos de nuestros sitios. Lo mejor de todo es que con esto nos ahorramos el tener que usar Photoshop para diseñar dichos títulos con tipografía elegante.

8. Diseños con círculos

Más que tendencia es algo que ya se venía venir. En los años 90 todo era cuadrado en las interfaces de computadoras, debido a que no había suficiente poder computacional para que una computadora pudiera calcular una simple curva. Ahora estamos en una época donde lo cuadrado es entendiblemente excluido (sólo Microsoft le apuesta todavía a esto) y por lo tanto si en 2012 vimos en la web el uso del border-radius para poder empezar a añadir bordes a nuestros botones y elementos generales, en este año se fueron con todo haciendo círculos como nunca.

Simplemente hay que notar que muchos perfiles de redes sociales usan el círculo para la foto de perfil, o Google+ que podría decirse que a el le encantan los círculos. En fin, ya prácticamente como estándar sin prefijos en todos los navegadores se usaron círculos y círculos, y a decir de eso, lucen bastante bien.

9. Animaciones

El uso de los pre procesadores y las animaciones en CSS3 hicieron posible que los sitios web no sólo se movieran de un lado a otro conforme bajamos el scroll, sino que también agregaron nuevas animaciones basándose en el eje X, Y y Z. Es impresionante como con movimientos como traslaciones, rotaciones y sesgos se pueden crear otras animaciones más llamativas, pero pues es posible.

10. Súper botones

Llamar la atención del usuario siempre es lo primero en lo que tenemos que enfocarnos al hacer un sitio web. Si no logras llamar la atención del usuario el sitio web no sirve. Ahora, cuando ya tienes su atención lo que debes hacer es seguir llamando a su inconsciente y obligarlo a que vea ciertos elementos primero antes que otros.

Una tendencia este año fue el hacer los botones más grandes, sobre todo para tentar a los usuarios a comprar, a compartir, a recomendar, a lo que sea. Hoy en día el botón debe ser grande para que sea vistoso, sobre todo si el sitio tiene mucho contenido, pero igual funciona cuando hay poco. No es algo que creo que se puso de moda como tal, sino más bien los diseñadores se dieron cuenta que hacer un botón más grande que el tamaño de texto en línea hace que exista una mejor usabilidad para el usuario.