Diseño de app de tienda de moda: rediseño de la pantalla de inicio de una tienda de ropa, antes y después

Una app de tienda de moda tiene una sola tarea en su pantalla de inicio: que la gente quiera la ropa. El primer borrador de abajo pone el descuento primero. Un rótulo rojo cruza la parte superior, seis enlaces subrayados van debajo, y cada tile de producto apila una etiqueta, estrellas, dos precios, puntos de color y un botón bajo una foto minúscula.

La corrección mantiene todas las funciones y deja que la ropa lleve la oferta. El rótulo se convierte en una foto denim a sangre con la oferta en dos líneas debajo, la cabecera se vuelve limpia, y cada tile recibe una foto grande 3:4 con un solo precio.

La pantalla completa, antes y después

Borrador junior

Corregido

A la izquierda, todo grita al mismo volumen. El rótulo es rojo, las etiquetas son rojas, los precios son rojos y los botones son negros, así que el ojo no tiene dónde empezar, y la ropa es lo más pequeño de la pantalla.

A la derecha, el orden es claro: la marca, adónde ir, la oferta única, luego los productos. Las fotos son más grandes, hay menos texto y el rojo se reserva para una palabra, Sale.

Qué cambió, medido

Corrección 1: vende la ropa, no el descuento

Antes

Después

Una barra roja fina de ancho completo con mayúsculas blancas que dice Rebajas de verano, hasta 50 por ciento de descuento, más envío gratis, código SUMMER50, frente a una foto a sangre de una chaqueta denim puesta con The Denim Edit en una serif grande y Hasta 50% de descuento en gris debajo.

Un rótulo es un banner, y la gente ha aprendido a saltarse los banners. Este lleva cuatro mensajes a 10 px: una temporada, un descuento, envío gratis y un código. Ninguno muestra una prenda, así que quien abre una app de moda ve primero una etiqueta de advertencia.

La corrección le da una imagen a la oferta. La foto es el producto sobre una persona, recortada desde debajo de la barbilla para que la chaqueta llene el encuadre, sin radio ni degradado para que corra de borde a borde. Debajo, dos líneas de texto hacen el trabajo del rótulo: un nombre de colección de 28 px y una línea de 14 px para el descuento. El código y la promesa de envío pasaron a la página tras el hero, donde quien tocó está listo para leer condiciones.

Las cuentas de precios siguen siendo honestas. $178 menos 50% son $89, el mismo precio que en el borrador.

Regla para reutilizar: muestra lo que se vende y nombra la oferta en texto simple debajo. Si la foto necesita un banner para explicarse, elige una foto mejor.

Corrección 2: una cabecera limpia y pestañas que muestran dónde estás

Antes

Después

Una cabecera alineada a la izquierda con un icono de menú, el logotipo OLEA, luego búsqueda, corazón y una bolsa con insignia roja, sobre seis enlaces subrayados, Women, Men, Kids, New, Brands y un Sale rojo, frente a una cabecera con icono de menú a la izquierda, un logotipo OLEA grande centrado y una bolsa con una pequeña insignia oscura, sobre pestañas de texto donde Women es oscura con subrayado, Sale es roja y el resto son grises, saliéndose por el borde derecho.

En el borrador, cuatro iconos y un logotipo se pelean por una fila de 364 px, y los seis enlaces de debajo están todos subrayados. Un subrayado significa "este es el actual", así que seis subrayados no significan nada. No hay estado seleccionado en absoluto.

La corrección hace dos cosas. El logotipo pasa al centro a un tamaño legible, y la cabecera se queda en dos iconos, porque la búsqueda y el corazón ya viven en la barra de pestañas. Después las categorías pierden sus subrayados, y el subrayado vuelve a significar una sola cosa: Women es oscura con una línea, las demás son grises, y Sale es roja porque es la única categoría que no es un departamento. La fila se sale por el borde, lo que le dice a la gente que se desplaza.

Regla para reutilizar: deja que un subrayado signifique "estás aquí" y usa el color una vez, para el elemento que necesita bandera.

Corrección 3: una foto, un precio

Antes

Después

Una fila de tres tiles de producto, cada uno con una foto vertical pequeña de una persona con chaqueta denim, una etiqueta roja de menos 50 por ciento, un corazón, un nombre a 9 px, cinco estrellas doradas con una valoración, un precio rojo junto a un precio tachado, tres puntos de color y un botón negro ADD TO CART, frente a dos tiles más grandes con una foto de la propia chaqueta, un corazón y un más sobre la foto, el nombre, un precio y tres muestras de color.

Un tile del borrador contiene nueve cosas: foto, etiqueta, corazón, nombre, estrellas, valoración, dos precios, puntos y un botón. A 117 px de ancho cada una recibe unos pocos píxeles, y la foto es la parte más pequeña. Las caras llenan el encuadre, así que el producto apenas se ve.

