Design de app mobile

ShaktiGrid. Ativos de energia renovável, um card de cada vez

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

Capa de apresentação do ShaktiGrid, do arquivo de design original. — Capa de apresentação do arquivo original.

Telas do arquivo de design original no Figma, com dados de exemplo.

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.

Gravação do protótipo no Figma. A página de um projeto, o menu e as abas de seção que percorrem a página.

Ativos: cards dos locais com um switch Active e Complete. Dados de exemplo.

Lista de ativos com o título Explore all projects in our portfolio, um switch Active e Complete, a contagem de 15 de 150 ativos e um card com uma ilustração grande de fileiras de painéis solares. — Ativos: cards dos locais com um switch Active e Complete. Dados de exemplo.

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.

Detalhes do projeto: os termos do ativo em uma tabela simples. Dados de exemplo.

Página de detalhes de uma usina solar em Telangana, na Índia, com a tag Preferred Equity, uma fileira de abas, uma tabela de visão geral com cinco termos e a ilustração do local abaixo. — Detalhes do projeto: os termos do ativo em uma tabela simples. Dados de exemplo.

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.

Versão do cabeçalho: azul sólido até a barra de status, com a mesma estrutura.

A mesma página de detalhes com um cabeçalho azul sólido que sobe até a barra de status e o logotipo em branco. — Versão do cabeçalho: azul sólido até a barra de status, com a mesma estrutura.