Tendencias en diseño web y gráfico en 2018

Tendencias en diseño web y gráfico en 2018
4.8 (95.59%) 59 votes
En este artículo voy a enseñarte las tendencias en diseño web para el 2018. Las tendencias en diseño web van cambiando, ahora encontramos mucho flat design, y es de los estilos que está mas presente en las páginas web pero…¿Os acordáis de los GIFs, que dominaban la web en los años 90? Vamos a repasar que tendencias siguen los mejores diseños web, o que hay que intentar hacer para lograr los mejores diseños de páginas web.

Las tendencias en diseño web son aquellas que han ido asentándose como los mejores diseños para hacer que la experiencia de usuario en la navegación sea la mejor posible, por eso debes elegir la que mas se ajuste a tu proyecto.

Debido a la popularidad del diseño web responsive cada vez vemos mas sitios adaptados a dispositivos móviles para cumplir con las pautas que marca Google en cuanto a las webs “mobile friendly”.

El diseño de una web debe buscar ser lo mas usable posible para el usuario. Por eso las tendencias actuales hoy en día tienden a decantarse por diseños con las características que verás a continuación.

Vamos a repasar las tendencias mas populares en diseño web para este año.

 

 

beach¿Que tendencias en diseño web puedes encontrarte en los mejores diseños web?

El problema del diseño web responsive es que todas las páginas web pueden parecer iguales en dispositivos móviles. No obstante esto también es debido al boom de WordPress y al aumento del uso de plantillas.

Esto ha resultado en un montón de diseños comunes, aunque algunos de ellos han madurado y podemos ver algo de innovación:

 

1454990763_LightEl menú “Hamburguesa”

El menú tipo “hamburguesa es el típico menú de los teléfonos móviles, es decir, un icono de tres líneas horizontales. Este menú ha sido criticado por su poca usabilidad, ya que no todo el mundo asociaba ese icono al menú de la web.

No obstante, con el aumento significante de la navegación desde móviles este tipo de menú ya es familiar y reconocible por casi todos.

Su uso es cada vez mas extendido no solo en teléfonos móviles, sino que cada vez está mas visto en muchas páginas web en su versión “pantalla grande”, consiguiendo un diseño limpio y minimalista.

 

tendencias diseño web

AnalyticsFormularios de registro:

Un formulario de registro será siempre un formulario de registro, y su función está clara y definida.

La tendencia web hoy en día está en facilitar y acelerar este proceso facilitando que el usuario se registre con su perfil de redes sociales.

De esta forma se completan muchos mas registros de usuarios ya que estos no estarán tan reacios ante la idea de perder tiempo rellenando campos.

La tendencia para registros mas complejos es crear formularios “por pasos” en los que el usuario es guiado por cada una de las fases del proceso de registro de una forma mas efectiva.

tendencias-web

 

1451873851_browser-windowDiseños tipo “tarjetas” con información escaneable.

El pionero en este tipo de diseños fue Pinterest y cada vez vemos este estilo en mas sitios. De hecho están surgiendo cada vez mas plantillas de WordPress que incorporan este tipo de diseño y logran diferenciarse de los diseños a los que estamos mas que habituados hasta ahora.

Lo bueno de estos diseños es que cada “tarjeta” contiene y presenta la información en pequeños trozos perfectamente escaneables. Aíslan la información de forma muy visual dando un punto de vista gráfico atractivo, y favoreciendo la usabilidad.

 

tendencias diseño web

ganar clientes por internet autonomoImágenes “Hero”

Las llamadas “Hero images” son la imágenes que vemos nada mas llegar a muchas páginas web y que ocupan toda la pantalla.

Las imágenes en las páginas web son un recurso muy potente para captar la atención del usuario desde el primer momento.

Con un buen servidor y una buena optimización de tu sitio e imágenes en general no tendrás que preocuparte por tiempos de carga bajos.

Este recurso ya viene siendo utilizado desde hace unos años, pero anteriormente los usuarios tendían a no seguir haciendo scroll en las páginas. Ahora ya estamos acostumbrados a este tipo de imágenes de presentación, por lo que la mayoría de usuarios intuyen que debajo de ellas continua el contenido de la web. Se puede observar que las páginas web con un mejor diseño, muy visuales y estéticas apuestan por las imágenes Hero.

 

