DTFsuperstore
Diseño De Sitio Web Responsivo Para Tienda ECommerce
Este proyecto de rediseño UI/UX para un sitio web eCommerce fue un proyecto de seguimiento a un diseño de interfaz de usuario para pantalla táctil en el que habíamos trabajado previamente para el cliente. Nuestra tarea fue renovar el diseño visual y la experiencia de usuario para DTFsuperstore.
Durante la fase de descubrimiento, observamos una sorprendente falta de color en los sitios web de suministros de impresión, especialmente considerando el enfoque de la industria en el color de la tinta. Decididos a diferenciar el sitio de nuestro cliente, incorporamos colores CMYK vibrantes (cian, magenta, amarillo y negro) en las imágenes del masthead y en los elementos de diseño en todo el sitio. Usando arte generativo con IA (a través de Midjourney) y Adobe Photoshop, creamos imágenes de masthead cautivadoras para las distintas páginas independientes y plantillas de categorías de productos. El diseño general presenta paneles modernos con esquinas curvas y sombras sutiles, mientras que los elementos de diseño neumórfico agregaron profundidad al sub-footer y a áreas seleccionadas.
Tenga En Cuenta: Algunas de las páginas web que diseñamos para DTFsuperstore.com son bastante altas. Le recomendamos hacer clic en las imágenes altas para verlas en tamaño completo.
Pantallas Principales De Registro + Inicio De Sesión
La Pantalla De Registro y las Pantallas De Inicio De Sesión presentan paneles desplegables hacia abajo que se superponen sobre la parte superior de la página web eCommerce, asegurando el enfoque del usuario. Vibrantes explosiones de cian, magenta y amarillo sobre un fondo completamente negro no solo integran la nueva identidad de marca cromática, sino que también infunden todo el diseño del sitio web con un lenguaje visual dinámico. Las explosiones de color fueron creadas usando una aplicación de arte generativo con IA. Para diferenciar entre Registro e Inicio De Sesión, usamos diferentes explosiones de tinta.
Menús Desplegables De Navegación
La Página De Inicio Principal + Mastheads Personalizados
Usamos colores neutros como base del diseño del sitio web. Negro azabache en el chrome y el footer, blanco y gris claro para las secciones de contenido, y grises oscuros para el sub-footer. Esta base neutral permite que los colores vibrantes destaquen mientras el contenido se integra de manera fluida.
Buscando alejarnos de la monotonía de los rectángulos simples o de las imágenes full-bleed para los mastheads, creamos los mastheads con áreas extendidas específicamente destinadas a mostrar los nombres de sección para las páginas de producto, categoría de producto y páginas web independientes. Ese lenguaje de diseño se trasladó a las 6 imágenes principales de masthead que creamos para la parte superior de la página de inicio principal usando arte generativo con IA que desarrollamos específicamente para el proyecto. Cada imagen incorpora colores vibrantes tomados de la paleta estándar de tinta CMYK. Algunas imágenes fueron generadas directamente por la aplicación de arte con IA y posteriormente refinadas con Adobe Photoshop, mientras que otras son composiciones que combinan múltiples imágenes en un conjunto cohesivo. Haga clic en la imagen de la Página De Inicio para verla en tamaño completo.
Diseño De Plantilla Para Página De Categoría De Producto: Vistas De Lista + Grid
La piedra angular de cualquier plataforma eCommerce exitosa se encuentra en sus páginas de categoría y producto. Entendiendo esto, nuestro equipo de diseño web creó una página de plantilla para categoría de producto para DTFsuperstore.com usando elementos de diseño modernos y atractivos que eran tan intuitivos como actuales, sirviendo como blueprint para sus desarrolladores y páginas de categoría posteriores. Dentro de este framework, diseñamos una plantilla tanto para la Vista De Lista como para la Vista De Grid, para adaptarnos a diversas preferencias de usuario.
Para el importante anuncio de “Nota” en la parte superior de la página, usamos una base de diseño neumórfico vibrante para el icono, con el fin de llamar la atención sobre las secciones de Nota + Consejo. Se agregó un breadcrumb debajo del masthead para facilitar la navegación, mientras que el color hero magenta de la página se trasladó a las etiquetas de Producto Destacado y al fondo del icono de Nota ubicado debajo. Se agregó una barra lateral de filtros, omnipresente en los sitios web eCommerce, para facilitar un descubrimiento de productos más rápido.
Haga clic en una imagen para verla en tamaño completo.
Plantilla De Página De Producto + Mastheads De Sección De Categoría/Producto + Modal De Vista Rápida
Un diseño de plantilla de Página De Producto sofisticado y elegante, desde la conveniencia de estimar los costos de envío directamente en la página de producto hasta las descripciones de producto legibles sin esfuerzo, cada detalle está diseñado para mejorar la experiencia de usuario del comprador. Con la conveniencia adicional de una tabla de descuentos adaptada para pedidos al por mayor, junto con funciones estándar como productos vistos recientemente y sugerencias curadas en la sección También Le Puede Gustar. Con un enfoque en la simplicidad y la funcionalidad, nuestro diseño de plantilla de Página De Producto establece un nuevo estándar para la excelencia eCommerce.
Incorporando Arte Generativo Con IA En La Identidad De Marca
Cada Página De Categoría De Producto y Página De Producto fue adornada con mastheads cautivadores incorporando arte generativo con IA, reflejando la esencia de las líneas de producto. Profundizando en los detalles, curamos cuidadosamente una paleta de color única basada en estándares CMYK+W, garantizando cohesión visual y consistencia de marca en las seis categorías principales de producto. En un gesto creativo, abordamos el desafío de representar los adhesivos en polvo, empleando un enfoque matizado para representar su proceso de aplicación único.
Modal De Vista Rápida
En la página de Vista De Lista De Categoría De Producto, cada entrada de producto tiene un botón de vista rápida que permite al usuario ver información pertinente sobre el producto sin salir de la página.
Carrito De Compras + Pedidos Y Direcciones
Para enfatizar aún más el branding de colores vibrantes, integramos arte generativo con IA tanto en las páginas de Carrito De Compras como de Pedidos Y Direcciones. Tonos vibrantes infunden la experiencia del carrito de compras, mientras que un camión de reparto adornado con el logo de DTFSuperstore refuerza la identidad de marca. Para optimizar la experiencia de usuario, consolidamos Pedidos y Direcciones en una sola página, eliminando clics innecesarios y mejorando la eficiencia. Este enfoque unificado reconoce que los pedidos están asociados con direcciones, minimizando el esfuerzo del usuario y simplificando la navegación.
Una Mirada A Algunos De Los Mastheads De Arte Generativo Con IA
Esta imagen de masthead conceptualiza un entorno de oficina vibrante y dinámico, mostrando a empleados participando en llamadas telefónicas y correspondencia por email. Diseñada con una estética artística y colorida, la paleta de color base se ajusta a los estándares CMYK, alineándose con la identidad visual general del proyecto. Las paredes de vidrio simbolizan el compromiso de la empresa con la transparencia y la apertura, características por las que son ampliamente reconocidos.
Para el masthead de DTF University, optamos por un concepto visualmente impactante: un birrete descendiendo en medio de una explosión de vibrantes colores CMY. Después de generar la ilustración inicial con IA, llevamos la imagen a Photoshop y agregamos la borla usando la herramienta de relleno generativo de Adobe.
Para el masthead de Contact Us, creamos una composición dinámica al combinar tres imágenes distintas de arte generativo con IA. Cada elemento, incluyendo el headset de soporte técnico con micrófono y el teclado iluminado, fue generado por separado. Luego refinamos cada imagen en Photoshop, eliminando imperfecciones y fondos, antes de combinarlas de manera fluida. Este enfoque transmite visualmente las diversas maneras en que los clientes pueden comunicarse con DTFsuperstore.
Para realzar el impacto visual, creamos una imagen directa que muestra una pantalla de computadora destacando prominentemente su logo. Sobre un fondo de vibrantes explosiones de tinta, esta composición captura la esencia del nuevo branding global del sitio de DTFsuperstore.
Servicio Y Soporte + Landing Page De Mimaki
Al incorporar arte generativo con IA personalizado y gráficos neumórficos, ambos diseños de página presentan iconos destacados que mejoran la interacción visual de los usuarios.
Para el masthead de Mimaki, creamos una imagen de un almacén bañado en vibrantes colores CMYK, simbolizando su amplia gama de suministros para impresoras. Reflejando la estrategia de marketing de Mimaki, integramos dos figuras femeninas en la escena, alineándonos con su identidad de marca y su mensaje. Debido a que la landing page de Mimaki está diseñada para el intercambio o la actualización de impresoras Mimaki, el almacén representa la metáfora visual perfecta para la abundancia de opciones y oportunidades disponibles para los usuarios de DTFsuperstore.
Asegúrese de hacer clic en las imágenes para verlas en resolución completa.
Contact Us + Biblioteca De Videos + DTF University
Las últimas tres páginas web que diseñamos presentan un nuevo estilo visual que es estructurado y moderno, ofreciendo una manera más intuitiva de entregar información a los usuarios. Haga clic en una imagen a continuación para verla en tamaño completo.
