Tendencias en Diseño Web 2013-2014

Desde unos hace unos años estamos viendo que el Diseño Web, al igual que otros sectores como la moda o la decoración, está adoptando ciertas tendencias y estilos que los diseñadores y desarrolladores web integran en sus trabajos y que incluso los clientes los demandan a la hora de plantear un proyecto.

A través de un trabajo de investigación y de mi propia experiencia como diseñadora web, he recopilado algunas de las tendencias que están pisando fuerte en 2013 y que sin duda seguirán con nosotros en 2014.

 

Diseño «flat»

El diseño “flat”, también llamado “estilo metro”,  es el uso de colores planos y formas geométricas.

Nos olvidamos de los degradados, las sombras, los relieves y las composiciones complejas… y nos centramos en el uso de colores sólidos y llamativos, formas geométricas e iconos que en ocasiones sustituyen a las imágenes.

Una de las ventajas de este tipo de diseño es la adaptabilidad a diferentes dispositivos y la facilidad de navegación.

Un buen ejemplo de diseño “flat” es toda la estética que ha adoptado Windows8 y que muchas webs ya están imitando.

windows-8

 

Diseño responsive

Ya llevamos tiempo viendo cómo la webs se diseñan para adaptarse a los diferentes dispositivos, especialmente a tablets y smartphones.

La tendencia actual y futura es utilizar el mismo diseño, la misma url y los mismos contenidos en los diferentes soportes, evitando la creación de webs exclusivas para móviles y centrando los esfuerzos en lograr un diseño totalmente responsivo.

 web-responsivo

Experiencia de usuario y facilidad de navegación

Como ya hemos mencionado, la tendencia nos lleva a la simplicidad, especialmente para mejorar la usabilidad y la experiencia del usuario en nuestro sitio web. Nos encontramos ante sitios mejor estructurados donde se eliminan elementos superfluos y se mejora la navegación, tanto para usuarios experimentados como para los más novatos. Este aspecto es muy importante en el comercio electrónico, ya que se simplifica el proceso de compra y se aumentan las ventas.

experiencia_usuario

Scroll infinito y Parallax Scrolling

El Scroll infinito es aquel que nunca termina; a medida que avanzas hacia abajo van apareciendo nuevos contenidos. Este tipo de scroll tiene sus ventajas e inconvenientes, por lo que hay que elegir muy bien cuándo utilizarlo. Puede resultar engorroso si el usuario busca una información en concreto, mientras que es positivo para mostrar imágenes o nuevos productos, especialmente en tablets y smartphones.

El Parallax Scrolling es un efecto muy de moda donde el fondo y el resto de elementos se mueven en diferentes direcciones y velocidades, ofreciendo una gran sensación de dinamismo y un efecto 3D que “engancha” al usuario. Además de utilizarlo como recurso estético, debemos intentar que aporte una “experiencia de navegación” a nuestra audiencia y así retenerla un mayor tiempo en nuestra web.

parallax2

 

parallax1

Header fijo

La cabecera de la página se queda siempre fija y visible en la parte superior de nuestra web. De este modo el menú siempre está accesible para el usuario.

haderfijoOK

 

HTML5 y CSS3

En el 2013 se vaticina el final de Flash; no es bueno para el seo, es complejo de actualizar y muchos dispositivos no lo soportan. Será sustituido por HTML5 y CSS3, que nos permiten crear fantásticas animaciones con un peso mucho inferior a flash, lo que mejorará, entre otras cosas, la velocidad de nuestra web.

htmlycss

 

Democratización de las tipografías

Hasta hace poco tiempo, los diseñadores estábamos muy limitados en el uso de tipografías en la web, ya que tan sólo podíamos aplicar al diseño unas cuantas familias, y cuando necesitabas utilizar otra fuente tenías que convertirla en imagen, lo que resultaba muy poco práctico.

Actualmente, gracias a CSS3, podemos adjuntar a nuestro proyecto la tipografía que deseemos, siempre que pueda ser utilizara para web. Un buen sitio donde obtener tipografías web gratuitas para tus desarrollos es Google Fonts.

 

Diseñando a lo grande

Todos los elementos web se hacen más grandes y ganan en visibilidad. Esta tendencia está directamente relacionada con los esfuerzos por adaptarnos a pantallas táctiles.