tendencias-web

ganar clientes por internet descuentosAnimaciones:

Las animaciones están siendo usadas cada vez mas para resaltar los contenidos de un sitio web. Cada vez son mas tendencia en diseño web y son incluidas en la mayoría de plantillas de WordPress.

Hacen que la experiencia de usuario sea mas interactiva y entretenida. No obstante, no hay que pasarse con las animaciones. No podemos ponerlas en todas partes de forma indiscriminada.

Las animaciones en una página web pueden ser usadas de dos formas diferenciadas:

  • Animaciones “mayores”: Son usadas como una forma de interacción directa para el usuario, como por ejemplo, incluir notificaciones en forma de pop-up, o efectos parallax.
  • Animaciones “menores”: No requieren ninguna acción por parte del usuario, como los iconos animados que aparecen cuando está cargando una web, las barras animadas o los efectos hover.
Estas son las animaciones mas típicas que puedes ver en las páginas web actuales:

Animaciones de carga:

Sirven para entretener al usuario en el tiempo de espera mientras carga una web.

Deben encajar con la personalidad y apariencia de tu web, deben ser simples y preferiblemente sin audio.

loading

Menus:

Los menús “ocultos” están creciendo en popularidad ya que pueden ahorrar espacio en la pantalla. Los menús tipo hamburguesa ya tan comunes en dispositivos móviles activan varios tipos de animaciones para mostrar los elementos del menú cuando se hace clic en un icono específico.

Quizá te suene el nombre de off-canvas menu, que cada vez se ve mas en las plantillas de WordPress.

Hover:

Las animaciones hover son esos efectos que se activan cuando pasas tu cursor por encima de algunos elementos, como por ejemplo los botones de una web.

Los efectos hover hacen mas intuitiva la navegación en una página web ya que avisan que esos elementos incluyen algún tipo de función, generalmente un enlace.

 

tendencias diseño web

 

Galerías y slideshows:

Otra de las tendencias en diseño web que sigue manteniéndose este año son las galerías en forma de carrousel o slideshow. Son una forma perfecta de mostrar varias imágenes al usuario sin sobrecargar una página web. Son perfectas para portfolios, webs de fotografía y productos.

 

Fondos con animaciones o videos:

Un simple fondo animado puede añadir mucha visibilidad a una parte concreta de tu web. Aun así pueden distraer al usuario, por lo que debe usarse con moderación.

ganar clientes por internet blogMicrointeracciones en la web:

Las microinteracciones ocurren día a día en nuestra vida cotidiana. Desde dar un like a una foto en Facebook hasta apagar el despertador. Permiten al usuario interactuar con una interfaz y cada vez las vemos mas en las apps y en los dispositivos que usamos.

En esta captura de pantalla puedes ver un ejemplo utilizado en diseño web.

 

tendencias-web2

 

composeMaterial Design: La alternativa al flat design

El Material Design surge con el objetivo de Google de crear un Sistema Operativo con una interfaz homogénea para todos sus dispositivos, ya fueran tablets, smartphones o incluso en la web.

El material design usa mas sombreados y profundidad que el flat design, y su función es recrear diseños que parezcan mas realistas para los usuarios.

El principal objetivo del material design es crear diseños web limpios y modernos enfocados en la experiencia de usuario (UX).

Algunas de las tendencias que empezaremos a ver mucho mas en 2018 se identifican totalmente con el materia design, vamos a ver algunas:

Degradados de color semi-transparentes sobre imágenes.

Vuelven a estar de moda los degradados pero se aplican de otra forma. Se está observando desde hace un tiempo que los degradados están cobrando protagonismo en muchas webs.

Pasaron de moda hace unos años pero con el material design parece que vuelven a aplicarse, de una forma mas limpia, sobre diferentes elementos del diseño para resaltar, destacar, o simplemente como una capa de color semi-transparente sobre una imagen.

También se pueden aplicar en botones o iconos.

 

Sombras paralelas en imágenes o cajas

Las sombras, otro elemento del diseño web que había pasado de moda, vuelve a ser tendencia, pero de nuevo, aplicado de otra manera. En este caso las sombras se aplican de una forma mas sutil, difuminadas y con mas profundidad.

Quedan muy bien en imágenes y elementos que van encuadrados en cajas o con diseño tipo “ficha” o “tarjeta”, como se ve en la siguiente foto:

 

