Wireframes e Mockups de Interfaces🔗

Wireframes e mockups são etapas fundamentais do design de interfaces. Wireframes de baixa fidelidade validam estrutura e fluxo sem distrações visuais, enquanto mockups de alta fidelidade comunicam o produto final com tipografia, cores e conteúdo realistas. O Inkscape oferece ferramentas vetoriais que permitem transitar do rascunho ao mockup final em um único ambiente.

Wireframes de Baixa Fidelidade🔗

Estrutura com Formas Básicas🔗

Wireframes de baixa fidelidade usam retângulos, elipses e linhas para representar elementos de interface sem detalhes visuais. O objetivo é comunicar layout, hierarquia e fluxo.

1. Rectangle (R ) para containers, cards, botões e inputs
2. Ellipse (E ) para avatares, ícones circulares e indicadores
3. Bézier (B ) para linhas separadoras e conectores de fluxo
4. Pencil (P ) para esboços rápidos à mão livre

Configuração do Documento🔗

1. File > Document Properties (Shift + Ctrl + D )
2. Defina o tamanho do artboard: dispositivos comuns
   • Mobile: 375 x 812 px (iPhone) ou 360 x 800 px (Android)
   • Tablet: 768 x 1024 px
   • Desktop: 1440 x 900 px
3. Ative View > Grid (# ) com espaçamento de 8px (grid de 8pt)
4. Configure snap para alinhar elementos à grid automaticamente

Convenção Visual de Baixa Fidelidade🔗

Componentes UI🔗

Criar Componentes Reutilizáveis🔗

Componentes UI como botões, inputs e cards se repetem em toda a interface. Crie-os uma vez e reutilize com clones para manter consistência e facilitar alterações globais.

1. Desenhe um botão: retângulo 120 x 40 px, cantos arredondados rx=6, fill #3B82F6
2. Adicione texto centralizado com a ferramenta T
3. Agrupe botão e texto: Ctrl + G
4. Crie um clone: Alt + D
5. Mova o clone para a posição desejada

Alterações no botão original se propagam a todos os clones.

Organizar com Layers🔗

O painel Layers (Shift + Ctrl + L ) separa componentes por função:

Biblioteca de Componentes🔗

Crie um documento separado como biblioteca de componentes:

1. Desenhe cada componente (botão primário, botão secundário, input, checkbox, toggle, card)
2. Organize em layers nomeados por tipo
3. Copie componentes para o documento de wireframe conforme necessário
4. Use Edit > Clone > Create Linked Clone (Alt + D ) para manter vínculo com a biblioteca

Mockups de Alta Fidelidade🔗

Tipografia e Hierarquia🔗

Mockups de alta fidelidade definem a hierarquia visual com tipografia real:

1. Título principal: 24-32px, peso bold, cor escura (#1F2937)
2. Subtítulo: 18-20px, peso medium, cor intermediária (#4B5563)
3. Corpo de texto: 14-16px, peso regular, cor de leitura (#374151)
4. Labels e captions: 12px, peso regular, cor secundária (#6B7280)

Use a ferramenta T e configure a fonte no painel Text and Font (Shift + Ctrl + T ).

Paleta de Cores🔗

Defina uma paleta consistente antes de iniciar o mockup:

• Primária: cor da marca para ações principais (ex: #2563EB)
• Secundária: cor de apoio para ações secundárias (ex: #7C3AED)
• Sucesso: feedback positivo (ex: #10B981)
• Alerta: atenção e warnings (ex: #F59E0B)
• Erro: feedback negativo (ex: #EF4444)
• Neutros: escala de cinza para textos e backgrounds (#F9FAFB, #E5E7EB, #9CA3AF, #374151, #111827)

Aplique cores com o painel Fill and Stroke (Shift + Ctrl + F ).

Imagens e Ícones Placeholder🔗

Para mockups, use placeholders que simulem conteúdo real:

1. Imagens: retângulo com fill de gradiente cinza e texto "1920 x 1080" centralizado
2. Ícones: use o pacote de ícones SVG de sua preferência (Font Awesome, Material Icons, Lucide)
3. Avatares: círculo com fill de cor sólida e iniciais do nome em texto branco
4. Gráficos: retângulos proporcionais com linhas simulando tendências

Importe ícones SVG com File > Import (Ctrl + I ).

Grid de Layout🔗

Siga um grid de colunas para alinhamento profissional:

• Desktop: 12 colunas, gutter 24px, margin 80px
• Tablet: 8 colunas, gutter 16px, margin 40px
• Mobile: 4 colunas, gutter 16px, margin 16px

Crie guias com View > Guides (# para toggle) arrastando desde as réguas.

Placeholders e Conteúdo🔗

Texto Placeholder🔗

Use texto realista em vez de "Lorem ipsum" sempre que possível. Texto realista revela problemas de layout que Lorem ipsum esconde:

1. Nomes longos testam truncamento em cards e listas
2. Endereços de e-mail longos testam inputs
3. Preços com diferentes quantidades de dígitos testam alinhamento
4. Textos em múltiplos idiomas testam expansão de containers

Imagens Placeholder com Padrões🔗

Para representar imagens em wireframes:

1. Desenhe um retângulo na proporção desejada (16:9, 4:3, 1:1)
2. Aplique fill com padrão de linhas diagonais: Fill and Stroke > Pattern
3. Adicione texto centralizado com as dimensões ("800 x 600")
4. Use cor cinza claro (#E5E7EB) para não competir com o layout

Estados de Componentes🔗

Documente estados para cada componente interativo:

• Default: aparência normal
• Hover: estado ao passar o mouse (fill levemente mais escuro)
• Active/Pressed: estado ao clicar (fill mais escuro, leve deslocamento)
• Focus: estado de foco de teclado (outline de 2px com cor primária)
• Disabled: estado desabilitado (opacidade 50%, cursor not-allowed)

Crie variantes lado a lado para documentação de design system.

Exportação🔗

Exportar Wireframes em PNG🔗

1. File > Export PNG Image (Shift + Ctrl + E )
2. Configure Área:
   • Page: exporta o artboard completo
   • Drawing: exporta apenas a área com conteúdo
   • Selection: exporta apenas o elemento selecionado
3. Defina DPI: 96 para tela, 192 para retina, 300 para impressão
4. Marque Background com cor branca se o fundo deve ser opaco
5. Clique Export e salve o arquivo

Exportar em SVG para Desenvolvimento🔗

SVG é o formato ideal para handoff com desenvolvedores:

1. File > Save As (Shift + Ctrl + S )
2. Selecione Optimized SVG para reduzir tamanho do arquivo
3. Em Optimized SVG Output Settings:
   • Marque Shorten color values
   • Marque Convert CSS attributes to XML attributes
   • Desmarque Enable viewboxing se o SVG será usado em dimensões fixas
4. Salve e valide o SVG resultante

Exportar Múltiplas Telas🔗

Para documentar fluxos completos com várias telas:

1. Organize cada tela em um layer separado ou em artboards distintos
2. Use File > Document Properties para adicionar múltiplas páginas
3. Exporte cada página individualmente com Área > Page
4. Nomeie arquivos sequencialmente: tela-01-login.png, tela-02-dashboard.png

Referências🔗

• Inkscape Manual — Techniques overview
• Inkscape — Learn (tutoriais oficiais)
• W3C — Scalable Vector Graphics (SVG) 1.1 (Second Edition)