¡Prueba nuestra solución gratis durante 15 días! (sin compromiso) Prueba Gratis
Síguenos
Linkedin XopieFacebook XopieTwitter XopieGoogle Plus XopieYouTube Xopie
Suscríbete a nuestra newsletter e-commerce
Enviar
He leído y acepto la política de privacidad
Contáctanos
93 242 50 06
Guías Gratis
Descargar
Oxatis FranceActinic UKXopie Espagne
N°1 en soluciones e-commerce en Europa
Tu cesta 0 0,00 €

Diseña tu tienda online: tu guía fácil con Xopie

Cómo diseñar una tienda online

Guía fácil y consejos de expertos para diseñar tu tienda online
Xopie te da las claves para un buen diseño de tienda online.
 
Ya has cargado los productos en tu tienda online, has introducido formas de pago, la has promocionado a los cuatro vientos y por fin has conseguido algunas ventas... ¿pero sabías que mejorando el diseño de tu tienda online podrías multiplicar las ventas que has tenido hasta ahora?

Los humanos compramos con la vista, y en un comercio electrónico, con la imposibilidad de tocar y probar el producto, el diseño de la tienda online es crucial para que el visitante acabe convirtiendose en cliente. No conseguiremos que realicen una compra hasta que no le aportemos la confianza que necesitan, y aquí es donde interviene el diseño.
01 ¿Por qué el diseño es importante para mi tienda online?
¿Qué es el diseño? No es fácil responder a esta pregunta. Siempre hay quien lo considera una disciplina artística y quien lo considera una simple parte del proceso de materialización de algo. Sea como sea, diseñar es solucionar un problema o necesidad de forma estética, y esto puede aplicarse al entorno gráfico, web, industrial, moda, arquitectónico...

La premisa esencial del diseño es que siempre debe responder a un problema, si solo atiende a cuestiones estéticas no es diseño. Y al revés: si soluciona el problema pero no se ha cuidado el aspecto, tampoco es diseño. Un buen diseño mejora el funcionamiento y la experiencia de usuario, y de tal forma debe ser en una tienda online por tal de que el cliente se siente cómodo comprando en nuestra tienda.

A diferencia de la creencia popular, diseñar no es decorar algo ya hecho, sino que el diseño interviene desde las primeras fases de la creación.
Diseño tienda online
"El diseño es cómo funciona"

Steve Jobs
"El diseño es el embajador silencioso de tu marca"

Paul Rand
  • Enlaces relacionados
Diseño tiendas online

Increíbles diseños para tu tienda online
02 ¿Cómo se diseña una tienda online?
Estructuralmente, la página de una tienda online se compone de distintas partes, algunas son fijas a lo largo de todas la páginas como son el menú y el pie de página, y otras como el contenido van cambiando según la página donde nos encontremos.

Podemos dividir la página de una tienda online en 3 partes: cabecera, cuerpo y pie de página.
> Cabecera
Esta parte debe ser fija en todas las páginas de tu tienda virtual. Se ubica en la parte superior de la tienda y normalmente contiene el logotipo, menú, registro, cesta de compra...
También es un buen lugar donde ubicar el teléfono de contacto para que sea visible para los usuarios.

> Cuerpo
Aquí va el contenido de nuestra tienda online, es decir, nuestros productos, banners, textos informativos, formularios de registro, etc. También podemos añadir una o dos columnas a cada lado para insertar widgets como "los más vendidos", suscripción a la newsletter, banners sobre las formas de envío, etc.

> Pie de página
Junto con la cabecera, el pie de página se mantiene inalterable a lo largo de nuestra tienda y es muy útil para incluir los enlaces de páginas legales, copyright, iconos de redes sociales, etc.

Encontrarás más información acerca este tema en el último apartado de esta guía, dedicado a la usabilidad.
  • Enlaces relacionados
Anatomía de una tienda online

Cómo crear una landing page perfecta para tu tienda online
03 ¿Cómo componer los elementos en una tienda online?
Muchas veces vemos diseños que pese a ser similares uno nos seduce más que el otro. La mayoría de los casos esto sucede por la composición. La composición también influye mucho a la hora de que una tienda sea más fácil de navegar.

