Conceptos de diseño web

De la mano de José Ángel Vidania, esta meetup sirve como punto de partida para marcar las bases del diseño web.

Olvidándonos de Elementor y casi de la plataforma en sí, recorreremos los distintos puntos clave para tener un diseño atractivo y útil en nuestra página web.

Desde la tipografía a los colores, pasando por imágenes y patrones de diseño.

¡Ah! También nos cuenta algunas de sus fuentes de inspiración.

Elemendas.com patrocina esta Meetup

Indice

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.

Suscríbete ahora.

Sobre el ponente:

José Ángel Vidania

Diseñador y desarrollador web freelance de Alcalá de Henares. Desde 2010, José Ángel se dedica a crear páginas web y tiendas virtuales con WordPress y WooCommerce como herramientas de trabajo.

Entre sus pasiones: los cómics, la buena música rock (desde los grupos setenteros hasta el ruido más extremo), los juegos de tablero, las chapas y los países escandinavos.

Es fácil encontrarle por Twitter hablando sobre WordPress, Gutenberg o diseño web.

Entérate de todas las novedades del universo Elementor en Elemendas.com

Deja una respuesta

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

  • Responsable: Santiago Becerra Carrillo, titular del website elemendas.com.
  • Finalidad: Enviarte notificaciones por e-mail con novedades de plugins y temas relacionadas con WordPress y Elementor.
  • Legitimación: Consentimiento del interesado (es decir, tú), al enviar el formulario.
  • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En todo caso, los datos que nos facilitas están ubicados en servidores cuya sede se encuentra dentro del territorio de la UE o gestionados por Encargados de Tratamiento acogidos al acuerdo “Privacy Shield”, aprobado por el Comité Europeo de Protección de Datos. Nuestro proveedor de envío de mail es MailerLite.
  • Derechos: Acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Últimas entradas en el blog de Elemendas

Otros meetups de Elementor