Diseño de Páginas Web para Ecommerce: Ejemplos Inspiradores

En el competitivo mundo del comercio electrónico, un diseño web atractivo y funcional es crucial para el éxito. Una de las mejores formas de conseguir un e-commerce bien diseñado es ver qué hacen los demás. En 2017, muchas tiendas online se rediseñaron para adaptarse a las últimas tendencias y solucionar problemas de forma innovadora. A lo largo del año, se han mostrado listas con webs, tiendas y blogs cuyo diseño ha gustado y sorprendido.

Te presentamos un recorrido por ejemplos destacados de diseño web para ecommerce, que te servirán de inspiración para crear o renovar tu propia tienda online.

Ejemplos Inspiradores de Diseño Web para Ecommerce

Como cada mes, os queremos traer una selección de las mejores ecommerce que nos hemos encontrado en nuestras excursiones digitales en busca de nuevas ideas y tendencias, siempre ávidos de aprender de lo que hacen los demás. Este mes tenemos una selección de lo más variada: desde la tienda del New York Times hasta una tienda de plantas (¡creo que nunca habíamos hablado de una tienda de plantas!), incluso de la tienda de una revista que nos ha enamorado con sus fotos. ¡Disfrutadla!

1. New York Times Store

Si hay un diario en el mundo que ha logrado tener una imagen visual potente, ese es sin duda el New York Times. Su cabecera y el uso de la tipografía es inconfundible, y la magia de su tienda on line es que han logrado trasladar esa sensación. Solo con un golpe de vista ya queda claro que eso forma parte de la marca New York Times. La sencillez con la que categorizan sus productos es elegante y efectiva a la vez.

2. The Sill

Quizá uno de los pocos productos que no pensamos en buscar en Internet cuando queremos comprarlo sean las plantas, pero con webs así no nos extrañaría que eso cambie. Las plantas están asociadas a la limpieza y a la frescura y toda la paleta de colores usada (blancos, verdes y pardos) en la web te lo recuerda. Además incluye consejos de cuidados de plantas, que siempre se agradecen. Eso es ofrecer valor añadido.

3. Bellroy

La portada de la web transmite exactamente lo que busca la marca: por un lado la distribución es sobria y elegante, pero también muestra un vídeo de estilo desenfadado que además destaca las virtudes del producto. Por otro lado, la tienda propiamente dicha no también sigue un esquema muy funcional pero muy efectivo, con una barra superior mostrándote las categorías y una lateral permitiéndote filtrar por colores. Una cosa muy interesante, puedes ver el producto en distintos colores sin necesidad de entrar en la ficha.

4. X-Doria

Tener un e-commerce bien ordenado y categorizado siempre es importante, pero aún más cuando buscas un producto tan específico como una funda para un teléfono (que se tiene que ajustar a un modelo en concreto). X-Doria hace un trabajo excepcional en ese campo, además, las fichas de producto hacen un gran trabajo a la hora de transmitir qué características tiene cada ítem.

5. Storm London

Los relojes de esta marca italiana entran por los ojos y su tienda online también. Las animaciones dan ganas de seguir navegando por la web solo para ver cómo bailan los elementos que te va mostrando. Además los colores y la distribución asimétrica de la rejilla transmite perfectamente el estilo gamberro de la firma.

6. ETQ Amsterdam

Cuando quieres asociar tu producto a una marca no hay nada como un diseño minimalista, con pocos elementos que desvíen la atención. La portada hace un gran trabajo gracias a un fantástico trabajo fotográfico. La tienda sigue un estilo similar. Al pasar el cursor sobre un producto (mouse over), la fotografía cambia a una imagen con el zapato puesto. Esto no solo hace que sea más fácil hacerse una idea del resultado real, también hace más intuitiva la navegación.

7. Oceanographic Magazine

