• Projetos
  • Designer
  • Currículo
  • Contato
  1. Home
  2. Fluentify

Fluentify

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

Introdução

Com o crescimento da demanda por aprendizado online, especialmente em idiomas, surgiu a oportunidade de redesenhar a experiência digital de uma plataforma de cursos de inglês.

O desafio foi criar uma interface intuitiva, acessível e motivadora, que facilitasse o progresso dos alunos e refletisse a metodologia moderna da escola.

Este case apresenta o processo de concepção, prototipagem e refinamento da UI, com foco na usabilidade, engajamento e clareza na navegação.

Fluentify

Objetivo

Apresentar informações essenciais de forma clara, visual e interativa, permitindo que o usuário acompanhe métricas, tome decisões rápidas e identifique padrões ou anomalias com facilidade.

O foco é garantir uma experiência intuitiva, com hierarquia visual bem definida, priorizando a usabilidade e a eficiência na leitura de dados.

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
Black
#000000
Neutral
Neutral-700
#2F3037
Neutral-600
#545662
Neutral-300
#CFD2DF

Grid
Grid Mobile

12

Colunas

32px

Margem

72px

Gutter


Tipografia

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

Headline

Barlow Bold

Barlow Regular

Headline

Barlow Bold

Barlow Regular

Body

Inter Bold

Inter Medium

Inter Regular

Body

Inter Bold

Inter Medium

Inter Regular

Inspirações

  • Moodboard
  • Wireframe
  • Design

O Aprendizado

Nesse estudo de caso, o foco foi em UI e levo como aprendizado, usar patterns, praticar.

Tipografia, o ideal é usar um ou dois tipos de fonte no máximo.

White Space, usar do white space na interfaces.

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


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