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 045Design de web app e dashboard

Orka

Um dashboard administrativo em português para equipamentos que enviam leituras de água, com visão geral, lista com filtros e uma tela de detalhes para cada unidade.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Mockup do Orka montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

01

Minha contribuição

Orka é um dashboard administrativo para desktop, em português, para gerenciar equipamentos, quem usa esses equipamentos e as empresas donas deles. As unidades enviam leituras de água como pH, ORP e temperatura.

Três telas sustentam a estrutura: a visão geral, a lista de equipamentos e o detalhe de uma unidade. Todos os valores nelas são dados de exemplo.

Gravado do protótipo no Figma. Da visão geral a um equipamento, relatórios e configurações.
Visão geral do Orka com barra lateral, quatro blocos azuis de totais, gráficos de donut de equipamentos e usuários, uma coluna de notificações e um gráfico de linha de novos equipamentos.
A visão geral mantém totais, distribuição e eventos recentes em uma só tela.

02

Totais primeiro, eventos recentes por perto

A visão geral abre com quatro blocos azuis: equipamentos, equipamentos premium, empresas e usuários. Abaixo, dois gráficos dividem os equipamentos por plano e os usuários por nível de acesso, e um gráfico de linha acompanha os novos equipamentos ao longo do ano.

As notificações têm uma coluna própria, então eventos como um pH perto do limite ou uma unidade sem sinal ficam nesta tela, e não em outra página. Uma versão curta da lista começa no fim da mesma tela.

Lista Equipamentos com abas, filtro e busca, e linhas de EQ-001 a EQ-011 com leituras, status, plano, empresa e alertas.
A cor e os ícones de alerta deixam as exceções visíveis na leitura rápida da lista.
Detalhes da unidade EQ-001 com blocos azuis de leituras, uma faixa de valores do inversor, gráficos de linha, um medidor de pH e um gráfico de volume de água.
Uma unidade: primeiro as leituras atuais, depois como cada uma variou.

03

Da lista a uma unidade

A lista é feita para uma leitura rápida. Abas separam todos os equipamentos, os gratuitos e os premium, e cada linha reúne as últimas leituras, status, plano, empresa e alertas. A temperatura muda de cor conforme o nível e um alerta aparece como um triângulo com contagem, então as exceções se destacam.

A tela de detalhes mantém a ordem da visão geral para uma única unidade: leituras atuais nos blocos grandes, valores do inversor em uma faixa mais clara e depois gráficos de como cada leitura variou, com mínimo e máximo. O medidor de pH marca as faixas como não aceitável, aceitável e desejável, o que transforma um número em um julgamento.

Logo azul grande do Orka ao lado de um notebook escuro com a tela de visão geral, em fundo branco.
Frame de apresentação com o logo do Orka e a tela de visão geral.
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 45 Design de web app e dashboard

Orka

Um dashboard administrativo em português para equipamentos que enviam leituras de água, com visão geral, lista com filtros e uma tela de detalhes para cada unidade.

Meu papel
Design de interface
Status do projeto
Design de interface · Acervo do Figma
Mockup do Orka montado para este mural com telas reais do projeto.
Mockup montado para este mural com telas reais do projeto.

De toda a base de equipamentos a uma única leitura

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

Minha contribuição

Orka é um dashboard administrativo para desktop, em português, para gerenciar equipamentos, quem usa esses equipamentos e as empresas donas deles. As unidades enviam leituras de água como pH, ORP e temperatura.

Três telas sustentam a estrutura: a visão geral, a lista de equipamentos e o detalhe de uma unidade. Todos os valores nelas são dados de exemplo.

Gravado do protótipo no Figma. Da visão geral a um equipamento, relatórios e configurações.
Visão geral do Orka com barra lateral, quatro blocos azuis de totais, gráficos de donut de equipamentos e usuários, uma coluna de notificações e um gráfico de linha de novos equipamentos.
A visão geral mantém totais, distribuição e eventos recentes em uma só tela.

Totais primeiro, eventos recentes por perto

A visão geral abre com quatro blocos azuis: equipamentos, equipamentos premium, empresas e usuários. Abaixo, dois gráficos dividem os equipamentos por plano e os usuários por nível de acesso, e um gráfico de linha acompanha os novos equipamentos ao longo do ano.

As notificações têm uma coluna própria, então eventos como um pH perto do limite ou uma unidade sem sinal ficam nesta tela, e não em outra página. Uma versão curta da lista começa no fim da mesma tela.

Lista Equipamentos com abas, filtro e busca, e linhas de EQ-001 a EQ-011 com leituras, status, plano, empresa e alertas.
A cor e os ícones de alerta deixam as exceções visíveis na leitura rápida da lista.
Detalhes da unidade EQ-001 com blocos azuis de leituras, uma faixa de valores do inversor, gráficos de linha, um medidor de pH e um gráfico de volume de água.
Uma unidade: primeiro as leituras atuais, depois como cada uma variou.

Da lista a uma unidade

A lista é feita para uma leitura rápida. Abas separam todos os equipamentos, os gratuitos e os premium, e cada linha reúne as últimas leituras, status, plano, empresa e alertas. A temperatura muda de cor conforme o nível e um alerta aparece como um triângulo com contagem, então as exceções se destacam.

A tela de detalhes mantém a ordem da visão geral para uma única unidade: leituras atuais nos blocos grandes, valores do inversor em uma faixa mais clara e depois gráficos de como cada leitura variou, com mínimo e máximo. O medidor de pH marca as faixas como não aceitável, aceitável e desejável, o que transforma um número em um julgamento.

Logo azul grande do Orka ao lado de um notebook escuro com a tela de visão geral, em fundo branco.
Frame de apresentação com o logo do Orka e a tela de visão geral.