Case 012Diseño de app móvil
ShaktiGrid
Pantallas de celular para explorar un portafolio de activos de energía renovable. El trabajo descansa en dos tipos de pantalla: una lista de tarjetas de sitios y una página de detalle que presenta los términos de cada activo en una tabla simple.
- Mi papel
- Diseño de interfaz
- Estado del proyecto
- Diseño de interfaz · archivo de Figma
01
Mi contribución
ShaktiGrid muestra un portafolio de activos de energía renovable en el celular. Diseñé dos tipos de pantalla, una lista y una página de detalle, así que este es un caso pequeño sobre cómo pasar de una a otra.
Todos los activos, cifras y términos en pantalla son datos de ejemplo.
02
De la tarjeta de un sitio a sus términos
La lista abre con un título en serif y luego un selector Active y Complete sobre un conteo de lo que está a la vista. Cada tarjeta dedica la mayor parte de su área a una ilustración del sitio, con el nombre, la ubicación y una sola etiqueta debajo, para que el lugar se lea antes que los datos.
La página de detalle mantiene el nombre y la ubicación arriba y pasa los términos a una tabla: tecnología, MW de proyectos, ubicación, plazo de la inversión y tipo de activo. Una etiqueta y un valor por fila hacen que se lea rápido, y una fila de pestañas arriba se extiende más allá del borde de la pantalla hacia los otros temas.
03
Dos encabezados, una estructura
Las dos pantallas existen en dos versiones: un encabezado blanco con el logotipo en azul, o azul sólido que sube hasta la barra de estado. Todo lo que está debajo del encabezado se mantiene igual, con títulos en serif para lo que es el activo y una sans simple para sus detalles. Dos botones flotantes, uno de accesibilidad y otro de chat, quedan abajo en la pantalla en ambas versiones.