Las tendencias 2016-2017

El diseño de páginas web evoluciona continuamente. Se destacan nuevas tendencias benéficas para el éxito de tus páginas web, ya que cautivan miradas de visitantes, ofrecen nuevas funcionalidades, renuevan tu imagen corporativa.

Cuando quieres crear tu página web, o rehacer tu página web, mejor conocer las tendencias del diseño web 2016 – 2017. Tener una web de última tendencia, de última generación permite conseguir una mayor visibilidad en Internet, desarrollar tu imagen corporativa, mejorar tu posicionamiento natural (SEO), hacer de tu web una máquina de captación de visitas y clientes…

Somos expertos en diseño de páginas web. Desde Madrid y París, llevamos años creando páginas web, tiendas online, comunidades virtuales, web de empresas, webs a medida. Hoy compartimos contigo nuestros conocimientos del último en desarrollo y diseño web para 2016 y 2017.

El diseño web está siguiendo una vía confiable de USABILIDAD: cada botón, clic o pulsación necesita un propósito y una señal visual clara para que los usuarios actúen (e interactúen) con una página web.

Todo apunta en una misma dirección: tu web 2016-2017 debe cargarse al instante, ser fácil de navegar, verse de maravilla desde cualquier ordenador, móvil o tablet.

¿Cuáles son las últimas tendencias en diseño web?

Las nuevas técnicas de desarrollo de páginas web permiten ofrecer diseños web extraordinarios: Interactivos, tal como el diseño Parallax Scrolling, diseño Flat, diseño Vídeo a pantalla completa, diseño Imágenes full screen… y todo eso compatible al 100% con los dispositivos móviles gracias a las posibilidades del Responsive.

Antes de nada, el diseño web 2016 / 2017 se centra en dos tendencias:

Compatibilidad con los dispositivos móviles es lo más importante

La consulta de páginas web desde móviles y tabletas ya representa más del 50% de la vistas de los sitios web. Tus páginas web deben ser de diseño responsivo, un diseño que permite a tus páginas web adaptarse a todos tipos de dispositivos, todos los tamaños y resoluciones de pantallas, todos los navegadores y sistemas operativos, eso es claramente tu prioridad al crear o rehacer tu web en 2016.
Además el diseño web responsive es un factor SEO que valora Google a la hora de posicionar tu web en sus resultados. Puedes comprobar si tu web está optimizada para dispositivos móviles desde este enlace de Google.

Visualización de la página web TodoBravo en un móvil
Visualización de la página web TodoBravo en un móvil

Como ves, nuestra web TodoBravo está optimizada al 100% para dispositivos móviles (en inglés, Full Diseño Responsivo).

Más animaciones y videos que nunca

Desde siempre, sabemos que las animaciones bien utilizadas enriquecen notablemente la experiencia dentro de cualquier web. Utilizándolas, conseguirás generar una experiencia más rica y memorable.
Gracias a la mejora continua de la velocidad del Internet móvil (3G+, 4G, 4G+…) tal como del fijo (Adsl, Fibra, de 30Mbit hasta 1.000 Mbit/s en España), también gracias al excelente rendimiento de los nuevos alojamientos dedicados, vps y cloud, nuevos diseños web con animaciones y movimientos se han puesto muy de moda.

El diseño desempeña una función de contenido, ofrece un Storytelling visual al igual que lo hacen desde años las Infografías

Diseños web con video

Es una de las tendencias más “cool” en diseño web para el 2016. El Vídeo se convierte en el rey del marketing de contenidos.

Si estuvieras tan solo 2 años en el futuro, ¿estaría leyendo este artículo o le estaría viendo en video?

El video se convierte rápidamente en el protagonista del marketing de contenido de páginas web. Para el 2017, el vídeo representará el 69% de todo el tráfico de Internet para el consumidor, según el prestigioso estudio de Cisco Systems, proveedor líder de infraestructuras del Internet.

Una evolución de contenidos anunciada también por muchos tal como en la revista “The Guardian» o el incremento de las inversiones de los grandes marketers del mundo desde 2013.
Según otro estudio eMarketer.

Las páginas web que incluyen vídeos tienen una probabilidad 50 veces mayor de aparecer en la primera página de los resultados de búsqueda.

Numerosos estudios demuestran que el uso de videos en sitios aumenta las tasas de conversión. La tasa de conversión se calcula dividiendo: número de conversiones totales / número de visitas totales. La definición de conversión dependerá de cada web: petición de presupuesto, suscripción a una newsletter, contacto mediante formulario, compra de un producto, etc. Los videos son más fáciles de consumir, absorber y entender.

Páginas de inicio con videos gigantes

