Tendencias de diseño web en WordPress

Hace unas semanas tuvimos la oportunidad de exponer a la comunidad de WordPress en la WordCamp de Sevilla las que entendemos serán las tendencias en cuanto a diseño web de los próximos meses (aunque muchas ya son casi de obligado cumplimiento!). De una forma más extendida, vamos a desgranar y analizar estas tendencias de diseño web con WordPress.

Este artículo resume y compila buena parte del material que se expuso en la conferencia de hace unas semanas que lleva el mismo título “Tendencias de diseño web con WordPress” . Un poco más abajo encontrarás la presentación completa. Aquí tenéis el vídeo de la misma:

Tendencias, inspiración y subjetividad del diseño

Ante todo un aviso. Sinceramente creo que no exista algo más subjetivo que hacer predicciones a futuro sobre temas relativos a diseño (y hablo en todas sus facetas, diseño gráfico, diseño web, editorial…etc). Las características y valores que definen un buen diseño, no son atemporales. Lo que hoy nos merece admiración, o percibimos un cierto valor estético en cuanto al diseño, mañana puede convertirse en todo lo contrario.

tendencias-relatividad-diseno

Es algo que va condicionado a un contexto donde son muchos elementos los que influyen. Hablamos de contexto y de nuestra propia experiencia o valoración interna. Si a esto le añadimos que además vamos a hablar sobre tendencias a futuro, nos encontramos en un terreno un tanto arcilloso. Vamos a unirle a la ecuación un nuevo elemento: WordPress! Cambiante casi día a día. Funcionalidades nuevas cada mes, plugins subidos al repertorio cada día, lanzamiento de nuevas plantillas y temasYa sabes donde nos estamos metiendo.

Por ello, tomemos todo esto con cautela. Con pinzas. No son verdades absolutas. Tenemos un grado importante de relatividad y subjetividad cuando hablamos de tendencias aplicadas al diseño web. Ya estamos avisados 🙂

Mobile First. Diseñando para el futuro

Nadie duda a día de hoy del diseño web responsive. Es una realidad, que aunque en su momento fue tendencia, tenemos unos indicadores objetivos sobre los que medir y poder decir que es algo positivo (damos un mayor grado de usabilidad a nuestros diseños webs al adaptar nuestro contenido y diseño según la resolución del usuario).

Fantástico. Mobile first es el siguiente paso lógico. Entendámoslo como una filosofía de trabajo. Una vez tenemos claro el concepto que el diseño web de nuestro WordPress se va a apartar a todas las resoluciones, es el momento de cambiar la forma en la que concebimos dicho diseño.

No me quiero extender en esto, pues daría para un libro. Pero básicamente, estamos dejando de diseñar en estático para diseñar en dinámico, y en este cambio, en el que perdemos la referencia de diseñar para un ancho concreto, la única constante es el contenido. Todo lo demás son variables (ancho de pantalla, alto, retina…). En este nuevo proceso, el punto de partida, el origen es la menor resolución viable. Desde ahí iremos creciendo.

Ver contenido extra Mobile First

Web Fonts. Tipografía y diseño web.

Se acabó. Ya no hay excusa. Si todavía diseñas con las tipografías por defecto como Arial, Verdana, Times New Roman o la innombrable Comic Sans, siento decirte que te estas perdiendo un mundo de posibilidades tremendas. Son las web fonts (además de otras muchas tipografías que puedes importar a tu diseño directamente a través de tu archivo CSS. Si diseñas con WordPress, el style.css)

El repertorio de Web Fonts más conocido es Google Fonts. Más de 600 fuentes, muchas de ellas con un buen diseño y listas para usar en tu diseño web. La combinación de estas fuentes, con un buen criterio pueden definir buena parte del diseño de una web. De hecho son muchas webs las que basan su diseño en la combinación y uso cuidado de tipografías. Lo anunciaba Oliver Reinchenstein cuando decía que buena parte del diseño web es tipografía

Ver contenido extra Web Fonts

Flat design y la Experiencia de Usuario

