Ideas innovadoras para el diseño de páginas de carrito

Diseño de ilustración sobre pestañas de carrito de compra en páginas web

La página de carrito es un sitio importante dentro de una web, por lo que su diseño debería ser agradable y acorde a la temática. Por eso hemos querido dejarte algunos ejemplos de este tipo de página interior, para que puedas nutrirte de estos valiosos referentes.

Página de carrito de compra de la web "Be dog"

Be dog

https://www.be-dog.com/comprar/

Comenzamos con la página de carrito de una tienda para mascotas. Podemos apreciar un diseño muy limpio y espacioso, pues lo que más abunda es el color blanco. La tipografía extrafina y las líneas y detalles tan sutiles de la página hacen que su estilo sea totalmente minimalista.

Por qué esta página tiene un buen diseño

  • Diseño espacioso con mucho blanco y aire para cada uno de los elementos
  • Tipografías finas y elementos muy sutiles con estilo minimalista
Fotografía de sombrero en perchero en captura de pantalla de la web "Margot Brand"

Margot Brand

https://www.margotbrand.com.ar/productos/slouchy-yarkon-art-1092/

En este caso, al acceder al carrito de compras aparece una ventana que se despliega en el extremo derecho y que no cubre toda la pantalla, lo cual es muy ergonómico. En este diseño se cuidan mucho los detalles y se mantiene el color beige presente en todo el estilo de la web.

Además, los íconos y la manera de componer los elementos le dan un toque minimalista, fresco y muy moderno.

¿Por qué hemos incluido a esta página en la lista?

  • La página no ocupa toda la pantalla si no que se despliega en un extremo
  • Diseño acorde al estilo de la web con tonos beige y detalles modernos
Captura de pantalla de la pestaña de carrito de la web "Malsu"

Malsu

https://www.malsu.com.ar/

Este es otro caso en el que la página de carrito se despliega desde un extremo y no se encuentra a pantalla completa. Para este caso podemos encontrar todas las informaciones relacionadas con la compra de una manera muy organizada e intuitiva.

Esto es posible gracias a su diseño espacioso y muy bien jerarquizado dentro del espacio pequeño que ha sido destinado al carrito de compras.

Que nos gusta de esta página de carrito

  • Las informaciones están muy bien jerarquizadas y organizadas
  • Es fácil encontrar y acceder a cada una de las opciones de compra
  • Diseño espacioso y con un fondo blanco sin muchos elementos para evitar un diseño sobrecargado en una zona pequeña
Pestaña de carrito de la web "Sun flora kids"

Sun flora kids

https://www.sunflorakids.com.ar/

Al tener un estilo bien definido no solo en la web sino también en los propios productos de la tienda online, se hace muy fácil hacer que todas las páginas luzcan asombrosas, como en el caso de esta tienda de ropa para niñas.

La página aparece por un extremo y no cubre toda la pantalla, pero es tan similar al estilo de toda la web que ni siquiera notarás que se trata de un apartado diferente. Mantiene los mismos tonos tierra y lila desaturados y mucha semejanza en los íconos y las tipografías. 

Por qué es este un buen diseño

  • Estética igual al estilo usado en toda la web
  • Están presente los colores tierra desaturados presente en el diseño de la web y como sello de los propios productos
Captura de pantalla de la web "Kaviar guache"

Kaviar Guache

https://www.kaviargauche.com/en/cart/

Incluso la tipografía para nombrar la página de carrito de compras de esta web es sofisticada y elegante, y es que no se espera menos de una tienda online de vestidos de novia. El diseño en general es bien sencillo, pero muy elegante y limpio.

Un detalle que nos ha llamado la atención son las recomendaciones que se hacen al final de la página, generalmente acorde al producto escogido para completar un outfit. Esto guía al usuario y lo mantiene interesado en las compras.

Qué detalles son relevantes en esta página de carrito

  • Diseño sencillo pero elegante y sofisticado
  • Recomendaciones de más compras de productos acorde al que has escogido
Captura de pantalla de la pestaña de carrito de la web "Christian loboutin"

