Diseño web 2020: las 10 tendencias en diseño de páginas web que debes conocer

El diseño web evoluciona cada año y sigue cada vez más, las modas como la industria textil, el diseño interior y la arquitectura. El diseño plano minimalista (flat design) que ha prevalecido durante varios años, evoluciona progresivamente con más gráficos, ilustraciones y elementos de estructuras originales.

Puras novedades, nuevas tendencias, grandes clásicos reinventados, os presentamos en este artículo todas las técnicas de diseño web 2020, con varios ejemplos de las principales marcas españolas y del mundo, y como les usan para su imagen corporativa.

1. Ilustración a mano
2. Mezcla de fotografía y gráficos
3. Modo oscuro
4. Gradiente de colores
5. Enmarcado de elementos con espacios vacíos
6. Superposición de capas
7. Colores bohemia natural a alta costura extravagante
8. Blanco y negro
9. Video Hero
10. Objetos 3D y efectos 3D

1. Ilustración a mano

Gráficos imperfectos, líneas trazadas a mano, iconos dibujados a lápiz, son todos elementos gráficos que dan más humanidad y personalidad a los sitios web. Este movimiento va en contra del píxel perfecto que predominó con el diseño plano. Sin dudas, los que piden un desarrollo web a medida para un público objetivo joven, encontrarán este estilo gráfico en su web.

Puma, uso de líneas a mano alzada, alrededor de productos y modelos.

Puma, uso de líneas a mano alzada, alrededor de productos y modelos.

Adidas, ilustración de aviones de papel para subrayar la ligereza del zapato SL20.

Adidas, ilustración de aviones de papel para subrayar la ligereza del zapato SL20.

Banco Santander, dibujo infantil que ilustra un préstamo de vivienda.

Banco Santander, dibujo infantil que ilustra un préstamo de vivienda.

2. Mezcla de fotografía y gráficos.

Agregar gráficos e ilustraciones a fotografías reales es una forma de personalizar imágenes y hacerlas únicas. Las ilustraciones típicas de «garabato» hacen que las imágenes sean más dinámicas y más divertidas, mientras que los gráficos más geométricos dan una impresión de sofisticación y calidad. Una manera sencilla de refrescar una web corporativa.

Perrier, ilustraciones añadidas a fotografías.

Perrier, ilustraciones añadidas a fotografías.

Wallapop, fondo gráfico en fotos de categorías de productos.

Wallapop, fondo gráfico en fotos de categorías de productos.

Decathlon, cintas y siluetas dibujadas a mano alrededor de las fotografías.

Decathlon, cintas y siluetas dibujadas a mano alrededor de las fotografías.

3. Modo oscuro

¿Qué es el modo oscuro? Es un tema gráfico con fondos oscuros y colores claros. Desde la versión de iOS 13, es posible usar aplicaciones con un fondo negro y fuentes blancas. El modo oscuro permite concentrarse más en los elementos importantes de una página, no cansa los ojos y facilita la lectura por la noche. En diseño web, resalta los gráficos, fotografías y colores brillantes.

Apple iPhone 11 Pro, modo oscuro.

Apple iPhone 11 Pro, modo oscuro.

Mercedes Benz, interfaz oscura.

Mercedes Benz, interfaz oscura.

Porfolio de clientes todobravo.es

Porfolio de clientes todobravo.es, agencia de diseño web Madrid.

4. Gradiente de colores

El diseño plano y el ultra minimalismo se han establecido en el diseño web durante varios años. Desde 2019, los gradientes de luz y los gradientes de varios colores aparecen en los fondos de la página o en los botones.

Nike, gradiente de 4 colores.

Nike, gradiente de 4 colores.

5. Enmarcado de elementos con espacios vacíos.

Grandes espacios en blanco enmarcan las imágenes o textos. Esta técnica de diseño no es nueva, pero vuelve con fuerza en 2020. Cuando queremos resaltar algo, lo enmarcamos y no ponemos nada alrededor, como una pintura en una exposición. Esto pone el foco en lo que es importante y le da menos importancia al resto de los elementos en la página.

Mango, espacio en blanco que rodea las fotos de modelos.

Mango, espacio en blanco que rodea las fotos de modelos.

Carolina Herrera, espacio en blanco que rodea el botón de acción

Carolina Herrera, espacio en blanco que rodea el botón de acción «Comprar ahora».

Gucci, espacio vacío enmarcando los productos de la tienda online.

Gucci, espacio vacío enmarcando los productos de la tienda online.

6. Capas superpuestas

Esto implica romper la estructura normal de una página web y desplazar elementos uno respecto al otro. Los bloques de texto pasan sobre las imágenes, las imágenes se mueven del flujo de lectura normal.

Esta tendencia le da a la página más originalidad sin hacerla más compleja, al sobrecargarla con elementos gráficos innecesarios.

Jean Paul Gaultier, texto desplazado, fondos e imágenes asimétricos.

Jean Paul Gaultier, texto desplazado, fondos e imágenes asimétricos.

Salvatore Ferragamo, marco de texto superpuesto a la imagen.

Salvatore Ferragamo, marco de texto superpuesto a la imagen.

Medium, texto flotando sobre un marco de texto.

Medium, texto flotando sobre un marco de texto.

7. Colores de bohemia natural a alta costura extravagante

