Contexto
A tarefa final de conclusão do curso foi: construir um app e landing page para o uiBoost.
A base do projeto começou na parte de exploração do Briefing oferecido, além de uma lista com o que era esperado no app e na landing-page e produtos concorrentes que poderiam servir como inspiração e referencia.
O projeto contém o seguinte workflow:
- Fluxograma;
- Wireframes;
- Tipografia;
- Cores;
- App;
- Landing-Page;
- Protótipo.
Fluxograma
Desenvolvi um fluxograma para apresentar de forma esquemática de como as conexão entre cada tela funcionaria. O fluxo também ajuda a representar como o usuário pode navegar entre as telas do app.
O fluxo do app.
Wireframe
Antes de iniciar a parte de visual design do app e da landing-page, iniciei a etapa de desenhar Wireframes, que auxiliam a definir o layout e a estrutura do produto. Por ter mais foco na estrutura, o wireframe acaba possuindo mais ênfase em conteúdo do que em design.
Rabiscos das telas.
Tipografia
A fonte usada foi a Poppins e pode ser encontrada em Google fonts, a mesma faz parte do Brand Guideline da marca uiBoost.
Na imagem logo abaixo, é possível observar que há variação na tipografia, justamente porque para Desktop e Mobile as fontes precisam ser diferentes por ambas plataformas possuirem dimensões distintas.
Fonte Poppins usada para versão App/Mobile e Desktop.
Cores
As cores usadas também fazem parte do Brand Guideline da marca uiBoost, excetuando pelas de cores de feedbacks, porém as mesmas foram criadas a partir das tonalidades das cores da brand e aplicando os estudos aprendidos através do curso.
Cores da Branding.
App
O app foi inspirado no site atual do curso uiboost, nos trabalhos que podem ser encontrados no Behance e também em alguns outros produtos/serviços concorrentes.
Telas do app.
Landing Page
A proposta da landing page é ser utilizada em campanhas de marketing que convertam cliques em compras. O design da LP precisa estar alinhado com o app. E assim como a maioria das etapas anteriores, foi usado de inspiração o site atual do curso uiboost e também alguns outros produtos/serviços concorrentes.
Landing-Page.