La página de esta revista bi-mensual es sencillamente impresionante. Uno puede pensar que poner casi todo el material de la revista en la web puede hacer que muchos no la compren, pero la forma en la que se presenta el magnífico material fotográfico te da ganas de tener la revista en tus manos. Una apuesta arriesgada, pero claramente acertada.

8. Azteca Soccer

Esta tienda de artículos futbolísiticos hace un trabajo excepcional de fotografía de producto es un homepage, además de recurrir al 'mote' de las selecciones (la 'tri' para México, la 'albiceleste' para Argentina, y la 'furia roja' para España), aunque este pseudónimo ya está pasado de moda en vez de los nombres oficiales. Esto puede despistar a algunos, pero a la vez le da un aire más desenfadado. Luego, con bajar un poco más (scroll), nos encontramos los principales productos perfectamente categorizados.

9. Good as Gold

La peculiar apuesta de esta firma de moda tiene por un lado un fondo cuyo color va cambiando paulatinamente al hacer scroll, creando ambientes distintos para las distintas fotografías de producto que muestra, mientras que el texto moviéndose lateralmente le da un aire vintage, como las webs de finales de los 90. Los productos están perfectamente organizados, y las fotos dinámicas que encabezan las fichas incitan a entrar en ellas gracias a unas muy acertadas fotografías de producto.

10. Keus store

Esta página tiene un peculiar recurso que en un primer momento te descoloca, pero luego te atrapa: al hacer scroll vertical, la web se mueve lateralmente, algo que es constante, desde la home hasta la lista de productos y sus fichas. Sin embargo, en modo mobile no se arriesgaron y dejaron el comportamiento estándar vertical. Cuando se hace una apuesta diferente es muy importante ser constante o de lo contrario el usuario no sabrá a qué atenerse y nos arriesgamos a que huyan de nuestra web. Las fichas de producto son completísimas, con todo tipo de fotografías, tanto de detalles como de modelos llevando el producto.

Otros Ejemplos Destacados

• Obey: Transmite el espíritu de la marca con un gran peso al blanco y negro y toques de color estratégicos.
• Nextbit: Diseño con mucho juego a pesar de vender solo un producto.
• Tinker Watches: Permite construir un reloj a gusto del cliente, elevando la idea de personalización.
• The Soap Co.: Muestra confianza en el producto colocándolo en la primera línea del ecommerce.
• Enbotella: Propone una cuidada selección de vinos y destilados, apostando por la transparencia, calidad y precio.

Ejemplos de Tiendas Online por Sector

Si tienes pensado diseñar o crear una tienda online para comenzar a vender tus productos o quieres renovar el ecommerce que tienes para darle un nuevo toque más moderno y usable, te mostramos cinco diseños inspiradores para que puedas sacar ideas para el tuyo. Son solo cinco ejemplos que creemos que representan bien lo que debe tener un ecommerce, pero en la red encuentras miles de opciones creativas para inspirarte. En esta ocasión vamos a mostraros un ejemplo de tienda online de moda y accesorios, otro de tecnología, de muebles y decoración, de alimentación y de jardinería.

Moda y Accesorios: Hawkers

La tienda online de Hawkers, la firma de gafas de sol española que ha crecido en popularidad a la vez que en ventas y que se ha hecho famosa por ofrecer una gran diversidad de diseños a precios competitivos, es un ejemplo de tienda bien trabajada y de la que puedes sacar mucha inspiración. Empezaron a vender online y aunque hoy puedes encontrar gafas hawkers en ópticas y tiendas, siguen siendo reyes en esto del ecommerce. Se trata de una tienda online con un menú claro donde destacan sus productos principales, las gafas, pero también dejan hueco para otros productos que tienen en venta como ropa o las promociones. Destacan las colaboraciones que realizan con artistas, deportistas y otras figuras relevantes y por supuesto en la página de inicio encuentras un destacado de productos que puedes añadir al carrito en un clic. Se trata de una web bastante usable, clara y con líneas bien marcadas. Destaca cómo mantienen su branding y sus colores y refuerzan la cabecera con una única imagen que proyecta su campaña actual.

