YANDiseño de app web y panel
Manaus Mais Humana. Un panel de donaciones que mantiene la meta a la vista
Un panel y un inicio de sesión en portugués para la organización sin fines de lucro Manaus Mais Humana, organizados en torno a donaciones, metas y barrios. Todas las cifras en las pantallas son valores de ejemplo.
- Mi papel
- Diseño de interfaz
- Estado del proyecto
- Diseño de interfaz · archivo de Figma
Pantallas de los archivos de diseño originales en Figma. Todas las cifras son valores de ejemplo.
Mi contribución
Manaus Mais Humana es un panel web en portugués para una organización sin fines de lucro, con inicio de sesión, una pantalla de inicio para donaciones y metas, y una pequeña guía visual.
Este caso muestra cómo están organizadas las pantallas. Los montos, los conteos y las fechas que aparecen en ellas son valores de ejemplo, no resultados.
Una tarjeta cálida se lee primero
La pantalla de inicio abre con una tarjeta amarilla: el monto recaudado, las personas beneficiadas y las canastas de alimentos donadas a la izquierda, un gráfico de dona que compara el monto con la meta en el centro y una pequeña ilustración de casas y una persona a la derecha. Es la única área grande de color cálido de la página, así que se lee antes que todo lo demás.
Las metas siguen en tres barras de progreso simples, con su conteo al final de cada línea, y los gráficos por mes y por barrio continúan abajo. Una columna a la derecha muestra las transacciones como tarjetas con fecha, lugar, nombre y monto, y el verde menta de las barras de progreso vuelve en el botón +ADICIONAR FUNDOS justo debajo.
La entrada y las piezas que hay detrás
El inicio de sesión mantiene una sola columna de campos: correo, contraseña con un interruptor de visibilidad y un enlace para quien olvidó la contraseña. ENTRAR es la acción sólida, la opción de Google viene después de un OU, y crear una cuenta es una última línea de texto. Una fotografía de dos manos, con un tinte que va del amarillo al verde azulado, ocupa la otra mitad con la paleta del panel.
Una guía define las dos tipografías, Muli y Montserrat, junto con los colores y el logo. Una segunda lámina separa los botones, los estados del menú lateral, el ítem de transacción, los gráficos, la barra de progreso, el mapa y la lista, lo que muestra cómo está armada la pantalla de inicio.
