top of page

Design System

Design system completo com fundamentos visuais e funcionais, incluindo cores, tipografia, espaçamentos, grid, elevação, estados componentes.
Entrega focada em consistência, escalabilidade, eficiência e forte identidade visual no desenvolvimento e na evolução de interfaces digitais do Vision Portal.

EMPRESA

ISH Tecnologia

ANO

2024

PAPEL

UX/UI Designer

PRODUTO

Vision Portal
cover.png

OVERVIEW

O Vision crescia como plataforma, mas sem uma base visual consistente.
Não existia design system, style guide ou identidade visual unificada: componentes variavam entre telas, decisões visuais eram pontuais e a experiência dependia muito de quem estava desenvolvendo no momento.
Isso gerava:

  • inconsistência visual entre módulos,

  • aumento de esforço cognitivo para usuários,

  • baixa eficiência de design e desenvolvimento,

  • dificuldade de escalar novas funcionalidades mantendo qualidade.

ENTÃO...

Como criar consistência, identidade e eficiência em um produto já em operação, sem interromper entregas, e sem tempo para uma pesquisa profunda de branding, mas garantindo decisões visuais defensáveis, escaláveis e alinhadas ao público?

INVESTIGAÇÃO

  • Levantamento do estado atual: mapeamento de inconsistências de UI, cores, tipografia e padrões de interação;

  • Análise demográfica: usuários majoritariamente entre 25 e 40 anos, perfil técnico, alto volume de informação e tomada de decisão;

  • Desk research focada em referências visuais e cognitivas que geram: sensação de controle, leitura clara de dados, confiança em ambientes complexos.

RESTRIÇÕES

  • Produto em uso ativo (sem “reset visual”);

  • Tempo limitado para pesquisa qualitativa aprofundada;

  • Público B2B técnico, mas não designer (segurança/cibersegurança);

  • Necessidade de criar algo rápido, mas durável;

TRADE-OFFS

  • Priorizei consistência e base sólida antes de variações estéticas;

  • Foco em componentes reutilizáveis, mesmo que menos “customizados” inicialmente;

  • Estética a serviço da legibilidade e da escala, não do branding decorativo.

SOLUÇÃO

Sem tempo para branding tradicional, a decisão foi ancorar o sistema visual em um conceito forte e coerente.
Conceito escolhido: Retrofuturismo funcional.
Uma estética que combina:

  • tecnologia e visão de futuro;

  • referências visuais familiares (reduz estranhamento);

  • clareza, contraste e hierarquia fortes para leitura de dados.

A partir disso, criei do zero o Design System do Vision, incluindo:

  • Identidade visual (conceito, princípios e aplicação);

  • Paleta de cores (primárias, secundárias, semânticas e de estado);

  • Tipografia (hierarquia, legibilidade e uso em dados densos);

  • Grid e espaçamento;

  • Componentes base e compostos;

  • Padrões de interação e estados;

  • Style guide documentado, explicando o porquê de cada decisão.

EXEMPLOS

Clique nas imagens abaixo para ampliá-las.

IMPACTO

  • Aceleração significativa das entregas: prototipação e desenvolvimento passaram a seguir padrões claros, reduzindo decisões repetitivas e ambiguidades.

  • Mais velocidade em design: novas telas e fluxos passaram a ser prototipados muito mais rápido, com reutilização consistente de componentes e layouts.

  • Mais velocidade em desenvolvimento: componentes padronizados facilitaram handoff e implementação, diminuindo retrabalho e divergências entre design e código.

  • Consistência em escala: novas features puderam ser criadas sem “quebrar” a experiência existente.

  • Base única de decisão: design system como fonte de verdade para UI, interação e identidade visual do Vision.

  • Produto preparado para crescer: mais entregas, mais módulos e mais complexidade sem perder coerência.

APRENDIZADOS

  • A importância de definir fundamentos sólidos (cores, tipografia, espaçamentos e estados) para garantir consistência visual e reduzir retrabalho no design e no desenvolvimento;

  • Como um design system bem documentado melhora a escalabilidade do produto, facilitando a criação de novas telas e a colaboração entre designers e desenvolvedores;

  • O valor de pensar em acessibilidade, estados e variações de componentes desde o início, criando interfaces mais claras, inclusivas e resilientes a diferentes cenários de uso.

bottom of page