Tecnología: PC Componentes

PC Componentes sigue siendo uno de los reyes del sector ecommerce tecnológico y no es casualidad. Tras 17 años gestionando pedidos en el online, en este ecommerce encuentras una tienda que ha ido evolucionando pero que mantiene algunas cuestiones características. Incluye un buscador, algo útil si vas a crear un ecommerce con un portfolio de productos amplio, como ocurre en este caso. A diferencia de Hawkers, apuestan por una cabecera más pequeña y dejan espacio para las categorías más relevantes. En la home ya te muestran un portfolio amplio de producto, de elementos destacados y el menú es un menú amplio muy categorizado. Si vas a montar un ecommerce con mucha cantidad de productos, quizás te interese echar un vistazo a esta tienda online que lleva años siendo referente en los ecommerce de tecnología.

Muebles y Decoración: Sklum

Los tonos suaves y líneas pastel están de moda dentro del mundo ecommerce. Al más puro estilo wonderful encontramos Sklum, la tienda online de muebles y decoración creada para los amantes del diseño. En este ecommerce montado por un grupo de jóvenes, encuentras una tienda cuidada donde prima cada detalle. En este sentido refleja bien el sentido de la marca, que huye de la industrialización para dar más cabida al concepto slow. Se trata de una tienda online con un menú bien montado, muy icónico y con muchos detalles. Dentro de cada categoría encontrarás todas las subcategorías de producto, con imágenes y muy bien jerarquizadas. Echa un vistazo al menú que es original y además bastante interesante.

Alimentación: Planeta Huerto

Como ejemplo de ecommerce de alimentación te presentamos Planeta Huerto, una tienda online que a diferencia de las otras tiendas sigue decantándose por mantener un slider en la home. También incorpora sus categorías en un slider y destaca en inicio productos por categoría. Planeta Huerto es un ecommerce de productos sostenibles y en este sentido, predomina el verde. Acuérdate de potenciar tu marca en tu tienda online y que tenga sentido con tu filosofía de marca. Como otros ecommerce, potencian también las reseñas de clientes. Es interesante que las incluyas porque está demostrando que los clientes suelen comprar también motivados por lo que digan otros clientes.

Jardinería: Verdecora

El último ecommerce que os proponemos como ejemplo es la tienda online de Verdecora. Lo primero que te encuentras al entrar en la tienda online es un popup para que te suscribas a la newsletter. Como otros ecommerces que hemos visto en este post también incluye un buscador de productos, y es que para toda tienda online con un portfolio amplio es interesante porque favorece la experiencia de usuario. Incluye dos destacados con envío gratis a partir de una cifra, promociona este dato si lo ofreces, porque es algo que atrae y otro destacado con click and collect, algo que está bastante de moda. Fíjate en cómo oferta las plantas, donde incluye un destacado con el % de descuento que tiene. Echa un vistazo a cómo lo muestra, te puede dar buenas ideas para tu tienda online.

Estos cinco ejemplos destacan por su experiencia de usuario y por ofrecer un ecommerce compacto y único. Cada uno incluye cuestiones que te pueden servir de inspiración. Ten claro lo que tú puedes ofrecer y recuerda que para ofrecer una buena experiencia de usuario, es vital el rendimiento y para ello, contar con un buen alojamiento es primordial. Echa un vistazo a nuestro planes de hosting prestashop y si tienes una tienda con un portfolio grande, es mejor que escojas un plan de alojamiento superior como un vps administrado.

Ejemplos Adicionales de Tiendas Online

A continuación, se presentan otros ejemplos de tiendas online que destacan por diferentes aspectos de su diseño y funcionalidad:

