Tendencias de diseño web 2016 para tu web

En este artículo te contamos cuáles son las tendencias de diseño web 2016 y cuáles nos gustan más.

Como ya sabéis nos especializamos en diseño gráfico y en hacer páginas web que queden en la retina grabadas, que emocionen y, sobre todo, que calen el mensaje que nuestros clientes desean transmitir a los suyos. Por eso es muy importante estar al día de las últimas tendencias y saber cuándo emplearlas.

Durante todo el artículo te presentamos imágenes para que sepas de qué elementos estamos hablando, si quieres verlos en acción te recomendamos seguir los enlaces de las fuentes porque hay ejemplos dinámicos que te van a encantar en acción.

Patrones IU

Con la llegada del RWD (Responsive Web Design) o diseño web adaptativo (el diseño se adapta en función del dispositivo de salida) llegaron de la mano interfaces de usuario (IU) bastante reguladas y marcadas. ¿Quién no ha tenido la sensación de estar visitando una web muy parecida a otra?.
Sin embargo en el caso de los patrones IU, que una página web siga ciertas tendencias no tiene porqué significar que sea igual a otra.

Hay elementos que son útiles y que si los combinamos con una buena dosis de originalidad funcionan muy bien, para algo se inventaron. El caso es encontrar la situación exacta en que deben ser utilizados.

Desde Noroesteweb pensamos que los más empleados durante 2016 serán:

«Scroles» largos:

Son de esas cosas que, para nosotros su uso no justifica el abuso. Hay páginas web con «scroles» infinitos, interminables, en los que te cansas de darle para abajo a la rosca del ratón para ir descubriendo los contenidos.
A la hora de introducir un elemento como este hay que tener claro que no todas las páginas web son adecuadas para esto. Será conveniente analizar qué historia queremos contar y ver si un scroll largo se nos adapta a dicha situación o, por el contrario, supondrá un impedimento para nuestros usuarios y para la consecución del objetivo/s de la página web.

Menús y elementos ocultos (hamburguesas u otros):

Otra de esas tendencias que tomamos con reservas. Por el momento y por lo que hemos podido comprobar, en nuestro país (España), no está muy extendido su uso y hay usuarios que lo ven y se preguntan ¿dónde está el menú? Incluso nos hemos encontrado con clientes que te indican expresamente que no quieren un «menú hamburguesa».
Es muy importante saber cuándo emplearlo, a nosotros personalmente no nos gusta demasiado el efecto de que el menú principal esté oculto de inicio en un formato de pantalla y que sólo unas rayas indiquen que ahí, debajo de eso, hay un menú (con la excepción de las versiones para dispositivos móviles cuyo uso está más extendido y también justificado).

Aunque también hay que saber integrarlo, mira que elegante es este ejemplo:

Fuente: Silenza

Como sabemos, si algo no es intuitivo para la gente, entonces le resta usabilidad a la página web y eso revertirá en que el usuario no realice las acciones que requerimos a través de ella (contactar, comprar, etc). Por eso el uso de elementos ocultos nos parece un buen recurso a utilizar, pero dependiendo del dispositivo de salida y para otros elementos distintos al menú principal ej. desplegable en el botón de búsqueda u otros elementos que sobresalgan al pulsar un botón y que requieran una posterior acción, por ejemplo: el botón de presupuesto de nuestro website.

«Ghost buttons»:

Los “Ghost buttons” o botones fantasmas nos gustan bastante. Un ejemplo por si no los conoces, fíjate en el «learn more», eso es un «ghost button»:

Fuente: Haruki Murakami

Son elegantes, delicados e ideales para introducir un “call to action” o llamada a una acción requerida de forma limpia y elegante, sobre todo sobre una imagen protagonista.
En el ejemplo que os presentamos de Haruki Mirakami la integración se completa con una animación del botón consiguiendo un efecto de llamada muy interesante: un forma de indicar al usuario “Eh! Esto es un botón”.

Diseño fuera de cuadrícula:

Con HTML5 y CSS3 podemos hacer virguerías. Ahora no tiene porqué seguir todo un orden cuadriculado. Romper con las formas y con lo establecido es ahora más posible que nunca. Por eso alternar tamaños, formas y disposición de elementos en la web será tendencia. Más originales que nunca.

Fuente: Curious Space

La imagen al poder

Internet se ha convertido en un mundo cada vez más visual. En nuestra sociedad occidental se busca la inmediatez sobre todas las cosas (más y más, correr, ¡rápido!: «no tengo tiempo»). Consumimos más imagen porque realizar una lectura de un texto largo se ha convertido en un ejercicio que conlleva tiempo, algo de lo que muchos parecen no disponer. De ahí la importancia de la imagen y el contenido audiovisual como vehículo inmediato para la transmisión de un mensaje.

Estas son nuestras tendencias de diseño web 2016 preferidas en el ámbito de la imagen:

Imágen en movimento. «Cinemagraphs».