La corrección conserva cuatro: foto, nombre, precio y muestras.

La foto mide 169 x 225, un 3:4 exacto, con esquinas cuadradas, y cada una está recortada a la prenda, así que la textura del denim es la imagen. El corazón se queda en la foto. Add to Cart se convierte en un más en la esquina de la foto, de modo que la función queda a un toque sin una barra negra bajo cada tile. Las estrellas y el segundo precio pasan a la página de producto, donde el comprador ya decidió mirar más de cerca.

Dos fotos por fila en lugar de tres también significa que cada nombre cabe en una línea a 13 px, y la barra de pestañas flota sobre la siguiente fila de tiles para que el scroll nunca choque con una pared.

Regla para reutilizar: un tile en una página de lista responde "me gusta y cuánto cuesta". Todo lo demás va un toque más adentro.

Las correcciones menores

• Cada función sigue al alcance. Add to Cart es el más en cada foto, Filter y Sort están tras el icono de ajustes, la búsqueda es la segunda pestaña, el menú sigue arriba a la izquierda, Brands sigue en la fila de categorías, y los demás productos están más abajo en el scroll.
• Márgenes parejos. El borrador tiene 14 px a la izquierda y 12 a la derecha. La corrección usa 20 a ambos lados y 10 entre bloques.
• Fondo blanco, una sola tinta. El texto negro sobre blanco es el único color de la interfaz. Las fotos aportan el resto.
• Fotos recortadas a la ropa. Cada imagen está sobredimensionada y desplazada dentro de un marco recortado para que la chaqueta lo llene. Hay personas en las fotos, pero la prenda es el sujeto.
• Una barra de pestañas más calmada. Cuatro iconos en una pequeña barra flotante sustituyen a cinco pestañas con etiquetas e iconos rellenos y de contorno mezclados.
• Una escala tipográfica real. El texto va de 13 a 28 px, frente a los 8 a 15 px del borrador.

Audita la pantalla de tu propia tienda

Consigue el archivo de Figma

El archivo gratis incluye el borrador junior, la pantalla corregida y cada parte como componente.

Archivo de Figma gratis

Rediseño de la pantalla de inicio de una tienda de moda, antes y después

Ambas pantallas y cada parte como componente de Figma. Gratis, solo lectura, duplícalo en tus borradores.

Abrir en Figma

FAQ

¿Cómo se debe diseñar la pantalla de inicio de una app de tienda de moda?

Empieza con una foto a sangre del producto y pon la oferta en dos líneas de texto debajo. Sigue con categorías en texto simple, y luego tiles de dos columnas con fotos grandes 3:4, un precio y unas pocas muestras de color bajo cada una.

¿Qué tamaño deben tener las fotos de producto en una app de ropa?

Una proporción vertical 3:4 es el estándar para ropa. Aquí los tiles miden 169 x 225 px en una pantalla de 390 px, dos por fila, con esquinas cuadradas y la foto recortada a la prenda.

¿Debe una app de moda mostrar un banner de rebajas?

Evita un banner que no lleve producto. Una foto con una breve línea de oferta debajo hace el mismo trabajo, y el rojo puede quedarse en una pestaña Sale para que el descuento sea fácil de encontrar sin dominar la pantalla.

¿Cuántos detalles debe mostrar un tile de producto?

Cuatro bastan en una página de lista: foto, nombre, precio y muestras de color. Las valoraciones, el precio anterior y las tallas van en la página de producto, y Add to Cart puede ser un más sobre la foto.

¿Cómo debe verse la navegación por categorías en una app de compras?

Usa pestañas de texto con una subrayada para mostrar la actual, gris para el resto y un único color de acento para Sale. Deja que la fila se salga por el borde de la pantalla para que se vea que se desplaza.

¿Qué debe contener la barra de pestañas de una app de tienda?

Cuatro iconos bastan: tienda, búsqueda, guardados y perfil. La bolsa se queda en la cabecera, donde su contador es visible.

Fuentes

• Ambas pantallas son nuestras, diseñadas y medidas en Figma. La app, OLEA, sus productos y sus precios son inventados. Los precios son coherentes en ambas pantallas: $178 menos 50% son $89, y $118 menos 50% son $59.
• Patrón estudiado: las apps de moda de Zara y SSENSE, con fondo blanco, cabecera limpia, pestañas de texto, un hero a sangre y tiles 3:4 de esquinas cuadradas.
• Fotos de Pexels: el hero de Thomas Nguka, el tile de la chaqueta de Arturo A, y la Bleached Trucker de Kristina Polianskaia. Los iconos son de Phosphor (MIT).
• Publicado por primera vez como carrusel en App Brainy.