Christian Louboutin

https://eu.christianlouboutin.com/fr_fr/rosalio-st-black-lin-loubi-3230928j323.html

En este diseño de página de carrito encontramos varias cosas interesantes. Por un lado, la combinación del negro y el rojo le da un toque genial y además tiene muchísimo que ver con el diseño de la web y de sus productos.

Por otro lado, nos encantó el detalle de enmarcar los productos en una forma que recuerda a una vitrina o urna, esto le da un estilo muy diferente a la presentación.

Qué es lo más interesante del diseño de esta página de carrito

  • La poderosa combinación de colores negro y rojo
  • Los productos quedan enmarcados en una forma similar a una urna
  • Diseño espacioso y muy organizado
Captura de pantalla de la pestaña de carrito de la web de Converse

Converse

https://www.converse.com/es/cart?lang=es_ES

La tienda online de la marca converse, tiene un carrito de compras con un diseño muy organizado y espacioso. Podemos encontrar, además del típico contenido de carrito, informaciones de devoluciones o envíos gratis, un apartado para FAQs y hasta la posibilidad de editar los pedidos.

Qué es lo más genial de esta página de carrito

  • Diseño limpio y espacioso
  • Toda la información y contenido está organizado y jerarquizado para guiar las compras de una manera eficiente
  • Posee la posibilidad de editar el pedido desde el mismo carrito
Captura de pantalla de la pestaña de carrito de la web "Fred Perry"

Fred perry

https://www.fredperry.com/checkout/cart

Esta página de carrito de una tienda de ropa posee un diseño a pantalla completa muy sencillo, con fondo blanco y tipografías muy finas y sutiles. Al final de la página podemos encontrar recomendaciones de otros productos que nos pueden interesar.

Una opción que nos ha parecido interesante, es que, desde la misma página de carrito, si nos paramos en el ícono del carrito de compras, podemos acceder a las distintas opciones de pago en una nueva página que se despliega por el extremo derecho.

Qué podemos destacar de esta página de carrito

  • Diseño muy sencillo y organizado
  • Desde la página podemos acceder a métodos de pago si volvemos a posicionarnos en el ícono del carrito
  • Posee una sección de recomendaciones para más productos similares
Captura de pantalla de la pestaña de carrito de la web "Paul Smith"

Paul Smith

https://www.paulsmith.com/uk/new-arrivals

En este caso, al acceder a la página de carrito, podemos ver como la pantalla está dividida en dos. Por un lado, tenemos la información de los productos que hemos elegido y en el otro caso algunas recomendaciones de productos sugeridos en los cuales podemos seguir navegando para agregar al carrito.

Una sección que ha llamado mucho nuestra atención, es la de ‘’Wishlist’’, en donde puedes agregar y ordenar los productos que deseas pero que aún no has decidido hacer su compra.

Qué es lo más genial de esta página

  • Diseño sencillo y ordenado
  • Podemos agregar nuestros productos a una wishlist
  • Podemos navegar por diferentes productos sin salir de la página de carrito
Captura de pantalla de la web de la tienda de ropa Bens Herman

Bens herman

https://www.bensherman.co.uk/basket

En esta tienda de ropa, la página del carrito tiene un diseño muy sencillo y clásico, pero súper agradable y estético. Las divisiones en secciones blancas sobre el fondo gris le dan limpieza y mucho aire al diseño. Posee una sección que permite seguir navegando por productos similares que puedan ser de nuestro interés.

Lo más interesante de esta página

  • Diseño muy limpio y ordenado
  • Tipografías sencillas y discretas
  • Podemos acceder a productos similares a los elegidos
Captura de pantalla de la pestaña de carrito de la web "PcComponents"

PcComponentes

https://www.pccomponentes.com/cart/shopping_basket

Al acceder a la página de carrito de esta web primeramente desplegamos una vista desde una pestaña en un extremo y luego desde ahí podemos ir a la página en pantalla completa. Su diseño es muy limpio y sencillo, con detalles de color naranja acorde al estilo de la marca.