Te dejo un sitio web donde encontrarás un montón de RECURSOS BESTIALES para mejorar tu diseño web: https://uplabs.com

 

tendencias diseño web material design

Trucos analyticsDiseño web responsive

El diseño web responsive se ha vuelto muy popular en estos últimos años debido al considerable aumento del uso de teléfonos móviles.

El diseño web responsive realmente ha dejado de ser una tendencia para pasar a ser una buena práctica.

El diseño web responsive se puede aplicar usando plantillas de WordPress premium que te permiten tener tu página web optimizada para móviles de forma sencilla y barata.

No obstante el diseño web responsive puede no haber sido creado correctamente y provocar algunos fallos. Para asegurarse de que el diseño web responsive funciona de la mejor forma posible, los diseñadores web deben:

  • Evitar el uso de JavaScript y CSS en la carga de imágenes que añade peso innecesario a una página.
  • Usar imágenes y videos responsive.
  • Prestar especial atención a los plugins de terceros, que puedan estar ocasionando un impacto negativo en el rendimiento.

 

tendencias-diseño-web

OneHydra herramienta SEO para grandes e-commerceEl diseño Flat no va a desaparecer en el corto plazo

El Flat design es compatible con otras modas del diseño web como el minimalismo, el diseño web responsive o el Material Design.

De cara al futuro, es probable que veamos las siguientes tendencias en el diseño Flat.

  • Las sombras largas (Long Shadows): Dan mucha mas más profundidad a los diseños planos.
  • Combinaciones de colores vivos: Las interfazes y plantillas mas populares han llevado a muchos a comenzar a usar colores más vivos en sus diseños.
  • Tipografía sencilla: En el Flat Design, las tipografías sencillas ayudan a asegurar que el texto sigue siendo legible.
  • Botones fantasma: Son los botones que se presentan con un simple contorno, y cambian cuando el usuario se desplaza sobre ellos. Estos mantienen la funcionalidad sin distraer al usuario.

 

Secciones largas con mucho Scroll

Los usuarios ya estamos acostumbrados a hacer mucho scroll en los dispositivos móviles, y por eso mismo vemos que ya no es necesario preocuparse por crear páginas web con secciones cortas en las que se trata de concentrar todo el contenido en la parte superior a toda costa.

Las páginas con mucho scroll y mucho contenido son perfectas además para quienes quieren atraer a sus usuarios a través del storytelling.

 

apple tendencias web

 

 AMP o Accelerated Mobile pages

AMP es el proyecto de Google que genera una versión mobile en un código HTML super limpio y ligero y provoca que las webs carguen ultra rápido. Actualmente es tendencia en diseño web y podemos ver muchos blogs que muestran su versión AMP en búsquedas realizadas desde teléfonos móviles. Esto beneficiará el WPO de nuestras webs y repercutirá como consecuencia en un mejor SEO.

Actualmente AMP proporciona pocas posibilidades en cuanto al diseño pero empezarán a surgir mayores opciones para editar la linea gráfica y estética de los artículos en AMP para tener mas control sobre el diseño.

Aquí te dejo mi post sobre cómo configurar AMP.

 

 

monitor

Tendencias en diseño web peligrosas

Los cambios de tendencias y modas en diseño web pueden venir dados por las necesidades de los usuarios, o simplemente por un cambio en la industria. No obstante, no tenemos que aplicar todas las modas en diseño web a nuestro proyecto.

En diseño web solo es aconsejable seguir una tendencia si esta va a aportar algún valor o va a resolver alguna necesidad al usuario. No debemos aplicar todas las modas solo porque queden bien en nuestro sitio, sino que dependerá de cada proyecto.

Vamos a ver algunas tendencias en diseño web que debes plantearte si debes aplicar.

Menú tipo hamburguesa que esconde contenido relevante (hamburguer menu)

Los menús tipo hamburguesa quedan muy bien ya que dan un aspecto muy limpio a una página web. Pero no son recomendables para sitios como tiendas online, por ejemplo, ya que pueden ocultar contenido importante que no sea visto a primera vista por los usuarios.

Usar demasiado Javascript

El javascript puede ofrecerte funciones interesantes, pero puede hacer que tu web tarde mas tiempo en cargar, provocando que los usuarios se vayan de tu sitio.

