LogoLogo
Homepage
  • Documentations for PrestaShop 1.4
  • English documentation 1.4
    • Getting Started
    • Updating PrestaShop
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • Adding Products and Product Categories
      • A Look inside the Catalog
      • Managing Customers
      • Managing Orders
      • Managing Payment Methods
      • Managing Shipping
      • Understanding Statistics
      • Managing Modules
      • Managing Employees
      • Understanding the Preferences
      • Exploring PrestaShop's Tools
      • PrestaShop Support
    • System Administrator Guide
    • Developer Guide
      • Developer tutorials
        • Using the REST webservice
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
            • 3.1 - Access the web service
            • 3.2 - Handling errors
            • 3.3 - List clients
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Cheat-sheet - Concepts outlined in this tutorial
        • Understanding and using hooks
        • Synchronization via Hooks
        • Modules, Classes and Controller Override
        • Modules, Override, Web Service
        • Db class good practices for Prestashop 1.4
        • Carrier modules - functions, creation and configuration
        • Creating your own payment module
        • Accelerated Security Course - Episode 1 - Never Trust Foreign Data
        • Accelerated Security Course - Episode 2 - SQL Injections
        • Accelerated Security Course - Episode 3 - XSS
        • Accelerated Security Course - Episode 4 - CSRF
      • Fundamentals
      • Creating a PrestaShop module
      • Development standard
      • Public and overloadable methods
      • Web-service reference
      • How to use the forge to contribute to PrestaShop
      • Rocky's guides
        • PrestaShop 1.4.3 Development Guide
          • Architecture
          • Overriding Files
          • Creating Modules
          • Cookie Structure
          • Database Structure
        • PrestaShop 1.4.3 Performance Guide
    • Designer Guide
      • Coding a theme
      • Design tips
      • Implementing layered navigation in a theme
    • Troubleshooting
    • FAQ
    • User contributions
    • Documentation PDFs
  • Documentation française 1.4
    • Guide de démarrage
    • Mettre à jour PrestaShop
    • Guide de l'utilisateur
      • Formation
      • Personnaliser votre boutique
      • Se connecter au back-office de Prestashop
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les clients
      • Gérer les commandes
      • Gérer les méthodes de paiement
      • Gérer le transport
      • Comprendre les statistiques
      • Gérer les modules
      • Gérer les employés
      • Comprendre les préférences
      • Explorer les outils de PrestaShop
      • Obtenir de l'aide
    • Guide de l'administrateur système
    • Guide du développeur
      • Fondamentaux
      • Créer un module PrestaShop
      • Tutoriels pour développeurs
        • Tutoriel Webservice REST
          • Chapitre 1 - Mise en place - Création des accès dans le Back Office
          • Chapitre 2 - Découverte - Tester l'accès au service web avec le navigateur
          • Chapitre 3 - Premiers pas - Accéder au service web et lister les clients
            • 3.1 Accéder au service web
            • 3.2 Gestion des erreurs
            • 3.3 Lister les clients
          • Chapitre 4 - Récuperer des données : Récupérer un client
          • Chapitre 5 - Modification : Mettre à jour un client
          • Chapitre 6 - Création : Formulaire d'ajout à distance
          • Chapitre 7 - Suppression : Retirer des comptes client de la base
          • Chapitre 8 – Utilisation avancée
          • Chapitre 9 - Gestion des images
          • Chapitre 10 - Gestion des prix
          • Mémento : Notions énoncées dans ce tutoriel
        • Mieux comprendre et utiliser les hooks
        • La synchronisation via les Hooks
        • Surcharge et override
        • Modules, surcharge, web service
        • Les bonnes pratiques de la classe Db sur Prestashop 1.4
        • Les modules transporteurs - fonctionnement, création, configuration
        • Cours de sécurité accéléré no. 1 - Never trust foreign data
        • Cours de sécurité accéléré no. 2 - Injections SQL
        • Cours de sécurité accéléré no. 3 - XSS
        • Cours de Sécurité accéléré no. 4 - CSRF
    • Guide du designer
      • Conseils en design
      • Créer un thème
    • Guide du Vendeur
    • Import Wiki FR
      • Dépannage
        • Changer la taille maximum de téléchargement de fichiers
        • Comment ajouter une page à PrestaShop
        • Générer le fichier .htaccess par Prestashop pour avoir des URLs simplifiées
        • Générer un nouveau mot de passe manuellement
        • Import CSV
        • Personnalisation des mails clients
        • Problème d'allocation mémoire chez 1&1
        • Problème pour se connecter après avoir effacé une langue
        • Votre site ne répond plus, une page blanche s’affiche
      • Fidéliser les Clients
      • Gestion des Taxes
      • Installer Un Module
      • Sauvegarder votre Base de Données
    • PDF de la documentation
    • Contributions des utilisateurs
    • Questions fréquentes
  • Documentación española 1.4
    • Introducción
    • Actualización de PrestaShop
    • Guía de Usuario
      • Entrenamiento
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office PrestaShop
      • Añadir Productos y Categorías de Productos
      • Una Mirada Dentro del Catálogo
      • Gestión de Clientes
      • Gestión de Pedidos
      • Gestión de Métodos de Pago
      • Gestión de Envío
      • Comprensión de las Estadísticas
      • Gestión de Módulos
      • Gestión de Empleados
      • Comprensión de Preferencias
      • Exploración de las herramientas de PrestaShop
      • Soporte PrestaShop
    • Guía del Administrador del Sistema
    • Guía del Desarrollador
      • Aspectos Fundamentales
      • Creación de un módulo de PrestaShop
      • Estándares de desarrollo
      • Manuales de desarrollador
        • Utilización del servicio web REST
          • Capítulo 1 - Creación de Acceso al Back Office
          • Capítulo 2 - Descubrimiento - Pruebas de acceso al servicio web con el navegador
          • Capítulo 3 - Primeros pasos - Acceso al servicio Web y lista de clientes
            • 3.1 - Acceso al servicio web
            • 3.2 - Manejo de errores
            • 3.3 - Enumeración de clientes
          • Capítulo 4 - Recuperación de datos - Recuperación de un cliente
          • Capítulo 5 - Modificación - Actualización de cliente
          • Capítulo 6 - Creación - Formulario En Línea Remoto
          • Capítulo 7 - Eliminación - Eliminar cuentas de clientes de la base de datos
          • Capítulo 8 - Uso avanzado
        • Comprensión y uso de hooks
        • Sincronización a través de Hooks
        • Módulos, Reemplazo, Servicio Web
        • Módulos, Clases y Reemplazo del Controlador
        • Buenas prácticas de Clase DB para Prestashop 1.4
        • Módulos de transportistas - funciones, creación y configuración
        • Curso Acelerado de Seguridad - Episodio 1 - Nunca Confíe en Datos Exteriores
        • Curso Acelerado de Seguridad - Episodio 2 - Inyecciones SQL
        • Curso Acelerado de Seguridad - Episodio 3 - XSS
        • Curso Acelerado de Seguridad - Episodio 4 - CSRF
      • Referencia del servicio web
    • Guía de Diseñador
      • Codificación de un tema
      • Consejos de Diseño
    • Solución de problemas
    • Preguntas Frecuentes
