¿Alguna vez has usado un traje o un vestido hecho a la medida? La mayoría de las personas no lo hará, salvo en unos pocos momentos especiales de su vida. Para casi cualquier ocasión, eligen una prenda de confección y la ajustan en algunos puntos. Un dobladillo aquí, una pinza allá, y tendrás una prenda estupenda y funcional. Pero algunas veces en la vida quizá tengas la suerte de que un sastre talentoso empiece desde el rollo de tela. Te tomará las medidas, hablará contigo sobre la prenda que quieres, y cada puntada que dé tendrá un propósito, un objetivo en mente. Esa es, en esencia, la diferencia entre una plantilla de sitio web y un sitio web hecho a la medida. Una plantilla se puede tomar del perchero, hacerle algunos ajustes y convertirse en un sitio perfectamente funcional. Pero un diseño personalizado de eCommerce requiere más reflexión, más tiempo, y puede quedar perfectamente ajustado a la marca que quieres mostrarle al mundo.
Te explicaré a qué me refiero usando como ejemplo a 1Digital® Agency. Después de todo, no somos perfectos. Nosotros también podemos caer en la solución rápida de una plantilla lista para usar. Tenemos un sitio hermano llamado Genius eCommerce®. Durante un tiempo fue un blog de la industria en WordPress, pero hace varios meses lo convertimos en un sitio de agencia enfocado específicamente en nuestros servicios de marketing digital para eCommerce. Cuando hicimos ese cambio queríamos tener algo en línea lo antes posible, así que usamos una plantilla de WordPress. Al trabajar con el sitio descubrimos que todas las cosas sobre las que advertimos a nuestros clientes cuando consideran un sitio de plantilla, como la optimización para la conversión, la velocidad y una marca coherente, también se estaban volviendo problemas para Genius eCommerce®. Así que decidimos tomar un poco de nuestra propia medicina y darle a Genius eCommerce® un diseño personalizado de eCommerce desde cero. La diferencia es increíble.
La plantilla
La plantilla es un diseño de WordPress/Woo-commerce. Como puedes ver, se ve bien. Usamos algunas de las fuentes y colores de nuestra marca para que fuera visualmente coherente con el sitio de 1Digital®.
También usamos los mismos paquetes de íconos para conectarlo aún más con la marca de 1Digital®.
Completamos la plantilla con algunas secciones de desarrollo personalizado para destacar a algunos de nuestros clientes y casos de estudio.
¡Y listo! Un sitio de plantilla perfectamente funcional, en línea muy rápidamente.
Nuestro gerente de cuentas de SEO, Colin, fue el primero en notar algunos de sus problemas. “La velocidad del sitio fue el primer problema que noté”, me dijo Colin al describir su auditoría SEO del sitio. “Las imágenes no estaban bien optimizadas, y los scripts de terceros no se cargaban en el sitio de la forma más eficiente”. Además, el sitio empezaba a obtener algunas posiciones en Google. Queríamos asegurarnos de que las páginas a las que tanto nos esforzábamos por llevar visitantes fueran atractivas. “El sitio no tenía personalidad, no tenía garra”, me dijo Colin.
Hoja de ruta para un nuevo diseño
El primer paso de cualquier diseño personalizado de eCommerce que hacemos con nuestros clientes es trazar una hoja de ruta. Revisamos sitios que le gustan al cliente e intentamos entender por qué funcionan para esa industria y cuál es el mensaje esencial que el sitio necesita transmitir. En 1Digital® Agency tenemos todo el volumen y la amplitud de nuestro negocio para comunicar, pero Genius eCommerce® se enfocaba solo en la rama de marketing de lo que hacemos. “La idea era enfocarse en una sola cosa muy específica, así que el diseño debía ser muy sencillo”, me dijo Art, el diseñador principal de 1Digital®. Como inspiración, observamos la interfaz plana que usa Google.
Art también quería jugar con la identidad de marca a partir del término ‘genius’. “Quería darle una sensación académica, intelectual. Para conectar con la idea de genio”, me dijo Art. “Como si estuvieras leyendo un artículo académico”.
Creación de un nuevo logo
“Un sitio nuevo debe tener su propio logo”, dijo Art. Los logos son una base sumamente importante en el mundo del diseño. Cuando iniciamos un nuevo diseño personalizado para un cliente, tomamos pistas de su logo sobre su paleta de colores, su estilo gráfico y el tono de su marca en general. “La idea del logo fue lo que me dejó claro cómo quería integrarlo con el resto del diseño”, me dijo Art.
Un buen logo debe tener un elemento visual interesante, algo que capte la mirada. Un buen logo también debe poder expresar visualmente algo sobre el mensaje de la marca. A continuación puedes ver parte de la evolución que llevó a crear el nuevo logo que elegimos para Genius eCommerce®.
Puedes ver cómo algunos de los gráficos que Art estaba considerando se unieron en la versión final. El diagrama del átomo, que representa al genio, y el carrito, que representa el eCommerce, se fusionaron en el elemento gráfico del logo. Esta es la parte del diseño que comunica visualmente el mensaje de la marca. Tu cerebro ya entiende estos dos símbolos tan reconocidos a nivel inconsciente. Lee el logo como una combinación de los dos conceptos centrales. Fíjate también en que el electrón que gira en el átomo funciona a la vez como el punto de la ‘i’ en la palabra genius. Ese es el elemento visual interesante que capta tu mirada, aunque no lo reconozcas al principio.
Paleta de colores
Los colores usados en el logo definen la paleta de colores de todo el sitio. Se emplean en distintas áreas para lograr distintos efectos.
Arriba puedes ver cómo el verde azulado y el rojo del logo se usan para resaltar las distintas acciones de la página. Los dos colores se emplean para crear una jerarquía de información. El rojo/naranja es más brillante y agresivo, por lo que se usa con más moderación en todo el sitio. Cuando se usa, es para llamar la atención sobre las acciones de mayor prioridad, como ‘get started’ y ‘request a quote’. El verde azulado es un poco más suave y por eso se usa en elementos a los que aún queremos dirigir la atención, aunque no tanto como a las llamadas a la acción directas. Elementos como ‘our company’ y ‘our reputation’.
El verde azulado también se emplea en los encabezados de página. Observa cómo, mediante el color, los encabezados se dividen en un título principal y un subtítulo y aun así permanecen en una sola línea.
Por supuesto, el nuevo sitio tiene más de dos colores. En otros lugares donde necesitábamos un toque de color, recurrimos a la paleta de marca de 1Digital®. Es algo que toda marca debería tener. Una paleta de marca es un conjunto de pautas sobre cómo deben usarse el color y otros elementos de diseño gráfico. Así es fácil mantener la coherencia en todos tus medios, desde la web hasta los impresos y las camisetas de la empresa.
Estos colores adicionales de la paleta de marca se usaron en el sitio para diferenciar secciones. “Uso el color para indicarle al usuario que está en otra sección del sitio web”, dijo Art. Como puedes ver en las páginas de abajo, el morado en el encabezado corresponde a las páginas de plataformas, mientras que el naranja corresponde a los canales de marketing digital.
Verás que el color principal de la marca 1Digital® Agency, el azul claro de nuestro logo, se reserva para un solo lugar. Se usa en las secciones que enlazan de vuelta a nuestro sitio web principal.
La razón de un diseño personalizado de eCommerce
Muchos clientes potenciales me han preguntado: ‘¿por qué esperar un diseño personalizado si una plantilla se puede implementar mucho más rápido y más barato?’ En mi opinión, la razón nunca había sido tan clara como lo que vivimos nosotros mismos con Genius eCommerce®. A una plantilla se le puede dar estilo. Puedes agregar fuentes y colores, hacer algunos cambios aquí y allá, pero al final estás haciendo pequeñas personalizaciones a un sitio que se creó para otra persona. Cuando pasas por un proceso de diseño personalizado de eCommerce, en cada decisión del camino, por pequeña que sea, hay alguien pensando en tu marca y en el mensaje que hay detrás. Desde algo tan grande como un logo hasta algo tan pequeño como el color de los botones del pie de página. La suma de todas estas pequeñas decisiones es incuantificable. Hablo todo el tiempo de cómo los sitios personalizados pueden optimizarse mejor o convertir con más facilidad, pero al final, este es el gran beneficio que es difícil de explicar hasta que pasas por el proceso al menos una vez. Con un proyecto de diseño personalizado no llevas un traje que te queda mal. Te pones una prenda formal confeccionada pensando en tu figura en cada paso del proceso. Esa apariencia a la medida es la primera impresión que darás a cada persona que encuentre tu sitio web.
Si llevas demasiado tiempo estancado en una plantilla, quizá sea momento de considerar pasar a algo personalizado. Nuestros diseñadores expertos en eCommerce escuchan tu historia y te ayudan a contarla con un sitio web. Ponte en contacto con nosotros en 1Digital® Agency y descubre cómo un proceso de diseño personalizado de eCommerce puede abrir nuevo potencial para tu sitio web.