El color Pantone 2020 es PANTONE 19-4052 Classic Blue. Este color es elegante en su simplicidad y sugiere el color del cielo al anochecer. Es tranquilizante y propicio para la reflexión.

Encontramos este color en la fotografía, la ilustración y los gráficos, para dar un estilo que va desde lo bohemio natural hasta la alta costura brillante.

Chris Roome - Fotografía de moda.

Chris Roome – Fotografía de moda.

Jvdas Berra - Fotografía de moda.

Jvdas Berra – Fotografía de moda.

Morillas Branding- Fontvella – Gráficos.

Morillas Branding- Fontvella – Gráficos.

8. Blanco y negro

El blanco y negro se encuentra como todos los años en las tendencias de diseño web. Siempre es sinónimo de chic, elegancia y atemporalidad. Un sitio web en blanco y negro siempre estará de moda y no requerirá actualizaciones frecuentes. El blanco y negro a menudo se usa en temas gráficos de tiendas en línea para tranquilizar al usuario y dar la máxima importancia al producto.

Prada, fotografía en blanco y negro.

Prada, fotografía en blanco y negro.

9. Video Hero

Los videos en gran formato aparecen en las páginas, brindando una experiencia de inmersión completa en el sitio web. Las conexiones a Internet de banda ancha, así como la llegada de 5G, ciertamente aumentarán el uso de estos medios.

10. Objetos 3D y efectos 3D

La adición de objetos 3D o renderizado 3D permite, al igual que las videos, sumergirse en la imagen al eliminar la barrera entre lo digital y la realidad. La tecnología y el material son mucho más accesibles para producir hoy este tipo de imágenes que veremos más y más en 2020.

Jean Paul Gaultier, fotografía sublimada por efecto 3D.

Jean Paul Gaultier, fotografía sublimada por efecto 3D.

Apple, AirPods Pro.

Conclusión

Ilustraciones, 3D, mezclas de realidad fotográfica y digital, la experiencia del usuario será cada vez más inmersiva en el diseño web 2020. El diseño plano hiper minimalista que tendió a estandarizar los sitios web, desaparece poco a poco para un diseño web más diferenciador.

Durante varios años, hemos estado estudiando las tendencias en diseño web para ofrecer a nuestros clientes las últimas técnicas de creación, adaptándolas a su imagen y sus objetivos de comunicación. No dude en contactarnos si desea asesoramiento.

Diseño web 2020: las 10 tendencias en diseño de páginas web que debes conocer

¿Por qué elegir TodoBravo para crear o posicionar tu web?

Diseño web y marketing digital

Nuestro equipo combina todas las habilidades para hacer que tu proyecto sea un éxito: diseñadores gráficos, diseñadores web, desarrolladores web y consultores marketing. Transformamos tus ideas en sitios web impresionantes y rentables.

Servicios y mantenimiento web

Ofrecemos una amplia gama de servicios adicionales: compra de dominios, alojamiento web profesional, creación de logotipos, redacción de contenidos, traducciones profesionales, mantenimiento web, branding, presentaciones corporativas y mucho más.

Calidad y profesionalidad

Profesionales comprometidos, optamos por la calidad y construimos relaciones a largo plazo. Somos un equipo multidisciplinario con amplia trayectoria de proyectos web exitosos. Nuestro "team" es internacional y multi idioma, hablamos español, francés e inglés.

Asesoramiento

Te ayudamos a dar forma a tu proyecto y te asesoramos durante todos los pasos. Estructuramos las fases, los tiempos y los costes de la creación de tus ideas.

Precios

Nuestras tarifas de diseño web y de marketing online corresponden a la calidad del trabajo contratado. Ajustamos nuestros precios para que sean competitivos igual que atractivos.

No somos una fábrica de páginas web baratas. Somos diseñadores web y consultores digitales que cumplen objetivos de calidad.


tigre multi colores en articulo tendencias diseño web 2019 de todobravo

Diseño Web 2019: Tendencias Páginas Web y Tiendas Online

Las tendencias web 2019

Conocer las tendencias web 2019 es crucial al crear, renovar o posicionar tu sitio web este año. Como expertos del Marketing digital, del Diseño y Desarrollo web, queremos compartir contigo las novedades que impactan los sitios webs 2019.

Olvídate de la palabra “página web”. Ya estamos hablando de mucho más. Cual sea el objetivo de tu web (dar a conocer tus servicios o productos, aumentar el reconocimiento y el posicionamiento de tu marca, ampliar tu mercado, vender online, aumentar tus ventas, captar nuevos clientes…), una web de éxito en 2019 tiene que mezclar Marketing Digital, Contenidos Optimizados, Diseño web de vanguardia y Desarrollo web de excelencia.

Un cóctel de técnicas y de creatividad que TodoBravo Diseño Web Madrid sirve desde una década a sus clientes por toda Europa.

Lo que sea tu negocio, el posicionamiento ya no es una opción: SEO (orgánico), SEM (de pago), SOCIAL (más que redes) y otras técnicas de visibilidad web te propulsan por encima de la competencia, en las primeras posiciones de los buscadores y de las redes sociales.

Aumentar la visibilidad online de tu negocio no solo es tener el mejor diseño web y ofrecer la mejora experiencia de usuario. Las estrategias digitales son múltiples, te propondremos la más adecuada para cumplir con los objetivos de tu proyecto web y tu presupuesto web.

