Tendencias de Diseño Web 2017

Recopilación de tendencias en diseño web con descripción, ejemplos y análisis personal

Tendencias diseño web del 2017 que tal vez no conocías

En el diseño web estar a la moda es ir por detrás, tenemos la obligación como creativos y diseñadores de ir siempre un paso por delante, es por ellos que os he preparado un artículo de tendencias diseño web 2017 con ejemplos


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

Diseños planos en los que se elimina la profundidad, sombras, relieves, texturas y cualquier aspecto de tridimensionalidad, es fácil encontrarlo en esta última década y nos brinda un diseño elegante y accesible con bordes más sólidos y nítidos. Estilo minimalista donde los haya.

Ejemplos: macaronitomato.com


Material Design / Diseño Material

Alternativa al “flat design” característico estilo que vino de la mano de Google y su diseñador Matías Duarte. Muy presente en las tendencias diseño de web desde 2014. Se define por piezas distribuidas con un movimiento concreto en un espacio o lugar, en él encontraremos profundidad, bordes y superficies donde los colores y sombras ganan protagonismo, siempre manteniendo un estilo realista donde las animaciones se adecuan a las leyes físicas, (no se atraviesan) y aparecen con una velocidad lógica y direcciones concretas, (primero imágenes y luego botones).

Podemos deducir que este estilo se inspiró en el nuevo concepto táctil, y muy pensado para todo tipos de plataformas, es por ello que Android basa su diseño en él.

Ejemplos: Diseño material interactivo


¿Diseño Web Duotone?

Quizá la más joven de las tendencias, apuesta por los tonos y luces combinados, encontraremos apuestas arriesgadas con mezclas imposibles, ilustraciones e imágenes en dos tonos que resultan muy enérgicas y vibrantes, transmiten sensaciones de ánimo y reportan gran modernidad y elegancia. No podía faltar en tendencias diseño web 2017. Sin duda los duotones son una buena elección, y han venido para quedarse.

Ejemplos: triple9movie


Pantallas divididas, Split, Diseño Modular

Cada vez son más los diseño que nos encontramos con pantalla dividida (split), tanto en el plano horizontal y vertical, así como varios divisores combinados, no se busca una simetría, pero siempre que usemos una pantalla dividida debemos tener en claro el por qué agrupamos y dónde un conjunto concreto.

Un estilo que se va haciendo un hueco en la red desde 2015, lo identificaremos con facilidad, se trata de dividir los textos e imágenes en espacios más manejables para reorganizar la información, esto nos dotará de poder manipular el efecto despertado con mayor control, el diseño modular dice adiós a los bloques de texto y reorganiza el espacio a su antojo.

Ejemplos: stikwood


Diseño web responsive

Con la llegada de los CMS y las plantillas hoy por hoy resulta fácil ver y crear un sitio responsive, esta es un arma de doble filo pues si bien es apreciable la mayoría de las webs presentan un diseño responsive muy parecido entre ellos, quizá en lo que en tendencias diseño web 2017 cabe destacar, es que se ha creado mucha consciencia del “Mobile First”, sistema de desarrollo que comienza por los dispositivos de menor tamaño para ir en aumento, en el Mobile First premia la jerarquía de la información en dichos dispositivos, pues en la pantalla de un smartphone puede ser abrumadora una landingpage de largo scroll si no atendemos a la conversión deseada.


Tendencias Tipográficas

Todos la conocemos y estamos acostumbrados a verla, la usa nuestro santo y patrón Google, Serif, ganadora un año más por su claridad y sencillez, lo tenemos fácil, legibles y unificadas.

(Usabilidad, una y otra vez se repite este patrón, me gusta pensar que esta premisa es en gran parte el legado de Steve Jobs, o tal vez de nuestro querido Google.)


El Menú Web

Encontraremos en adelante menús en los que prima la usabilidad e higiene, por ellos la tendencia se decanta por menús con menos opciones.

Menús lineales (Navegación guiada) y jerárquicos como desplegables.

El Menú Hamburguesa

Cada vez estamos más familiarizados con el menú hamburguesa debido a la tendencia responsive y al uso de este en aplicaciones móviles. Aún así debido a que la información permanece escondida es de esperar que tenga los días contados.

Ejemplos: Aulacm.com versión móvil

Mega menú, útil y y llamativo

Grandes y atractivos menús desplegables, son útiles para organizar y priorizar las categorías dentro del mismo, muy aconsejables en sites con numerosas secciones, otra de sus virtudes es la posibilidad de incluir widgets en el menú y hasta incluso banners publicitarios.

Ejemplos: Aulacm


Formularios de registro 2017

La tendencia web ha demostrado que el formulario de registro es de necesidad en todo sitio que se precie, ganando peso la ubicación principal, es por ello que deberá de colocarse en el punto más visible, y en la sección de contacto es cuasi obligatorio que pueda verse el botón de envío desde la cabecera, esto se traduce en leads, y a su vez en conversiones. Indispensable para un correcto plan de Marketing. Formato escaneable.

