Diseño de apps de notas: rediseño de la pantalla de inicio, antes y después

Una app de notas tiene un solo trabajo en su pantalla de inicio: llevarte a la nota que quieres. El primer borrador de abajo tiene todo lo necesario para encontrar una nota, pero pinta doce notas adhesivas en seis colores con texto de 8 px, añade ocho etiquetas en otros ocho colores, te avisa del almacenamiento antes de que leas una palabra y aparca un botón más flotante encima de una nota.

La corrección mantiene todas las funciones y elimina el adorno alrededor de las notas. Las etiquetas de colores pasan a ser chips de carpeta con borde fino, las notas que fijas se convierten en dos tiles blancos, cualquier otra nota es una fila simple, y la búsqueda es un campo gris bajo un título sencillo.

La pantalla completa, antes y después

Borrador junior

Corregido

A la izquierda, todo grita al mismo volumen. Seis colores de notas, ocho colores de etiquetas, un aviso amarillo y un más amarillo compiten entre sí, y las notas mismas son lo más pequeño de la pantalla.

A la derecha, la pantalla se lee en el orden en que piensa una persona: qué es esto, puedo buscar, qué carpeta, qué fijé, qué más hay. Los únicos colores son los que están dentro de las notas.

Qué cambió, medido

Corrección 1: un título simple y un solo campo de búsqueda

Antes

Después

Un diminuto logotipo con serifa sobre Todas las notas (128), un desplegable Fecha de modificación, dos interruptores de vista y un icono de búsqueda, con un aviso amarillo de almacenamiento y un botón ACTUALIZAR AHORA debajo. Frente a un título grande Notas, un menú de tres puntos y un campo de búsqueda gris con la palabra Buscar dentro.

La cabecera del borrador tiene siete controles antes de que veas una sola nota: un menú, un logotipo, un conteo, un orden, dos interruptores de vista y un icono de búsqueda. Luego un aviso te dice que has usado el 85% de tu espacio, con un botón para pagar.