Como cada año, seguramente unos nos copiaran este estudio de las TENDENCIAS DIGITALES 2019. Para que lo sepan: Google en 2019 valora más que nunca el contenido original, el contenido de calidad. La inteligencia artificial ya es una realidad y ya está integrada en el ranking de los sitios web.

 

Pantallas Apple con lámpara 2019

 

El 31 de octubre del 2017 os anunciemos las tendencias del Diseño Web 2018. Sabemos que muchas triunfaron y que algunas se quedarán todo el 2019. Como agencia web, unimos nuestras experiencias desde París y Madrid, y compartimos una vez más contigo nuestra visión de las novedades que impactan el diseño y desarrollo web 2019.

El Internet 2019 se enfoca aún más en el móvil: por primera vez el posicionamiento global en Google integra el Mobile First Index y valora la experiencia del usuario. El Diseño web 2019 prioriza la velocidad y el global responsive.

¡Siéntate! Te lo comentamos todo.

Los colores brillan, vibran, nos sorprenden

En el 2019, lo usual aburre. El 2019 tiene que ser llamativo, divertido, lleno de manipulaciones cromáticas.

Los principales sitios web confirmaron claramente que a los usuarios web les gustan las combinaciones de colores brillantes.

El buen uso de colores contribuye a captar visitantes.

Mujer de perfil con inscripción Running on Experience
ADOBE RUNNING EXPERIENCE
Colores Web Elje Group The Art of digital brand
ELJE GROUP

Gradientes y Duotones deslumbrantes

En el diseño web 2019 los colores de moda son gradientes y degradados.

Los ganadores de premios mundiales, música o cine, los Unicornios de la Silicon Valley y otros lo saben y lo usan: COLORES, COLORES Y MAS COLORES…

Gradientes y Duotones Spotify
SPOTIFY
Gradientes y Duotones Saints Stars
SAINTS STARS GYM

¿Cuáles son los mejores colores para tu web o tienda online?

Depende de tu sector, de tu mercado, de tu empresa… El “ADN” de tu marca lo define todo. Al conocer tu proyecto, te haremos propuestas.
Contáctanos ahora.

Blanco y Negro: los reyes del E-Commerce

¿Necesitas vender online? Cuando se trata de crear una tienda online de éxito, el protagonista es el producto o el servicio ofrecido a la venta.
Por eso el uso del Blanco y NegroMinimalismo y Botones transparentes es una combinación ganadora salvo unas excepciones sectoriales o de estrategia.

Como siempre: Menos es Más.

Mira este ejemplo de la tienda online SUUS, uno de nuestros clientes:

 Tienda Online SUUS con 2 hombres
SUUS

En el diseño de la tienda online Zara, añadimos un toque Rojo que lo potencia aún mas...

Tienda Online ZARA con mujer blanco y negro
ZARA (Colección Invierno 2018)

Para que una web minimalista sea impactante y llamativa, debemos cuidar al máximo las imágenes y los mensajes fuertes.
Los diseñadores web también siguen las tendencias "offline", de la vida real.
Por ejemplo pueden usar el color PANTONE del año. En 2018, era ultravioleta.

Pantone Of the Year 2018 Colores
PANTONE COLOR OF THE YEAR 2018

Emov, el carsharing más grande de Madrid, usa  el ULTRAVIOLETA en su web y sus coches.

EMOV coche Citroën con colores Pantone Of the Year 2018 EMOV

Formas Fluidas y Diagonal Design

Twitter, a principios del 2018, sorprendió a los usuarios cuando introdujeron fotos circulares de usuarios. Marcó el inicio una de las tendencias web 2019: el diseño web fluido.

Diseño web 2019 Fluido y circularEl diseño web siempre ha sido bastante “cuadrado”, centrándose en líneas, bordes duros, polígonos y rectángulos.

En el 2019 veremos más sitio web con el Diagonal Web Design y unas Slanted lines.

En Mokhtar Saghafi el sitio web se carga como una columna, pero el fondo se basa en inclinaciones diagonales hacia abajo.

Diseño web 2019 Fluido y circular Saghafi
Mokhtar Saghafi UX Designer

En Stedi mezclamos el diseño diagonal con diseño web parallax "Scroll Down":

Diseño web 2019 Fluido y circular EDI
STEDI

En Affinity la realidad y el diseño web se unen para revelar formas fluidas:

Diseño web 2019 Fluido y circular Affinity
AFFINITY

En Movistar España el diseño web combina líneas cortas rectasformas y círculos fluidos:

Diseño web Web 2019 Fluido y circular Movistar España Fútbol
MOVISTAR ESPAÑA

En Stripe (como en Stedi) las secciones de división en diagonal marcan la diferencia.

Diseño web 2019 Fluido y circular Stripe
STRIPE

El Menú hamburguesa sabor 2019

Las funciones móviles, como la hamburguesa/menú oculto son habituales en las páginas web 2019 de escritorio también.

Diseño web con menú hamburguesa
PANIC STUDIO

En Panic Studio usan el Diagonal Web Design que acabamos de comentar.

La nueva tendencia 2019 es de usar 3 líneas que no son simétricas y un menú web emergente que cubre completamente la pantalla. Es atrevido, pero siempre intuitivo.