Imágenes o vídeos de fondo a pantalla completa, tipografías enormes con breves mensajes, botones de gran tamaño que faciliten la navegación, etc.

textosgrandes

¿App móvil o diseño responsivo?

A pesar de la tendencia a crear un mismo diseño web para todos los dispositivos,  es cierto que en ocasiones una buena app puede sustituir con éxito a la navegación. Se recomienda la creación de app para aquellas webs que tengan gran cantidad de contenido, el usuario las visite frecuentemente, o tenga un claro objetivo, como por ejemplo la reserva de un vuelo o la compra de algún artículo.

apps

 

Estilo Pinterest

Durante 2011 esta red social alcanzó gran popularidad en EEUU, llegando ya en 2012 y 2013 a Europa. Desde entonces, su estética de cuadrícula sencilla y estructurada se ha convertido en tendencia.

En el tablero de Pinterest, los cuadros guardan el mismo ancho, variando sólo la altura de los mismos. Como variación a esta tendencia, también se han desarrollado webs donde los cuadros cambian dinámicamente de altura y anchura, adaptándose a la perfección a la estructura de la web.

estiloPinterest

 

El contenido sigue siendo el rey

Y por último, recordar que en vuestra web, el contenido sigue siendo el rey, pues es lo que nos permite mantener una comunidad de usuarios interesada y mejorar día tras día nuestro posicionamiento.

En vuestras manos está la capacidad combinar los elementos de diseño y el contenido de vuestros proyectos para lograr un mejor resultado.

 

¿Qué otras tendencias has notado que se utilizan en el diseño web? ¿Qué tendencia te gustaría aplicar a la página de tu empresa?

