Hemos preparado cuatro propuestas de diseño para la tienda online de Datonovende , con una versión de inicio, producto, carrito y categoría para cada alternativa. Las hemos reunido en un visor web que permite recorrer las pantallas, cambiar de propuesta y ampliar los detalles. Así, el cliente puede valorar cada dirección visual sobre el conjunto de la tienda.
El trabajo parte de un objetivo concreto: renovar la presentación del comercio, mantener su identidad y encontrar una estética con más personalidad. Las alternativas exploran diferentes composiciones, jerarquías y usos del color. El proyecto está en fase de revisión gráfica y la elección del diseño definitivo sigue abierta.
Ver las cuatro propuestas de Datonovende en el visor .
Un mismo encargo en cuatro pantallas
El criterio de partida ha sido conservar las funcionalidades de la tienda actual . La libertad de diseño se concentra en cómo se ordenan y presentan los elementos: cabecera, buscador, navegación, categorías, fichas, información de compra y carrito. El logo del cliente y la combinación de azul y amarillo sirven de referencia para mantener el reconocimiento de la marca.
Trabajar las cuatro pantallas permite comprobar cómo se extiende una idea visual a situaciones distintas. La portada presenta el catálogo; la categoría ayuda a explorar y filtrar; la ficha concentra los datos del producto y las acciones de compra; el carrito ordena unidades, importes y resumen del pedido.
Repetir productos como el Samsung Galaxy A17 5G facilita la comparación: se puede observar cómo cambia la importancia de la fotografía, el precio o el botón de compra al modificar su tamaño, posición y contraste.
Propuesta 1: una estructura comercial familiar
La primera alternativa utiliza una cabecera azul, fondos blancos y tarjetas delimitadas con bordes suaves. La portada distribuye el catálogo en filas regulares y el amarillo destaca las acciones de compra. La ficha de producto presenta la imagen a la izquierda y reúne precio, disponibilidad, envío y financiación a la derecha.
En el carrito, una tabla organiza la información del producto y un panel lateral recoge el resumen económico. Esta propuesta establece una base visual ordenada para revisar las siguientes alternativas.
Propuesta 2: más espacio y variedad en la composición
La segunda versión desplaza el azul oscuro a la navegación superior y al pie, mientras la cabecera principal pasa a ser blanca. La portada combina cuadrículas, tarjetas horizontales y listados, con una distribución distinta para cada familia de productos.
La ficha amplía el espacio de la galería y reparte las características en dos columnas. El carrito da más presencia a la imagen del artículo y utiliza un bloque oscuro para destacar el resumen del pedido. En categoría, la cuadrícula pasa a cuatro columnas y el título ocupa una franja azul clara.
Propuesta 3: más presencia del color corporativo
La tercera alternativa refuerza el cian en la cabecera y en los bloques destacados. Los productos aparecen sobre tarjetas blancas, con esquinas redondeadas y sombras suaves, dentro de un fondo gris claro. La portada incorpora una composición de bloques promocionales que hace más visible la identidad del cliente.
Ese mismo tratamiento se extiende a las demás pantallas: la zona de compra de la ficha, los filtros de categoría y los paneles del carrito se presentan como superficies diferenciadas. El amarillo mantiene su papel en las acciones principales.
Propuesta 4: tipografía protagonista y contrastes más marcados
La cuarta propuesta explora una dirección más atrevida. Utiliza titulares condensados de gran tamaño , líneas visibles y bloques de color intenso. La portada alterna superficies cian, amarillas, oscuras y claras; también combina un producto destacado de gran formato con piezas más pequeñas.
La ficha lleva ese lenguaje al nombre del producto y al precio, con un marco cian alrededor de la galería. El carrito sitúa el resumen sobre un panel amarillo con una sombra marcada. La categoría conserva una cuadrícula regular y concentra el impacto visual en el encabezado y las acciones de compra.
Esta alternativa permite valorar un uso más expresivo de la marca y comprobar cómo funciona ese carácter en todo el recorrido de compra.
Un visor para comparar y revisar con el cliente
El visor reúne 16 pantallas y mantiene la página seleccionada al cambiar de propuesta. Esto permite, por ejemplo, recorrer los cuatro carritos sin volver al inicio. Incluye ampliación, ajuste de imagen, vista 1:1, pantalla completa, descarga del original y enlaces directos a cada pantalla.
Las imágenes se cargan desde archivos independientes alojados junto al visor. Los originales disponibles tienen 2.880 píxeles de ancho y se pueden sustituir conservando sus nombres. El visor lee sus dimensiones reales al cargarlos, lo que permite revisar nuevas exportaciones con el mismo sistema de navegación.
También hemos incorporado el logo de Datonovende a la interfaz de revisión. El visor adapta sus controles a pantallas pequeñas; las propuestas mostradas corresponden al diseño de escritorio.
El siguiente paso del diseño
Estas imágenes documentan alternativas gráficas para decidir la dirección del proyecto. La comprobación funcional de la tienda, su adaptación a móvil y las pruebas de accesibilidad y usabilidad forman parte del trabajo posterior a concretar sobre el diseño elegido.
Además, hemos definido el encargo creativo de una quinta propuesta, orientado a explorar otra composición y una personalidad visual propia. Esa quinta línea está planteada como siguiente iteración; el material disponible en el visor corresponde a las cuatro propuestas documentadas aquí.
Abrir el visor y comparar las propuestas de diseño de Datonovende .