Tendencias Diseno Web 2019 menu hamburguesa
BLACK SHEEP STUDIOS (Menú hamburguesa 2019: líneas asimétricas y Full pantalla)
Diseño Web 2019 menú hamburguesa
DURSUN LIMOUSINE (Menú hamburguesa 2019: emergente y Full pantalla

Este tipo de menú web permite integrar un buscador de contenido elegante para el sitio web.

El Diseño Hero se queda y lidera

Cada vez más encontramos páginas web que utilizan del diseño Hero. Se trata del uso de imágenes para grandes cabeceras que se adaptan a todas las pantallas y que abarcan todo el ancho de la página. En este tipo de tendencia también destaca el uso de los botones ghost o transparente que hacen que la imagen destaque.

 Tendencias Diseño Web 2019 diseño hero
THE RENOVATOR

Mejor tu web en móviles, Mejor tu posicionamiento web global

La nueva realidad del SEO 2019: La calidad de tu web en móviles lo cambia todo. El diseñador web está mano a mano con el desarrollador web. Lo estábamos esperando desde hace tiempo: el Diseño Responsive ahora cambia el ranking global de tu web.

Lunes 26 de marzo del 2018: Google anunció oficialmente en "Webmaster Central Blog" a todas las empresas de Desarrollo y Diseño Web seguidoras que el Mobile First Index arranca y se reforzará gradualmente.

Diseño web mobile first indexing
MOBILE FIRST INDEX 2019

Ahora, la indexación de una página y su ranking se realiza tomando como referencia la versión web para dispositivos móviles y no la versión web para ordenadores como anteriormente. La indexación de la versión para ordenadores no desaparece, simplemente Google renueva sus prioridades considerando como protagonistas los dispositivos móviles.

Una elección de Google lógica ya que:

  • El móvil supera al ordenador desde 2016 para acceder a Internet.
  • El fin del Roaming en Europa el 15 de junio 2017 contribuyó a que los móviles y tabletas se impongan como dispositivos principales de acceso a Internet en nuestros países europeos.
  • En 2018, 60% del tráfico eCommerce en el mundo llega desde móviles y tablets (Estudio Salesforce Shopper First Retailing 2018) [Un 14% más que en el 2017].
  • En su último informe Futuro Digital Global 2018, ComScore revela que el uso del smartphone en exclusiva para acceder a internet, sigue comiéndole terreno al uso de tablet y ordenador en mercados como Estados Unidos.

La calidad de tu web en móviles va a contribuir más y más en el posicionamiento SEO global de tu empresa online.

Posicionamiento web SEO 2019 Mobile First
SEO WEB 2019

2016 y 2017: te contábamos porque la compatibilidad con los dispositivos móviles de tu sitio web era lo más importante.
2018: introducimos la creatividad “Mobile First”, es decir el hecho de pensar el diseño de una página web “para móviles primero”.
2019: el MÓVIL ES EL PROTAGONISTA, hasta cambiar el POSICIONAMIENTO de la versión sobremesa (PC/MAC) de tu web.

Desde TodoBravo Diseño Web, pensamos “Responsive”, desarrollamos "Móvil" para que tu contenido sea perfectamente asequible en todos los tipos de pantallas y que consigas el mejor posicionamiento natural que se pueda.

 

Tipografías ganadoras: hechas a mano, modernas, robotizadas o clásicas

Cada tipografía se vincula a un sector muy concreto. Conocer a tu público nos permite elegir las mejores tipográficas para tu proyecto web y fomentar tu marca online.
Las tipografías otorgan una personalidad exclusiva, siendo muy positivo diferenciarse gracias a la utilización de las mismas. Las tipografías de moda en 2019 son cada vez más divertidas, tal como letras grandes sobre imágenes.

Botella de cerveza ROSITA
ROSITA

Gifs animados y Cinemagraphs a la perfección

Los Gifs y Cinemagraphs animan las webs del 2019. En palabras sencillas, son imágenes animadas en loop continuo que generamos desde videos.

Un ejemplo vale más que mil palabras.

Vídeo de inicio full pantalla: ¿Si o No?

Un video atractivo capta la atención del usuario, sobre todo en modo Full pantalla. No tenemos ninguna duda. Ya lo recomendamos en el 2016.

En el 2018 el video en distintos formatos y formas de promoción ha estado muy presente… Pero en el 2019 NO va a seguir igual.
Los navegadores empiezan dando guerra a los videos.

En el 2019, los navegadores usan la Inteligencia artificial para decidir si lo arrancan o no automáticamente, si reproducen o no el sonido. La reproducción automática NO puede ser garantizada. Como diseñadores web tenemos que adaptarnos, ya hemos encontrado soluciones. Contáctanos ahora y hablamos de tu web.

 

HTTPS = no solo seguridad, confianza y visibilidad. También es POSICIONAMIENTO.

¿HTTPS/SSL? ¿Hablamos de técnica? Discúlpanos, jamás lo hacíamos en nuestro informe anual de las tendencias web.

Pero en el 2019 hay una realidad técnica que no podemos silenciar. Este protocolo HTTPS que no parecía nada hace poco, se ha convertido en la norma imprescindible del desarrollo web 2019 desde que los navegadores Chrome (69+), Firefox (61+) lo enfocan.

TodoBravo Diseño Web

No solo permite conseguir el aviso “web segura” del navegador, sino que también genera la confianza de tus visitantes en tu página web o tienda online.

¡Ojo! A lo largo del año 2019 los navegadores lo pondrán aún más como “no seguro”.

Creamos páginas web y tiendas online 100% HTTPS, porque en el 2019 este protocolo ya no puede faltar.

Google reCAPTCHA: sin comparación, el mejor antispam

Formulario de contacto, Inicio de sesión… lo que sea de autentificación: hacerlo con protección antispam moderna es un lujo que merecemos todos. El Google reCAPTCHA se impone como la mejor solución antispam 2019, la que lidera el mercado gracias a la integración de inteligencia artificial.

Acabamos con la matemática, las páginas web que te lo ponían tal como “resolver 2+4=…” eso cualquier robot del 2019 es capaz de conseguirlo. Confiamos en Google reCAPTCHA. Google lidera el mercado del antispam.

Google Maps: más posibilidades… pero más restricciones

Exponer un mapa Google Maps en tu (sitio) web requiere desde julio 2018 una Google API Key y una cuenta de facturación Google API.

Desde TodoBravo Diseño Web, lo hacemos para TODOS nuestros clientes.

¿Tu mapa google no funciona en tu página web? Cuéntanos, te lo solucionamos.

 

Las normativas LOPD, RGPD y demás impactan

¿Cómo cumplir la Ley de Protección de Datos? Desde años, cumplir las normativas “webs” tal como LSSICE o LOPD es fácil: presentar páginas informativas (Aviso Legal, Política de Privacidad, Política de Cookies...) y un banner informativo del uso de cookies.

TodoBravo Diseño Web

Las cosas cambiaron el 25 de mayo del 2018 cuando entró en vigor el RGPD al nivel europeo. También conocida como GDPR (General Data Protection Regulation) en inglés, no puedes ignorarla. Es una normativa que impacta realmente a todas aquellas empresas que traten datos de los ciudadanos europeos. Te asesoramos gratuitamente según lo que recoges de datos, no dudes en contactarnos.

La Interactividad y la diversión del Diseño web

Apasionados del Diseño gráfico, del Diseño web, del Desarollo web, vamos más allá en la interactividad, haciendo de nuestro negocio algo divertido.

Terminamos este estudio de la tendencias web 2019 con 3 "masterpiece" de la Interactividad y del Diseño.

Activa y sube el sonido de tu navegador

¡Ven a PINCHAR con Because Recollection!

BECAUSE RECOLLECTION INTERACTIVE WEBSITE

¡Ven a BAILAR con el flamenco Pablo!
Hagas lo que hagas, no paras la música o Pablo la arrancará de nuevo :)

