Vamos a marcar las bases y buenas prácticas que todos nuestros diseños web con Elementor deberían cumplir.
Aunque Vidania no nos habla de Elementor directamente, los principios de diseño son prácticas globales que debemos conocer para aplicar a la herramienta con la que trabajemos.
Elementos del diseño
Siempre se ha dicho que el contenido es el rey. Es cierto. Igual de cierto que el diseño está en todas partes.
Los principales elementos del diseño:
- Tipografías
- Colores
- Imágenes
- Estructuras
- Inspiración
La combinación de diseño y contenidos es la clave real del éxito.
Tipografías
Dependiendo de la tipografía que elijamos, el usuario encajará nuestra web mentalmente en un grupo (más moderno, más clásico).
Deberíamos dedicar un tiempo a elegir qué tipografía utilizar en nuestro diseño web, intentando no elegir más de 2 tipografías para toda nuestra web.
No queremos confundir a los usuarios mezclando diferentes estilos.
Una buena práctica es elegir una tipografía para los encabezados y otra para los textos.
Colores
Los colores son otro caballo de batalla importante.
Dependiendo del color que elijamos para nuestro diseño web, nuestro usuario tendrá unas sensaciones diferentes al visitarnos.
Un consejo: diseña en blanco y negro. Lo que funciona en blanco y negro, funciona cuando le metes color.
A partir de ahí, define una paleta de colores que combinen entre sí y sin volvernos locos con muchos colores diferentes.
Siempre asociamos las marcas a su color principal.
Espacios en blanco
Un arma muy poderosa del diseño web: utilizar y aprovechar los espacios en blanco.
Si el diseño respira, nuestro contenido es más legible y se consume mejor por el usuario.
Uso de imágenes
Debemos usar imágenes descriptivas en nuestro diseño.
La imagen debe transmitir el concepto del que habla nuestro contenido.
Aunque los bancos de imágenes gratuitos pueden ser una buenísima fuente de inspiración… debemos intentar utilizar imágenes propias y no caer en usar las mismas imágenes que utiliza todo el mundo.
Estructura de la web
El auge de los dispositivos móviles ha provocado un cambio en los patrones de diseño habitual.
Debemos pensar nuestro diseño desde el móvil hacia el ordenador. Y no al revés.
De este modo, el proceso de adaptación es mucho más natural, ya que el contenido está perfectamente estructurado en bloques que representan ideas más concretas.
Inspiración
Muchas veces, cuando nos ponemos creativos, necesitamos revisar otros diseños web para tomar ideas y patrones sobre los que trabajar.
La web Awwwards siempre es un buen punto de partida para inspirarnos.
¡Ojo! No se trata de copiar y pegar para hacer webs clónicas.
Debemos aplicar el sentido común y tomar los diseños como primer paso para coger ideas, conceptos y estructuras que aplicar en nuestro proyecto.
Herramientas de diseño web
Aprovecha las herramientas que existen para llegar al objetivo de tu proyecto.
Si conocemos las bases (CSS y HTML), podremos adaptarnos a la herramienta que vamos a utilizar en un proyecto. Y, además, aportar ese punto de ser diferentes y no caer en los mismos diseños siempre.
Preguntas sobre diseño web
Algunas de las preguntas que responde José Ángel Vidania durante la meetup:
- ¿Herramientas de diseño web? salir de Photoshop y entrar en el mundo de Sketch y Figma.
- ¿Qué temas de WordPress se recomiendan para usar con Elementor?
- Elementor Blocks es un plugin para Gutenberg que nos permite integrar nuestras plantillas de Elementor como un bloque más dentro del editor de bloques de Gutenberg.
- ¿Qué opinión tienes de las animaciones en el diseño web? Divisores, clip path…
Sentar unas buenas bases de diseño es clave para hacer mejores proyectos en Elementor.
Recuerda que puedas echarle un vistazo a nuestra sección de recursos para Elementor en español y profundizar sobre diseño web, herramientas y plataformas que puedes empezar a utilizar.
¿Todavía no estás apuntado a la newsletter de Elemendas?
Cada lunes, a las 10:15 de la mañana te enviamos un resumen con lo más relevante que ha ocurrido en el universo de Elementor, para estar al día de las novedades.
