Personalizar la Tienda y la Reserva Online de arsys.es

Como ya vimos con anterioridad, montar una tienda o un sistema de reservas en Internet es muy sencillo teniendo las herramientas adecuadas. En este artículo adaptaremos los contenidos del anterior para conocer cómo aplicarlos para la nueva versión de la interfaz de administración. Esta nueva administración introduce novedades que nos ayudarán enormemente a realizar la personalización del diseño, como la previsualización instantánea de los cambios, la posibilidad de deshacer, o arrastrar y soltar elementos.

Todos los modelos tanto de la tienda como de la reserva online permiten un mayor o menor grado de personalización para hacer que nuestro negocio en internet sea único sin demasiado esfuerzo. Obviamente, el resultado final dependerá del tiempo que le dediquemos y de lo experto que seamos, pero hay unas reglas básicas que valen para todo el mundo y con las que conseguiremos que el aspecto de nuestra tienda o sistema de reservas en internet tenga una imagen totalmente profesional.

Aquí encontraras una serie de consejos sobre:

  1. Elección de la estructura
  2. Control del ancho de página
  3. Logotipo
  4. Colores y tipografía
  5. Otras consideraciones

Elección de la estructura

Lo primero que debemos considerar es la estructura global de nuestra tienda: si va a llevar un pie de página, una zona izquierda y una zona derecha, sólo una zona izquierda…

Oculta los elementos que no vayas a utilizar para evitar márgenes no deseados.

oculta los elementos que no vayas a usar

En la Tienda o la Reserva Online de arsys.es, desde Diseño/Diseño Avanzado/Áreas de Página, indicamos qué elementos va a tener nuestra página y ocultamos aquellos que no vayamos a utilizar.

Si no ocultamos un elemento, aunque no pongamos nada de contenido, se mantendrá la reserva del espacio en la plantilla y hará que queden espacios vacíos.

Control del ancho de la página

A la hora de determinar el ancho de la tienda, hay 2 posibilidades:

  1. Usar un ancho de página fijo.
  2. Usar un ancho de página elástico (porcentual).

Al utilizar un ancho de página fijo, tenemos un mayor control sobre cómo va a quedar el contenido. Es posible modificarlo desde la pestaña Área/Anchura y relleno. En el campo anchura bastará con especificar si la cifra es un valor absoluto en píxeles (px) o un porcentaje (%).

Hoy en día, la mayoría de las personas navegan con pantallas de resolución de 1024 píxeles de ancho o superior, por lo que la opción más habitual es diseñar las páginas optimizadas para 1024×768.

Esta opción tiene la pega de que, para resoluciones inferiores a la elegida, la página se cortará, aunque en la actualidad raramente las resoluciones inferiores a 1024 llegan al 5% de los usuarios.

seleccionar anchura

Si utilizamos un ancho de página elástico (90% de la página y centrado), la zona central de nuestra página aumentará o disminuirá dependiendo de la resolución de pantalla del usuario.

Si elegimos esta opción, realmente nunca vamos a saber exactamente como ven nuestros clientes la tienda: cada cual lo verá distinto según la resolución de su pantalla. Por ejemplo, si el usuario tiene una resolución de pantalla de 1280×768, la tienda la verá con un ancho de 1152px, mientras que si la resolución es de 800×600, la tienda se verá con un ancho de 720px, y en ambos casos será la misma tienda aunque puede que se vea diferente.

El logotipo es la imagen de tu empresa: no hay que descuidarlo.

A la hora de introducir nuestro logotipo con un fondo diferente al elegido para el diseño de nuestra página, es recomendable que el fondo sea transparente o igual al color del fondo definido en la aplicación. De esta forma, el logotipo se verá perfectamente integrado en la cabecera.

Otro punto a considerar, es el tamaño de la cabecera. Si nuestro logotipo tiene 100px de alto (por ejemplo), la cabecera debe tener más de esos 100px para que quede bien.

De igual forma, debemos escoger con cuidado los márgenes del logotipo para que quede exactamente donde deseamos.

La altura de la cabecera y los márgenes del logotipo los podemos modificar seleccionando la cabecera y seleccionado en Área/Altura y relleno

logotipo altura y bordes

Colores y tipografía

Los colores y el tipo de letra que utilicemos en nuestra tienda son tremendamente importantes.