Powered by GitBook
On this page
  • Consejos de Diseño
  • Pensando anticipadamente
  • Recomendaciones técnicas
  • Facilidad de uso

Was this helpful?

  1. Documentación española 1.4
  2. Guía de Diseñador

Consejos de Diseño

PreviousCodificación de un temaNextSolución de problemas

Last updated 4 years ago

Was this helpful?

Tabla de contenidos

/*<![CDATA[*/ div.rbtoc1597397864700 {padding: 0px;} div.rbtoc1597397864700 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597397864700 li {margin-left: 0px;padding-left: 0px;} /*]]>*/

Consejos de Diseño

Pensando anticipadamente

Antes de abrir PhotoShop, GIMP o cualquier otro editor gráfico, debe sentarse en un escritorio con un bolígrafo y una hoja de papel y pensar en el mapa de sitio de su tienda, haciéndolo tan flexible como sea posible (no todas las tiendas tienen la misma cantidad de categorías o de productos por categoría).

Un tema completo de PrestaShop requiere por lo menos 30 páginas o secciones de página:

  • Página de inicio

  • Página de categoría

  • Página de producto

  • Página de comparación de producto

  • Página de resultados de la búsqueda

  • "Mi Cuenta" y sus páginas interiores:

    • Mis vales

    • Historial de pedidos

    • Información personal

  • "Mi Carrito"

  • Página de autenticación

  • Creación de cuenta

  • Páginas de finalización de compra:

    • Listas de direcciones

    • Costos de envío

    • Elección de pago (cheque, transferencia)

    • Finalización de una página

  • Creación de dirección

  • Página de entrega

  • Página de mantenimiento

  • Lista de fabricantes y página individual de fabricante

  • Lista de proovedores y página individual de proveedor

  • Página 404 ("Página no encontrada")

  • Página "Mejores ventas"

  • Página "Nuevos productos"

  • Página "promociones actuales"

  • Página "contraseña olvidada"

  • Aviso Legal

  • Mapa del sitio

  • Página de tiendas

  • Formulario de contacto