Debes tener cuidado con algunos plugins que crean muchos archivos Javascript y CSS, afectando el desempeño general de tu web.

Sliders en la homepage con varias imágenes a modo carrousel

Utilizar un carrousel de varias imágenes en tu página de inicio te puede dar la oportunidad de agrupar información de una forma muy ordenada y visual, pero tiene algunas desventajas.

Los sliders requieren de varias imágenes de alta resolución que seguramente tengan un peso que haga que tu sitio tarde mas en cargar. También suelen incluir Javascript, que hará que sea mas difícil de optimizar.

Usar varias tipografías

En diseño web no es recomendable usar mas de dos tipografías, ya que usar demasiadas podría despistar y dificultar la legibilidad del contenido.

Si quieres saber cómo puedes instalar tipografías en WordPress te recomiendo leer éste post donde te cuento cómo hacerlo.

 

Bonus – Los mejores diseños web

Para que veas de lo que he estado hablando en este post, te voy a dejar a continuación una lista con webs de inspiración.

Podrás ver varios estilos web y sacar muchísimas ideas de las mejores páginas web para tus propias creaciones. En concreto en bestwebgallery te encontrarás con páginas que han sido premiadas por ser precisamente los mejores diseños de páginas web en la actualidad.

notepadConclusión sobre las tendencias en diseño web ¿Que hacer para lograr los mejores diseños de páginas web?

No se deben seguir las tendencias marcadas en diseño web simplemente por ser lo que está de moda en un determinado momento. En diseño web, lo que es tendencia o deja de serlo, viene marcado por lo que es mejor para los usuarios, es decir por la experiencia de usuario (UX).

¿Piensas que están por venir otras novedades en el diseño web? Si es así, déjame un comentario mas abajo contándome tu punto de vista.

 

Quizá te interese: 

Álvaro Peña Costilla

Álvaro Peña Costilla