1. LARQ: Alineada con la sostenibilidad, ofrece información clara sobre cómo sus productos disminuyen los residuos plásticos.
2. Zuzu Longines: Alinea la modernidad con un diseño dinámico y limpio, utilizando una tipografía elegante y una paleta de colores neutros.
3. Crate and Barrel: Utiliza diferentes elementos para promocionar los productos y la marca, incluyendo reseñas de clientes.
4. Nike: Aprovecha su fama y patrocinios deportivos para conectar con los consumidores.
5. Mack & Pouya: Permite a los clientes crear su propio paquete de servicios y acceder a información importante antes de contactar.
6. Grainne Morton: Diseño clásico y una paleta de colores suaves que se adapta a la marca de joyas y antigüedades.
7. Macy’s: Diseño limpio y fácil de navegar, con ofertas atractivas en la página de inicio.
8. Walmart: Muestra una gran variedad de productos manteniendo la identidad visual de la marca.
9. Lulus: Destaca vestidos en la página de inicio con fotos de modelos.
10. Urban Outfitters: Diseño moderno y limpio enfocado a jóvenes.
11. Dr. Martens: Experiencia de comercio electrónico que coincide con los intereses de su público objetivo.
12. Sanrio: Permite comprar productos con personajes populares como Hello Kitty.
13. Glossier: Identidad de marca visualmente atractiva con un estilo minimalista y joven.
14. Premium Teas: Diseño clásico y elegante a juego con sus productos.
15. Bliss: Diseño colorido y divertido que combina con el paquete del producto y la identidad visual de la marca.
16. Apple: Diseño hermoso, limpio y moderno.
17. Bite: Se enfoca en la sustentabilidad con un diseño alineado con la identidad visual de la marca.
18. Dick Moby: Diseño web moderno y divertido con fotos de alta calidad.

Plataformas para Crear tu Ecommerce

Si estás buscando una plataforma para crear tu tienda online, aquí tienes algunas opciones populares:

1. Wix: Ofrece un creador de sitios web de comercio electrónico fácil de usar, con planes adaptados a diferentes tipos de negocios.
2. Tiendanube: Solución completa y profesional con panel de aplicaciones para complementar tu ecommerce.
3. Shopify: Plataforma elegida por más de un millón de marcas, con certificado SSL gratuito y múltiples pasarelas de pago.
4. SITE123: Solución adecuada para pequeñas empresas, con interfaz fácil de usar y certificado SSL gratuito.
5. Webnode: Proporciona plantillas de tiendas receptivas y acceso a estadísticas para hacer un seguimiento del rendimiento.
6. WooCommerce: Plataforma de comercio electrónico de código abierto basada en WordPress, que permite vender diferentes tipos de productos.
7. BigCommerce: Permite personalizar el proceso de pago y optimizar las páginas para dispositivos móviles.

Plantillas para Diseñar tu Tienda Online

Si usas WordPress, puedes usar las siguientes plantillas para tu tienda online:

1. Hales: Permite poner una imagen destacada en primer lugar y compartir tu misión comercial.
2. Alameda: Deja a los visitantes directamente en la página de tu tienda para que puedan comenzar a navegar rápidamente.
3. Soony: Permite compartir una imagen destacada seguida de los mejores productos, consejos de cuidado o preguntas frecuentes.
4. Zaatar: Muestra una imagen destacada y un botón de llamada a la acción, con un banner de desplazamiento para promocionar ventas.
5. Ventura: Incluye un espacio para tu declaración de misión y un producto destacado con dos lugares para fotos de productos.
6. Maca: Permite crear un sitio web que incluye todo, desde los productos más vendidos y las ventas hasta detalles sobre tus categorías de productos y un blog.
7. Manor: Perfecta si quieres crear expectación para tu tienda de comercio electrónico, pero aún no está lista para su lanzamiento.

Un sitio web con un diseño bonito fácil de navegar es clave para mantener a los compradores en tu tienda y guiarlos a través de la compra. El mejor diseño pondrá tus productos únicos en primer lugar y combinará con el estilo de tu marca.