A la hora de disponer los distintos elementos de nuestra tienda, debemos tener en cuenta una serie de reglas para que el resultado final sea una tienda online ordenada y fácil de usar para los clientes.

  • Jerarquía y dirección visual


  • La jerarquía es indispensable para definir qué apartados de nuestra tienda online son más importantes y desviar hacia allí la atención de nuestros clientes.

    En nuestra cultura la lectura suele ser de arriba a abajo y de izquierda a derecha. Por esto los elementos situados más a la izquierda-superior serán leídos o interpretados antes por nuestro cliente. Sin embargo cambiando el tamaño o el contraste de los elementos situados en otras zonas de la página podemos lograr que destaquen más.
    Crea tu tienda online
    Ten en cuenta estos puntos a la hora de destacar tus elementos:

    > Las imágenes y gráficos son procesados mucho más rápido que un texto por nuestro cerebro.

    > Dosifica el número de imágenes. No cargues innecesariamente la página, puesto que demasiados banners o gráficos pueden dificultar el camino visual.

    > En vez de buscar la espectacularidad de la imagen con colores flúor o los filtros más chulos de Photoshop, organiza la información de forma lógica para que destaquen (posición, contraste, espaciado...).

    > Para que los títulos principales destaquen, define un tamaño mucho mayor que el del cuerpo del texto. Si defines 12 puntos para el cuerpo del texto, define 30 para el título principal. Para los títulos secundarios, define un tamaño intermedio entre el título principal y el cuerpo.

    > El menú principal de tu tienda online debe destacar. Para el texto de los enlaces define un tamaño mayor que el del cuerpo de la página.

    > Por último, y no por esto menos importante, deja espaciado entre cada elemento. El espacio en blanco es tan importante como el contenido, pues te permite aislar elementos importantes de tu tienda por tal de que destaquen más.


    Esta tienda hace un uso increíble de la jerarquía visual:
  • Equilibrio


  • Principalmente existen dos tipos de equilibrio, el simétrico y el asimétrico.

    El simétrico es el más fácil de lograr, pues como en una mariposa, ambos lados de la composición tienen el mismo peso y color. En el caso del asimétrico, tenemos que jugar con el tamaño de las formas y su color para que los pesos sean equivalentes. Aquí un ejemplo de equilibrio asimétrico bien resuelto:
  • Contraste


  • El contraste permite resaltar los elementos importantes de nuestro diseño, con ello conseguimos captar la atención de nuestro cliente en las zonas que nos interesan de nuestra tienda online. Los elementos que deben tener mayor contraste en nuestra tienda virtual son los banners de portada, botones de añadir a la cesta y enlaces del menú.

    Para ganar contraste combina tonos opuestos (claridad-oscuridad), como por ejemplo: negro con amarillo, crema y azul, rojo y blanco... También obtendrás contraste entre colores que están alejados en el circulo cromático.
  • Ritmo


  • Igual que en la música los diseños pueden tener ritmo gracias a la repetición de algunos elementos. El ritmo nos sirve para crear más dinamismo a nuestra tienda online y dirigir la vista a sitios importantes de la página.
    • Enlaces relacionados
    La jerarquía y la composición en el diseño

    Las leyes de la Gestalt en el Diseño Web
    04 ¿Qué colores elegir para mi tienda online?
    Sin que seamos conscientes de ello, el color nos influye mucho a la hora de elegir un producto. Por ejemplo en el lineal de un supermercado, ¿quién no ha escogido un producto alimentario con un envase verde pensando que es más natural o ecológico?

    Eso es porque los colores transmiten ciertas sensaciones y unos van mejor con un tipo de productos que otros. Pero los colores no nos afectan a todos por igual, hay que tener muy claro a qué público nos estamos dirigiendo y valoraremos su género, edad, poder adquisitivo, gustos, comportamiento... Por ejemplo: La gente mayor suele sentirse más a gusto con colores neutros como el gris y el marrón, mientras que los jóvenes prefieren colores enérgicos.

    Un ejemplo claro de esto sería la paleta de colores que pone a disposición cualquier marca de automóviles dependiendo del tipo de coche y al público al que va dirigido:
    Crea tu tienda online
    Veamos qué nos puede ofrecer cada color aplicado en una tienda online:

  • Blanco


  • Hay quien no lo considera un color, pero en una tienda online es sumamente importante saber controlarlo. Puede expresar paz, tranquilidad, limpieza, etc. pero mayormente nos ayuda a que nuestra tienda respire y a resaltar los colores que lo rodean.
  • Negro


  • Simboliza lujo, misterio, elegancia. Ideal para tiendas online de productos exclusivos.
  • Gris


  • El gris es la transición entre el blanco y el negro. Es un color muy neutral que en una tienda online nos evoca seguridad y seriedad. Combina con la mayoría de colores y nos puede ser útil para tiendas de electrónica y tecnología en general. Evita este color en tiendas de artículos femeninos o infantiles.
  • Rojo


  • Es un color muy enérgico que destaca sobre los demás, por ello lo usaremos para captar la atención del cliente en banners de oferta (siempre que combine con los otros colores de la tienda, claro). Como color para tienda online, es ideal para moda y productos eróticos ya que es capaz de transmitir sensualidad y erotismo.
  • Rosa


  • No solo es el color femenino por excelencia, sino que además ralentiza nuestro sistema endocrino y relaja los músculos tensos, ¡imagina si puede hacer cosas un color! Es Ideal para tiendas de cosméticos pero también de moda, bebés, floristerías, etc.
  • Morado


  • También representa feminidad, fantasía, etc. Ideal para productos infantiles y algunos productos femeninos.
  • Marrón


  • Transmite naturaleza, tradición, confianza, seguridad, elegancia... Ideal para tiendas de productos ecológicos, artesanales y de moda.
  • Naranja


  • Igual que el rojo es un color cálido muy enérgico, transmite alegría y juventud. Ideal para tiendas online enfocadas al público adolescente, también muy bueno para productos alimenticios.
  • Amarillo


  • Un color muy vivo y luminoso que transmite alegría y felicidad. Es el color perfecto para artículos de entretenimiento.
  • Verde


  • Transmite naturaleza y tranquilidad. Ideal para productos ecológicos, medioambientales, salud...
  • Azul


  • Se suele relacionar con la masculinidad, limpieza, la comunicación y la tecnología. Es un buen color para tiendas online de electrónica, deportes o artículos de limpieza.
  • Combinar colores


  • Primero de todo es importante que nuestra tienda online tenga una paleta reducida de colores, 3 o 4 colores bastan, con esto ganaremos unidad y coherencia. Y a la hora de combinar estos colores hay una serie de consejos a seguir para que la mezcla sea armónica y tu tienda online no parezca un arcoiris.

    Veamos cómo puedes obtener buenas combinaciones:
    Una paleta puede ser monocromática, combinando tonos de un mismo color. Como por ejemplo azul marino, azul luminoso y azul pastel.

    Las paletas de colores análogos crean combinaciones muy armónicas, y consisten en combinar los colores que se encuentran cerca del círculo cromático. Un ejemplo sería verde, turquesa, azul; o bien rojo, morado y azul.

    Las combinaciones de colores complementarios consisten en combinar colores opuestos del circulo cromático. Esta combinación es tan atrevida como peligrosa (verde + rojo = patada en el ojo), no obstante hay combinaciones buenas como el amarillo con el azul marino, o verde pistacho y violeta.

    La combinación triádica se obtiene a partir de colores que tienen la misma distancia entre sí del círculo cromático. Ofrece contraste y buena armonía. Ejemplo: azul, naranja y verde; violeta; amarillo y verde.

    Por último, comentar que dispones de herramientas en línea que pueden ayudarte durante este proceso, por ejemplo, Kuler o ColourLovers.
    • Enlaces relacionados
    Tu identidad, tu bandera

    Kuler

    Paletton
    05 Tipografía para tiendas online
    ¿Sabías que el 95% de una tienda online es tipografía? Dicho esto seguramente te preguntarás: ¿Qué es eso tan importante?

    Bien, la tipografía es el arte de componer los textos para que el mensaje sea fácil y agradable de leer para todo el mundo. De la tipografía depende que el contenido de tu tienda online llegue de la mejor manera posible al receptor, en tu caso el visitante de tu tienda online.
    Crea tu tienda online
    Hay una serie aspectos que debes tener en cuenta para que tu tienda online luzca una buena tipografía:

    1. Una buena elección de fuentes. Con dos tipos distintos bastan, uno para títulos y otro para el cuerpo del texto. En esta entrada te ayudamos a elegir las mejores fuentes para tu tienda online.
    2. Legibilidad por encima de todo. Hay fuentes que son más fáciles de leer que otras, por esto, antes de buscar la espectacularidad con fuentes divertidas y modernas deberemos ser prácticos y elegir fuentes que sean fáciles de leer, como por ejemplo Open Sans, Verdana, Arial o Georgia.
    3. Un tamaño pequeño de letra puede hacerte perder dinero. Piensa que no todo el mundo tiene la misma agudeza visual, y algunos clientes pueden tener problemas a la hora de leer la descripción de tu producto si has puesto un tamaño de letra muy pequeño. Recomendamos 12-14 píxeles para el cuerpo y 22 píxeles para los títulos aproximadamente.

    4. 50-75 caracteres por línea. A menudo componemos los textos de forma que ocupen todo el ancho de la pantalla, obligando a nuestro ojo a recorrer una larga distancia y por lo tanto nuestra vista se acaba cansando. En vez de esto, compón el texto en columnas, los periódicos hace siglos que lo hacen así, por algo será.
    156 caracteres por línea, Amazon no siempre es un buen ejemplo...

    Espero que esta pequeña guía te haya servido de ayuda. Aparte de estas recomendaciones hay muchas más, pero creemos que estas son las más básicas.
    • Enlaces relacionados
    Conceptos básicos de tipografía para tu tienda online

    Cómo influye la legibilidad y la ortografía en el SEO

    UnosTiposDuros
    06 ¿Por qué el espacio en blanco es importante para tu tienda online?
    El espacio en blanco no tiene por qué ser necesariamente blanco, pero se llama así al espacio vacío que hay alrededor de los elementos que conforman una tienda online. Mantener estos espacios vacíos es vital, ya que su principal función es reducir la cantidad de información que el visitante tiene que procesar, facilitando así la lectura y destacar los elementos importantes. El espacio en blanco es como las pausas y los silencios en una conversación, si los omites, el receptor probablemente se agobie.

    Normalmente se tiene la percepción de que el espacio en blanco es la pérdida de un espacio muy valioso que se puede aprovechar metiendo más relleno. Esta actitud en historia del arte se conoce como 'horror vacui' (miedo al vacío) y es una enfermedad para tu tienda online, ya que los textos, imágenes y banners no respiran, provocando así una sensación de desorden al visitante.

    Como podemos ver en esta imagen, mantener espacio en blanco no siempre significa dejar la tienda vacía sino buscar un buena relación contenido-espacio.
    Crea tu tienda online
  • Beneficios del espacio en blanco y cómo combatir el horror vacui


  • Mejora la lectura. Reservar un espacio alrededor de las cajas de texto ayuda a la lectura y contribuye al orden de tu tienda online. Evita párrafos demasiado largos y usa un interlineado de 1,5 o 2.

    Dirige la vista hacia lo que realmente es importante. Como hemos visto anteriormente, es importante definir jerarquías en nuestra tienda online. El espacio en blanco es un gran aliado para destacar partes importantes de nuestra tienda online.

    Deja un buen espacio entre las principales partes de tu página, como el menú, el contenido y el pie de página. Los banners suelen ser el centro de atención de una tienda online, por tanto, es importante que tengan un espacio generoso alrededor y que ningún otro elemento gráfico interfiera en el campo visual.

    Y para finalizar, hace que el diseño de nuestra tienda online luzca mejor. ¿Te suena la expresión "menos es más"? Bien, elimina todo lo que no sea estrictamente necesario. La simplicidad, aparte de útil, también es bonita.
    "La simplicidad es la sofisticación definitiva"

    Leonardo da Vinci
    • Enlaces relacionados
    Mito 28: El espacio en blanco es espacio perdido

    Horror Vacui
    07 Herramientas para diseñar tu tienda online
    Uno de los requisitos que tiene el diseño gráfico o web en la era actual es disponer de un editor gráfico que te permita plasmar tus ideas al ordenador. El editor nos será imprescindible para retocar fotografías de producto, diseño de logos, diseño de banners o todo el diseño de tu tienda online. Existen editores profesionales cuyo precio no está al alcance de todo el mundo, pero también dispones de alternativas totalmente válidas y gratuitas.

  • Retocar fotografías


  • Adobe Photoshop
    Photoshop es probablemente el más conocido y usado dentro del sector profesional, no obstante requiere bastante aprendizaje y tiene un coste algo elevado. Aunque para acciones sencillas dispones de su versión gratuita en línea.
    Crea tu tienda online
    Pixlr
    Pixlr tiene una interface parecida a Photoshop, pero funciona directamente en tu navegador sin necesidad de descargar nada y de forma gratuita. Funciona con capas y dispone multitud de ajustes.
    Clipping Magic
    Clipping Magic es una pequeña herramienta nos permite eliminar el fondo de una fotografía en pocos clics, ideal para que las fotos de producto tengan un fondo blanco uniforme. Fácil y gratuita:
    WaterMark
    WaterMark es muy útil para aplicar marcas de agua de forma masiva a todas tus fotografías. También te permite comprimir el peso de las imágenes, rotar, etc.
  • Edición de gráficos


  • Adobe Illustrator
    Illustrator es el estándar actual de los programas de diseño gráfico y es especialmente útil para la creación de logotipos. Los gráficos son vectoriales y permiten ser escalados a cualquier tamaño sin perder la calidad del mismo. Como todos los programas de Adobe, requieren una licencia.
    Inkscape
    Inkscape es una alternativa a Illustrator de Software Libre y gratuita, se instala en tu ordenador Mac, Windows o Linux.
    Adobe Photoshop
    Aunque Photoshop fue creado para el retoque fotográfico, es muy usado en diseño web y diseño de banners por la infinidad de opciones que permite en este campo. Encontrarás multitud de tutoriales y cursos en línea.
    Canva
    Canva es una herramienta al alcance de todos que permite diseñar banners y gráficos de forma fácil. Se ha asociado con diseñadores profesionales para conseguir millones de imágenes y diseños ya predefinidos. Pagas por los gráficos que utilizas, no obstante la mayoría son gratuitos salvo las fotos de stock.
  • Diseño de tienda online


  • Xopie
    En esta lista no puede faltar Xopie, nuestro editor gráfico de diseño te permite personalizar de forma intuitiva el aspecto del diseño global (fuentes, colores, tamaño, fondo, etc.) de tu tienda de manera gratuita. Puedes previsualizar los cambios realizados en tiempo real y, sobre todo, ¡obtener un resultado único!
    • Enlaces relacionados
    Video tutoriales personalizador de Xopie

    Canva: Diseñar banners sin morir en el intento

    Cómo optimizar las imágenes para la web
    08 ¿Cómo diseñar un logotipo?
    A menudo se suele frivolizar con la importancia de disponer de un buen logo en una tienda online, se deja para el final o no se le presta la atención que debería. El logotipo es la parte más esencial de nuestra estrategia de marca, ya que es la cara visible de nuestra tienda online y nuestra tarjeta de presentación. ¿Acaso irías a una reunión de trabajo en pijama? Tener un logo feo, descuidado o recargado ofrece la misma impresión a tus clientes.

    Otro error que se suele cometer es hacer uno mismo el logotipo sin tener unas nociones básicas, o dejar el diseño del logotipo en manos de alguien inexperto. Para que esto no vuelva a ocurrir mencionaremos los puntos más importantes que debe reunir todo logotipo:

    1. Simple.
    Esta es la principal norma que debe tener todo logo. El logo debe ser procesado de forma rápida, así que elimina todo lo que sea innecesario y sintetiza tu idea al máximo. Recuerda que un logo puede ser abstracto y no tiene que ir siempre acompañado de una imagen, puede ser simplemente tipográfico.

    2. Descriptivo.
    Con frecuencia se incide en que un logo debe transmitir y simbolizar los valores de la empresa. Esto es cierto, pero no es necesario mostrar de forma explícita a qué se dedica tu empresa, juega con la sutileza y la abstracción.

    3. No debe transmitir algo equivocado.
    Más importante que transmitir los ideales de nuestra tienda online, es no transmitir lo contrario.

    4. Memorable.¿Es un niño pequeño capaz de dibujar tu logotipo de memoria? Si no es así vuelve al punto 1.
    Crea tu tienda online
    5. Atemporal.
    El logo es un elemento gráfico que debe perdurar durante años. Ten en cuenta que las grandes marcas hacen una revisión de su logo una vez cada 20 años, así que no sigas modas, son efímeras y harán que tu logo quede obsoleto en poco tiempo. Evita sombreados, degradados, tipografías que estén de moda y otros elementos innecesarios.


    6. Escalable.
    Es importante que tu logotipo también se vea bien en tamaños reducidos, tiene que ofrecer una buena legibilidad y esto mayormente se consigue escogiendo una buena fuente tipográfica y no recargando el conjunto.


    7. Adaptable.
    Tu logotipo debe funcionar en todo tipo de aplicaciones, no solo en tu tienda online. Deberías formularte las siguientes preguntas: ¿Se ve bien impreso al papel? ¿Y en blanco y negro? ¿Se ve bien sin un rectángulo alrededor? ¿Cómo se ve bajo un fondo negro?
    8. Color.
    ¿Tu logotipo funciona en blanco y negro? Si es así enhorabuena, ¡ya puedes aplicarle color! Pero no te pases, ¡uno o dos colores bastan! A la hora de elegir el color de tu logo ten en cuenta los consejos que te damos en este artículo


    9. No tiene que gustar a todo el mundo.
    Asúmelo, siempre habrá diversidad de opiniones acerca de tu logo.


    10. Original.
    Por último y no menos importante, tu logotipo debe ser original, sino no te diferenciarás de la competencia y peor todavía, si es una copia te acabarán cazando.
    Bien, ya tenemos los puntos clave a la hora de crear un buen logotipo. ¡Ahora solo nos falta ponerlos en práctica! Para ello sigue estos pasos:

    1. Busca ideas y analiza tu competencia.
    Mira los logos que tienen e intenta diferenciarte de ellos. Asimismo describe tu empresa con varios adjetivos y haz una lluvia de ideas a partir de estos adjetivos.


    2. Coge papel y lápiz..
    A partir de esas ideas haz varios bocetos, no importa que no sepas dibujar. Este paso es importante ya que las ideas son mucho más fácil de plasmar al papel que al ordenador.


    3. Pasa tu diseño a limpio.
    Una vez tengas el boceto final, digitalízalo con tu ordenador. Para esto recomendamos que uses un programa de dibujo vectorial como Adobe Illustrator o Inkscape


    Por último, recuerda que si deseas dejar el logo en manos de un diseñador especializado, puedes contratar nuestro servicio de diseño de logotipos.
    • Enlaces relacionados
    Servicios de Diseño Xopie

    ¿Qué tamaño debe tener el logotipo de mi tienda online?

    Cómo crear un logotipo con fondo transparente

    Cómo crear el logo perfecto en 11 sencillos pasos
    09 Cómo diseñar banners para tu tienda online
    Los banners nos acompañan desde el inicio de internet y principalmente son anuncios en formato imagen que se incrustan en puntos determinados de tu tienda online y tienen la función de cautivar al cliente con una oferta o promoción. Estos pueden añadirse en el medio de la portada de tu tienda online, en el lateral de una página secundaria, etc. El espacio debería ser lo primero a considerar.

  • ¿Dónde lo ubico?


  • Los banners deberían ir en un lugar visible de tu tienda online. Lo más normal es que los banners de oferta, colecciones, rebajas, etc. vayan en la página de inicio, justo debajo del menú. Luego existe otro tipo de banners menos importantes como son los de información de envíos, devoluciones etc. que suelen ubicarse en alguna columna lateral de la tienda online.
    Crea tu tienda online
  • ¿Qué debe contar?


  • No trates de contarlo todo ni soltar parrafadas corporativas. En un banner se trata de lanzar un mensaje directo y atractivo, antes de sentarte delante del Photoshop define esto sobre el papel.

  • Menos es más


  • Somos insistentes en este tema, lo sé. Sin embargo es el ABC para que el banner se entienda rápidamente y en cuestión de 1 o 2 segundos el cliente haya hecho clic en la imagen. Para que mantenga un aspecto limpio y simple evita los clásicos collages de fotos, usa 1 o 2 tipografías, usa una paleta de 2 colores con alto contraste y respeta el espacio en blanco.

  • Llamada a la acción


  • La intención de un banner es conseguir que el cliente haga clic, por lo tanto es sumamente importante insertar un enlace o un botón que pida ser clicado. Botones con mensajes del tipo 'Compruébalo', 'Compra Ahora', 'Descúbrelo', 'Los quiero', etc. son irresistibles.
  • Colores vibrantes


  • Un recurso muy utilizado para que el banner sea visto es la utilización de colores llamativos. Especialmente en los banners de rebajas y promociones que duran un tiempo determinado es importante inculcar el sentido de la urgencia mediante colores que se asocien con una alerta como el rojo, amarillo, naranja... De todos modos, intenta mantener una coherencia con el resto de colores de tu tienda online.
  • Prueba, mide y vuelve a probar


  • Como el diseño y el marketing online no son ciencias exactas es probable que tengas que hacer varias versiones de un banner hasta conseguir el que te aporte más clics. Puedes medirlo asociando tu tienda con Google Analytics.

  • Coherencia con la página de destino.


  • El cliente debe encontrar lo que buscaba una vez hecho clic en el banner, sino es muy probable que se siente decepcionado o confuso, así que la página de destino debe tener una estética similar al banner.

    Estos serían los consejos básicos para crear un banner efectivo, recuerda siempre usar fotografías, tipografías y gráficos de calidad para que el banner aparte de efectivo sea atractivo. Por último recuerda que si deseas dejar el diseño del banner en manos de un diseñador especializado, puedes contratar nuestro servicio de diseño de banners.
    • Enlaces relacionados
    Canva: Diseñar banners sin morir en el intento

    Crea banners promocionales para tu tienda online
    10 Usabilidad para tiendas online
    El diseño de tu tienda online no solo debe gustarte a ti, debe reunir una serie características para que sea una tienda online fácil de usar para todo el mundo y los clientes lleguen hasta el final en el proceso de compra. Los diseños de Xopie ya reúnen estos requisitos, pero si has decidido editar uno desde el personalizador, ten en cuenta estos puntos:

    Enlaces que se diferencien del texto. Los enlaces deben diferenciarse a simple vista respecto el texto normal, ya sea por color, por grosor o por subrayado. Hay que distinguir a la primera lo que es clicable de lo que no.

    Contraste en los botones principales. Asegúrate de que los botones de añadir a la cesta, realizar compra, etc. destacan lo suficiente. Prueba con un color llamativo y que contraste con el fondo de tu página, por ejemplo colores cálidos (naranja, rojo, amarillo) ya que incitan a la acción. También es importante que estos destaquen mucho más que los secundarios. Para editar el color de los botones ve a la pestaña de Estilos dentro del personalizador.
    Crea tu tienda online
    Menú de categorías. Añade un menú de categorías en el menú principal de tu tienda o bien en el lateral en el caso de que tengas muchas categorías. De todos modos, en vez de crear interminables categorías, presenta los productos en el menor número de categorías posibles e intenta que estas sean descriptivas con lo que encontrarán dentro. A su vez limita el número de niveles de subcategorías. Para el usuario no es cómodo tener que hacer innumerables clics para encontrar un producto.
    Pon un buscador en tu tienda. Es importante que tu tienda online disponga de un buscador para que los clientes puedan buscar productos por su nombre o términos. Este debe estar en un sitio visible, preferiblemente en la cabecera de tu tienda.

    Búsqueda avanzada. Permite que tus clientes puedan filtrar los productos por precio, color, talla, categoría... Añade este elemento preferiblemente en el lateral de tu tienda.
    Migas de pan. Facilita que los usuarios puedan volver a la página anterior mediante el elemento de situación, o también conocido como 'Migas de pan'. Este elemento permite ver al cliente la página en la que se encuentra actualmente y volver a los pasos anteriores.
    Productos relacionados. ¿Has pensado en los beneficios de mostrar productos semejantes o de interés similar en la ficha de producto y el carrito de compra? Los productos relacionados le dicen al cliente: - ¡Veo que has comprado jamón! ¿Te interesa este vino tinto?
    La cesta en un lugar visible. Imagínate que después de añadir decenas de productos al carrito, el cliente abandona la cesta porque no encuentra el enlace. La cesta de la compra debe estar en una zona privilegiada de la tienda online, preferiblemente en la cabecera al igual que el logo, el menú o el buscador.

    Selector de idiomas en la parte superior. Si tu tienda es multiidioma, es crucial que el cliente encuentre el selector para poder escoger su idioma, sino es muy probable que abandone tu tienda. Sitúalo en la cabecera de la página.

    Estas son sólo las recomendaciones más importantes, recuerda mantener un diseño de tienda online ordenado, un tiempo de carga rápido y asegúrate de que el cliente hará los menos clics posibles para encontrar lo que busca.
    • Enlaces relacionados
    Usabilidad

    Tendencias de SEO para 2014