Podemos acceder también a muchas opciones como servicios de garantía y de protección frente a daños.

Por qué este carrito está en la lista

  • Diseño muy sencillo y fresco
  • Opciones de garantía dentro de la propia página de carrito
  • Estilo minimalista con detalles naranjas de la paleta de color de la marca
Captura de pantalla de la pestaña de carrito de la web "Sklum"

Sklum

https://www.sklum.com/es/pedido-rapido?view=1

En este caso tenemos un diseño súper sencillo y en el que podemos acceder a diferentes menús de la web desde la página de carrito, incluso podemos buscar más productos. También posee una sección donde podemos explorar algunos elementos que vienen a juego con lo que ya hemos elegido.

Qué es lo más llamativo de esta página

  • La posibilidad de acceder a menús, búsqueda y opciones desde el carrito
  • Diseño muy sencillo pero atractivo
  • Uso de fondo blanco y mucho espacio entre los elementos
Captura de pantalla de la pestaña de carrito de la web "Verde Cora"

Verde Cora

https://verdecora.es/#

Para acceder a esta página de carrito debemos hacer clic en el ícono con la opción ‘’mi carrito’’ y ahí desplegamos una pequeña página desde el extremo derecho desde la cual podemos realizar todas las operaciones de compras de los productos.

Su diseño es muy atractivo, y aunque es muy sencillo, utiliza los mismos códigos del estilo de la web, por lo que podremos ver los tonos verdes y marinos en diferentes detalles y botones de una manera sutil, pero encantadora.

Lo más genial del carrito de esta web

  • Diseño atractivo con la misma paleta de colores que la web
  • La página en sí es una pestaña que se despliega de un extremo
  • Tenemos una opción de agregar productos a ‘’favoritos’’
Captura de pantalla de la pestaña de carrito de la web "Bodeboca"

Bodeboca

https://www.bodeboca.com/cart

Desde esta página de carrito tenemos acceso al header de la web y todas sus opciones. Los detalles verdes propios del estilo de la web y de la misma identidad visual están presentes en los botones e íconos de la página, por lo que su diseño se complementa a la perfección con toda la web.

Que destacamos de esta página

  • Diseño exquisito en resonancia con los códigos visuales del estilo de la web
  • Podemos acceder al header y todos los menús desde la página de carrito
Fotografía de gafas en captura de pantalla de la pestaña de carrito de la web "Owloptic"

Owloptic

https://www.owloptics.com/en/shop/eins?color=glacier&lenses=clear

En este ejemplo la página es un sencillo menú que desplegamos al hacer clic en el ícono de carrito. Te sorprenderá lo sencillo de su diseño gris y blanco y lo concreto de la información en esta vista de la página. Luego podemos acceder a más opciones si nos suscribimos y entramos a la pantalla completa.

Lo que nos sorprende de esta página de carrito

  • Muy sencilla y concreta
  • Tonos grises y blancos que le aportan seriedad y minimalismo
  • Estilo muy moderno en cuanto a colores y tipografías
Imagen de caja con galletas en captura de pantalla de la página web "Makr"

Makr

https://makr.com/split-coaster-set

Uno de los detalles más llamativos de esta página es su sencillez y el fondo blanco sin casi ninguna división o marca, pero que aun así logra verse organizado por el aire y espacio entre sus elementos.

Además, como parte de su minimalismo, la página aparece en una ventana sencilla al extremo superior derecho sin cubrir la pantalla completa, lo que lo vuelve atractivo y mucho más sutil.

Que podemos destacar de esta página

  • Sencillez y limpieza en el diseño
  • Mucha organización en sus elementos a pesar de que no hay muchas divisiones o jerarquizaciones
  • La página aparece como una sencilla ventana en un extremo

En WebHeroe siempre estamos dispuestos a aportarte valor, por eso escribimos artículos como el de Cómo aprender WordPress desde cero. También te damos nuestra sincera opinión, como por ejemplo si merece la pena alquilar una página web, para que tengas todos los datos y puedas tener la información que necesitas. ¡Y también te ofrecemos el servicio de alquiler de página web!

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com