Diseño y negocio se dan la mano

Este mes hablamos de las tres mejores webs creadas con Elementor y Woocommerce. Los principios del color y Flooring template kit
Diseño y negocio se dan la mano
Indice

En elemendas nos gusta hablarte de diseño y de negocios entre otras muchas cosas. Pues en esta ocasión vamos a hacer las dos cosas juntas. 

Repasaremos las webs del mes creadas con Elementor dedicadas a Woocommerce. También veremos siete principios del color y por último el template kit del mes.

Nuestros sitios favoritos de WooCommerce hechos con Elementor

Todos los meses Elementor publica sus sitios favoritos de Elementor y este mes ha elegido sus diez favoritos, sobre WooCommerce.  Los mendas, como cada mes, hemos decidido elegir cada uno nuestro favorito y explicaros por qué lo es.

Clever Elly: La mejor web para el peor producto by Santi Becerra

El producto

Clever Elly es un cargador USB para coche, se enchufa en la entrada del mechero y tiene dos salidas. Algo que se puede encontrar por menos de 10€, en esta web cuesta más del doble…

¿Por qué? Porque lo que nos venden es que no dejes morir a tu bebé achicharrado en el coche 

WTF? Sí, cuando se para el coche este chisme emite una locución que dice que mires atrás. Que digo yo que si te dejas olvidado al chiquillo, aún más te olvidas de enchufar el chisme ese.

La Web

Es una onepage con tienda incorporada. Está perfectamente estudiada para vender el producto y su diseño está al servicio de la venta

Un titular impactante, una clara llamada a la acción para ver el video, que está muy dirigido al nicho de posibles compradores. 

A partir de ahí, las típicas secciones de una carta de ventas: descripción del producto y testimonios, para pasar a la sección de compras.

Se completa con FAQ, un quienes sómos, suscripción a newsletter y datos de contacto.

Un diseño sencillo y muy efectivo… para quien se crea que ese caro cargador puede salvar la vida de su hijo.

Bram: diseño bien hilado by Santy Alonso

Un mes más, me llama la atención ver que varias webs españolas se cuelan en el TOP del mes para Elementor.

Bran es una tienda online de Barcelona que vende carteras minimalistas.

El producto en sí no es realmente novedoso u original; pero sí me han gustado algunos detalles de esta tienda online con Elementor y WooCommerce:

  • Centrada en el producto: toda la línea de diseño respira el producto y no hay 
  • Cuenta una historia: desde los copys a las fotos o los vídeos van en una misma línea para contar una historia.
  • Buen uso del antes/después: en la home, hacen uso del widget de Image Comparison de Essential Addons con bastante buen gusto para mostrar todo lo que entra en la cartera
  • Mensajes frescos: hay varios mensajes a lo largo del diseño que despiertan buen rollo (BILLETES DE HASTA 50€. Y si te cae uno de los gordos entre manos ¡dóblalo!)

? Curiosidad: al hacer clic en el logo… salta un popup ofreciendo un descuento. Mi primera reacción ha sido de “quita tú de ahí!” porque está lejos de ser un patrón normal. Pero me pica muchísimo la curiosidad analítica por ver el impacto en suscriptores que puede tener ese movimiento…

Jomac: Estudio de arte bien contado by Angel Zinsel

Este sitio web cuenta la historia del estudio de arte de John McCaskill de manera breve, elegante, sucinta a la vez que atractiva. 

Copywriting del bueno dirigido a un público muy preciso, que quizás no necesita muchas palabras, pero si las precisas para conectar con sus servicios y productos.

Fotografías de gran tamaño, nos propone comprar ya desde el hero, para inmediatamente después embelesarnos con su trabajo, fusión de lo tribal y artesanal, con técnicas modernas de impresión. 

Las tres siguientes secciones nos cuentan sus tres servicios con un encabezado de dos o tres palabras, un párrafo de pocas lineas y un CTA (que no botón) en rojo y mayúsculas sin despeinarse ni molestar lo más mínimo.

Gran implementación de los espaciados, y de blancos y negros contrapuestos con un rojo intenso para acentuar, y algún dorado para los menús. 

Termina la home con una imagen fuerza del propietario, con en ropa de trabajo en su taller junto a las máquinas, mirándote fijo a los ojos. 

La integración de WooCommerce es extremadamente sutil, casi desapercibida. 

Lo interesante de la selección de Elementor de este mes, es que se ha fijado en comercios de nicho, en vez de generalistas, claro, aqui si que se puede trabajar el diseño mucho, Más interesante aún, casualidad o no, han sido la selección de los mendas. Las tres cuentan, cada una, una pequeña historia. Me ha venido a la mente la charla de Chris Lema en WordCamp Europe 2020 que habla precisamente de la importancia de contar historias en este tipo de webs de nicho. eCommerce and storytelling; the shift away from catalogs and carts:

Plantilla del mes Flooring Template Kit

La plantilla del mes de agosto de Elementor es un kit completo con el ejemplo de una empresa de revestimientos de suelos. Presenta un diseño elegante y minimal a la vez que completo. 

Viene con la página de inicio, servicios, galería, sobre nosotros, además de los extras ya estándares en estos kits, archivo de blog, plantilla individual de blog, 404, un popup para conversiones además de otro popup que hace de menú, bastante logrado, todo con sus respectivas versiones para tablet y móvil.

Muy lograda, con paleta de colores pasteles y versátil. Bien trabajadas las paletas de colores, tipografías y fotos puede adaptarse a una buena cantidad de sectores, como consultorías, asesorías, medicina, belleza y similares. Echa un vistazo al meetup sobre principios del diseño de Jose Ángel Vidania o más abajo, en este artículo, sobre la parte de esquemas de color. 

