8 tendencias en diseño web para 2018 + ejemplos

Autor: Max Camuñas

Fecha: 05/12/2017

El año 2017 está llegando a su fin es el momento de empezar a analizar cuáles serán las tendencias en diseño web para 2018.

El diseño web es un sector que evoluciona constantemente y cada año descubrimos nuevas tendencias, formatos y estructuras para crear una página web.

Lo cierto es que algunas de las tendencias en diseño web para 2018 ya han empezado a dejarse ver.

De hecho, ya las estoy poniendo en práctica algunas de ellas en mis últimos trabajos, como te voy a mostrar en este post.

Aunque el diseño web no es una ciencia exacta, he querido recopilar algunas de las tendencias que se verán a lo largo del próximo año y que ya han empezado a verse

 

Y las principales tendencias en diseño web para 2018 son…


 

1) Diseños minimalistas, limpios

El minimalismo y la sencillez están de moda en diseño web. En definitiva, menos es más.

Es una tendencia que llevamos viendo un tiempo y que seguirá con nosotros en 2018.

Este tipo de diseños destacan por el predominio de fondos blancos o muy claros, un único color para las tipografías y diseño con pocos elementos.

Se trata de emplear los elementos de diseño estrictamente necesarios para focalizar en el objetivo que persigue el sitio web.

6 tendencias en diseño web para 2018 + ejemplos

Como puedes ver en este ejemplo, el diseño destaca por su limpieza, los colores claros, las tipografías sencillas y las imágenes con tonos suaves, muy acordes para el conjunto.

 

2) Tipografías handmade

Otro elemento muy de moda en los últimos tiempo y que seguirá siendo tendencia durante los próximos meses son las tipografías handmade.

En general, las fuentes que tienen un marcado carácter personal seguirán tomando fuerza en 2018 (ya venimos viéndolas y usándolas un tiempo).

Lo “hecho a mano” triunfa y estas tipografías le otorgan al diseño web una personalidad exclusiva, un toque diferente tan necesario hoy en día.

Como recomendación, la mejor opción para usar estas tipografías es usarlas en el diseño de logotipos y en zonas destacadas del sitio web, como cabeceras o titulares.

Aquí puedes ver dos ejemplos del buen uso de las tipografías handame en la cabecera de la página.

6 tendencias en diseño web para 2018 + ejemplos

6 tendencias en diseño web para 2018 + ejemplos

 

3) Diseños modulares

El diseño a través de modulos es una de las últimas tendencias y es de mis preferidas. Además, ya he empezado a usarla en mis últimos diseños.

Se trata de un tipo de diseño en el que cada elemento se plantea como un módulo independiente, pues está inspirado en la red social Pinterest.

Es decir, su característica principal es que el diseño se plantea a partir de elementos independientes con forma cuadrada.

Además, el diseño por módulos es perfecto para una correcta adaptación a todos los dispositivos (escritorio, Tablet y móvil).

Te dejo un par de ejemplos con esta técnica para que veas su resultado a nivel visual.

6 tendencias en diseño web para 2018 + ejemplos

6 tendencias en diseño web para 2018 + ejemplos

 

4) Hero

Esta tendencias supone una evolución con respecto a los diseños que eran habituales en los últimos años.

Si en años anteriores la tendencia era incluir slides con varias imágenes en los sitios web, poco a poco se ha ido perdiendo, debido al tiempo que necesitan para ser visualizados y la gran cantidad de recursos que consumen para ser cargados.

Por ese motivo, la tendencia para 2018 son las imágenes con ancho completo para captar la atención del usuario con un solo vistazo, también conocidos como Heros.

Están pensados como portadas de un sitio web y su resultado a nivel visual es muy llamativo.

Un par de ejemplos míos, uno de ellos la página del servicio de Diseñador Web WordPress:

tendencias diseño web 2018

tendencias diseño web 2018

 

5) Elementos con animaciones

Las animaciones se han puesto de moda recientemente en diseño web y las veremos mucho en 2018.

En mi opinión, son un efecto muy chulo, que le da mucho dinamismo al diseño, pero su uso debe hacerse con mesura para no recargar los sitios web.

En definitiva, animar determinados elementos, como botones, filas o cajones, otorga un aire moderno y novedoso, pero hay que hacerlo con cuidado.

Te dejo un par de ejemplos propios con animaciones:

6 tendencias en diseño web para 2018 + ejemplos

tendencias diseño web 2018

 

6) Degradados con varios colores

Otra efecto que ya hemos empezado a ver es la de degradar con varios colores determinados fondos o elementos en un sitio web.

Al igual que las animaciones, no recomiendo sobrecargar los diseños con degradados, pero usados con inteligencia, aportan un toque muy vistoso y creativo.

En este caso, mi recomendación es hacer degradados con dos colores, uno principal y otro complementario.

Aquí puedes ver un par de diseños míos de colores con efecto degradado:

tendencias diseño web 2018

6 tendencias en diseño web para 2018 + ejemplos

 

7) Del responsive al diseño exclusivo en móviles