Los «cinemagraphs» son tendencia y lo cierto es que se pueden hacer verdaderas obras de arte y comunicar con ellos incluso sensaciones como la del viento moviendo tu pelo. Un recurso muy bueno usado en su justa medida.
Los cinemagraph los utilizaron por primera vez en 2011 Jamie Beck y Kevin Brug y son una combinación de fotografía y vídeo.
Aquí puedes ver un montón de ejemplos muy interesantes por si te pica el gusanillo.

Videos animados de fondo:

Esto ya lleva tiempo integrándose, desde la llegada de html5 son tendencia . Un fondo animado puede añadir visibilidad al sitio, eso sí, utilizado con moderación de manera que no distraiga al usuario.

Ilustraciones personalizadas y originales:

Los diseñadores gráficos e ilustradores estamos de enhorabuena. ¿Qué prefieres una página web de stock o algo totalmente personalizado, una creatividad hecha a medida para ti? Dentro del diseño web personalizado las ilustraciones son tendencia y una forma única de diferenciarte.
Este ejemplo personalmente me encanta, combina animaciones en html5 con unas ilustraciones “tradicionales” increíbles: una fusión entre lo analógico y lo digital muy lograda:

Fuente: Mind Design Company

Infografías:

En este mundo cada vez más visual la infografía es un recurso fundamental para que aquello que quieres contar quede grabado en el cerebro de tu cliente. Es una forma inmediata de contar a través de una imágen procesos y acciones requeridas. Como usuarios no queremos leer mucho al navegar por una web, pero nos pirramos por las imágenes y el lenguaje visual.

Interactividad

Microexperiencias, microinteracciones:

Las microexperiencias pueden ser simples o complejas, y tienen el objetivo de simplificar la navegación a la par que presentar una serie de opciones de manera amigable. Asimismo pueden usarse para reducir las recargas en la página y para acciones que se pueden completar en unos pocos clics como puede ser introducir unos datos o completar cierta tarea de forma inmediata (registro de usuarios o acciones guiadas a través de pantallas). Un ejemplo de microinteracción puede ser nuestro formulario de presupuesto en tres pasos.

Contar historias. El «Parallax» o paralaje:

Cada vez contamos más recursos para contar historias. Uno de ellos es el efecto “parallax” o paralaje en Español. Se utilizó por primera vez como recurso visual en videojuegos 2D utilizando diferentes velocidades de movimiento de la imágen de fondo con el fin de crear una ilusión de profundidad. Al moverse el fondo del juego más lento que el primer plano, este parece que está más lejos.
Esto mismo se utiliza actualmente en diseño web de manera que el fondo de la página se mueva a una velocidad diferente que el resto de la página lo que produce un efecto visual sorprendente y que permite infinidad de aplicaciones para contar historias en línea.
Un ejemplo de «scroll» infinito y «storytelling» con empleo de paralaje que tiene un par de años pero nos sigue encantando como el primer día. Te recomendamos verlo en acción (Para neófitos: haz scroll por la página con la ruedita de tu ratón).

Fuente: Slavery Footprint

El diseño semi-plano («semi-flat»):

El diseño “plano” no es nada nuevo. Todo comenzó allá por 2013 cuando Windows sacó su estilo “Metro”, esta tendencia al diseño “plano” (colores sólidos, formas rectangulares y cuadradas, sombreados tonales monócromos, metáforas visuales…) se ha ido manteniendo. Ahora Google viene fuerte con Material Design.

Conoce un poco más sobre esta tendencia aquí:

La tipografía como recurso gráfico:

Existen infinidad de tipografías tanto gratuitas como de pago en el mercado, la propuesta y tendencia actual es explorar la forma en que se utilizan, la tipografía ya no sólo sirve para comunicar el mensaje escrito, sino también para conseguir efectos visuales impactantes que refuercen el mensaje.

En esta misma línea queríamos enseñaros esta página web que te permite crear un vídeo con el mensaje que tú elijas con motivos florales, una curiosidad con la que jugar un rato:

Fuente: Blossom Type

Minimalismo:

Esta tendencia nos pirra, nos encanta, sin más. Y es que atrás quedaron las páginas web en las que no cabía ni un alfiler, con todos los elementos abigarrados y mezclados. El orden la limpieza y sobre todo, la simplicidad a la hora de contar nuestro mensaje son fundamentales.
Grandes imágenes, espacios vacíos (¡sí vacíos!), textos cortos, concisos y mucha claridad.

Un buen ejemplo:

Fuente: Sunbrella

No queríamos que terminase Enero sin contarte cuáles son nuestras tendencias de diseño web 2016 preferidas.

Tu página web es tu escaparate virtual, del mismo modo que no descuidas tu aspecto o el aspecto del local de tu negocio, no debes descuidar algo tan importante como el aspecto de tu página web.

¿No decorarías la sala de espera de tu empresa, donde se sientan tus potenciales clientes, con sofás de flores de los años 60 y tapetes de ganchillo en las mesas verdad?

Entonces para tu página web necesitas estar a la última y contar con profesionales que te asesoren, conozcan y sepan emplear las últimas tendencias en tu sitio web para comunicar a tus clientes el mensaje de tu empresa y conseguir los resultados esperados.