15 Tendencias de diseño web del 2010 - 2014

Al igual que en muchas otras áreas del diseño, la web se encuentra siempre en un constante cambio. Pareciera ayer que empecé una pequeña colección de tendencias que esperaba seguir, aunque a decir verdad, nunca pude lograr adaptarme a dichos estándares y modas a tiempo XD.

Si bien, aunque todas estas tendencias están sujetas a diferentes factores, tanto modas de diseño o tecnología, cada día podemos apreciar nuevas y más variadas formas con las que los diseñadores pueden crear y presentar contenido en un sitio web.

Recién recuperada esta información, he decidido hacer un recuento de las tendencias más "hot" desde el año 2010, hasta nuestros días, para ver cuáles de ellas han desaparecido y cuáles han llegado para quedarse.

15. Dibujos y bocetos a mano (2010).

Aunque no se trataba de una ideología de dicho año, en el 2010 existió la tendencia a incluir dibujos e ilustraciones burdas pero entendibles, capaces de expresar ideas con los mínimos trazos, pero conservando un estilo muy "freehand". Se trataba de un muy bonito detalle, que mezclaba los elementos de la web, para dar un mensaje más personal al público.

Un buen ejemplo de esta tendencia se pudo apreciar en el antiguo (ya renovaron) sitio web de la universidad de Biola en USA (su nueva propuesta también es muy interesante y creativa).

El antiguo sitio web de la universidad de BIOLA

14. Bordes de zig-zag (2012).

En 2012, muchos diseños incorporaron un cambio en la forma de representar los bordes. Nuevamente sin ser algo completamente nuevo, los bordes con zig-zag cayeron tanto en el gusto de diseñadores como de clientes. Muy probablemente como parte de todo el fenómeno "vintage" visto por aquellos años.

Los bordes de zig-zag se volvieron una contagiosa epidemia en el diseño de sitios web.

13. Sentido de la profundidad (2011)

Ciertamente unos años antes, algunos diseños empezaron a incorporar elementos más reales en los sitios web. Pudimos ver tazas de café y cuadernos para emular escritorios reales en las páginas de inicio. Sin embargo, el sentimiento de profundidad fue llevado más allá en 2011, cuando diversos sitios incorporaron elementos gráficos que imitaban un falso 3D, es deicr, agregaban profundidad a los elementos, por lo que algunas partes de la página parecían estar más al frente que otros.

Se puede decir que esta tendencia sigue viva en cierto modo, ya que muchos diseño parecen querer seguir presentando horizontes y profundidad.

El antiguo sitio web de esta empresa de diseño AWP, presentaba una perspectiva de profundidad.

Wonka mantiene este diseño desde hace algunos años, un claro ejemplo de esta tendencia.

12. Footers exagerados (2010)

EL footer es una parte común de un sitio web. Se utiliza principalmente para colocar información adicional, como los derechos de autor y en algunas ocasiones la navegación misma. En 2010, el concepto de "oversized" fue aun más exagerado, llevándonos a ver, además de opciones adicionales, formularios completos, acompañados de bonitas ilustraciones. La intención era integrar esta parte de la pagina web aún más en el diseño. No obstante, aunque los pies de página contienen información menos importante, algunos diseñadores utilizaron este apartado para agregar actualizaciones de redes sociales, encuestas, y diversos feeds.

Duirwaigh Studios presenta hasta hoy, un sitio web con un footer oversized. 

11. Ilustraciones vectoriales (2012)

Por el año 2012, Mozilla Firefox empezó a incorporar una serie de ilustraciones de mascotas y diversos personajes, para promocionar su marca. Hasta ese entonces, no era tan común encontrar tal protagonismo a las mascotas en el branding, lo cual rápidamente se convirtió en una tendencia, seguida por la muy famosa mailchimp, envato y otras compañias.

Un dato interesante, es que el mismo diseñador del logo de firefox, fue el encargado de diseñar la mascota de mailchimp, por lo que el estilo resulta bastante familiar.

La antigua landing page de mailchimp, centraba su diseño en su mascota

Freelance switch es uno de los ejemplos de esta tendencia, incorporando un personaje, el cual sigue aún presente en su website