PABLO THE FLAMINGO

¡Ven a JUGAR con nosotros!

OUI GO (GRUPO SNCF - FRANCIA]

Conclusión: ¿Qué esperar del Internet del 2020?

Necesito un "lavado de cara de mi web”, dar algo de “aire fresco a mi página web”, quiero “renovar mi sitio web”, pienso “reformarlo todo”... En el panorama 2019 del Diseño y Desarrollo web, puede resultar complicado exponer lo que realmente necesitas.

No te preocupes: tenemos una década de experiencia y vamos a ayudarte basándonos en los objetivos de tu sitio web o tienda online.

Creamos, innovamos, destacamos… construimos audiencia a largo plazo.

A finales del 2019 otra tendencia web se confirma: los chatbots. Un chatbot es un programa informático con el que es posible mantener una conversación, tanto si queremos pedirle algún tipo de información o que lleve a cabo una acción. Unos están integrados en Asistentes Personales muy versátiles: Alexa, Siri, Cortana, Google Assistant.

Los Chatbots y los Asistentes Personales te abren en 2020 nuevos mundos para captar clientes. La inteligencia artificial del 2020 cambia tu posicionamiento para siempre, ya que es capaz de entender realmente tu negocio.

No te preocupes desde TodoBravo Diseño Web llevamos muchos años estudiando las tendencias de las (páginas) web, en 2020 podrás contar con nosotros, y seguramente leernos a finales de octubre del 2019.

Gracias por confiar en nosotros.


tendencias 2018 en diseño web por la web todobravo

Diseño Web 2018: Tendencias Páginas Web y Tiendas Online

Las tendencias del diseño web 2018

Como cada año, queremos compartir contigo nuestra visión de las tendencias del diseño web más prominentes para el 2018.

No es que haya un cambio brutal respecto a las TENDENCIAS EN DISEÑO WEB 2016 – 2017 pero sí que hay unos cambios que debes conocer a la hora de hacer una página web, renovar una web o crear una tienda online en 2018.

Las tendencias de diseño web son impulsadas por las páginas web populares, las tendencias tecnológicas, las grandes firmas y empresas, las costumbres de los usuarios web… así que nuestras observaciones de un mundo digital en movimiento continuo.

Por ejemplo, debes saber que desde 2016, el uso móvil superó la navegación de escritorio, y se queda desde entonces el dispositivo favorito de acceso al Internet para la mayoridad de los usuarios del Internet. Por eso, el Diseño Responsive no es una tendencia, sino una obligación a la hora de crear una página web, renovar una web obsoleta o hacer una tienda online en 2018.

Este año 2018, vemos innovaciones que te sorprenderán, innovaciones nunca vista hasta ahora. El diseño web 2018 está más que nunca centrado en el consumidor (consumer centric), las páginas web tienen más personalidad (Diseño único y a medida), Los escritorios se ponen con funcionalidades que se veían hace poco solo en móviles...

