Consejos de diseño de ePages (I): los básicos para tu tienda online

por Noemí Casas, 11.10.13



Fotolia_684103_X_pHoy empezamos una serie de artículos de la mano de los diseñadores de ePages con consejos de diseño para tu tienda online. A través de una entrevista con nuestros expertos, os traemos las mejores recomendaciones para un diseño atractivo, los errores a evitar y las nuevas tendencias en diseño e-Commerce para estar al día. Hoy empezamos la serie con los básicos de diseño para tu tienda online.

¿Qué imágenes debo usar? ¿Qué color va mejor con mi tienda? ¿Qué tipo de estructura de página es la más adecuada? ¿Cuál es el equilibrio perfecto entre texto e imágenes?

¡Son muchas las preguntas y dudas que tenemos a la hora de hacer el diseño de nuestra web!

En esta serie de artículos, nuestros compañeros Alessia y David, los diseñadores de la oficina de ePages en Barcelona, nos dan sus respuestas y mejores consejos.

ePages_D&C_interview (3)

10 consejos para un buen diseño

David y Alessia se ponen de acuerdo en estos 10 consejos para el buen diseño de la tienda online:

 

  1. Un diseño sencillo y claro da una imagen profesional.
  2. Asegúrate de que haya un contraste entre texto y fondo: lo ideal es letra oscura sobre fondo blanco
  3. Nunca uses fotos de mala calidad o “pasables”: utiliza imágenes profesionales y atractivas
  4. Presenta tus productos sobre fondo blanco o claro
  5. Encuentra el equilibrio perfecto de tus textos: no muy largos pero ricos en palabras clave
  6. Usa colores que sean compatibles con tu negocio.
  7. Utiliza un fondo discreto y evita imágenes cargadas: queremos poner el foco en nuestros productos
  8. Ubica cada elemento en su lugar idóneo: el carrito de la compra en la esquina derecha superior, la información legal en el pie de la página, etc.
  9. Actualiza tus contenidos frecuentemente con nuevos productos entre otros
  10. Y por último, controla todas las dimensiones:

En general, son 1000 pixeles o 100% el ancho de la tienda, mientras que 600 o 700 px para incluir el Contenido. Las columnas normalmente suelen ocupar 250-300 px y los banners del rotador o expositor de Contenido son de un mínimo de 1050 px. Para las imágenes, recomendamos utilizar también buena calidad: 1000 x 1000 px.

 

Aunque solo son consejos, te recomendamos seguirlos para hacer que tu tienda online sea atractiva y funcional a la vez.

Los errores más habituales

Alessia nos explica que siempre encuentran los dos mismos gran errores en muchas tiendas: errores de texto y de imágenes.

Las imágenes son la clave del diseño y el error más habitual es que la calidad de las imágenes sea muy baja, especialmente las del producto. Aunque la página tengan un buen diseño si tiene malas fotos o de mala calidad, se pierde todo el efecto. “La mayoría de vendedores no invierten ni tiempo ni dinero en fotos profesionales y es algo que realmente vale la pena”, sentencia Alessia.

iStock_000019506314XSmall_p

El otro gran error es poner mucho texto en una tienda online: “Los internautas no leen hoy en día, y todo entra por las imágenes, por eso recomendamos poner poco texto, bien redactado y bien estructurado, con enlaces a otros apartados en la tienda. Demasiada información no llama la atención”, nos dice Alessia.

Colores: dime qué color tienes y te diré quién eres

¿Qué colores usar para tu tienda online? Para empezar debemos partir de que más colores no significa más profesional si no todo al contrario. Hay que escoger pocos colores según el negocio.iStock_000027070329XSmall_p

Los consejos de Alessia y David:

  • Lo primero es escoger colores del logo, pero si el logo está en blanco y negro puedes escoger dos colores más.
  • Escoge colores en relación al negocio: por ejemplo el azul o verde claro serían para un tema médico, mientras que el rosa se suele vincular más a la moda infantil.
  • Si no sabes qué color escoger, inspírate en tu competencia o sector.

Ojo con los colores especiales, ya que hay algunos que pasan de moda: los difuminados, colores metálicos, etc.

 