Hay que considerar que un usuario de nuestra tienda va a navegar y pasar tiempo en la tienda, mirando cosas, comprando, etc. por lo que conviene evitar colores excesivamente chillones o combinaciones que dificulten la lectura.

Una correcta elección de la gama cromática, mejorará la experiencia del usuario, permitiendo que el texto sea legible.

  • Es mejor la utilización de pocos colores. El riesgo de estridencias es menor.
  • Podemos considerar, que 3 colores, en una misma composición debe ser el mínimo y en la mayoría de los casos debería ser suficiente. Utilizando menos colores puede que la imagen de su tienda resulte anodina.

Ejemplo de paleta de color

Para realizar una selección de colores para tu web puedes dividir los criterios en tres partes.

  • El color primario: es el color que define el tono de la página, por lo tanto sería el atributo “background” de la página.
  • El color secundario: es el segundo color predominante y que nos sirva para resaltar áreas. Debe ser bastante próximo al tono primario. Podemos ver primarios y secundarios en los ejemplos que hay por encima.
  • El color destacado: es el color que debemos utilizar para destacar aspectos concretos, debe contrastar mucho.

Ejemplo de coloresUn ejemplo de color primario, secundario y destacado puede ser el siguiente:

La utilización de este esquema de color puede ser apropiado si lo que queremos es un resultado llamativo, pero corremos el riesgo de convertir la experiencia de usuario algo pesada por la carga de color, para ello podemos bajar la luminosidad de la gama.

El contraste del texto sobre el color de fondo hará que la lectura sea más cómoda.

En el primer ejemplo podemos ver que el texto se lee correctamente, ante el segundo ejemplo en el que es casi ilegible.

ste entre fondo y texto

Puede consultar más información el tratamiento de los colores en HTML en este artículo en castellano, o en este otro artículo en inglés.

Con la nueva interfaz de administración de la Tienda Online y Reserva Online, contamos con dos nuevas herramientas para ayudarnos en la selección del color:

Selector de color

Todos los elementos para los que se puede definir un color se identifican mediante el icono
correspondiente, que muestra el color actual. Bastará con hacer click en ese icono para abrir el selector de color en una nueva ventana.

selector de color

Desde el selector de color también podremos acceder a las secuencias de color, que veremos algo más adelante.Al configurar un color, dispone de las opciones siguientes:

  • Entrada directa. Al introducir un color directamente, el código de color se introduce en el campo # como un código #RRGGBB (RR = rojo, GG = verde, BB = azul), empezando con un símbolo de almohadilla (#). Si no introduce el símbolo de almohadilla, se añadirá automáticamente al guardar para que el código de color sea válido. También puede introducir valores de brillo y saturación.
  • Selección mediante la paleta de colores. Seleccionándolo directamente situando el ratón sobre el punto correspondiente al color deseado en el cuadro principal.

Secuencias de color

secuencias de color

La ficha Secuencias de color muestra una serie de esquemas de colores complementarios que son los que mejor combiann con el color activo según la teoría cromática. Los colores correspondientes de este esquema se muestran siempre a la derecha del cuadro con el color activo. Si deseas establecer uno de los otros colores del esquema como color activo, haga clic en el cuadro correspondiente.

Otras consideraciones

Agrupación en categorías

Piensa con cuidado la categorización de tus productos: muchas categorías de primer nivel, significan muchas entradas de menú y eso dificulta la localización de cada cosa.

Además, puede provocar descuadres en el diseño al quedar un menú excesivamente largo.

Consejo
Procura no tener más de 7 categorías de primer nivel.

Reparte las opciones de navegación

No trates de poner todo en el menú superior; dispones de las barras laterales y del pie para colocar todos los elementos que tienes.

En la zona superior hay que colocar los elementos principales de navegación; los que la gente va a utilizar más a menudo.

Secciones como la política de privacidad o incluso la información de contacto, se pueden poner sólo en el pie de página.

Nunca hay una segunda oportunidad de crear una primera impresión

La página de inicio es lo primero que verá tu cliente así que debe ser lo más atractiva posible. Haz una pequeña introducción de tu empresa y muestra alguno de los productos que vendes en tu tienda.

Mejorará el aspecto visual y captarás la atención del cliente sobre aquellos productos que más te interesen.

Tienda Online de arsys.es

Porque usted lo que quiere es vender, le ofrecemos la forma más sencilla: su propia tienda en Internet.
Profesional, segura y a su medida.Tienda Online de arsys.esTienda Online

Compartir

Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+