Tome todas estas en cuenta y procure no olvidarse de ninguna de ellas. El no tomar en cuenta alguna página puede resultar en un tema incompleto y por lo tanto en una mala experiencia para sus usuarios.

Una vez que se sienta bien con su mapa de sitio, realice unos cuantos bosquejos de la interfaz, para conseguir una buena apreciación del lugar donde los diferentes elementos serán colocados: nuevos productos, promociones, imágenes, texto, etc.). También, incluya los detalles importantes, como las diversas menciones en la página del producto: en venta, promoción, nuevo producto, precio...).

Por supuesto, éstos son sólo consejos generales; un profesional quizás prefiera hacerlo todo directamente en PhotoShop, luego saltar en PHP, HTML y CSS.

Recomendaciones técnicas

Para garantizar que pueda compartir fácilmente su creaciones con otros (diseñadores, integradores, clientes), le aconsejamos guardarlas como un archivo de PhotoShop(RGB, 72 dpi, no-aplanado)

Debe trabajar teniendo en mente la resolución de ancho de 980px.

Arreglo de Capas

Puede utilizar varios métodos, dependiendo de sus preferencias:

  • Una carpeta para cada capa de texto, para que los integradores puedan conseguir acceso fácil al diseño mismo.

  • Una carpeta para cada bloque de diseño (Nuevos productos, Mejores ventas, etc.)

Colores

No utilice el modelo de color de CMYK, ya que sólo es adaptado a la impresión. Siempre utilice el modelo de color de RVB.

Tipos de letra

¡No utilice tipos de letra atípicas! ¡Manténgalo legible en todo momento!

Texto estándar (título, subtítulo, texto regular) debe ser limitado a los tipos de letra respetados, para asegurar que los visitantes puedan ver siempre lo mismo:

  • Arial

  • Verdana

  • Helvetica

  • Georgia

  • Tahoma

  • Times New Roman

Mantenga el número de tipos de letra en lo indispensable, para evitar que su sitio web sea confuso e ilegible.

Unidades

Al diseñar para la web, la unidad básica de medida es el píxel. No mida ni en cíceros, puntos ni centímetros.

Tamaño del Texto

Siempre tenga presente que el usuario tiene la última palabra en lo que dice el texto, ya que el navegador moderno puede expandir o reducirlo. De hecho, debe probar su sitio web con distintas variaciones de navegador, ver lo fácil que puede ser quebrantar su diseño... y por lo tanto rehacer su diseño para evitar el sencillo quebrantamiento del mismo.

Dicho esto, usted puede comenzar con unos cuantos tamaños básicos de texto:

  • 10 a 12px para el texto regular

  • 14px para subtítulos

  • 18px para títulos

  • etc.

Transparencia

Las imágenes transparentes no funcionan bien con navegadores antiguos, especialmente con Internet Explorer, así que debe alejarse de imágenes PNG de 24-bits. En cuanto a imágenes GIF con transparencia, utilícelas sobre un fondo simple para asegurar que trabajen apropiadamente. Evite 50% de opacidad al utilizar el mismo color sin brillo como color de fondo del sitio web.

Misc.

  • Pruebe su tema con las opciones activadas de PrestaShop, para observar como reacciona su tema.

  • Edite un producto para observar cómo las diferentes opciones influyen con su diseño... si realiza todas.

  • Asegúrese de contar con un estilo homogéneo para su tienda.

Facilidad de uso

Aquí no ahondaremos en teorías complejas de interacción entre humano y computadora, sino que trataremos de asegurarnos que su tienda sea accesible a tantos clientes potenciales como sea posible. Su objetivo principal debe ser contar con visitantes que confían en su tienda lo suficiente para que comiencen a comprar.

Cada vez que un visitante tropieza con un problema de facilidad de uso, su sitio pierde confianza. Si la confianza alcanza un punto bajo, la frustración viene y los visitantes abandonan su sitio, sin comprar nada por supuesto. De ahí la importancia de la facilidad de uso en el mundo del comercio electrónico.

Cuando diseñe el tema de su tienda, tenga en mente que su misión (además de la venta de productos) es de mostrar a sus visitantes que su sitio web es gestionado por personas serias y competentes.

La página de inicio

Esta es la página más importante de su tienda, donde se trata más que de una cuestión de suerte. Esta es la página donde el visitante obtendra una opinión general de su tienda y decidirá si debe confiar en su tienda con su dinero.

Debe asegurarse de lograr que su tienda sea fácilmente reconocible y que su catálogo sea lo primero que se fije la gente.