Mira también el flip box para las texturas de los suelos y la integración de los testimonios muy embebida y suave dentro de la home. Interesante.

Algún día me gustaría ver propuestas de CPTs y campos personalizados con plugins estándares de WordPress como CPT UI o ACF. Será una forma interesante de mejorar la funcionalidad, pero vamos, están las bases de diseño necesarias para hacerlo uno sin demasiada dificultad. Algún día deberíamos hacer un buen tutorial sobre esto. 

Sigo  también echando de menos el un importador integral de kits al estilo de los starter sites de Astra, donde hace más de dos años puedes instalar todo un sitio completo a través de un script interno que importa todo lo que necesitas, estilos globales, cabeceras, pies de página, contenido del blog de demo, y todas y cada una de las páginas con su contenido completo. 

Espero ver en un futuro no demasiado esa funcionalidad, en ambas vías, la de exportación y la de importación. En la versión de Elementor 3, ni en la free ni en la Pro desgraciadamente, parece que no estará.

Principios básicos de tus esquemas de color en diseño Web

Las teorías de color son inabarcables, complejas y cualquier diseñador que tenga cierta experiencia o que lo haya estudiado mínimamente, sabe perfectamente de que estamos hablando. 

En diseño web vamos a enfocarnos en la síntesis aditiva, es decir, donde partimos del negro (ausencia de luz) y añadiendo colores RGB llegamos al blanco, como máxima expresión de la luz, al contrario de la síntesis sustractiva usada en impresión.

En esta, partirmos desde la presencia de todos los pigmentos de color CMAN que conforman el negro y vamos sustrayendo todos sus pigmentos hasta llegar a la ausencia del color, normalmente blanco (dependiendo del color del papel). Si quieres profundizar te dejo esta comparación síntesis aditiva vs sustractiva para que lo entiendas mejor.

Esquemas de color en web

En diseño web, los esquemas de color son el conjunto de colores que usaras en tu web. La importancia de ellos radica en la identidad visual que presenta, la primera impresión que producen en la entrada al sitio web y el tipo de conexiones emocionales que genera y para ello, antes de elegirlos, debes conocer al público al que te diriges. 

Cosas que debes saber sobre la rueda de color

color wheels in color schemes

La rueda de color está compuesta por colores, primarios, secundarios y terciarios. Los colores primarios son rojo amarillo y azul, los secundarios derivan de la mezcla de los primarios, por ejemplo mezclando amarillo y azul sale verde, y los terciarios de la combinación de un color secundario con uno primario, por ejemplo el verde lima sale de mezclar el verde secundario con el amarillo primario.

Tipos de combinaciones de color

Hay tres combinaciones de color clásicas, la análog, la complementaria y las triadas. Las tres cumplen objetivos distintos.

types of color combinations

En la combinación análoga, se eligen tres colores contiguos de la rueda de 12 colores. El objetivo aquí es destacar la relación entre el color 1 y el 3 usando como puente el segundo color.

En la combinación complementaria se trabaja la atracción de los opuestos. Estos dos colores opuestos son los que están enfrentados en la rueda de color. Este contraste es muy útil para provocar visualmente al navegante, cuando están bien usados a pulsar en los CTA al resaltar tanto su diferencia. Ojo con usar colores demasiado intensos, pues el efecto visual puede ser desagradable, produciendo rechazo y por tanto alejándonos del objetivo deseado, la conversión.

En la triada de colores se eligen tres que se encuentren a 120 grados. En realidad eliges tu color primario y los otros dos vienen dados por esa distancia. Se entiende muy bien en el gráfico superior. Produce el efecto de la combinación complementaria pero en vez de con dos colores con tres. 

Psicología del color

Ahora que ya tienes claros algunos principio básicos, hay que centrarse en elegir tu primer color, tu color primario. Para ello el cuadro superior te puede dar una buena idea, en función de, nuevamente, tu público objetivo, de donde empezar a crear tu propio esquema de color. 

Algunas herramientas para trabajar tus combinaciones de color

  1. Una de las herramientas más completas en web para generar esquemas de color completos, basados en los principios explicados es sin duda Coolors. una de las cosas que más me gusta es su explorador, puedes bloquear uno, dos o más colores y te sigue proponiendo colores adicionales. 
  2. Otra herramienta similar es paletton, aunque personalmente me quedo con Coolors 🙂
  3. Canva te ofrece este artículazo con 100 combinaciones de color. Pura inspiración.
  4. La última, esta para tu móvil. Adobe Capture te permite crear paletas de colores en función de los colores de una fotografía. Una aproximación quizás distinta de crear tu esquema de color, pero sin duda interesante. Además es toda una navaja suiza de bolsillo para el diseño en general, si todavía no la usas ya estás tardando en descargarla, es gratis.

Referencias

Little disclaimer de esos: Cada especial contendrá conceptos e información de varios de los artículos del blog de Elementor más recientes, pero haremos una versión en español, añadiremos otras fuentes y en ocasiones, quizás más de las esperadas, presentaremos propuestas en una dirección distinta. 

Además no será el único contenido, habrá plantillas de terceros o info relevante que nos cuenten, herramientas nuevas que añadimos a nuestro arsenal. En definitiva, contenido de mucha calidad, curado con mucho cariño y en el que encontrarás auténticas perlas, una vez al mes.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Entradas relacionadas

Deja un comentario

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

👋¡Hola, menda!

¿Quieres hablar con nosotros sobre algún tema?, ¿o sugerirnos algún plugin? Escríbenos desde este formulario y te atenderemos lo antes posible.

  • Responsable: Santiago Becerra Carrillo, titular del website elemendas.com.
  • Finalidad: Responder a tu consulta.
  • 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.
  • Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y términos del servicio de Google.
WP Feedback

Dive straight into the feedback!
Login below and you can start commenting using your own user instantly