Color del año 2017

Según PANTONE, referente mundial en tendencias de color, vaticina que el color del año 2017 será el “PANTONE 15-0343 Greenery”

Color Hexadecimal: #86af49

Link: www.pantone.com


¿Qué son las imágenes Hero? 

Utilizamos el término para definir a aquellas imágenes o banners de mayor tamaño que las imágenes corrientes, se suelen emplear en la cabecera y el uso de las imágenes Hero es el de destacar información, o bien por el simple impacto estético que nos brinda, las podemos encontrar de manera estática o dinámica como sliders, también pudiendo contener elementos de textos y botones. En la actualidad están muy presentes aunque algunos usuarios no sepan distinguirlas, las imágenes Hero, su función estética nos sirve de apoyo para realzar esta cualidad sin sacrificar mucho tiempo de carga, pues es fácil de optimizar.


Animaciones en 2017

Prima la interactividad, animaciones 360º y vídeos Background. Respecto al parallax, se anda poniendo a juicio el uso común que se le da por desviar la atención del usuario sin mucho aporte final, en la mayoría de los casos.

secciones largas

Se aceptan scrolls infinitos y secciones muy largas, a diferencia de años pasados donde el formato y modos de navegación se hacían más pesados.

A tener en cuenta

Como bien sabemos se debe evitar en medida de lo posible ralentizar la velocidad de carga, por ello deberemos ser conscientes de que algunas acciones irán en detrimento de nuestra optimización.

  • Uso abusivo de Javascript
  • Sliders con varias imágenes y efectos animados
  • Imágenes sin optimizar redimensionado o peso, Consejo: guarda tus JPG como progresivas 😉

Tendencias SEO 2017

El SEO 2016 nos ha traído un año repleto de avances y novedades, llegados a este punto me gustaría anotar un avance de mi siguiente artículo, Tendencias SEO 2017.

Penguin 4.0

No voy a decir gran cosa que ya no sepáis sobre este algoritmo, sólo mencionarlo como recordatorio del panorama actual.

Este 2016 hemos notado grandes cambios en el mayor buscador conocido, Google, este año nos ha regalado su última actualización de algoritmos, el Penguin 4.0, si algo hace este algoritmo es controlar el linkbuilding artificial a tiempo real, sí, has leído bien, a tiempo real. El arma de Google que golpea el Spam de enlaces automatizados, habrá a quienes no le haya hecho mucha gracia este cambio, a mí me ha encantado, como usuario reconozco una mejora en cuanto la veo.

Buen contenido = Enlaces de calidad naturales.

Debido al fenómeno ya mencionado, la tendencia se inclina por trabajar más y mejor en la calidad de contenidos, creatividad en el marketing y el efecto que éste genera, ya no cabe duda, el black hat SEO va quedando relegado, y por divertido que resulten los experimento para algunos profesionales como Chuiso, (el mago del Black Hat)*, cara al  SEO y Marketing 2017 depositaremos nuestros esfuerzos en crear contenidos de calidad, y que sean nuestros consumidores quienes creen esos deseados enlaces naturales.

*No quiero decir con esto que no me apasione y me embeba con blogs de Black Hat, los “trucos” siempre gustan, pero sí que es cierto que cada vez es más dificil y de mayor riesgo este tipo de opciones.


A fin de cuentas:

Sacamos en claro que en las tendencias diseño web 2017 ganan popularidad:

El minimalismo, la sencillez visual priorizando la información, velocidad de carga y la facilidad de navegación. Siempre marcando las pautas los grandes gigantes de internet, como son Google.com, youtube.com, facebook.com, amazon.com, 360totalsecurity.com, etc…

Murieron los años aquellos sitios repletos imágenes enmarcadas rellenando espacios y colores por doquier. El Desarrollo Web ha dado paso al nuevo Diseño Web…

Si te gustaría aportar algo que me pudiera haber dejado atrás o tienes alguna duda déjame tu comentario, estaré encantado de responderte. Espero que mi artículos sobre tendencias diseño web 2017 haya sido de utilidad.

Muchas gracias 😉

Tendencias de Diseño web 2017
5 (100%) 27 votes
2 comentarios
  1. Martha Ruedel
    Martha Ruedel Dice:

    ¡Hola Víctor! Me ha parecido bastante interesante tu artículo, yo no sé cómo te da tiempo a todo chiquillo, jejeje. Y enhorabuena! me he enterado de que has sido papi hace poco 😛 Mucha suerte que te la mereces crack!!!

    Responder
    • Víctor G. Bustamante
      Víctor G. Bustamante Dice:

      Muchas Gracias Martha, se hace lo que se puede querida. 🙂 El bebé sin duda ayuda a dar la mejor versión de uno mismo. Estamos en contacto. Saludos

      Responder
Dejar un comentario
¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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

8 Compartir
Compartir
+1
Twittear
Pin
Compartir
Stumble