El aspecto visual de su sitio web es por supuesto muy importante (de ahí nuestra sección "Pensando anticipadamente"): usted debe encontrar la manera de colocar sus productos hacia adelante con sobrecarga de página. Además, debe utilizar colores y diseño homogéneos dentro de una página y entre páginas. Por ejemplo si un botón cuenta con un efecto de interacción en una página, asegúrese de aplicar ese efecto a todas las otras páginas en el sitio.

El buscador debe ser fácil de encontrar. Los visitantes a menudo saben para lo que vinieron y lo que menos desean es explorar categoría por subcategoría buscándolo.

Más aún, al construir el contenido de su sitio web, piense en el usuario que explora las categorías y hágalo sencillo e intuitivo.

Puede reforzar la confianza percibido mostrando logos o menciones de sus asociados (bancos, transportistas), y su calificación desde una institución comercio electrónico conocida, como FIA-NET en Francia.

Muestre sus detalles de contacto, como el sistema de número de teléfono o chat, si está disponible. Esto mostrará que es real y eso puede hacer una inmensa diferencia. Por supuesto, no utilice su número de teléfono personal: los clientes deben sentir que llaman al equipo del soporte de una empresa, no para perturbarle mientras cocina.

Muestre claramente sus condiciones de Devolución de Mercancías, sus T&C generales y otras reglas aplicables que su tienda respeta.

La página de producto

Un visitante sólo se acerca a la página de producto si es interesada por dicho producto y desea más detalles. Por lo tanto debe contar con detalles en abundancia.

Haga que el botón "Añadir al Carrito" sea claro y visible. Debe distinguirse del resto del diseño, tanto por el tamaño como el color – pero mantenga un diseño homogéneo: si el botón está demasiado lejos del diseño general, el visitante puede fácilmente no verlo, de la misma manera personas se han entrenado a sí mismas a no observar anuncios en el Internet.

Asegúrese de mostrar todas las etiquetas importantes: "Nuevo producto", "Promoción", "Vale", etc. También, no se olvide de agregar las demoras de entrega.

El embudo de conversión: "Mi Cuenta" y páginas relacionadas

Creación de cuenta/ "Mi Cuenta"

El tema por defecto de PrestaShop viene incluido con un formulario de cuenta que ofrece un muy buen porcentaje de transformación. Aunque todavía no se adapte del todo a las necesidades de su sitio. Por consiguiente, aquí le ofrecemos unos cuantos consejos a seguir si piensa actualizar el formulario.

  • Sea básico, mantenga sólo lo esencial. El visitante debe concentrarse en la creación de cuenta y en la compra. Vea cómo lo hace Amazon.

  • Reduzca el número de pasos. El usuario debe conocer el número de pasos que debe atravesar antes de completar su compra.

  • Muestre claramente cualquier error que realiza el usuario, justo al lado del campo en el formulario. Los errores deben ser mostrados en un color claro (rojo es preferible), y los campos obligatorios deben ser indicados (con un asterisco *, por ejemplo).

Pago

¡El visitante ha creado su cuenta de cliente, maravilloso! Pero aún no hemos terminado, ahora debe finalizar la compra.

Lo mismo que para el formulario de creación de cuenta:

  • Reduzca el número de pasos (dirección de entrega, página de pago).

  • Muestre los errores en un color claro.

  • Página de pago:

    • si el visitante utiliza una tarjeta de crédito, adviértale que serán trasladodos al servidor seguro de su banco. Por ejemplo agregue un icono de candado pequeño, con una explicación

    • Si este elige pagar por cheque (o cualquier otro método de pago que no sea en línea), mencione claramente los pasos a seguir: importe, dirección, etc.

Todas estos consejos de facilidad de uso son sólo partes del cuento, pero le pueden ofrecer una base sólida en la construcción de su tema, para mejorar su tienda.

El encabezado del sitio web es donde usted podrá colocar los detalles más reconocibles: logo, nombre, imagen única...No debe ser mayor de 250px, para que sus visitantes puedan alcanzar su catálogo sin recurrir al desplazamiento hacia abajo de la página. En otras palabras, su contenido principal nunca se debe encontrar .

El es donde sus visitantes se convierten en clientes (de ahí el uso de "conversión", o a veces "transformación"). Si éstas páginas son diseñadas o estructuradas incorrectamente, esto puede significar la pérdida de muchos clientes potenciales y por lo tanto, toda los pedidos que pudieron haber realizado en su sitio.

debajo del doblez
embudo de conversión
Consejos de Diseño
Pensando anticipadamente
Recomendaciones técnicas
Facilidad de uso