La página web de Airbnb te da la bienvenida como si estuvieses en casa: unas vídeos creativas arrancan automáticamente y ocupan mitad de la pantalla. La tendencia web 2016/2017 es un mega video de fondo que cautiva de inmediato tu atención, obligándole a prestar atención y extender tu tiempo en el sitio.

Mira este ejemplo de una agencia digital en Estados Unidos:

Gorila blanco y negro con título Big Experiences
Ver ejemplo de web con video full screen

Un gorila te da la bienvenida, mientras el negocio es una agencia de diseño web. El objetivo es cautivar de inmediato tu atención. Por lo tanto, una video relacionada con el negocio sería aún más potente.

Diseño Web Parallax

¿Qué es el Parallax? Este diseño web de moda tiene sus fans porque permite crear páginas web increíbles y divertidas en puro HTML5/CSS sin usar el Flash.

Resultan web sorprendentes: sensación de profundidad, de 3D, de ritmo, de video… Y todo eso de forma interactiva: el visitante de la web controla las acciones con sus clics y sus scroll. El Parallax no es nuevo, en un principio se utilizó como técnica de animación para las películas de Disney, de hecho, fue inventada por Walt Disney y se denominó cámara multi-plano.

 

El objetivo de esta modalidad es dotar de tridimensionalidad y movimiento a los diseños planos o 2D.

Un caso de éxito de Parallax con efecto Scrolling es sin duda la web de la torre Space Needle ubicada en Seattle. Es una estructura de 184 metros de altura y cuenta con un restaurante giratorio en su azotea. La web es animada: la base de la torre de 184 metros invita a desplazarse todo el camino hasta la cima, donde veras las vistas de Seattle y el SkyCity restaurante.

Vista del Space Needle de Seatle
¡Súbete ya! visita Space Needle Web (Diseño web Parallax) (Pincha y Scroll hacia arriba)

 

El Diseño web Parallax es muy atractivo, requiere interacción por parte del usuario, genera ritmo (o lo rompe) ayuda a contar historias y, en consecuencia, potencia el contenido.
Es el diseño web ideal para presentar productos con un nivel de detalle estupendo, tal como lo hace Oakley, empresa de moda conocida por sus gafas de sol.

Oakley gafas de ski
Visita Oakley (Diseño web Parallax) (Pincha y Scroll hacia abajo)

Por lo tanto el diseño web Parallax no se recomienda para todos, hablamos de tu proyecto y lo comprobamos por ti.

Imágenes animadas: adelante ¡Cinemagraphs!

El antiguo GIF evoluciona en Cinemagraphs. Las cinemagrafias (o cinemagraphs en inglés) son fotografías en las que ocurre una acción de movimiento menor y repetido. Se producen tomando una serie de fotografías o grabaciones de vídeo y utilizando un software de edición de imágenes, componiendo las fotografías o fotogramas de vídeo en un archivo GIF animado de tal manera que el movimiento en parte del sujeto expuesto (por ejemplo, pierna colgando de una persona) se percibe como un movimiento repetitivo o continuo.

Algunos de los mejores ejemplos cinemagraph pueden encontrarse en la propia web de los creadores. Sus cinemagraphs originales no solo capturan momentos al igual que una fotografía ordinaria, sino también preservan el ambiente del momento.

Cinemagraph de una mujer en negro en un balcón

Cinemagraph de un barber shop

 

 

Diseño Flat (Diseño Plano) Mejorado: Flat 2.0

El flat design es un clásico desde 2013. Se ha mejorado años tras años, ya hablamos de “Flat 2.0”. Es un tipo de diseño muy limpio, claro y que conecta a la perfección con el diseño responsive. El diseño plano usa formas cuadrículas y geométricas, colores planos y llamativos, textos con iconos planos, imágenes sencillas.

El flat web design elimina todo efectos gráficos complejos, gradientes, efectos tridimensionales y apuesta por lo minimalista y sencillo. Introducido con el nuevo interfaz de Windows 8 en 2013, renovado en “Flat 2.0” con el interfaz de Windows 10 en 2015, este diseño flat sigue siendo uno de los diseños favoritos de los diseñadores web.

