Diseño de app de tienda de plantas: rediseño de la pantalla de inicio de un ecommerce
La pantalla de inicio de una app de plantas hecha por un junior, con cuatro iconos en la cabecera, tres filtros desplegables y siete cosas bajo cada foto, y la misma pantalla arreglada. Cada cambio lado a lado, la razón detrás de cada uno y el archivo gratis de Figma.
Una tienda de plantas tiene resuelta la parte fácil: los productos salen bien en foto. El primer borrador de abajo tiene plantas reales y fotos reales, y luego las entierra bajo una cabecera saturada, tres filtros desplegables, un bloque largo de consejos de cuidado y siete cosas debajo de cada tarjeta. El arreglo mantiene todas las funciones y le da espacio a las plantas.
La pantalla completa, antes y después
Borrador junior
Arreglada
A la izquierda, quien compra tiene que leer una cabecera, una barra de filtros, tres frases de consejos y una pila de detalles de producto antes de ver una planta entera. A la derecha, las primeras plantas aparecen justo después de tres bloques cortos, cada tarjeta es una planta completa con su precio, y el verde se usa para un solo trabajo: lo que se puede tocar.
La oferta se mantiene en ambas pantallas. La Pilea cuesta $24.99 con $31.00 tachado, y la palma de salón $28.00 con $35.00 tachado. La tienda, sus precios y sus reseñas son inventados para el ejercicio; las plantas son reales.
| Borrador junior | Arreglada | |
|---|---|---|
| Iconos de cabecera junto al logo | 4 | 2 |
| Filtros | 3 desplegables y un enlace de orden | 4 chips tocables |
| Consejos de cuidado | 3 frases largas | 3 datos cortos con iconos |
| Cosas bajo la foto de cada tarjeta | 7 | 2, más un botón de añadir |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px izquierda, 12 px derecha | 20 px en ambos lados |
| Tamaños de texto | 8 a 20 px | 11 a 20 pt |
Arreglo 1: logo, búsqueda y carrito, nada más
Antes
Después
Un menú, el logo y tres iconos pequeños, frente al mismo logo con dos botones redondos grandes.
La cabecera del borrador lleva un menú, el logo, búsqueda, un corazón y un carrito. El corazón es una lista de deseos, y la pantalla arreglada le da a esa lista una pestaña, Guardados, así que el corazón ya no tiene que vivir en la cabecera. El carrito conserva su sitio porque es el único control que cualquiera espera encontrar arriba en una tienda, y su insignia muestra cuántas cosas hay dentro.
Los iconos que quedan son más grandes: dos botones de 44 px en lugar de cuatro iconos pequeños. El móvil se sostiene con una mano, y un objetivo más grande es más fácil de acertar. El logo es el mismo en ambas pantallas, y ese es el punto: la cabecera se arregló quitando cosas, no rediseñando la marca.
La insignia pasó de rojo al verde de la marca. Un punto rojo dice que algo va mal o es urgente. Un contador de artículos no es ninguna de las dos cosas.
Arreglo 2: filtros que se ven, no desplegables
Antes
Después
Categoría, Precio y Tamaño como desplegables cerrados más un enlace Ordenar, frente a Interior, Exterior, Suculentas y Apto para mascotas como chips, con Interior seleccionado.
Un desplegable esconde sus opciones. Para usarlo, hay que tocarlo, leer una lista, elegir, y la lista se cierra otra vez. Tres desplegables son tres de esos viajes antes de que cambie una sola planta en pantalla. Además dicen qué tipo de filtro existe, no qué hay dentro.
Los chips muestran las opciones a la vista. Interior, exterior, suculentas y apto para mascotas son las preguntas que de verdad tiene quien compra plantas, así que un toque responde una de ellas, y el chip seleccionado en verde muestra el estado actual. Los cuatro chips caben en la fila de 350 px con 6 px de sobra, así que ninguno se corta y ninguno necesita scroll.
Arreglo 3: una tarjeta que es la planta entera
Antes
Después
Una foto, una insignia, un corazón, dos nombres, un precio, estrellas, un número de reseñas y un botón de ancho completo, frente a una foto, un nombre corto, un precio y un botón redondo.
La tarjeta del borrador apila siete cosas bajo la foto: el nombre latino de la planta, su nombre común, el precio, el precio anterior, las estrellas, el número de reseñas y un botón Añadir al carrito de ancho completo. Sobre la foto misma van una insignia de descuento y un corazón. Todo eso en una tarjeta de medio ancho de pantalla.
El arreglo deja dos líneas y un botón. El nombre es corto ("Pilea", "Calathea") y el precio va debajo, con el precio anterior tachado cuando hay oferta. Un botón redondo de más sustituye a la barra ancha de Añadir al carrito, porque un más en una tarjeta de producto es un patrón que quien compra ya conoce.
Las fotos también cambiaron. Los recortes del borrador cortan las plantas y las macetas no se alinean. El arreglo recorta cada foto para que la planta entera ocupe cerca del 70% de la altura del marco, centrada, con cada maceta en la misma línea. Así una fila de tarjetas se lee como una fila, no como cuatro imágenes distintas.
Arreglo 4: consejos de cuidado como tres datos
Antes
Después
Tres frases de consejos en una caja verde, frente a tres iconos con una etiqueta y una palabra cada uno.
El borrador dice lo correcto, pero quien compra tiene que leer tres frases para encontrarlo. Los tres datos son agua, luz y si la planta es segura para mascotas, y cada uno cabe en una palabra: semanal, indirecta, segura.
El arreglo da a cada dato un icono, una etiqueta pequeña y esa palabra en negrita. La tarjeta entera se lee de un vistazo. Quien busca "¿puedo ponerla cerca de mi gato?" encuentra "Mascotas: Seguro" sin leer.
Los arreglos pequeños
- Cuatro pestañas, no cinco. Inicio, Tienda, Guardados y Perfil. La lista de deseos pasó a ser Guardados, y el carrito se movió de la barra de pestañas a la cabecera.
- Un solo margen. El borrador usaba 14 px a la izquierda y 12 px a la derecha. El arreglo usa 20 px en ambos lados y 12 a 14 px entre bloques.
- Sin insignias sobre las fotos. Las insignias roja -20% y azul NUEVO y el corazón en cada foto desaparecieron. La oferta sigue visible, porque el precio tachado se queda.
- Un solo color de acento. Al verde del borrador se sumaban insignias rojas y azules. El arreglo usa un verde de marca, #1F7A4D, para todo lo tocable.
- Una escala tipográfica de verdad. El texto pasó de 8 a 20 px a los tamaños de iOS de 11 a 20 pt.
- Un título de sección más corto. "Plantas populares" pasó a "Populares", porque la pantalla ya trata de plantas.
Audita tu propia app de tienda
| Pregunta | Por qué importa |
|---|---|
| ¿Se puede reducir la cabecera a logo, búsqueda y carrito? | Cada icono extra compite con el que la gente sí usa |
| ¿Algún desplegable puede ser chips? | Las opciones visibles no necesitan un toque extra |
| ¿Cada tarjeta de producto muestra un precio y una acción? | Siete detalles convierten una tarjeta en un formulario |
| ¿Las fotos muestran el producto entero a la misma escala? | Los recortes cortados hacen que una cuadrícula se vea despareja |
| ¿Algún párrafo de consejos puede ser tres datos cortos? | Quien compra escanea, no lee |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada arreglo como pareja de antes y después, las variables de color y los estilos de texto de iOS.
Archivo de Figma gratis
Pantalla de inicio de tienda de plantas, antes y después
Ambas pantallas y cada parte arreglada como componentes de Figma. Gratis, solo lectura, duplícalo a tus borradores.
FAQ
¿Qué debe mostrar primero la pantalla de inicio de una app de ecommerce?
Una cabecera corta con el logo, la búsqueda y el carrito, luego los filtros como chips y los primeros productos. Mantén pequeño todo lo que no sea un producto, como consejos o banners.
¿Los filtros de una app de tienda deben ser desplegables o chips?
Chips, para los pocos filtros que más se usan. Los chips muestran las opciones sin un toque, y el seleccionado muestra el estado actual. Deja los desplegables o una hoja de filtros para listas largas como precio y tamaño.
¿Qué debe mostrar una tarjeta de producto en una app de compras?
Una foto del producto entero, un nombre, un precio y un botón de añadir. Detalles como las valoraciones y el nombre largo pueden ir en la página del producto.
¿Cómo se muestran las instrucciones de cuidado en una app?
Como unos pocos datos cortos con iconos, una palabra cada uno, como Agua: Semanal. Las frases largas pueden vivir un toque más adentro.
¿Cuántas pestañas debe tener una app de compras?
Cuatro o cinco. Reúne los duplicados en los lugares donde la gente ya mira, como el carrito en la cabecera y la lista de deseos en una pestaña Guardados.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. La tienda, sus precios y sus reseñas son inventados; los nombres de las plantas son reales.
- Fotos de Pexels por Kulbir, Gül Işık y Kaboompics.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla arreglada.
- Publicado por primera vez como carrusel en App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