Todo lo que sea disminuir tiempos de carga va a favor de una mejor experiencia de usuario. Son datos medibles. Una web que tarda en cargar 10 segundos hace esperar al usuario un tiempo excesivo. La experiencia de usuario medida en tiempos de espera es muy mala. Una diseño web que tarda en cargar 1 segundo obtiene unos niveles de experiencia de usuario más adecuados a las expectativas del visitante.

¿Que puede hacer el flat design por el usuario? Precisamente esto, disminuir los tiempos de carga de muchos diseños webs. Hablaremos próximamente en el blog sobre esto 🙂

Ver contenido extra Flat Design

Parallax, Parallax, Parallax…

La tendencias que hemos visto anteriormente tienen una incidencia muy marcada sobre algún aspecto concreto del diseño web: el flat design sobre la experiencia de usuario, las webfonts sobre la usabilidad y accesibilidad, e incluso mobile first en la metodología de trabajo de diseño y maquetación.

Sin embargo, parallax puede incidir sobre un aspecto concreto si se utiliza de forma contenida, pero puede cambiar incluso la forma que interactúan usuario y el diseño si logramos exprimir y sacar el máximo provecho.

Conclusiones: Diseñando para el usuario

Si te fijas bien, cada una de las tendencias comentadas tienen su base en el mismo elementos: el usuario. Ya podemos hablar de degradados o colores planos, discutir si la tipografía Open Sans es más adecuada que Roboto, o si hacemos el scroll horizontal o vertical para nuestro Parallax. La respuesta la tiene el usuario y su forma de interactuar con el diseño.

Da igual si trabajas con WordPress, HTML5, Joomla…Diseñar es resolver un problema. Y para resolver problemas siempre necesitamos constantes (no tantas variables 🙂 ) y el usuario es nuestra gran constante. En estos escenarios, hay quien se mantiene firme e intenta no cambiar, y quienes son flexibles e interpretan los cambios. Estos, los segundos van con algo ganado.

Como dice el proverbio chino, “cuando soplan vientos de cambios, algunos construyen muros y otros construyen molinos” ¿Cual de ellos eres tu? 😉

provervio-chino

Comentarios (10)

  1. Enhorabuena Ricardo por tu exposición.

    Me ha alegrado mucho que se haya subido a YouTube para los que no pudimos asistir este año a la WordCamp Sevilla.

    Muy buen expuesto, de forma muy sencilla y tocando los puntos claves. Me encanta que hayas tocado el tema del flat design y la usabilidad ya que como sabes muchos empresarios tienden a recargar sus websites y diseños desconocedores de que el “menos es más” tiene aquí más sentido que nunca.

    1. Muchas gracias Jorge por tus comentarios 😉

      Me alegro de que lo encuentres interesante.
      Efectivamente, el tema del menos es más es algo que va calando, pero cuesta trabajo.
      Abarrotar una web de información asusta al usuario, y sin el visitante no somos nadie!

      Un abrazo y gracias de nuevo!

  2. Muy interesante lo expuesto, solo al ir leyendo pude rememorar mucho lo que observe al empezar a diseñar para web, es interesante como las tendencias son evidentes en comparación con otro año en particular y más aun todos lo que acontece con la aparición de nuevas plataforma, incluso en la forma que ha cambiado la manera de socializar, entretenerse y enterarse de lo que sucede en el mundo.

  3. Esta fue una de mis ponencias preferidas de la pasada WordCamp Sevilla, no sólo porque seamos compañeros de organización, también por el debate tras el telón en el hubo diferentes opiniones en pequeños detalles (en lo importante coincidimos). Algo que, sinceramente, me parece sano. Espero que podamos volver a debatir pronto. Felicidades por la charla a los dos!

    1. Gracias por comentar Abel!
      No esperaba menos de tí 😉
      En cuanto a opiniones, dicen que hasta un reloj parado acierta dos veces al día, así que seguro que llevas razón en alguno de tus plantamientos, jejeje! Es broma…El debate enriquece y en la base siempre coincidimos.
      Nos vemos pronto 🙂 Saludos!

  4. Buen artículo Ricardo.
    Desde luego si hay que elegir… ¡construyo molinos!
    Me uno totalmente al Flat Design, al diseño Responsive y al Parallax.
    Gracias por compartir.

Responder a Ricardo Prieto Cancelar respuesta

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