Maria Messias

Voltar aos projetos

Design de Interfaces

Da ideia ao protótipo navegável, antes de escrever uma linha de código

Design de interfaces de alta fidelidade com foco em usabilidade e hierarquia visual — desde wireframes e fluxos de usuário até protótipos navegáveis e design systems prontos para desenvolvimento.

FigmaPenpotUI DesignUX ResearchPrototipaçãoDesign System

Veja o protótipo sendo construído

protótipo navegávelaguardando...
CJL
Clínica EstéticaSistema de Gestão
E-mail
Digite seu e-mail
Senha
Digite sua senha
Entrar
Termos de Uso e Privacidade
Leia e aceite para continuar usando o sistema
Termos de Uso
Política de Privacidade
Bem-vindo ao sistema de gestão da Clínica Estética.
Ao utilizar esta plataforma, você concorda em:
• Manter a confidencialidade das informações dos pacientes.
• Utilizar o sistema apenas para finalidades profissionais autorizadas.
• Não compartilhar suas credenciais de acesso com terceiros.
• Reportar qualquer acesso não autorizado ou suspeita de violação de segurança.
• Cumprir as normas internas da clínica e a legislação vigente (LGPD).
O uso indevido do sistema poderá resultar em medidas disciplinares e/ou legais.
Li e aceito os Termos de Uso e a Política de Privacidade
Aceitar e continuar
2 / 4
etapa—
01

Wireframe

Estrutura e fluxo antes do visual.

02

Layout dividido

Fundo bege + escuro com logo da clínica.

03

Modal de termos

Header colorido, abas e conteúdo.

04

Tipografia

Hierarquia, pesos e espaçamento.

05

Interações

Checkbox, botão e paginação.

06

Handoff

Specs exportadas para dev.

O que define um design de verdade

Hierarquia Visual

Cada elemento tem um peso intencional — o olhar do usuário é guiado sem esforço pelo conteúdo mais importante.

Usabilidade

Fluxos pensados para minimizar cliques e eliminar atritos, garantindo que o usuário chegue onde precisa sem fricção.

Design System

Biblioteca de componentes consistente que acelera o handoff e garante coerência visual em todas as telas.

Alta Fidelidade

Protótipos navegáveis que simulam a experiência real — testáveis antes de escrever uma única linha de código.

Handoff Organizado

Arquivos estruturados com especificações de espaçamento, cores e tipografia prontos para os desenvolvedores.

UX Research

Fluxos de usuário mapeados antes de qualquer pixel — wireframes validam a lógica antes do design de alta fidelidade.

O que está incluso

Wireframes e mapeamento de fluxos de usuário
Protótipos navegáveis de alta fidelidade em Figma ou Penpot
Design system com tokens de cor, tipografia e espaçamento
Biblioteca de componentes reutilizáveis
Handoff documentado para desenvolvimento
Revisão de usabilidade e consistência visual
Versões mobile e desktop de cada tela
Iterações baseadas em feedback

Como funciona o processo

01

Discovery

Entendimento do produto, objetivos de negócio e necessidades dos usuários. Mapeamento de personas e fluxos de uso.

02

Wireframes

Esqueleto das telas em baixa fidelidade — estrutura e lógica de navegação sem interferência visual.

03

Design de Telas

Alta fidelidade com cores, tipografia, ícones e componentes do design system aplicados.

04

Protótipo

Ligação das telas criando um protótipo navegável que simula a experiência real.

05

Handoff

Entrega do arquivo organizado com especificações completas e assets exportados para desenvolvimento.

Vamos conversar?

Interessado em trabalhar juntos?

Estou disponível para projetos de design UI/UX, desde wireframes até protótipos navegáveis prontos para desenvolvimento.

Entrar em contato