TodoBravo tiene más de una década de experiencia en diseño y desarrollo de Páginas Web y de Tiendas Online, te contamos todo lo que tienes que saber para esta cosecha digital 2018.

 

Página de inicio Video

El Video es una gran técnica para destacar entre la multitud. Desde un par de años, es de moda de dar la bienvenida a un visitante con un vídeo como inicio de una página web. Es un recurso que bien realizado conecta con el usuario. El vídeo genera cercanía y confianza.

Según un estudio de CISCO del 15 de septiembre de 2017, el video ya cuenta por el 73% del tráfico global Internet, y crecerá hasta el 82% en 2016.

En 2018, esta tendencia se confirma aún más, cuál sea el sector de actividad.

Mira estos ejemplos de Páginas Web con Video Pantalla Completa que te hemos seleccionado:

DITTO DC
RICH BROWN

Dependiendo de tu presupuesto, no hace falta siempre grabar un video con un profesional.

Consúltanos, desde TodoBravo Diseño Web te mandaremos un presupuesto de página web con video económico, relacionado con tu público objetivo y la imagen de tu empresa.

Gifs animados y “cinemagraphs”

No solo las páginas de inicio se ponen de Video. Lo de que un video vale más que mil palabras se puede aplicar perfectamente a otras secciones o apartados de una página web.
Una historia puede verse muy favorecida por el uso de un encabezado de vídeo.

Los Gifs y Cinemagraphs también animan las webs del 2018. Ambos son vídeos cortas o animaciones que corren en un loop continuo. A nosotros nos gustan solo los de alta calidad, tal como:

Cinemagraph hombre conduciendo un coche

Cinemagraph chimenea

 

Video, Gifs animados y “cinemagraphs” pueden convertir las páginas web en algo innovador donde el usuario se siente bien.

Hero: adiós Carruseles de imágenes (sliders) ¿?

"Hero" son imágenes que usamos para crear Fondos de pantalla completa:

 

Hero image de gente en una terraza

Si se trata de impresionar y captar la atención de tu audiencia, una imagen de fondo de pantalla completa es una buena solución. Si añadimos una tipografía legible y un eslogan que llame la atención, tenemos como resultado una muy buena página de entrada a tu web. Se usa mucho esa técnica también para realizar Páginas de aterrizaje (Landing Page).

Echa un vistazo a CLEVERBIRD CREATIVE WEB AGENCY, agencia de diseño web premiada en los Estados Unidos. Su página de inicio usa una “Hero”, una imagen de fondo a pantalla completa que se amplía para abarcar la totalidad de su monitor. Luego, al desplazarse hacia abajo, cada sección individual tiene su propio fondo o foto.

Hero image CleverBirds pantalla completa de una oficina
CLEVERBIRD CREATIVE WEB AGENCY

Utilizar imágenes de fondo grandes incita la curiosidad en el visitante de una página web.

Se pueden usar tambien solo para crear una banner web, una Cabecera llamativa:

Hero Image half screen

Otra ventaja del Diseño web Hero: es totalmente compatible con el Diseño Responsive y el Flat Design.

Queda perfecto para crear una tienda online también, mira este ejemplo de Daniella Draper Shop.

El Carrusel de Imágenes, conocido como slider, hace resistencia. Básicamente cualquier página puede hacer uso de los sliders, lo único que necesitas son varias imágenes igual de cautivantes para incluir en el slider. El slider usualmente cambia de imagen al pasar cierto tiempo y pone el énfasis sobre unos mensajes fuertes.

Colorful Website Design: Oleada de colores

En 2018, verás colores más brillantes, más vivos y un mayor uso de degradados.
¡Que seamos audaces! Si lo permite la imagen corporativa de tu empresa y tu mercado por supuesto.
Los colores ricos, los colores vibrantes son honrados, al igual que el uso de gradientes, saturaciones y tonos vibrantes.
Podemos permitírselo ahora gracias a los avances tecnológicos de las pantallas (8K, 5K, 4K, OLED…).

Echa un vistazo a esas webs de empresas que se ponen de (multi) Colores:

Colores Website Spotify
SPOTIFY
Tendencias Diseño Web 2018 Colores Website MailChimp
MAILCHIMP
Colores Website Elje Group
ELJE GROUP
Colores Website LeLand Originals
LELAND ORIGINALS

Monochromatic Website Design

Al contrario, en unos casos, el uso de un color único puede reforzar una marca, pone énfasis en el contenido y añade un tono moderno, atrevido, vanguardista a un diseño web.
Está demostrado que páginas con un color monocromático pueden conducir a unas conversiones muy alta.

Te presentamos 3 ejemplos de Diseño web Monocromático que lo demuestran perfectamente.

Mono Color Website Abaco
ABACO GROUP
Mono Color Website SFR RED
SFR FRANCE
Mono Color Website RED ORG
RED CHARITY

Tipografías Expresivas

2018 es el año de las Tipografías con personalidad, decimos adiós a las tipografías aburridas. Esto es gracias a la mayor disponibilidad de tipografías gratuitas disponibles al alcance de cualquier diseñador web. Por motivo de ultra compatibilidad nosotros recomendamos usar las fuentes Google Fonts.

