Escola Prime - Landing Page
Período: Outubro de 2023 até Novembro de 2023.
Função: UX/UI Designer.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Wireframe
Após finalizar a documentação do style guide, a próxima etapa foi de realizar a estrutura da landing page da escola. A arquitetura da escola era simples, com pontos fortes e copy estruturada. Realizei os wireframes em modo responsivo (desktop e mobile) e alinhamento de textos, imagens, vetores e icons com grids.
Style guide
Objetivo do projeto
O projeto tem como objetivo a apresentação das ações da Escola Prime para os educadores, coordenadores e pais de alunos. A Landing Page também é essencial para meio de entrada do sistema de dashboard da escola para os colaboradores.
Para conferir o projeto de sistema de dashboard, é só clicar nesse link: Sistema Escola Prime.
Painel semântico
Para entender melhor como a landing page da Escola Prime deveria funcionar, busquei referências de sites educacionais para ter uma boa base.
Cores principais
A paleta de cores da Escola Prime já havia sido organizada no Projeto de Sistema de Dashboard, então, apenas organizei a documentação do style guide.
Cor primária
#5C6189
Cor secundária
#D9D9D9
Preto
#404040
Verde
#FAFAFA
Tipografia
A fonte Noto Sans já havia sido selecionada para compor o sistema da Escola , apenas adicionei a Noto Serif para ter contraste na interface da landing page e por ser da mesma família da tipografia primária, sendo assim, as duas combinam perfeitamente na interface.
Noto Sans
Corpo, legendas, botões e subtítulos.
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0,5px
Corpo 02
Regular - 14px - 0,25px
Noto Serif
Títulos
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0.5px
Corpo 02
Regular - 14px - 0,25px
Botão
Medium - 14px - 1.25px
Legenda
Regular - 12px - 0,4px
Desktop
Mobile
Mobile
Alta fidelidade
Para finalizar o projeto, a última coisa a ser feita era a alta fidelidade do projeto. Minhas tarefas nessa etapa foram de ajustes de cores; tipografias; imagens e icons. Utilizei o auto-layout do Figma para certificar que meus espaçamentos estavam seguindo um padrão e fiz o mesmo processo na versão mobile.
Desktop
Resoluções
Ao trabalhar nesse projeto busquei por manter a constância de projetos entre a landing page e o sistema de dashboard, não queria que ambas fossem distantes em quesito estético, valores e abordagens.
Foi muito importante trabalhar com a Escola Prime pela segunda vez e ter o comprometimento de realizar a landing page deles.
Escola Prime - Landing Page
Jornada
Período: Outubro de 2023 até Novembro de 2023.
Função: UX/UI Designer.
Style guide
Cores
A paleta de cores da Escola Prime já havia sido organizada no Projeto de Sistema de Dashboard, então, apenas organizei a documentação do style guide.
Cor primária
#5C6189
Cor secundária
#D9D9D9
Preto
#404040
Branco
#FAFAFA
Tipografia
A fonte Noto Sans já havia sido selecionada para compor o sistema da Escola , apenas adicionei a Noto Serif para ter contraste na interface da landing page e por ser da mesma família da tipografia primária, sendo assim, as duas combinam perfeitamente na interface.
Noto Sans
Corpo, legendas, botões e subtítulos.
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0,5px
Corpo 02
Regular - 14px - 0,25px
Noto Serif
Títulos
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0.5px
Corpo 02
Regular - 14px - 0,25px
Botão
Medium - 14px - 1.25px
Legenda
Regular - 12px - 0,4px
Wireframes
Após finalizar a documentação do style guide, a próxima etapa foi de realizar a estrutura da landing page da escola. A arquitetura da escola era simples, com pontos fortes e copy estruturada. Realizei os wireframes em modo responsivo (desktop e mobile) e alinhamento de textos, imagens, vetores e icons com grids.
Desktop
Mobile
Alta fidelidade
Para finalizar o projeto, a última coisa a ser feita era a alta fidelidade do projeto. Minhas tarefas nessa etapa foram de ajustes de cores; tipografias; imagens e icons. Utilizei o auto-layout do Figma para certificar que meus espaçamentos estavam seguindo um padrão e fiz o mesmo processo na versão mobile.
Desktop
Mobile
Painel semântico
Para entender melhor como a landing page da Escola Prime deveria funcionar, busquei referências de sites educacionais para ter uma boa base.
Resoluções
Ao trabalhar nesse projeto busquei por manter a constância de projetos entre a landing page e o sistema de dashboard, não queria que ambas fossem distantes em quesito estético, valores e abordagens.
Foi muito importante trabalhar com a Escola Prime pela segunda vez e ter o comprometimento de realizar a landing page deles.
Jornada
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto
Style guide
Cor primária
#5C6189
Cor secundária
#D9D9D9
Cor suporte
#9FCE34
Cor primária
#404040
Cor primária
#FAFAFA
Cores
A paleta de cores da Escola Prime já havia sido organizada no Projeto de Sistema de Dashboard, então, apenas organizei a documentação do style guide.
Noto Sans
Títulos, subtítulos, corpo, botões e legendas.
Tipografia
A fonte Noto Sans já havia sido selecionada para compor o sistema da Escola , apenas adicionei a Noto Serif para ter contraste na interface da landing page e por ser da mesma família da tipografia primária, sendo assim, as duas combinam perfeitamente na interface.
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0,5px
Corpo 02
Regular - 14px - 0,25px
Noto Serif
Títulos
Título 01
Regular - 24px - 0,25px
Título 02
Medium - 20px - 0,15px
Corpo 01
Regular - 16px - 0.5px
Corpo 02
Regular - 14px - 0,25px
Botão
Medium - 14px - 1.25px
Legenda
Regular - 12px - 0,4px
Mobile
Para entender melhor como a landing page da Escola Prime deveria funcionar, busquei referências de sites educacionais para ter uma boa base.
Objetivo do projeto
O projeto tem como objetivo a apresentação das ações da Escola Prime para os educadores, coordenadores e pais de alunos. A Landing Page também é essencial para meio de entrada do sistema de dashboard da escola para os colaboradores.
Para conferir o projeto de sistema de dashboard: Sistema Escola Prime
Objetivo do projeto
O projeto tem como objetivo a apresentação das ações da Escola Prime para os educadores, coordenadores e pais de alunos. A Landing Page também é essencial para meio de entrada do sistema de dashboard da escola para os colaboradores.
Para conferir o projeto de sistema de dashboard: Sistema Escola Prime
O projeto tem como objetivo a apresentação das ações da Escola Prime para os educadores, coordenadores e pais de alunos. A Landing Page também é essencial para meio de entrada do sistema de dashboard da escola para os colaboradores.
Para conferir o projeto de sistema de dashboard: Sistema Escola Prime
Painel semântico
Análise do projeto
Definição de problema
UX/UIDesign
Entrega de projeto