Si no sabes qué colores pueden ir mejor con tu negocio online, siempre es interesante contar con un profesional que te asesore (como los diseñadores de ePages).

EL TRUCO: Si quieres escoger los colores exactos de tu logo pero no lo diseñaste tú (por ejemplo el logo de tu empresa) puedes usar herramientas para escoger exactamente el código del color como Colorzilla, extensión para Firefox y Chrome.

 

El equilibrio perfecto entre visual y textual

Es muy importante que la página de inicio esté buen estructurada ya que el 90% de usuarios no pasan de la página de inicio. El equilibrio se consigue repartiendo bien la información, incluyendo espaciosiStock_000015071861XSmall en blanco entre imágenes y textos.

Consejos para estructurar bien el contenido:

  • Espacios entre parágrafos: “Parece una cosa básica pero mucha gente no lo hace y entonces hay una masa de texto imposible de leer”, explica David.
  • Destacar el texto con negritas, cursivas, enlaces.
  • Colores para resaltar contenidos importantes (por ejemplo cuadros con diferentes colores para categorías diferentes).

David nos recuerda: “La primera atención siempre recae sobre la imagen. El texto es complementario a nuestra imagen, ayuda a explicar la imagen o a decir algo que la imagen no decía por si sola”.

 

 

La página de inicio ideal: Un buen logo, imágenes atractivas y un texto corto de un parágrafo que destaque qué hacemos o el punto de fuerza del negocio.

 

Diseñando con la solución ePages:

¿Qué conocimientos técnicos necesito?

“ePages un software muy intuitivo y fácil de usar sin tener apenas conocimientos técnicos o sabiendo cosas básicas de edición de textos”, explica David.

Aun así, nuestros diseñadores nos dicen que teniendo conocimientos de edición de imágenes, se puede sacar mucho más partido a la solución. “Obviamente contra más conocimiento tienes mejor resultado obtendrás”, añade Alessia.

ePages_D&C_interview (4)

 Consejos para diseñar con ePages:

  • Utiliza una plantilla que vaya de acuerdo a tu negocio y necesidades e intenta sacar el máximo provecho.
  • Empieza por el diseño rápido pero acaba con el diseño avanzado, donde podrás diseñar más al detalle de lo que buscas.
  • Haz pruebas y guarda plantillas o diseños que te han gustado. De esta manera siempre puedes volver a lo que has guardado.
  • Para David, la máxima para diseñar con ePages es:
    Prueba todas las herramientas, ¡no tengas miedo! Seguro que el resultado será mucho mejor si lo pruebas todo y que te quedas con lo que mejor te funciona.”

¿Quieres insertar código de diseño en tu tienda online?
Es posible hacerlo con la solución de ePages, aunque recomendamos que no lo hagáis vosotros mismos a no ser que tengáis conocimientos. Con las actualizaciones de la solución se modifican las plantillas estándar y es posible que el diseño añadido se modifique.

Para más información sobre cómo utilizar CSS en ePages te recomendamos leer estos dos artículos:
Cómo usar CSS para modificar el diseño de tu tienda ePages: Parte 1 y Parte 2

Si, por lo que sea no puedes conseguir el diseño que tienes en la cabeza, recuerda que con la ayuda de nuestros diseñadores profesionales lo puedes obtener.

 

Esperamos que estos consejos os hayan resultado útiles. La semana que viene volvemos con la segunda parte: Cómo diseñar para vender más.

 

¡Buena venta online!

Sobre este autor


es periodista de formación y online marketer de vocación. Trabaja en el departamento de Marketing de ePages desde hace más de 4 años, desarrollando estrategias de marketing con los proveedores y clientes españoles. Es una apasionada del e-commerce, con una amplia experiencia en la solución de ePages, y trabaja cada día ayudando a los vendedores a hacer su proyecto online una realidad.

Artículos relacionados


Comentarios


  1. 17.10.2013

    Magníficos consejos! muy aconsejable leer para quien tenga en mente diseñar o rediseñar su tienda online ya que esto no se puede hacer a la ligera es conveniente un estudio y saber cómo los usuarios perciben la página web.

Comparte tu opinión con nosotros


*Campo obligatorio

Deja un comentario

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