• Projetos
  • Designer
  • Currículo
  • Contato
  1. Home
  2. UI Boost

UI Boost

  • Introdução
  • Objetivo
  • User Flow
  • Style Guide
  • Inspirações
  • Wireframe
  • Design
  • Prototipação
  • O aprendizado

Introdução

No mundo atual, onde o aprendizado contínuo e acessível é essencial para o crescimento pessoal e profissional, a demanda por ferramentas de estudo eficazes nunca foi tão alta. Com o avanço da tecnologia, aplicativos de estudo se tornaram um meio popular para estudantes e profissionais se capacitarem, oferecendo uma maneira conveniente de adquirir novos conhecimentos e habilidades.

Neste contexto, o APP UI Boost surge como uma solução inovadora, projetada para atender às necessidades de um público diverso, desde estudantes do ensino fundamental até profissionais que buscam especialização em suas áreas. Com funcionalidades que vão além do simples acesso ao conteúdo, o aplicativo oferece uma experiência de aprendizado personalizada, utilizando inteligência artificial para adaptar os materiais ao ritmo e estilo de aprendizagem de cada usuário.

APP UI Boost

Objetivo

O objetivo do APP UI Boost é fornecer uma plataforma de aprendizado acessível, interativa e personalizada que facilite a aquisição de conhecimento e habilidades para estudantes e profissionais. Ao integrar tecnologia de ponta com metodologias educacionais eficazes, buscamos otimizar o processo de aprendizagem, permitindo que os usuários maximizem seu potencial acadêmico e profissional de maneira eficiente e adaptada às suas necessidades individuais. Nosso foco é transformar o estudo em uma experiência mais envolvente, produtiva e alinhada com os desafios e demandas da educação moderna.

User Flow

User Flow

Style Guide

Cores

A Cor Primary: usada nas interações, botão de CTA, a Cor Secondary: usada em assets visuais e a Cor Neutral: usada nos títulos em fundos claros e escuros.

Primary
Dark
#EE56BB
Default
#F974CC
Light
#FF9FDE
Secondary
Dark
#6818D1
Default
#721AE6
Light
#D3B8F7
Neutral
700
#313131
500
#626262
100
#939393

Negative
Dark
#DE3961
Default
#F64F77
Light
#FC6F91
Warning
Dark
#F49F1F
Default
#F8AE3F
Default
#FFD569
Informational
Dark
#5A67DF
Dark
#7683F6
Light
#9CA5FB
Successful
Dark
#26CECE
Default
#44E4E4
Light
#4FF6F6

Grid

Por padrão o grid usado foi o de 8px (podendo ter uma variação de 4px) com margens laterais de 20px, grade de 4 colunas, gutter de 16px.

O espaço seguro deixado para a barra de status bar é de 44px e da home navigator é de 34px.

4

Colunas

20px

Margem

16px

Gutter

Grid Mobile

Tipografia

Foi usada as fontes Poppins para Headline (títulos e interações) e a fonte Inter para o body (corpo, tags, hats e outros textos menores).

Headline

Poppins Bold

Poppins Regular

Headline

Poppins Bold

Poppins Regular

Body

Inter Bold

Inter Medium

Inter Regular

Body

Inter Bold

Inter Medium

Inter Regular

Inspirações, Wireframe e Design

  • Moodboard
  • Wireframe
  • Design

Prototipação

Nesse estudo de caso não foi desenvolvido um aplicativo real, a prototipação permite a simulação de interações, como cliques, transições e animações, para testar o fluxo de navegação e a usabilidade.

Acesse o Protótipo
Link do Protótipo

O Aprendizado

Paleta de Cores, usar cores que sejam harmoniosas, que transmitam a emoção correta e que ajudem na hierarquização da informação.

Tipografia, o ideal é usar um ou dois tipos de fonte no máximo e que transmitam a mensagem desejada.

White Space, usar do white space na interfaces.

Cores, usar o manual da marca, representando o seu tom de voz.

Utilização de bibliotecas e frameworks de design, como Material Design ou Human Interface Guidelines, que fornecem um conjunto de regras e padrões para a criação de interfaces.

© Copyright 2025 - Galharde Designer.
Behance Linkedin E-mail