Less Is More

Por Soledad Carracedo
Junior Open Source Consultant de OpenSistemas

He querido recoger en este post algunas de las tendencias en diseño que estarán presente en este 2014: simplicidad, responsive, simplicidad y diseño multidispositivo.

Diseño plano y simplicidad… cogidos de la mano

La tendencia en diseño web es ir a lo plano para llegar fácilmente a un entendimiento visual. Ya están casi en el olvido los cuadrados con bordes redondeados, los relieves, los degradados y los efectos de volumen. En estos tiempos que corren hay muchísima información que recibimos por diferentes canales y por múltiples dispositivos. Es por ello, que la simplicidad es una herramienta muy útil que ayuda a una mayor comprensión de toda la información que nos rodea… ha de ser simple, clara y concisa.

Pero la simplicidad, en mi opinión, puede ser una herramienta de doble filo. Creo que se debe meditar muy bien su uso y utilizarlo con cautela, ya que un uso excesivo puede hacer que una compañía pierda fuerza en el mercado por un exceso de simplicidad. Un ejemplo podría ser el rediseño de una marca que puede perder su soberanía en el mercado si pasa de un diseño con mucha personalidad, con líneas, relieves y sombreados a uno demasiado plano que le haga perder agresividad y dinamismo.

¿Los colores?… También planos

También están de moda los colores planos. En este mundo existe una infinidad de dispositivos en los que visualizar una página web. Se requiere que todo pese menos por lo que es mejor usar:

  • Un color plano en lugar de una imagen complicada.
  • Un diseño simple con colores planos, en lugar de imágenes grandes con diseños complicados llenos de elementos que nos añadirán segundos (valiosos segundos) en cargar nuestra página web.

El color plano da más brillo y calidad. En la siguiente imagen se pueden observar los 10 colores que, según PANTONE, aportarán “equilibrio reflexivo, emocional y artístico” a nuestros diseños:

A nivel personal, incluiría el color blanco y el negro. Los colores de toda la vida, no van a dejar nunca de tener fuerza. Dándoles un buen uso, aportan equilibrio y carácter a cualquier diseño.

Círculos

Este tipo de diseño lo ha instaurado Google+ con su círculo para contactos y foto de perfil. Muchos diseños adoptaron este formato, sobre todo en las redes sociales. Ya no imponen su imagen corporativa si no que el propio formato ayuda a diferenciarlos.

Si buscas claridad y sencillez has dado con una solución ideal. Personalmente, incluiría el “Diseño web geométrico”… cuadrados, rectángulos, trapecios, rombos, hexágonos, triángulos, círculos… las formas geométricas ayudan a comunicar y a tener un mejor entendimiento. Ejemplos básicos:

  • El hexágono tiene raíces científicas y matemáticas y al mismo tiempo se asocia a la naturaleza (panales). Esta figura la asocias a la fuerza y a la flexibilidad.
  • El círculo, uno de los primeros inventos humanos. Es asociado a la unidad, la integridad, algo infinito y agradable. Los círculos rápidamente llaman la atención del espectador, destacando de manera efectiva los elementos escogidos del sitio. Se pueden encontrar en iconos, logotipos, imágenes en miniatura, etc. Es lo que se denomina “un acento visual”, muy útil si lo sabes utilizar.
  • Los rombos son conocidos como diamantes y se pueden usar para hacer que los elementos estén separados o conectados…

En general, la geometría nos ayuda a obtener una buena disposición de los contenidos y de las imágenes… este año le ha tocado el turno al círculo.

Parallax scrolling… Los efectos de scroll molan, y lo sabes

Cuando ya pensábamos que la web iba a adaptarse al formato horizontal de la pantalla del ordenador, llega la revolución móvil para cambiarlo todo de nuevo. Lo del diseño horizontal era un farol. Ahora resulta que nos encanta deslizarnos de arriba abajo por las páginas: ha vuelto el scroll.

Gracias al HTML5, estamos viendo una nueva tendencia muy original: el parallax scrolling. Es una técnica gráfica que se emplea en juegos en 2D. Consiste en desplazar las imágenes del fondo a una velocidad menor que las que hay en el frente, creando así efectos visuales muy interesantes como por ejemplo la ilusión de “profundidad”.

Diseño responsive

Es la creación de webs con contenido adaptable a cualquier dispositivo, independientemente del tamaño de su pantalla. Van a seguir apareciendo nuevos gadgets con nuevas resoluciones (¿alguien dijo Google Glass o Retina Display?). Las webs han de estar preparadas para estas adaptaciones y un buen diseño responsive nos ayuda.

Como final de este post he de decir que éstas son algunas tendencias que para este 2014 se acentuarán mucho más, pero una tendencia que está tomando auge muy fuerte es el pensamiento “Mobile-First”, esto quiere decir que debes pensar primero el desarrollar para los móviles y luego para la web en el escritorio… ya hablaremos de eso otro día.

En resumen

  • Keep it simple! No hay duda que cada vez vamos a ver más tendencias minimalistas.
  • Colores planos… todavía mas simplicidad.
  • Acento visual … el círculo.
  • El scroll mola.
  • Haz caso a tu madre… “be responsive”.