YANDiseño de app móvil
ShaktiGrid. Activos de energía renovable, una tarjeta a la vez
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
Pantallas del archivo de diseño original en Figma, con datos de ejemplo.
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.
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.
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.
