Diseño de apps de recetas: rediseño de una pantalla de inicio, antes y después
Una pantalla de inicio de app de recetas hecha por un junior, con un buscador que enumera cuatro cosas, seis colores de categoría, mayúsculas blancas sobre una foto y tres iconos en cada fila, y la misma pantalla corregida. Cada cambio lado a lado y el archivo de Figma gratis.
Una app de recetas parte del mejor activo que puede tener una pantalla: comida que se ve bien. El primer borrador de abajo tiene recetas reales y buenas fotos, y luego las ahoga con un buscador que enumera cuatro cosas, un arcoíris de categorías, mayúsculas pequeñas sobre la foto principal y tres iconos en cada fila. El arreglo conserva todo el contenido y le da espacio a la comida.
La pantalla completa, antes y después
Borrador junior
Corregido
La pantalla de la izquierda tiene mucho que ofrecer y te lo cuenta todo a la vez. En la derecha, las mismas recetas llegan en el orden en que las busca un cocinero: encontrar, filtrar, elegir y después explorar.
Cuenta lo que una persona tiene que leer antes de elegir la cena. En el borrador: un saludo con subtítulo, un buscador, un botón de filtro, una campana, chips de categoría en seis colores, un título sobre una foto, una línea de cinco datos en mayúsculas, dos botones sobre la foto y luego tres iconos en cada una de cuatro filas. La pantalla corregida pide menos en cada paso, y los números lo demuestran.
| Borrador junior | Corregido | |
|---|---|---|
| Colores de categoría | 6 | 1, en el chip seleccionado |
| Cosas que enumera el placeholder del buscador | 4 | 2 |
| Iconos en cada fila de la lista | 3 | 2 |
| Iconos en la foto principal | 2 | 1 |
| Texto sobre la foto principal | título y 5 datos | ninguno |
| Pestañas | 5 | 4 |
| Margen lateral | 14 px a la izquierda, 12 px a la derecha | 20 px en ambos lados |
| Tamaños de texto | 8 a 18 px | 11 a 22 pt |
Arreglo 1: que el buscador diga lo que encuentra
Antes
Después
Un placeholder que enumera cuatro cosas y se queda sin espacio, frente a dos cosas y un filtro.
El placeholder del borrador es "Buscar recetas, ingredientes, cocinas, ch...", y se corta a mitad de la cuarta palabra. Un placeholder es la única frase que tiene un buscador, así que debería decir lo que hace la caja, y debería caber. La lista del borrador no cabe, y una pista cortada parece un error.
El arreglo nombra las dos cosas que la gente realmente escribe: recetas o ingredientes. Todo lo demás, como la cocina o la dieta, es para lo que sirve el botón de filtro de al lado.
El botón de filtro también pasó de un cuadrado terracota relleno a uno blanco. Un botón relleno es lo más ruidoso de la fila, y era el filtro, no la búsqueda. La campana salió de esta fila y subió al saludo, así que la fila es un buscador y un botón.
Arreglo 2: un solo estilo para todas las categorías
Antes
Después
Cinco categorías en cinco colores con un icono cada una, frente a un solo estilo y un chip relleno.
Cuando cada categoría tiene su propio color, los colores dejan de significar nada. El desayuno es melocotón, el almuerzo verde, la cena morada. Nada de eso le dice a un cocinero cuál está activa, y el borrador no tiene ningún estado seleccionado.
En el arreglo todos los chips son blancos y simples, y el seleccionado, "Todas", va relleno en el terracota de la marca. Ahora el color transmite un solo dato: qué está activo.
Los chips también son más grandes, así que cada uno es más fácil de tocar, y la fila se difumina en el borde derecho donde se desplaza. En el borrador la fila simplemente se corta en el borde de la pantalla, con "Vegano" partido por la mitad. Un difuminado dice "hay más, desliza". Un corte seco no dice nada.
Arreglo 3: los datos van bajo la foto
Antes
Después
Un título y cinco datos en mayúsculas sobre un plato claro, frente a un título y tres datos con iconos en la tarjeta de debajo.
El borrador pone un título de 15 px y una línea de mayúsculas blancas de 9 px sobre un plato claro y una mesa clara. El plato es todo el sentido de la foto, y el texto se sienta encima en el único color que desaparece contra él. La línea lleva los datos que un cocinero necesita para decidir: tiempo, dificultad y raciones. Son lo más difícil de leer de la foto.
El arreglo baja el texto a una tarjeta bajo la foto, en letra oscura. Los tres datos que deciden si se cocina esta noche conservan su sitio, cada uno con un icono: un reloj para 30 min, un gráfico de barras para Fácil y dos personas para 4 raciones. Uno aprende los iconos una vez y después lee la fila de un vistazo. La tarjeta corregida elimina las calorías y la valoración, que pueden ir en la página de la receta.
Los botones de la foto pasaron de dos, un corazón y compartir, a uno solo de guardar. Esa es la acción que un cocinero quiere de una tarjeta de receta, porque guardar es como una receta se cocina más tarde.
Arreglo 4: una fila es una receta, un tiempo y un nivel
Antes
Después
Cuatro filas con crédito del chef y tres iconos cada una, frente a tres filas con tiempo, nivel y dos iconos discretos.
Cada fila del borrador lleva una miniatura, un nombre, una línea de tiempo, dificultad y "por el chef Anna", y tres iconos: un corazón, un marcador y compartir. Un corazón y un marcador son dos maneras de decir "me gusta", y una lista de cuatro filas imprime esa elección doce veces.
En el arreglo cada fila tiene una foto más grande, el nombre y una línea de tiempo y dificultad. A la derecha hay dos iconos, compartir y guardar, en un gris claro que no estorba hasta que los quieres. La primera receta muestra cómo es el estado guardado: el marcador se rellena con el terracota de la marca, el mismo color que la categoría seleccionada. El título "Recetas populares" se acorta a "Populares", porque la app ya trata de recetas.
La lista corregida muestra tres recetas en lugar de cuatro, así que la tarjeta tiene aire sobre la barra de pestañas.
Los arreglos menores
- Cuatro pestañas, no cinco. Inicio, Buscar, Guardados y Perfil reemplazan a Inicio, Buscar, Guardados, Planificador y Perfil.
- 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 14 px entre bloques.
- Un saludo más corto. "¡Hola Maya! ¿Qué te gustaría cocinar hoy?" pasó a "¿Qué se cocina, Maya?".
- Un solo color de marca. El terracota,
#C8553D, marca el chip seleccionado, el marcador guardado, la pestaña activa y las etiquetas pequeñas. Nada más lleva color. - Una escala tipográfica real. El texto pasó de 8 a 18 px a los tamaños de iOS de 11 a 22 pt.
Audita tu propia app de recetas
| Pregunta | Por qué importa |
|---|---|
| ¿El placeholder del buscador cabe y dice lo que encuentra? | Una pista cortada parece un fallo |
| ¿Cada categoría tiene un color distinto? | El color debe mostrar el estado, no la variedad |
| ¿Hay texto sobre una foto de comida? | Las fotos de comida son claras y el texto blanco desaparece |
| ¿El tiempo, la dificultad y las raciones van en una fila con iconos? | Deciden si esta noche es la noche |
| ¿Cada fila de la lista lleva más de dos acciones? | Los iconos repetidos son ruido |
| ¿Un elemento seleccionado va relleno y uno no seleccionado simple? | El usuario debe ver qué está activo |
Consigue el archivo de Figma
El archivo gratis tiene ambas pantallas como componentes, cada arreglo como un par de antes y después, las variables de color y los estilos de texto de iOS.
Archivo de Figma gratis
Pantalla de inicio de app de recetas, antes y después
Ambas pantallas y cada parte corregida como componentes de Figma. Gratis, solo lectura, duplícalo en tus borradores.
FAQ
¿Qué debe mostrar la pantalla de inicio de una app de recetas?
Un buscador que diga lo que encuentra, una fila de categorías, una receta destacada con su tiempo, dificultad y raciones, y una lista corta de recetas populares. Las calorías, las valoraciones y los créditos del chef pueden vivir en la página de la receta.
¿Qué debe decir el buscador de una app de recetas?
Di lo que encuentra la caja, con las menos palabras que quepan: "Buscar recetas o ingredientes". Una lista larga de todo lo que podría encontrar se corta, y los extras pertenecen a un filtro.
¿Cómo deben verse los chips de categoría en una app de recetas?
Un solo estilo para todos, con el chip seleccionado relleno en el color de la marca. Deja que la fila se desplace y se difumine en el borde para que se vea que hay más.
¿Dónde deben ir el tiempo y la dificultad de una receta?
Bajo la foto, en una fila con un icono pequeño cada uno: un reloj para el tiempo, un nivel para la dificultad y personas para las raciones. El texto sobre una foto de comida es difícil de leer y esconde el plato.
¿Cuántos iconos debe tener la fila de una lista de recetas?
Dos o menos. Guardar y compartir bastan, y un gris discreto evita que compitan con el plato.
Fuentes
- Ambas pantallas son nuestras, diseñadas y medidas en Figma. El usuario, los chefs y la lista de recetas son inventados para el ejercicio.
- Fotos vía Pexels de Tamra Creatives Agency, Willians Huerta, Kei Scampa, Ana Palade, adrian vieriu y Surendra Shrestha.
- Apple Human Interface Guidelines: Typography, para los tamaños de texto de iOS usados en la pantalla corregida.
- W3C: Web Content Accessibility Guidelines 2.2, Contrast (Minimum), para el texto sobre imágenes y fondos.
- 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
