Tendencias de diseño web para 2015

Tendencias de diseño web para 2015

Por Oto Whitehead | 23 diciembre, 2014

Hace ya un año de nuestro primer post referente a las tendencias de diseño web, entonces para el año 2014; y no, no nos hemos equivocado.

Este año hemos visto nacer fantásticos diseños de páginas web, en muchos casos posibles gracias a los avances de aspectos técnicos que permiten al diseñador web más libertad en la generación de contenidos visuales. Además de eliminar ciertas restricciones que hasta hace muy pocos días se imponían en el desarrollo del lenguaje visual en internet: velocidades de carga, uso tipográfico limitado…

No cabe duda que la estandarización del HTML5 y profusión de navegadores de última generación han hecho un bien infinito a la comunidad de diseñadores web.

Sin más preámbulos, ¡vamos al lío!

Responsive Design

A estas alturas, todo el que esté leyendo estas líneas sabrá que los usuarios que acceden a nuestra web a través de móviles va en incremento; es un hecho. Estamos ante una nueva y creciente experiencia social de consumo web especialmente relevante en el mercado B2C.

El diseño responsivo trata, por tanto, de adaptar los contenidos a uno u otro dispositivo. Matizar que, aunque lo tratemos como una tendencia de diseño web 2015, sería más acertado hablar de una necesidad.

Todas aquellas empresas que se apoyen en el móvil para ofrecer sus servicios o productos deben de cuidar la accesibilidad a éstos a través de plataformas “Smart”.

Queda un mundo por llegar a través de la “tecnología aplicada a las cosas”. Recientemente hemos sido testigos de la aparición de dispositivos en forma de reloj (Smartwatches), TVs (Smart TVs). Éstas son algunas de las plataformas publicitarias del futuro, a las que el diseñador deberá de atender eficazmente.

546387735db6c

54686af423c1054647feccfc0c-1546bedc47f306546b768a13681544769f3bb4c8 54604f8b4105c 5460f5f561567 5452c22e4b8a4 546c53b68fac0 546388202f41d

 Botones fantasma

Nos referimos a esos botones transparentes que aparecen aquí y ahí, muchas veces de forma dinámica o al hacer cierta interacción con la página web. Básicamente son formas geométricas simples sin relleno, y con una fina línea delimitadora.

La anatomía de un botón fantasma podría quedar descrita por las siguientes características o partes de ellas:

  • Es un botón transparente o vacío en su interior.
  • Está delimitado por una delgada línea.
  • Contiene texto únicamente.
  • Se colocan en sitios prominentes dentro de la estructura visual de la página, normalmente above the folder.
  • Su color es normalmente blanco o negro, contrastando con el fondo sobre el que se coloca.
  • Son normalmente más grandes que un botón normal.
  • Los estilos de diseño de las webs donde aparecen suelen ser de colores planos frente a degradados.
  • Se aplican sobre imágenes en puntos donde no hay excesivo ruido gráfico, sobre colores planos o en imágenes con una capa de color encima con cierta opacidad.

Desde nuestro punto de vista son varias las ventajas del uso de este tipo de botón:

  • Los botones fantasma tienen una apariencia limpia, clara y amable. Conviven perfectamente con la esencia del diseño de la página web al ser sutiles.
  • Se mimetiza dentro de cualquier diseño por ser transparentes. Absorben las características del mismo.
  • Son fáciles de diseñar y crear.
  • Son eficaces como CTA (clic a la acción). Crean un punto focal de atención muy eficaz sin ser intrusivos. En algunos diseños web son los únicos elementos grandes, lo que potencia todavía más su eficacia.

Si bien hay que considerar los siguientes puntos para que su eficacia no se vuelva en nuestra contra:

  • No todo el mundo está habituado a este tipo de botones. Los usuarios menos aventajados podrían no saber que se trata de un clic a la acción. Si bien es verdad que son los menos y a la baja.
  • La imagen sobre la que se posiciona un botón fantasma es la que determina la eficacia del botón.
  • Un exceso de elementos gráficos en su cercanía los hace ineficaces.
  • Los mensajes que inciten al clic deben ser tratados con creatividad.
  • ¡Están de moda! Un uso sin criterio, desproporcionado o exagerado serán letales para su eficacia.

Union-Room Trippeo The-Offshore-Partners Richard-Outram NZK

NOIS3

Equinox-In-Austin

Bilder-Photo

BC-Balance

Audrey-Azoura

 

Uso inteligente de la tipografía

El uso de diseños con tipografías exclusivas y elaboradas ha supuesto durante muchos años un costo extraordinario a imputar en la factura de nuestros clientes. Y lamentablemente, todos no han entendido su importancia en el conjunto de un proyecto web.

Pero todo esto ha cambiado. Debido a la aparición de nuevas empresas que ofrecen servicios tipográficos para web (webfonts) e incluso de recursos tipográficos gratuitos (Google Fonts) la utilización de tipografías es accesible a todos.

Este hecho supone un punto de inflexión para cualquier diseñador. Entendamos, por tanto, el uso de la tipografía en el diseño web no como una tendencia, sino como un efecto natural de la liberación o abaratamiento de las licencias tipográficas web.