Por último, más que una tendencia, voy a hablar de una técnica propia que estoy aplicando ya en mis diseños.

En mi opinión, cada vez vamos a ir más hacia diseños exclusivos en la versión móvil de los sitios web.

Es decir, vamos a pasar del diseño responsive a diseños propios en los dispositivos móviles.

¿En qué consiste exactamente esta técnica?

Seguro que sabes lo que pasa cuando se adaptan automáticamente determinados elementos de la versión web a la mobile, como por ejemplo una cabecera con ancho completo.

Cansado de adaptaciones con un resultado «raro», decidí crear mi metodología propia, que consiste en empezar todos los diseños por la versión de escritorio y, cuando todo está a mi gusto (o al del cliente), paso a crear el diseño para el móvil siguiendo el mismo modelo: imágenes, colores, textos, etc.

Un bueno ejemplo de esta técnica es mi propia web, donde la adaptación de los cuadros azules superpuestos de la home quedaban bastante mal en el móvil.

Por ese motivo, desde ese momento decidí empezar los diseños por la versión de escritorio y, cuando todo estuvo a mi gusto, paso a crear desde cero la del móvil.

En definitiva, se me ocurrió crear esta ‘técnica’ paga solventar los posibles errores del diseño responsive.

7 tendencias en diseño web para 2018 + ejemplos

7 tendencias en diseño web para 2018 + ejemplos

 

8) Menú hamburguesa

La última tendencia en diseño web para 2018 son los menús en formato hamburguesa.

Este tipo de menú permite ocultar los elementos de navegación y que solo se muestren cuando el usuario clica en el correspondiente icono.

Este icono se representa gráficamente a través de la disposición horizontal de tres líneas paralelas.

Es un recurso de diseño web muy moderno y aquí te muestro un ejemplo diseñado por mí:

tendencias diseño web 2018

Estas son algunas de las tendencias de diseño web que veremos en 2018, que ya se están empezando a ver y que yo he empezado a aplicar en mis últimos trabajos.

¿Con cuál te quedas? ¿Cuál es tu favorita? ¿Añadirías alguna tendencias más? 🙂

IMG: shutterstock

 