El diseño anterior del sitio de Firefox. Se crearon toda una gama de ilustraciones para cada página. El diseño fue sustituido en 2013, y estas ilustraciones ya no se encuentran disponibles.

10. Círculos (2012)

Hasta hace algún tiempo, los diseñadores web estaban limitados por el modelo de "caja" que ofrece la maquetación de css. Era bastante común encontrar elementos cuadrados con sombras y bordes, como forma de mostrar imágenes casi obligatoria en un diseño. Aún así, si se deseaba emular formas diferentes, se debía recurrir a el uso de imágenes, complicando en cierta forma la actualización del diseño. No obstante, con la llegada de css3, la creación de elementos circulares resulta mucho más sencilla. En esa época del año, cada vez fueron popularizándose los sitios web con elementos circulares, apreciables en galerías, links, redes sociales y otras aplicaciones.

Este portafolio personal,integra los elementos circulares en forma de galería.

9.- Íconos descomunales (2012)

Se podría decir que esta tendencia deriva desde el boom del diseño de iconos de los sistemas operativos de Mac OS. El incremento en el tamaño de la iconografía, se debe principalmente al lanzamiento de programas  en web, acordes a la diseño de la marca de Mac OS. La tendencia de los iconos en gran tamaño ha sido llevada más allá de de este sistema operativo y actualmente lo podemos apreciar en diversos websites y aplicaciones.

Panic es un claro ejemplo de exageración de iconos, lo cual sigue aún hasta nuestros días.

8.- Esquemas de color simples

No existe nada más impactante que un mensaje claro, sobre un tranquilo y simple fondo. En 2011 el significado de tranquilo y simple fue tomando forma de color. Lejos de optar por la típica gama de colores o el color negro o blanco de fondo, pudimos observar un incremento de nuevos y simples esquemas de color, que tomaron de base el amarillo, rojo o verde y limitaron las paletas de color a las variaciones de de sombras de los mismos, o usar unos cuantos tonos.

Este sitio web integra una sencilla paleta de colores, basados en verde y azul.

Otro claro ejemplo es Collision Labs, optando por una paleta de rojos, armonizando con otros colores.

7.- Fondos fotográficos (2011)

  Las grandes fotografías, llegaron para quedarse en el fondo de nuestros websites. Esta tendencia trata de  colocar imágenes en alta resolución, que cubran todo el fondo del sitio. Los expertos recomiendan la utilización de una fotografía a apropiada para el fondo, ya que colocar una simple fotografía sin contexto alguno, puede ser perjudicial en la comunicación del mensaje principal al usuario. Lo más recomendable, es utilizar fotografías que no se impongan frente al contenido, si no que sean armoniosas con el mismo.

Ifly magazine, es un gran ejemplo de fotografías de fondo muy bien empleadas. Hasta la fecha, continúan utilizando este concepto

6.-Infografías. (2012)

Un website exitoso es aquel que se basa en el contenido. Si bien, alejándonos un poco de la manera tradicional de presentar información en a web, en 2012 comenzamos a ver un incremento en esta forma de proporcionar datos a los usuarios.
Las infografias trajeron consigo una forma fresca de presentar información fácil de consumir a los usuarios, ya que aun sin entender los temas del todo, estas imágenes proveen de datos, estadísticas, diagramas e imágenes, de tal forma que hasta un niño sería capaz de comprenderla. Ciertamente, dependiendo del sitio en cuestión y del dominio del diseño de infografías, incorporar este tipo de trabajos, es un acierto para comunicar información.

5.- 2x1: SCL logos circulares y manuscritos (2012) y cintillos(2012).

Conocida como una epidemia, esta tendencia llega en el año 2012, para dar todo un nuevo look a logotipos y titulares principales. en ella podemos apreciar toda esta corriente actual de diseño, enfocada en la tipografia cursiva y todo el fenomeno "badge". Probablemente el origen de los diseño "hipster" lo podemos encontrar en este año.

El inicio del fenómeno "badge"

Por otra parte , tenemos el tema de los cintillos, que ya muy populares desde finales del 2011 han permanecido bastante tiempo. Lo curioso de este elemento gráfico fue la rapidez con la que se hizo popular, y en tan solo unos 6 meses ya lo podíamos encontrar por todas partes, desde catálogos, versiones beta de apps, de software, botones, enlaces a redes sociales y en otras aplicaciones.