Así, podremos disfrutar durante el año 2015 de diseños donde la tipografía sea un componente esencial utilizado con inteligencia.

Algunos consejos que os damos para un uso eficiente de la tipografía dentro del diseño web:

  • Lee el texto que tienes que maquetar. Interpreta las jerarquías y tipologías del contenido con mimo. Es esencial para aplicar un orden tipográfico adecuado y un resultado óptimo en el diseño del conjunto.
  • ¿No tienes texto? Trabajar con Lorem Ipsum no es lo más conveniente y en la mayoría de los casos supone trabajar dos veces. Fuerza a tu cliente a entregarte los textos. No es hasta entonces hasta que le puedas sacar chispas al diseño web en su conjunto.
  • Marca la jerarquía de forma clara. Una web desordenada no conseguirá su objetivo.
  • Utiliza el color con criterio. No se trata de generar una paleta cromática desmesurada, sino de apoyarse en el color para conseguir una lectura cómoda y enfatizar la jerarquía de los contenidos.
  • Atiende las CSS. Es la única forma que tienes de obtener una consistencia tipográfica eficaz en todo tu proyecto.
  • Utiliza familias de tipos sin serifa para mejorar la lectura de textos seguidos.
  • No utilices anchuras para los bloques de texto excesivos. No son fáciles de leer.

54429842019bf 5452368546a28 543899414fb17 5465fc4fbf6ef 5442f4c535fd7 5435ef7991ba7 546df3d98e388 546c7f96da42f 546b7d802b297 545bbcca8c13f 545a14e0b9645 543e558b526dc

Imágenes grandes de fondo e incluso vídeo

La utilización de imágenes es una excelente forma de transmitir conceptos a través de la web. No en vano, Pinterest e Instagram tienen los seguidores que tienen.

Una excelente forma de transmitir conceptos es la de utilizar texto muy sintetizado, acompañado de una imagen de fondo y un botón a la acción.

Si consideramos a usuarios de smartphones ¡ni que decir de la eficacia de la imagen! Si los usuarios no solemos leer, aún menos lo hacemos en los móviles.

Debemos no obstante tener cuidado y no caer en la tentación de excedernos con esta técnica. No podemos olvidar redactar contenidos que describan de forma pormenorizada nuestros servicios o productos. Es esencial tanto para la optimización de la web en los resultados de búsqueda (SEO) y para aquellos usuarios que tras un primer vistazo, atrapados por tu web deciden ahondar en los detalles.

Si quieres dar un paso más, opta por la utilización de pequeños clips de vídeo en vez de imágenes de fondo. Conseguirás un gran impacto en tus visitantes.

Algunos consejos sobre las fotos del fondo:

  • Utiliza una imagen de calidad, tanto estética como de resolución.
  • Procura buscar tonos cromáticos que contrasten con el diseño que tienes previsto que vaya sobre la imagen
  • Haz que la imagen ocupe todo el fondo y no se repita en mosaico.

58-5emegauche 50-beonlineb  29-alexandra-posen 28-less-rain 21-matter  12-ycoyacht 10-my-provence 9-iuqo

 

Scroll en vez de Clic

Las webs que hacen un uso intensivo del scroll versus clic son cada vez más comunes.

Las páginas con una arquitectura de navegación basada en scroll son estéticamente muy gratificantes.

Sin embargo, debemos tener en cuenta que son más difíciles de optimizar en los resultados de búsqueda, que una web tradicional basada en varias páginas navegables mediante clic.

Si anteponemos a los usuarios que acceden a nuestra web desde móviles, debemos de tener en cuenta que es mucho más cómodo navegar mediante scroll que teniendo que hacer clic en un menú y esperando a que carguen los contenidos de esa sección. Aquellas empresas cuyo negocio busca usuarios de móviles deben optar por navegación de scroll para facilitar la interacción.

54505f8438bf8 545396f33693e 54612d45cef39 547c86e44939e 547eef4a78054 545e41e34bd19 545a14e0b9645 5452b5c845971

 

Diseño plano

Simplicidad por encima de barroquismo. Cada vez es menos común ver webs con texturas complicadas, sombras, globos o degradados a favor de un diseño minimalista conquistado por los colores planos, simplicidad, claridad y colores vivos. La necesidad de leer contenidos de forma eficaz en dispositivos móviles es razón para invertir en este tipo de diseño web.

543f2d42366d3 5465c812c9790 544ac7139753c 546f5ab78fa45 545cd1eb6639f

 

Conclusión

Las tendencias de diseño web del 2014 continuarán afianzándose durante el 2015. Pero también aparecen nuevas tendencias.

En términos de planificación, si estás pensando en hacer una renovación web deberás considerar un equipo de diseño con conocimiento de estas tendencias y capacidad de implementarlas satisfactoriamente y alineadas a tus intereses empresariales.

Encontrarás inspiración en las siguientes URLs:

www.awwwards.com

www.cssdesignawards.com

www.dribbble.com

www.behance.net

www.siteinspire.com

disenio-web-entreposts

Tendencias de diseño web para 2015

Valora este artículo

Diseño web

, , , , , , , , , , , , , , ,

¿Te ha gustado el artículo?

Suscríbete a la newsletter y recibe cada semana los contenidos en tu email.

Comentarios

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.