Arraste para explorar. Role ou use a pinça para aproximar. Abra a Ajuda para ver os atalhos de teclado.

Yan
ABERTO A
PROJETOS
Vamos conversar
Yan Fontão Boring view
Todos os trabalhos

Case 047Design de web app e dashboard

ÉOS Energia

Uma plataforma em português para energia solar compartilhada, com uma mesma estrutura de dashboard adaptada para administradores, produtores e consumidores, além do menu mobile do site.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Um painel solar 3D com o sol deslizando pelas células.
Um objeto 3D feito para este mural.

01

Minha contribuição

A ÉOS Energia é uma plataforma em português para usinas solares, com a ideia de energia compartilhada no próprio logo. O mesmo dashboard existe para três perfis: Administrador, Produtor e Consumidor.

O arquivo de design também inclui perfil, documentos, faturas, overlays de gráfico e de contrato, além de formulários de login e pré-cadastro. Os números nestas telas são dados de exemplo.

Uma rolagem pelo design: a landing page, da promessa aos números.
Logo da ÉOS Energia com a assinatura Energia compartilhada em fundo branco, ao lado de fotos em diagonal de painéis solares e céu e de um dashboard do administrador emoldurado.
O dashboard do administrador com a marca ÉOS Energia e seu cenário solar.

02

A mesma estrutura, três pontos de partida

As três visões têm um menu à esquerda, uma visão geral no centro e uma coluna de atualizações à direita. Com essa estrutura fixa, a diferença entre os perfis aparece no que preenche cada área: o filtro do topo é por produtor para o administrador e por usina para os outros dois, e o menu muda conforme o que cada perfil pode fazer.

O administrador tem Usuários em Gerenciar. Produtor e consumidor têm Faturas, além de Contrato e Documentos em Arquivos, então a papelada da conta fica ao lado dos números.

Dashboard do administrador com filtro por produtor, blocos de renda, crédito de CO², produção e consumo, um medidor de ocupação da usina, um gráfico de consumo e produção e uma coluna de atualizações à direita.
A visão do administrador filtra por produtor e inclui a gestão de usuários.

03

O que cada perfil lê primeiro

Para administrador e produtor, o primeiro bloco reúne renda, crédito de CO², produção e consumo ao lado de um medidor de ocupação da usina, e mais abaixo compara consumo e produção. Um bloco amarelo marca o número que se lê primeiro, e os outros ficam claros.

A visão do consumidor troca renda por economia e redução de CO², tira o medidor e inclui uma tabela de usinas com temperatura, produção e uma tag de status, como Em operação ou Em construção. A estrutura continua familiar, mas a pergunta deixa de ser quanto a usina rendeu e passa a ser quanto a conta economizou e como estão as usinas dela.

Dashboard do consumidor com blocos de economia, redução de CO² e consumo, o mesmo gráfico e uma tabela de usinas com tags coloridas de status.
A visão do consumidor mostra a economia e uma tabela de usinas com o status de cada uma.
Dashboard do produtor com os mesmos blocos e o mesmo medidor da visão do administrador, filtro por usina e um menu com Faturas, Contrato e Documentos.
A visão do produtor mantém o layout e adiciona faturas, contrato e documentos ao menu.

04

O site em torno da plataforma

O arquivo também guarda várias versões da landing page. No celular, o menu separa os links principais de um grupo Mais e termina com um botão amarelo, Falar com um consultor, e um link de texto para quem já tem conta.

Menu branco no celular com o logo da ÉOS Energia, um ícone de fechar, três links principais, um grupo Mais com cinco links, um botão amarelo de consultor e um link de texto.
No celular, o menu do site termina com um botão amarelo para falar com um consultor.
000

Instruções

Yan Fontão
Toque
Abre uma tela
Clique
Abre uma tela
Arrastar
Move pelo mural
Rolagem
Mouse aproxima, trackpad move, pinça aproxima
− +
Afasta até ver o mural inteiro, ou aproxima
Setas
No case: ↑↓ trocam de case, ←→ trocam de mídia. No mural: movem
Espaço
Abre ou volta
Enter
Abre
Esc Backspace
Volta
Home
Volta ao centro, depois à abertura
PgUp PgDn
Canal anterior ou próximo
Tab
Percorre projetos e links
R
Projeto aleatório
0–9
Digite um canal, 1–61
?
Esta página
Atalhos

Música do mural

Arquivos comprimidos e nivelados para a web.

ABERTO A
PROJETOS
Vamos conversar