7 Comments

  • Avatar

    leonardo

    24.07.2013 at 16:31 Responder

    Me gusto mucho tu articulo Maria! Soy diseñador y me gusta estat al tanto de los avances y tendencias y tu post me fue muy util. Gracias

    • María Navarro Gómez

      María Navarro Gómez

      24.07.2013 at 19:15 Responder

      Muchas gracias Leonardo, me alegro de que te haya gustado, y sobre todo de que te haya sido útil. No podemos dormirnos que todo esto cambia a diario! 😉

  • Avatar

    Phasor

    24.07.2013 at 12:42 Responder

    Respecto a este comentario: «En el 2013 se vaticina el final de Flash; no es bueno para el seo, es complejo de actualizar y muchos dispositivos no lo soportan. Será sustituido por HTML5 y CSS3, que nos permiten crear fantásticas animaciones con un peso mucho inferior a flash, lo que mejorará, entre otras cosas, la velocidad de nuestra web.»

    Decir que solo estáis diciendo «medias verdades» combinadas con desconocimiento.

    Flash es una tecnología de desarrollo de productos multimedia, lo que no tiene nada que ver con una página web con muchos contenidos textuales, imágenes, etc. No se pueden comparar de forma directa en determinados aspectos.

    Si los comparásemos en el campo para el que ha sido creado la Plataforma Flash, es decir, aplicaciones multimedia puras, HTML5 (es decir, lo que permiten realizar los navegadores sin plugins y todas las tecnologías relacionadas), siguen estando aún ahora en 2014 por detrás en una serie de características. En otras está a la altura, pero en absolutamente ninguna están por encima de lo que ya hacía (y sigue haciendo) Flash desde hace años.

    Por tanto, decir que por ejemplo esto: «…nos permiten crear fantásticas animaciones con un peso mucho inferior a flash, lo que mejorará, entre otras cosas, la velocidad de nuestra web», es falso. En HTML5, realizando cosas similares a Flash, es igual o más pesado. Otra cosa son las «motos» que vendan desde la industria por intereses.

    Los fabricantes de navegadores llevan cuatro años aplicando montones de recursos para intentar alcanzar el potencial de una tecnología superior (muy superior en aquellos momentos). Todo para llegar al nivel de lo que ya estaba establecido y funcionaba perfectamente.

    Tanto Adobe como los fabricantes de navegadores, están «reinventando la rueda». Mucho más fácil hubiera sido un acuerdo entre multinacionales para integrar «flash player» en los navegadores. Partiendo de una base mucho más evolucionada, estaríamos viendo actualmente productos superiores. De hecho hemos ido hacia atrás. Las experiencias que vemos en HTML5 (javascript) son inferiores a lo que veíamos hace unos años (y seguimos viendo actualmente en desarrollos Flash complejos, ocasionalmente).

    Es lo que se llama intereses de mercado, por encima de los buenos productos y del pragmatismo (vhs vs beta).

    • María Navarro Gómez

      María Navarro Gómez

      24.07.2013 at 08:44 Responder

      Buenos días Phasor, gracias por tu comentario!
      Estamos seguros de que flash es una gran tecnología para desarrollar productos multimedia, pero en este caso hablábamos de diseño web.
      Convendrás con nosotros en que hubo una época de euforia colectiva en torno a flash, en la que demasiados desarrolladores decidieron utilizarlo para el diseño íntegro de webs, lo que dificultaba cualquier modificación, introducción de contenidos e incluso, como ya hemos comentado, el posicionamiento (claro, que por aquellos entonces no estaba tan valorado).
      Está claro que el hecho de «cargarse» flash tiene detrás intereses económicos e incluso egos, pero no creo que nosotros podamos interceptar, por ello lo mejor es adaptarnos a lo que venga.
      Un abrazo!

  • Avatar

    Phasor

    24.07.2013 at 12:43 Responder

    Hola María,

    Aparte de mis comentarios sobre el uso óptimo sobre cada tecnología, en realidad lo que más me ha cantado en vuestro artículo es el párrafo que he citado. Entiendo que, en general lo que se promulga es que «Flash es más pesado que html», pero aunque este comentario esté relativamente generalizado, no es acertado y lo único que provoca es un desprestigio sobre una tecnología. Y explico el por qué no es correcto.

    Hoy en día, precisamente por toda la historia que todos conocemos sobre los dispositivos, las diferentes tecnologías y las grandes multinacionales, todo está rotando de nuevo (javascript tiene más de 15 años) hacia desarrollos «HTML5/javascript» (éste último es al fin y al cabo el lenguaje principal con que siempre se han podido desarrollar cosas avanzadas para HTML versión «x») para intentar hacer lo que hacía Flash.

    Lo que está ocurriendo actualmente es que se han tenido que simplificar los desarrollos multimedia (bajo navegador). Están apareciendo montones de sites HTML5/javascript de mayor o menor complejidad que intentan recrear una «experiencia» parecida a lo que se hacía con Flash, pero en realidad esos productos son tanto o más pesados y lentos que lo que teníamos antes, además de que no suelen llegar al mismo nivel de complejidad. Un ejemplo son los sites con «scroll parallax vertical» que tal de moda se han puesto, desarrollados en html/css/javascript y que consumen muchos recursos. (hace poco entré en un site de estos y aparte de pesado me iba lentísimo en firefox última versión, y mi equipo no es precisamente malo).

    Raramente vas a ver algo equivalente (a nivel de animación) en HTML5/CSS que sea más ágil que su homónimo en Flash. Aunque obviamente cualquier tecnología puede ir «lenta» si carecemos de los conocimientos necesarios para que esto no ocurra.

    Respecto a lo demás, tienes razón. Es mejor ser práctico y reciclarse si toca. Pero una cosa no quita la otra. El cambio es por intereses y no porque las nuevas características de HTML5 mejoren lo que había (siempre refiriendonos a animación/multimedia), sino en todo caso, al contrario. Solo tienes que mirar empresas de la talla de Adidas, Nike, Electronic Arts, etc, siguen usando Flash incluso ahora en 2014 bajo navegador, a pesar de todo lo que está ocurriendo.

    Un saludo y buen blog!

    • María Navarro Gómez

      María Navarro Gómez

      24.07.2013 at 11:02 Responder

      Hola Phasor! Muchas gracias por tus explicaciones, creo que han arrojado bastante luz sobre el asunto.
      Un saludo!

  • Para crear una nueva web necesitamos reflexionar sobre algunos aspectosBlog Mad Media Comunicación

    24.07.2013 at 15:14 Responder

    […] superados estos 5 puntos básicos, intenta no caer en los típicos errores web y ten en cuenta las tendencias para crear un diseño atractivo y acorde a tus […]

Post a Comment