Dedicado al Marketing Online y al diseño web en Tooeasy. Me gusta todo lo relacionado con las nuevas tecnologías, el diseño gráfico, el branding y la fotografía.

  • Ha sido muy acertado explicar también las tendencias peligrosas.
    Muy bien resumido todo Álvaro, de seguro será de ayuda para alguien que quiera modernizar su página web, además has escogido unos ejemplos muy visuales.
    Un saludo!

    • Álvaro Peña Costilla

      Muchas gracias por tu comentario Mila. No siempre las modas son buenas para todos solo por ser visualmente atractivas. Un saludo.

  • Muy bien articulo, claro, conciso y amigable con ejemplos.

  • Gran artículo y muy bien explicado!!!!

  • Excelente artículo, sin dudas el más completo y coherente que he leído en lo que va de año, solo discrepo con las animaciones de carga, desde mi punto de vista es síntoma de una web lenta, que no tiene su contenido listo en menos de 3 segundos y sabemos lo que eso significa, ahora si es usado como en slack, que aparece mientras hace conexión con la base de datos otro gallo es el que canta. De resto estupendo artículo que merece la pena compartí, y es lo que voy a hacer a continuación ☺️

    • Álvaro Peña Costilla

      Muchas gracias por tu comentario Lenin. Coincido contigo en lo del tiempo de carga. Cuanto menos dure esa animación, mejor, que puede ser muy bonita, pero efectivamente puede ser indicativo de malos tiempos de carga. Saludos.

  • Alvaro, miiil gracias por este post! Nos tienes muy al día en diseño web y sólo queda agradecértelo…muchas gracias crack!

    • Álvaro Peña Costilla

      Gracias a ti por tu comentario Alberto. Me alegro de que te haya gustado el post, y con comentarios así da gusto publicar. Un abrazo.

  • pepa

    Me encanta Álvaro, muy útil y completo!!

  • Pingback: Las mejores Plantillas de Wordpress para tu web()

  • Un megapost de la A a la Z. Personalmente espero que el Diseño Responsive evolucione en algo que sacrifique menos el diseño de la web a cambio de mejor funcionalidad. Vaya, no me voy a quejar de que cualquiera usando hasta el móvil más básico pueda visualizar mi web, pero se ha perdido un poco de la imagen como elemento diferenciador. Un abrazo Álvaro.

  • Interesante post, el responsive seguirá siendo tendencia, falta saber si las AMP acabarán con el resto de tendencias de diseño para móviles.

  • Completísima publicación sobre tendencias web, gracias por el aporte. Interesante también mencionar algunas prácticas que hay que tener en cuenta antes de aplicarlas. Saludos desde Perú.

    • Álvaro Peña Costilla

      Gracias por comentar Percy. Me alegro de que te haya gustado. Saludos.

  • maria

    genial! me ha ido muy bien tu articulo, sobretodo para ponerle nombre técnico a los efectos! muy interesante! muchas gracias!

    • Álvaro Peña Costilla

      Gracias por tu comentario María :). Me alegro de que te haya venido bien. Saludos.

  • Interesante artículo Álvaro. Me está sirviendo para definir los contenidos y rehacer mi web.
    Muchísimas gracias por tu aportación.

  • Muy buena información.
    Alvaro que recomendarias para el caso de los javascripts, como lo podemos optimizar al máximo. Por ejemplo yo uso mucho los plugin de wordpress: Visual Composer, Contact Form7, Revolution Slider y el Yoast SEO. De ante mano muchas gracias.

  • A mi también me gustaría saber la manera de manejar el uso de los plugins de WordPress, utilizo Visual Composer también y a pesar de que es una herramienta muy practica, sobrecargar demasiado el código de la pagina.

    Y respecto al post, esta en lo cierto, todas estas tendencias ya se ven desde hace unos meses y no creo que se vayan pronto.

  • Oso Red

    Hola, Una pregunta el Visual Composer es compatible con el SEO by Yoast?

    • Álvaro Peña Costilla

      Hola Oso, si totalmente compatible. Saludos

  • yanely Rodríguez

    Muy buenos consejos gracias. Es bueno que personas como usted hagan este tipo de explicaciones. Éxitos!

    • Álvaro Peña Costilla

      Gracias Yanely. Me alegro de que te guste. Saludos.

  • Gracias! Excelente aporte! Coincido contigo en muchos aspectos. Saludos!

    • Álvaro Peña Costilla

      Gracias a ti por el comentario. Saludos.

  • Dragon MX

    Me agrado mucho este contenido y que bueno que hable de lo peligroso.

    Me a dado la impresión que la gente está copiado estas tendencias, pero no están haciendo un buen trabajo para la optimización. Los videos e imágenes grandes, no están tan optimizadas como deberían y se está perdiendo la ventaja minimalista, con videos muy largos de fondo, imágenes que ocupan toda la pantalla que pesan demasiado y con un enorme scroll con mucho contenido, en una sola página.

    • Álvaro Peña Costilla

      Muchas gracias por tu comentario Dragon! Tienes toda la razón, hay que tener cuidado con las tendencias en diseño web, ya que siempre tienen que ir acompañadas de una buena optimización para que la experiencia de usuario sea buena, al igual que el desempeño de la web en los navegadores, de cara a Google. Muchas de las tendencias aplican recursos visuales y gráficos muy pesados, como dices.

  • Roberto Guzman

    Hola, me llama la atencion que recomiendes poco uso de Javascript, pero que pasa con tendencias como Angular o Angular 2 ?

    Gracias.

  • Jenifer Rv

    buena información .. tengo que crear una pagina web de moda y me gustaría saber que les gustaría a ver en un sitio web

    • Eduardo Moran Al Mundial

      Muchas fotos conceptuales que transmitan emociones… que te hagan querer ser parte de esa comunidad… en las páginas de moda… sin duda lo visual o sea fotos y textos muy limpios y escasos… pero fotos a full con modelos casuales en escenas muy muy comunes que te hagan sentir que ese lugar y esas personas… podrían ser tu calle y esos modelos podrían ser tú y tus amigos… como leí por ahí, la moda es un sentimiento. No compramos… la prende… compramos lo que nos hace sentir.

      • Álvaro Peña Costilla

        Muy de acuerdo contigo Eduardo. Sin duda la fotografía es un punto muy importante que marca una gran diferencia en el marketing y en el diseño web. Gracias por tu comentario.

  • Gabriela Moreno Quintanar

    LIKE LIKE LIKEEEEEE!!!

    • Álvaro Peña Costilla

      Muchas gracias por tu comentario Gabriela. me alegro de que te haya servido de ayuda el post. Saludos.