Mira unos ejemplos de las Tipografías Google más creativas del 2018:

Tipografias google fonts
Barrio Regular: el rey de las mayúsculas
Special elite tipografia google font
Special Elite: el retro de las máquinas de escribir
kranky tipografia
Kranky: el infantil por excelencia
Tipografia playball
Playball: escritura a mano digital

Los diseñadores Web TodoBravo se concentran siempre en los objetivos de tu web para elegir contigo las mejores fuentes. Desde años usamos fuentes “protagonistas” para muchas de nuestras realizaciones web, tal como OPEN SANS o MONTSERRAT que nos gustan mucho. En 2018 si que la fuente será más protagonista que nunca en el diseño de páginas web.

Entra a ver este ejemplo de uso de Tipografías sencillas, limpias, eficaces:

Tipografia Livechatinc
LIVE CHAT INC

Mobile-first

El rey del 2018 es, sin duda, el teléfono móvil inteligente (smartphone). Así lo destaca el informe La Sociedad de la Información en España en su 16 edición. Corona al móvil como el principal dispositivo a través del cual los españoles entran en Internet: 88,3% de los usuarios de móviles en España lo eligen como dispositivo favorito de acceso al Internet.

Una tendencia que se observa igual en casi todos los países desarrollados. Nacido de este evento, El Mobile-first es el hecho de pensar el diseño de una página web “para móviles primero”. Es el proceso de diseño de un sitio web para dispositivos móviles (o los dispositivos filtrados más pequeños) primero, para luego trabajar hasta los más grandes.

Diseno Web 2018 Mobile First

El Diseño Responsive no olvida a los más Grandes

Tus páginas web deben ser de diseño responsivo, es decir un desarrollo web 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 LA PRIORIDAD al crear o rehacer tu web en 2018. Notarás grandes mejoras del posicionamiento de tu web en los resultados naturales de los buscadores.

Si el Mobile-first es una gran Tendencia del Web Design 2018, también lo es la consideración de las pantallas grandes (Superior a 1920 x 1080).
Aunque el mayor enfoque de 2018 se pone en las pantallas pequeñas de los smartphones como acabamos de verlo, es importante considerar también el diseño para pantallas más grandes. Mira que los iMac de 27" pulgadas del 2017 ya son de 5K (5120 x 2880).

Según el W3School, los 32% de los usuarios usan este tipo de pantallas grandes con resoluciones superior a 1920 píxeles x 1080 pixeles (enero 2017).

No nos podemos olvidar de ellos ¡!

La revolución del Menú

Hamburguesa en todos los dispositivos

Las funciones móviles, como la hamburguesa/menú oculto, son comunes en las páginas web 2018 de escritorio también.

Unos ejemplos de webs con menú oculto o menú hamburguesa en ordenadores clásicos:

Diseno Web 2018 Menu Hamburguesa Rollpark
ROLL PARK (Menú hamburguesa arriba izquierda)
Tendencias Diseno Web 2018 Menu Hamburguesa Funktional
FUNKTIONAL (Menú hamburguesa arriba derecha)
Menú Hamburguesa La Ligne Rouge
LA LIGNE ROUGE (Menú oculto zona “RollOver” en la cabeza)

Menú pop over

El menú emergente cubre completamente la pantalla. Es atrevido, pero siempre intuitivo. Esto nos recuerda un poco de la tabla de contenidos de los libros tradicionales.

Probalo visitando estos 2 ejemplos:

Menú Hamburguesa dursun limousine
DURSUN LIMOUSINE
EDELSON

El movimiento del RollOver

El RollOver sigue de moda y se amplía. Visita la web de GOULBURN VALLEY  y pasa tu ratón sobre los frutas, verás un impresionante RollOver!

RollOver GoulburnValley
GOULBURN VALLEY

La ilustración vuelve a lo grande

2018 es el año de la vuelta de fotografías e ilustraciones originales. El contenido visual original domina el diseño web 2018 y será así ciertamente durante muchos años.

Para 2018, se esperan páginas web originales con un contenido más creativo y único. "Esto empujará a las empresas y las marcas a movilizar más esfuerzo para mostrar su singularidad y construir su propia estética en la web usando fotografía, vídeo, ilustración y tipografía exclusivas.

Visita este ejemplo de ilustraciones animadas originales:

Ilustraciones kikk
KIKK FESTIVAL

O este otro ejemplo de ilustraciones flat y videos, todo en Diseño web Parallax (Al visitar la página, desplázate hacia abajo para verlo todo):

Ilustraciones digitalvolcano
DIGITAL VOLCANO MAP

Y por fin mira estas otras ilustraciones tipo juguetón:

Ilustraciones rleonardi
INTERACTIVE RESUME

Por supuesto, como todas las tendencias de nuestro estudio de diseño web 2018, esta tendencia de ilustraciones no es apropiada para todos.

También crear esos materiales complejos para el diseño de una página web puede incrementar bastante el presupuesto de la página web…

Cuéntanos tu proyecto de web, desde TodoBravo Diseño Web te lo ponemos fácil: te asesoramos gratuitamente y elegimos las mejores tendencias según los objetivos planteados y tu presupuesto web.

La madurez del Diseño Plano (FLAT DESIGN)

A nosotros, el flat design nos encanta desde un par de años y como podéis verlo la mayoría de nuestras realizaciones de páginas web están diseñadas bajo esa tendencia.