Pantalla de 2 iPhones
El Diseño Flat mezcla objetos y efectos: grandes imágenes, símbolos, sombras y efectos de profundidad, colores dinámicos y contrastados entre sí, tipografía fácil de leer con un trazo uniforme, botones fantasma (ghost button, son cuadros o rectángulos transparentes que llaman la atención discretamente…. Es un tipo de Diseño minimalista, moderno, puro que conviene a la gran mayoría de los proyectos de webs profesionales. Usando Paletas de colores brillantes y vibrantes creamos estupendos efectos.

Flat design 2.0 con textos
Como toda tendencia web, el flat design tiene ventajas y desventajas, por lo que hablamos de tu proyecto web y veremos si es la mejor opción para hacer tu página web.

Menú hamburguesa (hamburger button)

icono hamburguesa con foto de hamburguesa
Icono de menú hamburguesa. La foto de la hamburguesa es de Ruocaled

Seguro que la primera vez que viste estas tres líneas no las entendiste. Permiten expandir o colapsar por completo un menú. Ahora se ha convertido en un estándar de facto, que los usuarios han aprendido a reconocer, y muchos frameworks de diseño adaptable ya llevan integrada esta solución, lo que facilita el despliegue y ese reconocimiento de los usuarios.
Sus ventajas son claras: puedes incluir una gran cantidad de información y, al mismo tiempo, ofrecer una forma coherente de encontrar opciones adicionales.

Ahora se está empezando a implementar para que se vean también en pantallas grandes y así tener el menú de navegación oculto para tener una vista más limpia de la web. Ya hablemos de menús inteligentes, mira el ejemplo de Adventure.com

Web Adventure con fotos de naturaleza

Adventure.com es un lugar para aquellos que se aventuran fuera, que quieren vivir una vida de aventura en todo el mundo. Al tratarse de una web con tal cantidad de ítems en los que navegar, se ha decidido ocultar parte del menú en forma “hamburguesa” en la parte arriba derecha.

Igual lo ha hecho la revista Time, pero en la parte izquierda.

Existen varias alternativas al Icono de menú hamburguesa:

Pestañas superiores o inferiores

Menú hamburguesa en varias aplicaciones móviles
Las principales plataformas móviles están empezando a acompañar o incluso a sustituir el menú hamburguesa con unas pocas pestañas, como puedes ver en las aplicaciones de Facebook, Twitter, Whatsapp o Airbnb. Requiere un gran esfuerzo de síntesis y un ejercicio de arquitectura de la información que permita diferenciar cuales son las acciones fundamentales de nuestra plataforma y que de ninguna manera podemos ocultar en menús de acceso complicado.

Navegación inferior

La máxima del content first no solo nos anima a generar contenido nuevo y de calidad, si no que además nos sugiere que lo coloquemos en la parte superior de la pantalla, dejando los segundos niveles de navegación al final del scroll, como hacía con el sidebar los temas por defecto de WordPress Twenty Eleven y Twenty Twelve.

Scroll modular e infinito

Con el Scroll modular, cada apartado dentro de una página web puede tener su propio scroll, con lo que una sola pantalla podría tener varias posibilidades, independientes entre sí, de hacer scroll. Algunas de las webs más populares del mundo, como Pinterest, Twitter o Facebook ya lo usan.

Scroll en página web con vista de Manhattan New York

Hover y Rollover originales

El efecto Hover o Rollover consiste en cambiar el aspecto de un elemento de la web cuando se sitúa el puntero sobre el mismo, pero no se ha seleccionado aún.
Más y más de moda, mira estos ejemplos:

Gafas de sol de la tienda online de Óptica Oqus

TodoBravo_Diseno_Web_RollOver_Effect_Pagina_Web

 

Full Pantalla

Se trata de usar imágenes o vídeos en excelente calidad, llamativos y realmente impactantes a toda la pantalla.

Motion animation

Existen nuevas técnicas de animaciones, de Motion animation, para ofrecer una experiencia de navegación increíble e interactiva, sin necesidad de plugins de lectura. Mira el ejemplo de Bugaboo.

Tendancias_diseno_web_bugadoo-motion-animation

Tipografías 2016 extraordinarias

Las Tipografías, las fuentes de tus páginas web también tienen modas. Hay que tener mucho cuidado: no todas las tipografías se ven bien en Internet. Es importante verificar que la tipografía sea amigable con todos los navegadores y dispositivos, ya que de otra forma se verá “cortada” o de forma deficiente.
Además, no todas las tipografías tienen el permiso para ser utilizadas en sitios web, en algunas es necesario tener la licencia comercial.

Por eso te recomendamos utilizar Google Web Fonts, una recopilación de Google de miles de tipografías gratuitas (de licencia abierta) que se ven perfectamente en Internet.
No te preocupes, contamos con amplia experiencia para elegir por ti las mejores Tipografías web cuanto a tu imagen corporativa, tu tipo de páginas web, tu mercado, tus clientes.

Conclusión: Confía en diseñadores web profesionales

Una visión a 360 grados de las tendencias del diseño y desarrollo web es imprescindible para asegurar el futuro de tu web. ¿Deseas crear o renovar el diseño web de tus páginas web? TodoBravo Diseño Web está aquí para diseñar y desarrollar tu web a medida. Somos una agencia de diseño web en Madrid y en París, contamos con unos de los mejores profesionales diseñadores y desarrolladores web del mercado que pueden asesorarte al momento de escoger el estilo que desees darle a tu página web.

Contacta con nosotros te asesoramos gratuitamente