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
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.
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
- 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.
- Otra herramienta similar es paletton, aunque personalmente me quedo con Coolors 🙂
- Canva te ofrece este artículazo con 100 combinaciones de color. Pura inspiración.
- 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
- Artículo completo de los temas del mes del blog de Elementor, por si quieres ver los restantes, los tres mejores ya te los hemos contado nosotros, a nuestro estilo, eso sí.
- Artículo completo del Flooring template kit del log de Elementor.
- Artículo completo sobre las 7 reglas de esquemas de color
- Si quieres profundizar en teoría del color en diseño web tienes este interesantísimo artículo en inglés de William Craig.
- Para elegir los colores de tu web, encontrarás muchísimas ideas en este artículo de Mike Projkovski en 99designs.
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.