El realismo ha quedado atrás y vamos hacia un diseño en el que con pocas líneas se exprese mucho.

¿Qué es el Flat Design o Diseño Plano?

Con el Flat Design se elimina la profundidad, sombras, relieves, texturas y cualquier aspecto de tridimensionalidad para brindar un diseño elegante y accesible con bordes más sólidos y nítidos.

Un estilo minimalista y potente que confirma que “Menos es más”, que la sencillez y la simplicidad son herramientas de captación de visitantes.

Los diseños web 2018 son mucho más ágiles y están despojados de elementos gráficos innecesarios. Con el Flat Design 2018 disminuye considerablemente el tiempo de carga lo que se traduce en un usuario más contento, un mejor posicionamiento SEO y menos porcentaje de abandono.

Uno de los ejemplos más emblemático desde años es la página web de Apple:

 

Tendencias Diseno Web 2018 flat design
IPHONE (Web Flat Design)

El Material Design tarda en posicionarse

El Material Design es un concepto “inventado” por Matías Duarte, vicepresidente del diseño en Google. Al principio era el diseño elegido para el sistema operativo ANDROID.

El material design, como su propio nombre indica, se basa en objetos materiales. Podríamos decir que son diversas piezas geométricas simples (normalmente rectángulos y círculos) colocadas en un lugar concreto y con un movimiento determinado.

Mira este ejemplo de página web 100% realizada en material design:

Tendencias Diseno Web 2018 Material Design
MATERIAL DESIGN WEBSITE

Formulario Minimalistas Seguros

Cual sea el formulario de una página web (formularios de contacto, formularios de reserva, formulario de consultas, formulario de registros…) es fundamental que sea accesible y sencillo.

El formulario es la máquina de captación de usuarios de tu web. La reducción del diseño a lo esencial ayuda a crear una mejor experiencia de usuario.

En 2018 vemos más y más formularios muy sencillos y a pantalla completa. Proporcionan a los usuarios un uso más eficaz y sin distracción del último paso hacia la conversión, con mayor atención en los móviles donde la conversión es mucho menos eficaz que en un ordenador de escritorio. Sin embargo, pensamos que hay que tener mucho cuidado al elegir eso...Cual seria el mejor diseño de formulario para tu página web entonces ¿?

  • Con o sin CAPTCHA ¿?  O reCAPTCHA ¿?
  • Con o sin control del email rellenado ¿?
  • Con o sin "opt-in" del email de contacto ¿?
  • Con o sin HTTPS / SSL ¿?
  • Y la Ley de protección de datos donde se pone ¿?
  • Cómo funciona el formulario multi-idioma o multi-destinatarios ¿?

Hablamos de tu proyecto de páginas web, te lo solucionamos según tu proyecto.

Tendencias Diseno Web 2018 reCAPTCHA

 

Botones Fantasma

Con el aumento del uso de vídeo y fotos de alta resolución los diseñadores web son reacios a usar un botón opaco y amortiguar el impacto visual que este produce. Los Desarrolladores Web están Optando por “Botones Fantasma” (Ghost Buttons), con contornos simples que permiten ver la imagen a través de ellos pero funcionando como un botón normal.

Botones Fantasma

Desde TodoBravo Diseño Web les usamos siempre que se justifican y que se quedan muy visibles (tal como en esta captura donde el oscuro del fondo lo permite).

Web con una experiencia completa

Para algunos proyectos, podemos construir una experiencia web increíble que mezcla Video, Interactividad, Sonido y más. El sitio web Recollection es un buen ejemplo de lo que nos permite el desarrollo web en 2018. Cuando te lo dicen, mantenga la barra de espacio hasta cargar integralmente la otra video. No te lo olvides: activa el sonido de tu dispositivo y prepárate para una experiencia única muy divertida!!

BECAUSE RECOLLECTION INTERACTIVE WEBSITE

Conclusión: No es para todos!

Creamos tu página web en 2018

Aunque muchas de estas tendencias en diseño web aparecen como un "must" en 2018, no es necesario adoptar cada una de ellas mañana en un proyecto de desarrollo o rediseño de página web o de tienda online! En primer lugar hay que centrarse sobre el usuario, el público objetivo, el tipo de contenido, la cantidad de contenido y muchas otras características.

El diseño web debe servir rigurosamente la IMAGEN DE TU EMPRESA. Tu nueva página web debe generar confianza, ser clara e inspiradora.
Consúltanos, te asesoramos gratuitamente.

¿Está lista tu página web para 2018?

Un sitio web obsoleto puede reducir drásticamente las conversiones. Los diseños retros y desordenados distraen a los visitantes del punto de conversión; la falta de actualizaciones modernas puede hacer que un cliente pierda la fe en tu negocio. Deje que nuestros desarrolladores web de vanguardia y el equipo de diseño TodoBravo te creen un sitio web hermoso y de alto rendimiento para 2018.

¿Y el futuro?

Un buen diseño web debe durar a lo menos 2 a 4 años. ¿Cómo será el diseño web en 2020? Desde luego será algo más interactivo: Será realidad virtual, realidad aumentada y otras innovaciones para promover experiencias multiplataformas.

Un mundo de oportunidades reales en perpetuo movimiento!


Diseño Web 2016-2017: Tendencias Páginas Web y Tiendas Online

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