Nova mensagem para o Yan

Conte quem você é e eu respondo.

000

Sobre o Yan

Oi, eu sou o Yan

Product Designer/ Design Engineer

A maioria dos produtos perde algo entre o design e o código. Os meus não: eu pesquiso o problema, desenho o produto e coloco a interface no ar, então o que você aprova é exatamente o que seus usuários recebem.

  • 2018início em software
  • UI + codedesign e implementação

Trabalhei com Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

Brasil · Remoto, híbrido ou presencial

Retrato de Yan Fontão sentado, de suéter verde e óculos, segurando um microfone.
ABERTO A
PROJETOS
Vamos conversar
ABERTO A
PROJETOS
Vamos conversar
000

canal bloqueado

Sob NDA

Digite o código

Peça o código ao Yan ↗
ABERTO A
PROJETOS
Vamos conversar
YAN FONTÃO Cases completos

Canal 47 Design de web app e dashboard

ÉOS Energia

Uma plataforma em português para energia solar compartilhada, com uma mesma estrutura de dashboard adaptada para administradores, produtores e consumidores, além do menu mobile do site.

Meu papel
Fluxos de produto e design de interface
Status do projeto
Design de interface · Acervo do Figma
Um painel solar 3D com o sol deslizando pelas células.
Um objeto 3D feito para este mural.

Um dashboard visto de três lados da energia solar

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

Minha contribuição

A ÉOS Energia é uma plataforma em português para usinas solares, com a ideia de energia compartilhada no próprio logo. O mesmo dashboard existe para três perfis: Administrador, Produtor e Consumidor.

O arquivo de design também inclui perfil, documentos, faturas, overlays de gráfico e de contrato, além de formulários de login e pré-cadastro. Os números nestas telas são dados de exemplo.

Uma rolagem pelo design: a landing page, da promessa aos números.
Logo da ÉOS Energia com a assinatura Energia compartilhada em fundo branco, ao lado de fotos em diagonal de painéis solares e céu e de um dashboard do administrador emoldurado.
O dashboard do administrador com a marca ÉOS Energia e seu cenário solar.

A mesma estrutura, três pontos de partida

As três visões têm um menu à esquerda, uma visão geral no centro e uma coluna de atualizações à direita. Com essa estrutura fixa, a diferença entre os perfis aparece no que preenche cada área: o filtro do topo é por produtor para o administrador e por usina para os outros dois, e o menu muda conforme o que cada perfil pode fazer.

O administrador tem Usuários em Gerenciar. Produtor e consumidor têm Faturas, além de Contrato e Documentos em Arquivos, então a papelada da conta fica ao lado dos números.

Dashboard do administrador com filtro por produtor, blocos de renda, crédito de CO², produção e consumo, um medidor de ocupação da usina, um gráfico de consumo e produção e uma coluna de atualizações à direita.
A visão do administrador filtra por produtor e inclui a gestão de usuários.

O que cada perfil lê primeiro

Para administrador e produtor, o primeiro bloco reúne renda, crédito de CO², produção e consumo ao lado de um medidor de ocupação da usina, e mais abaixo compara consumo e produção. Um bloco amarelo marca o número que se lê primeiro, e os outros ficam claros.

A visão do consumidor troca renda por economia e redução de CO², tira o medidor e inclui uma tabela de usinas com temperatura, produção e uma tag de status, como Em operação ou Em construção. A estrutura continua familiar, mas a pergunta deixa de ser quanto a usina rendeu e passa a ser quanto a conta economizou e como estão as usinas dela.

Dashboard do consumidor com blocos de economia, redução de CO² e consumo, o mesmo gráfico e uma tabela de usinas com tags coloridas de status.
A visão do consumidor mostra a economia e uma tabela de usinas com o status de cada uma.
Dashboard do produtor com os mesmos blocos e o mesmo medidor da visão do administrador, filtro por usina e um menu com Faturas, Contrato e Documentos.
A visão do produtor mantém o layout e adiciona faturas, contrato e documentos ao menu.

O site em torno da plataforma

O arquivo também guarda várias versões da landing page. No celular, o menu separa os links principais de um grupo Mais e termina com um botão amarelo, Falar com um consultor, e um link de texto para quem já tem conta.

Menu branco no celular com o logo da ÉOS Energia, um ícone de fechar, três links principais, um grupo Mais com cinco links, um botão amarelo de consultor e um link de texto.
No celular, o menu do site termina com um botão amarelo para falar com um consultor.