Case 012Design de app mobile
ShaktiGrid
Telas mobile para navegar por um portfólio de ativos de energia renovável. Dois tipos de tela concentram o trabalho: uma lista de cards de locais e uma página de detalhes que mostra os termos de cada ativo em uma tabela simples.
- Meu papel
- Design de interface
- Status do projeto
- Design de interface · Acervo do Figma
01
Minha contribuição
O ShaktiGrid mostra um portfólio de ativos de energia renovável no celular. Desenhei dois tipos de tela, uma lista e uma página de detalhes, então este é um case pequeno sobre o caminho de uma até a outra.
Todos os ativos, números e termos na tela são dados de exemplo.
02
Do card do local aos termos
A lista abre com um título serifado e, em seguida, um switch Active e Complete acima da contagem do que está na tela. Cada card dedica a maior parte da área a uma ilustração do local, com nome, localização e uma única tag logo abaixo, então a pessoa vê o lugar antes dos dados.
A página de detalhes mantém o nome e a localização no topo e passa os termos para uma tabela: tecnologia, MW dos projetos, localização, prazo do investimento e tipo de ativo. Um rótulo e um valor por linha deixam a leitura rápida, e a fileira de abas acima passa da borda da tela e leva aos outros tópicos.
03
Dois cabeçalhos, uma estrutura
As duas telas existem em duas versões: cabeçalho branco com o logotipo azul, ou um azul sólido que sobe até a barra de status. Tudo abaixo do cabeçalho continua igual, com títulos serifados para dizer o que é o ativo e uma sans simples para os detalhes. Dois botões flutuantes, um de acessibilidade e um de chat, ficam na parte de baixo da tela nas duas versões.