4.- Backgrounds: ¿video? (2013-2014)

En últimas fechas, y gracias a HTML5, hemos podido aumentar el potencial de nuestros sitos web. Gracias a las nuevas características, se ha podido dar una vuelta de tuerca a un viejo conocido : el video. Hoy es bastante innovador colocar un video de fondo mientras contamos una historia, haciendo mucho más eficaz la experiencia con el usuario. Este detalle, permite cambiar por completo la apariencia del sitio en cuestion de segundos. El uso de esta característica aun debe ser normado por el tipo de website que estamos creando, ya que por ejemplo, en una tienda online, este recurso afecta o distrae, en lugar de permitir las compras.
Por ejemplo:
http://www.nike.com/us/en_us/c/better-world/

3. Scroll infinito (2013)

Hasta antes del 2013, existían muchos ejemplos de este tipo de interacción. No obstante, la tendencia realmente no había entrado de lleno en el mainstream del diseño. hoy, podemos observar grandes ejemplos de su uso, en redes sociales como pinterest, tumblr e incluso facebook. La idea principal, ha sido la de enfocarse en la simplicidad, ya que aún sin realizar cambios de pagina,  uno puede seguir cargando y visualizando contenidos, de forma "infinita". Por lo tanto, podría decirse que es una nueva alternativa a la ya tradicional paginación, la que puede quedar en ¿desuso?

Pinterest es un caso bastante exitoso del scroll infinito

2.- Parallax (2011)

Parallax en el 2011 resultaba una tendencia bastante nueva, ya que aunque el efecto en sí, llevaba mucho tiempo en los medios (en videojuegos por ejemplo), no fue si no hasta ese entonces que tomó un mayor uso y notoriedad. Se trata de una técnica, en la cual se colocan diferentes elementos en capas que se mueven por el website, a diferentes velocidades o perspectivas , para crear un impresionante efecto 3D.

A mi parecer, ha sido una de las grandes propuestas visuales, en lo que hemos visto los últimos años, cambiando la apariencia de los sitios web y mejorando la experiencia de usuario.

1.-Flat design 2013 - 2014

¿Tendencia o revolución?

Desde ya hace algunos años, la tendencia ha sido el minimalismo enfocando el atractivo de los websites en el contenido y presentando interfaces simples y fáciles de utilizar. Los diseños poco a poco se han desprendido de esa tendencia a lo real (Skeumorfismo) popularizado por Apple y sus productos, cuyas interfaces han tenido que simplificar en sus últimas versiones. Hoy es cada vez más notable la tendencia a lo simple, y uno de los más claros ejemplos es el diseño flat o plano.

Se trata escencialmente de diseñar, dejando de lado degradados, sombras, bordes y texturas, que han estado por mucho tiempo en el diseño web. En lugar de eso, se hace uso de colores brillantes, sólidos y tipografías prominentes. Flat design, es sin duda, uno de los cambios más importantes que ha sufrido la web en aspectos de diseño en los últimos tiempos y prueba de ello, es la innumerable cantidad de websites y apps que lo han implementado día con día. Sin lugar a dudas, es un estilo que podría perdurar muchos años más.

Conclusión.

Los sitios web, son sistemas que cambian constantemente. Si bien tanto la tecnología como el diseño van de la mano, para entregarnos a los usuarios, piezas cada vez más cuidadas, es necesario conservar los aspectos que definen propiamente una web. 

 A través de los años hemos visto este proceso de "las tendencias" una y otra vez, ya sea en forma de páginas completamente construidas en flash, hasta aquellos botones que buscaban imitar las interfaces de Apple. No obstante, es tarea del diseñador conseguir que un sitio web logre apegarse a los estándares de diseño actuales, siempre y cuando conserve algo que le permita ser original y único.

En este breve recorrido de los últimos años, he tratado de listar las tendencias que según yo, han dejado huella, han sido casos aislados o bien raros experimentos. Probablemente hizo falta listar algunas, como la tendencia del texto prominente, o la de la utilización de fuentes más personalizadas, que bien podría incluir en otra entrada.