28 Comentarios

  1. Roberto Flores

    Hola Max, yo añadiría el menú hamburguesa para el escritorio. Aunque estoy un poco en contra de usar esta técnica ya que estás obligando al usuario a pinchar en el menú para ver las distintas partes de la web. Sin embargo, cada vez lo veo en más sitios y creo que será algo que en 2018 entrará con fuerza.

    Un saludo ?

    Responder
    • Max Camuñas

      Hola Rober,

      A mí me gusta mucho el menú hamburguesa, aunque no lo recomiendo para cualquier web.

      Totalmente de acuerdo en que está de moda y cada vez lo veremos más.

      Gracias por pasarte!

      Responder
  2. Tarias

    Buen Articulo
    Sin duda las fuentes personalizadas van a dar guerra, la gente ya te empieza a pedir sus handmade.
    Y por suerte empiezan a utilizarse cada vez menos los sliders y esperemos que el diseño responsive continue, creo que el futuro es realizar mejor el responsive no eliminarlo.
    Un saludo

    Responder
  3. Federico Espamer

    Hola!!!
    Buen post. Justamente hace un mes decidí actualizar mi sitio web y empece a buscar distintos sitios de diseño a nivel mundial para analizarlos y ver que es lo que se viene o lo que se está consumiendo. Me llevó sorpresa cuando observé que la media general ya no optaba por un slider, si no un texto de presentación. Personalmente creo que el slider aporta movimiento al sitio pero como mencionas en el post, esto genera un tiempo de carga y gastos mayores de internet, o paquete de datos para móviles.
    Otro elemento a destacar es que ya la grilla de 1200px quedo chica, actualmente se usa mucho ocupar todo el ancho de la pantalla, un 80% a 100%, esto agiliza también al responsive (trabajar con porcentajes y no en pixels). Imágenes grandes, minimalistas. Suerte y nos vemos!

    Responder
  4. Sara Fernández Rionda

    Que post más interesante!
    Estoy justo desarrollando mi web personal y voy a apuntarme todas esas tendencias para estar a la moda el año que viene!
    Saludos

    Responder
    • Max Camuñas

      Hola Sara 🙂

      Gracias por pasarte!

      Espero que me enseñes el resultado final cuando tengas tu web.

      Saludos

      Responder
  5. Fran

    Hola Max, excelente post!, me sirve para tener ideas para el 2018.
    te pregunto: en el punto 7 (Del responsive al diseño exclusivo en móviles) , como lo resolves con wordpress? utilizas algún plugin para mostrar el diseño en función del dispositivo ?

    Responder
    • Max Camuñas

      Hola Fran 🙂

      Espero que te sirvan de inspiración estas tendencias.

      Sobre el punto 7, lo hago con el maquetador, que en mi caso es Divi.

      Lo que hago es crear primero la versión web y a partir de ella creo la mobile, ocultando / mostrando los diferentes elementos del diseño en función del dispositivo en el que se vaya a visualizar. Esta opción Divi la permite, no sé si con otros maquetadores es posible.

      Saludos

      Responder
  6. Cynthia Barrio

    GRACIAS MAX!
    Soy Cyn desde Argentina, Patagonia. Me pasaron tu link ya que con Antonella estamos viendo las tendencias para armar una website de nuestra futura Agencia: TRIBUS. Recién comenzamos.

    Responder
  7. Oscar

    Hola max, q buen aporte, muchas gracias, estoy comenzando a realizar mi página empresarial con divi personalmente me está costando un poco. Pero con este Blog, tendré sin duda un buen resultado. Saludos

    Responder
    • Max Camuñas

      Hols Óscar,

      ¡Cuánto me alegro!

      Mucha suerte en tus primeros pasos con Divi.

      Saludos

      Responder
  8. Nikki

    Inspiración? Letra por letra, los mismos gráficos. Todo es igual a este texto en gtechdesign.net/es/blog/principales-tendencias-en-diseno-web-2018

    Responder
    • Max Camuñas

      Gracias por avisar. El artículo original es mío y acabo de denunciar a Google este plagio.

      Responder
  9. Giovanni

    Puedes alterar el diseño de la version Mobil otilizando Page Builder de Site Origin?

    Responder
    • Max Camuñas

      Hola Giovanni,

      Con Divi sí se puede modificar el diseño en la versión móvil. En el caso dePage Builder de Site Origin no lo sé, pues hace años que no lo uso.

      Siento no poder ayudarte 🙁

      Saludos

      Responder
      • Giovanni

        Divi es un componente para WP cierto? Otra pregunta en el mismo tenor: Los maquetadores visuales dígase Page Builder, Elementor, Visual Composser etc.. tienen buena integracion con woocommerce?

        Gracias por responderme el comment anterior.

        Responder
        • Max Camuñas

          Hola Giovinanni,

          Divi es un maquetador visual más como los que mencionas (Page Builder, Elementor, Visual Composser).

          Lo que le hace diferente es que está disponible en dos formatos: plantilla y plugin.

          Divi, que es el que conozco bien, se integra perfectamente con Divi.

          Saludos

          Responder
  10. Ramón

    Hola! Me gustan bastante tus diseños, muy inspirada la frase que aparece en el ejemplo de «Hero». Estoy totalmente de acuerdo contigo en cuanto a tendencias. Un abrazo.

    Responder
    • Max Camuñas

      Hola Ramón,

      Me alegro un montón que te inspiren y te gusten mis diseños. Esa es una de mis principales motivaciones.

      Gracias por pasarte y comentar.

      Un abrazo!

      Responder
  11. Joffre

    Me parece un muy buen aporte, yo soy amante del diseño web y me ha encantado este sitio, alguien sabe de que tecnolofia usan en ese tipo de webs? webcorp.ec

    Responder
  12. Reymundo

    Los botones flotantes también son muy vistos en distintas paginas web, ya que en mi humilde opinión sirven como para resaltar una acción especifica de un sitio u aplicación web.

    Responder
    • Max Camuñas

      Hola Reymundo,

      Muy interesante también.

      Gracias por tu aportación!

      Responder
  13. Diego A. Leyva

    Me ha sido de gran utilidad para actualizarme en las nuevas tendencias de este año, tomé notas y las tendré en cuenta para próximos proyectos. Muchas gracias.

    Responder
  14. Carla

    Muy buen post!

    Estos diseños son muy actuales y creativos, para cualquier empresa pueden ser muy útiles y eficientes!

    Recomendaré tu post para que tengan en cuenta tus consejos.

    Gracias!

    Responder
  15. Oswaldo

    Excelente post. Gracias por compartir. Saludos desde Venezuela.

    Responder
  16. Hamilton

    Hola me parece muy bueno eso de diseñar la versión de escritorio y luego la móvil pero ¿como se hace? es decir si se hace con Divi ¿como puedo hacer la versión de móvil por separado ?

    Responder
    • Max Camuñas

      Divi te da la opción de mostrar / ocultar sus módulos, secciones y filas en los diferentes dispositivos (escritorio, tablet y móvil) 😉

      Responder
      • Hamilton

        Haaa muchas gracias seria bueno que hiciera un post explicando como hacer ese diseño para dispositivo móviles con Divi, puede que ya lo haya hecho no lo se soy nuevo por aquí pero hasta ahora me ha gustado mucho su contenido felicidades.

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos estén a salvo, debes leer y aceptar mi política de privacidad. Tus datos serán guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

Soy Max Camuñas y te doy la bienvenida a mi blog (mi casa).

Por aquí hablo sobre los temas que me apasionan: WordPress, Marketing, Social Media o Blogging.

Me encanta ayudar a otras empresas a marcas a crear el diseño de su web desde cero.

¡MÁS SOBRE MÍ!

masterclass
CÓMO PLANIFICAR TU PÁGINA WEB PARA QUE TU NEGOCIO BRILLE
¡accede gratis!