Escola Prime - Sistema de dashboards
Período: Setembro de 2023 até Outubro de 2023.
Função: UX/UI Designer.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Wireframe
Após terminar de organizar o style guide, passei para a próxima etapa de idealizar o funcionamento do sistema da escola. Essa etapa foi muito importante pois nela trabalhei os fluxos dos usuários, telas, formulários e dashboards.
Alta fidelidade
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia, espaçamentos (auto-layout), componentes e documentação do design systems para ajudar os desenvolvedores que estavam nesse projeto.
Objetivo do projeto
O projeto tem como objetivo a gestão de cadastros de professores, coordenadores e alunos, além de possibilitar a coleta de informações sobre os projetos de devidas escolas, a frequência dos alunos e as visitas pedagógicas por meio do sistema.
Painel semântico
Para compreender melhor como o sistema iria funcionar, realizei uma busca de referências utilizando o behance; landbook e lapa ninja. Essa etapa me ajudou bastante a compreender melhor como os padrões de um sistema de dashboard funcionam.
Style guide
Design systems
Tipografia
A fonte Noto Sans foi escolhida para ser a principal tipografia do sistema da Escola Prime pois ela é simples, de fácil entendimento e séria, o dashboard precisava de uma tipografia que não complicasse a usabilidade dos usuários.
Noto Sans
Títulos, subtítulos, corpo, botões e legendas.
Peso regular
Título 02
Tamanho
24 px
0 px
Espaço
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Legenda
Tamanho
12 px
Espaço
0,4 px
Peso médio
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Botão
Tamanho
14 px
Espaço
1,25 px
Peso semibold
Título 01
Tamanho
34 px
Espaço
0,25 px
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
0,5 px
Espaço
Inputs de senha
********
Senha
Senha
hd\)~Y7B
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
wkcLBrof
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
|
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Pop-ups
O dashboard foi feito com sucesso!
Não foi possível realizar a exportação do seu dashboard, tente novamente!
Tem certeza que deseja excluir esse aluno?
Sim
Não
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
Suas notificações
Botões
Entrar
Entrar
Salvar alterações
Salvar alterações
Gerar relatório
Coordenadores
Educadores sociais
Gerar relatório
Resoluções
Esse projeto foi realizador pois foi meu primeiro design de dashboards. Aproveitei a oportunidade para aprimorar minhas habilidade com o Figma utilizando técnicas mais avançandas para agilizar o trabalho como: componentes; variáveis e auto-layouts.
As telas do projeto foram entregues em modo responsivo de celular e desktop, mais de 50 telas em alta fidelidade e documentação completa de design systems para a empresa.
Cores principais
A Escola Prime já trabalhava com as cores azul e cinza como a sua identidade visual, nessa etapa do projeto meu principal foco foi de realizar as variáveis das cores e adicionar cores de suporte para a interface.
Cor primária
#5C6189
Cor secundária
#D9D9D9
Preto
#404040
Verde
#439841
Verde
#AB2727
Escola Prime - Sistema de dashboards
Objetivo do projeto
O projeto tem como objetivo a gestão de cadastros de professores, coordenadores e alunos, além de possibilitar a coleta de informações sobre os projetos de devidas escolas, a frequência dos alunos e as visitas pedagógicas por meio do sistema.
O projeto tem como objetivo a gestão de cadastro de professores, coordenadores e alunos, além de possibilitar a coleta de informações sobre os projetos de devidas escolas, a frequência dos alunos e as visitas pedagógicas por meio do sistema.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Wireframes
Após terminar de organizar o style guide, passei para a próxima etapa de idealizar o funcionamento do sistema da escola. Essa etapa foi muito importante pois nela trabalhei os fluxos dos usuários, telas, formulários e dashboards.
Período: Setembro de 2023 até Outubro de 2023.
Função: UX/UI Designer.
Style guide
Cor primária
#5C6189
Verde
#439841
Vermelho
#AB2727
Cor secundária
#D9D9D9
Preto
#404040
Cores
A Escola Prime já trabalhava com as cores azul e cinza como a sua identidade visual, nessa etapa do projeto meu principal foco foi de realizar as variáveis das cores e adicionar cores de suporte para a interface.
Tipografia
A fonte Noto Sans foi escolhida para ser a principal tipografia do sistema da Escola Prime pois ela é simples, de fácil entendimento e séria, o dashboard precisava de uma tipografia que não complicasse a usabilidade dos usuários.
Noto Sans
Títulos, subtítulos, corpo, botões e legendas.
Peso regular
Título 02
Tamanho
24 px
0 px
Espaço
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Legenda
Tamanho
12 px
Espaço
0,4 px
Peso médio
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Botão
Tamanho
14 px
Espaço
1,25 px
Peso semibold
Título 01
Tamanho
34 px
Espaço
0,25 px
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
0,5 px
Espaço
Design systems
Inputs de senha
********
Senha
|
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
Senha
hd\)~Y7B
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
wkcLBrof
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Pop-ups
O dashboard foi feito com sucesso!
Não foi possível realizar a exportação do seu dashboard, tente novamente!
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
Suas notificações
Tem certeza que deseja excluir esse aluno?
Sim
Não
Não
Botões
Entrar
Entrar
Salvar alterações
Salvar alterações
Gerar relatório
Coordenadores
Educadores sociais
Gerar relatório
Painel semântico
Para compreender melhor como o sistema iria funcionar, realizei uma busca de referências utilizando o behance; landbook e lapa ninja. Essa etapa me ajudou bastante a compreender melhor como os padrões de um sistema de dashboard funcionam.
Resoluções
Esse projeto foi realizador de se trabalhar pois foi meu primeiro design de dashboards. Aproveitei a oportunidade para aprimorar minhas habilidade com o Figma utilizando técnicas mais avançandas para agilizar o trabalho como: componentes; variáveis e auto-layouts.
As telas do projeto foram entregues em modo responsivo de celular e desktop, mais de 50 telas em alta fidelidade e documentação completa de design systems para a empresa.
Design systems
Inputs de senha
********
Senha
|
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
Senha
hd\)~Y7B
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Senha
wkcLBrof
A senha deve ter pelo menos 8 caracteres incluindo numerais, letras maiúsculas e minúsculas e caracteres diferentes.
Pop-ups
O dashboard foi feito com sucesso!
Não foi possível realizar a exportação do seu dashboard, tente novamente!
Tem certeza que deseja excluir esse aluno?
Sim
Não
Não
Botões
Entrar
Entrar
Salvar alterações
Salvar alterações
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
Professor Alex cadastrou um aluno.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
há 1 dia.
Suas notificações
Gerar relatório
Coordenadores
Educadores sociais
Gerar relatório
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia, espaçamentos (auto-layout), componentes e documentação do design systems para ajudar os desenvolvedores que estavam nesse projeto.
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia, espaçamentos (auto-layout), componentes e documentação do design systems para ajudar os desenvolvedores que estavam nesse projeto.
Alta fidelidade
Alta fidelidade
Alta fidelidade
A última etapa do projeto consistiu em realizar a alta fidelidade da interface. Nela trabalhei com ajustes de cores, tipografia, espaçamentos (auto-layout), componentes e documentação do design systems para ajudar os desenvolvedores que estavam nesse projeto.
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Style guide
Cores principais
Cor primária
#5C6189
Cor secundária
#D9D9D9
Cor suporte
#9FCE34
Preto
#404040
Verde
#439841
Vermelho
#AB2626
Cores
A Escola Prime já trabalhava com as cores azul e cinza como a sua identidade visual, nessa etapa do projeto meu principal foco foi de realizar as variáveis das cores e adicionar cores de suporte para a interface.
Noto Sans
Títulos, subtítulos, corpo, botões e legendas.
Peso regular
Título 02
Tamanho
24 px
0 px
Espaço
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Legenda
Tamanho
12 px
Espaço
0,4 px
Peso médio
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
Espaço
0,5 px
Corpo 02
Tamanho
14 px
Espaço
0,25 px
Botão
Tamanho
14 px
Espaço
1,25 px
Peso semibold
Título 01
Tamanho
34 px
Espaço
0,25 px
Título 02
Tamanho
24 px
Espaço
0 px
Título 03
Tamanho
20 px
Espaço
0,15 px
Corpo 01
Tamanho
16 px
0,5 px
Espaço
Tipografia
A fonte Noto Sans foi escolhida para ser a principal tipografia do sistema da Escola Prime pois ela é simples, de fácil entendimento e séria, o dashboard precisava de uma tipografia que não complicasse a usabilidade dos usuários.
Alta fidelidade