La corrección le da a la pantalla un nombre y una entrada. Notas va a 34 px en negrita. La búsqueda es un campo de ancho completo con 10 px de radio en un gris claro (#F2F2F7), así que parece un campo y nadie tiene que adivinar que un icono es una búsqueda.

El orden y la vista siguen existiendo, tras los tres puntos. El aviso de almacenamiento y Actualizar se mudaron a Perfil, donde la gente va a gestionar su cuenta.

Regla para reutilizar: la parte superior de una pantalla debe nombrarla y ofrecer la entrada principal. Todo lo demás va tras un menú.

Corrección 2: chips de carpeta en lugar de etiquetas de colores

Antes

Después

Ocho diminutas etiquetas rellenas, Trabajo en rojo, Ideas en ámbar, Diario en verde, Personal en azul, Viajes en turquesa, Recetas en naranja, Casa en morado y Libros en rosa, todas apretadas en una línea. Frente a chips en forma de píldora con borde fino que dicen Todas, Trabajo, Ideas, Diario y Viajes, con Todas relleno de negro y el resto saliéndose por el borde derecho.

Ocho etiquetas en ocho colores no se distinguen por color durante mucho tiempo, y a 9 px cuesta tocarlas. Además llenan la línea exactamente, así que la fila parece terminada y no da ninguna pista de que hay más.

La corrección usa píldoras de 32 px con contorno fino. La seleccionada, Todas, va rellena de negro. El resto son simples, y las carpetas después de Viajes entran deslizándose desde el borde derecho. Un chip cortado por el borde de la pantalla le dice al pulgar que puede desplazarse, y nadie necesita una flecha.

Regla para reutilizar: muestra qué elemento está seleccionado con relleno, no con un color distinto para cada uno.

Corrección 3: fija las notas que usas como dos tiles blancos

Antes

Después

Tres notas adhesivas de colores en fila, amarilla, rosa y azul, cada una con un pin diminuto y un icono de más en las esquinas superiores y texto de 8 px. Frente a un encabezado Fijadas con un pin ámbar y dos tiles blancos: un boceto a lápiz de una cabaña con el título Reforma de la cabaña y hace 2 h, y una vista previa de texto de la lista de lanzamiento con su título y 9:12 AM.

En el borrador, una nota fijada se ve exactamente igual que cualquier otra, salvo por un icono de pin de 11 px. Las dos primeras notas adhesivas son las mismas notas que están fijadas en la versión corregida. El pin no cambia cómo se las trata, así que no cambia nada de lo fácil que es encontrarlas.

La corrección da a las notas fijadas su propia sección y su propia forma. Dos tiles blancos de 169 px con 12 px de radio y un borde fino van bajo un encabezado Fijadas. La nota de la cabaña muestra su boceto, la lista de lanzamiento muestra una vista previa de texto, y cada una lleva debajo un título semibold de 14 pt y una fecha de 12 pt. Fijar ahora cambia lo que ves, y esa es la razón para fijar.

Regla para reutilizar: si un estado importa, dale un lugar en la pantalla. Un icono pequeño en una tarjeta idéntica no es un lugar.

Corrección 4: cada otra nota es una fila simple

Antes

Después

Dos filas de notas adhesivas de colores, verde, naranja, morado, amarillo, rosa y azul, cada una llena de texto diminuto y una fecha de Editada abajo. Frente a cuatro filas simples sobre blanco: Lisboa en mayo, Notas de masa madre, Ideas de libros y Páginas matutinas, cada una con un título de 16 pt, una fecha y una línea de su texto debajo, separadas por líneas finas.

Una nota adhesiva muestra la nota completa, así que lo que obtienes son unas pocas líneas de texto de 8 px. No se puede leer ni escanear, y llenas una pantalla entera con doce de ellas. Los seis colores no significan nada, así que no se aprende nada de ellos.

La corrección es una lista. Cada nota es un título a 16 pt, una fecha y una línea de su texto a 14 pt que termina en puntos suspensivos. Las filas miden 57 px de alto con líneas finas entre ellas, así que caben unas ocho bajo los tiles fijados. Puedes leer todos los títulos de un vistazo y abrir la nota correcta por su primera línea.

Regla para reutilizar: una lista sirve para encontrar cosas, una tarjeta sirve para mirar una sola cosa. Elige la que encaje con el trabajo.

Corrección 5: la barra de pestañas y el botón de crear

Antes

Después

La parte inferior del borrador: un botón redondo amarillo con un más sobre la última nota, encima de una barra de pestañas plana con cinco pestañas con etiqueta, Notas, Diario, Tareas, Etiquetas y Perfil, con iconos rellenos y de contorno mezclados. Frente a una cápsula flotante con cuatro iconos, uno seleccionado, con las notas pasando por debajo, y un botón redondo ámbar de crear con un lápiz a su lado.

El borrador pone un más flotante sobre la última nota, así que tapa texto. Su barra de pestañas tiene cinco pestañas con etiquetas, y el icono de Notas va relleno mientras el resto son de contorno.

La corrección crea dos controles con dos trabajos. Una cápsula de 52 px solo con iconos contiene cuatro pestañas, en un único estilo de icono, y un botón ámbar de crear de 52 px con un lápiz va a su lado. Las notas continúan por debajo de ambos, así que la pantalla se siente como una sola lista larga en lugar de una lista cortada por una barra. La pestaña Etiquetas desapareció porque los chips de carpeta hacen su trabajo.

Regla para reutilizar: pon el botón de "crear algo nuevo" donde está el pulgar, y dale su propia forma y color para que no se confunda con navegación.

Las correcciones menores

• Se mantienen todas las funciones. La búsqueda es el campo bajo el título. El orden por fecha de modificación y los interruptores de cuadrícula y lista están tras los puntos. Todas las notas (128) pasó a ser la carpeta Todas. El botón de más está dentro de cada nota. El aviso de almacenamiento se mudó a Perfil.
• Un solo margen. El borrador tiene 14 px a la izquierda y 12 px a la derecha. La pantalla corregida usa 20 en ambos lados, con 10 px entre bloques.
• Un solo acento. El ámbar (#F5B301) se usa solo en el pin y en el botón de crear. Todo lo demás es negro, gris y blanco.
• Una escala tipográfica legible. El borrador va de 8 a 14 px. La pantalla corregida empieza en 12 px para las fechas y llega a 34 px para el título.
• Contenido real. El tile del boceto muestra un dibujo auténtico en lugar de una caja de color, así que la sección de fijadas muestra de qué trata la nota antes de abrirla.
• Sin logotipo. El borrador tiene un logotipo con serifa, Margin, en la cabecera. La pantalla corregida no tiene ninguno, porque el título de la pantalla es la cabecera en Apple Notes.

Audita tu propia pantalla de notas

Consigue el archivo de Figma

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

Archivo de Figma gratis

Rediseño de app de notas, antes y después

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

Abrir en Figma

FAQ

¿Cómo debe diseñarse la pantalla de inicio de una app de notas?

Empieza con un título simple y un campo de búsqueda, luego chips de carpeta, una sección corta de Fijadas y una lista de notas con un título y una línea cada una. Mantén los avisos y las ventas fuera del camino para que las notas sean lo más llamativo de la pantalla.

¿Una app de notas debe usar cuadrícula o lista?

Una lista para encontrar notas, porque los títulos y una línea de texto se leen de un vistazo. Una cuadrícula de tarjetas completas solo funciona si cada tarjeta es lo bastante grande para leerse, y a 117 px de ancho el texto cae a 8 px.

¿Cuántos colores debe usar una app de notas?

Un acento. Apple Notes usa un solo ámbar para su pin y su botón de crear, y mantiene todo lo demás neutro, así que el color lo ponen las notas.

¿Dónde debe ir el aviso de almacenamiento en una app de notas?

En la pantalla de Perfil o de ajustes, o como un aviso pequeño solo cuando el usuario está cerca del límite. Un aviso sobre la primera nota hace que cada visita empiece con un mensaje de ventas.

¿Cómo deben verse las notas fijadas en una app de notas?

Como su propia sección bajo un encabezado Fijadas, mostradas como dos tiles con una vista previa, un título y una fecha. Un icono de pin en una tarjeta idéntica no hace que una nota sea más fácil de encontrar.

Fuentes

• Ambas pantallas son nuestras, diseñadas y medidas en Figma. La app, Margin, y todos sus datos son inventados. Las notas coinciden en ambas pantallas: los dos tiles fijados son las dos primeras notas adhesivas del borrador, y las filas son las siguientes notas adhesivas con los mismos títulos, fechas y primeras líneas.
• Patrón estudiado: Apple Notes en iPhone.
• Foto: un boceto a lápiz de Sofya Borboris en Pexels, enderezada, recortada al dibujo y puesta sobre blanco. Sin IA.
• Los iconos son de Phosphor (MIT). La barra de estado está dibujada a partir de una captura de pantalla medida de un iPhone. El logotipo del borrador es Libre Caslon Display Regular.
• Publicado por primera vez como carrusel en App Brainy.