Lucas Miquéias

Jun 6, 2021

3 min read

Guia Inicial de Box Model para UI Designers

Box Model ou “Modelo de caixa” em português, é muito conhecido por Desenvolvedores principalmente aqueles voltados à web, pois todos os componentes do HTML os tem como base de estrutura. No Design, esse modelo é de suma importância para projetar interfaces cada vez mais aplicáveis no desenvolvimento.

Entender sobre Box Model pode ser um pouco difícil se você é Designer, mas não se assuste, talvez no dia-a-dia você já utilize algumas regras em seus projetos que tem tudo haver com ele, como por exemplo “espaço negativo”.

Esse artigo não vai ser muito técnico, porque existe milhares de artigos sobre Box Model na internet, o foco aqui é demonstrar o porque e como utilizar o modelo de caixa para Designers UX e UI.

Mas afinal, o que é Box Model?

Box model é um conjuntor de propriedades que define todos os componentes de uma página web, desde texto até elementos como botões, imagens etc. O modelo de caixa é basicamente uma caixa que envolve o conteúdo de um componente, com altura, largura, preenchimento (padding), bordas (border), e margem (margins).

Margem (Margins): Espaços utilizado para movimentar um componente em relação a outro ou limpar uma área fora da borda.
Preenchimento (Padding):
Propriedade que pode ser utilizado para aumentar o campo de visual do mesmo, ou afastar um componente filho da borda do componente pai.
Bordas (Border):
Bordas são elementos visuais de um componente, seu valores podem ser positivo e nulo.

Vejamos um exemplo, em um botão com margem, borda e preenchimento:

Porque usar Box Model nos projetos de UI?

Como já comentei acima, o Modelo de Caixa são propriedades definidas em todos elementos web, sendo assim também compostas nos seus componentes de UI, mas muito além de similaridade entre o projeto e o desenvolvimento, o Box model também trás outros pontos importantes para projetos UI, são eles:

  1. Coesão entre componentes
  2. Padronização e documentação de estilos
  3. Escalabilidade em Projetos
  4. Flexibilidade de projetos em diferentes plataformas
  5. Posicionamento de componentes

Acho que a partir daqui todo mundo já entendeu um pouco sobre Box Model, então vou me atentar agora a como projetar uma interface no figma projetando seus elementos com base no Modelo de Caixa. Abaixo deixo para vocês duas imagens de uma tela utilizando Box Model, em ambas as imagens é utilizado o modelo, porém na primeira eu deixei as propriedades visíveis por cores, sendo elas:

Vermelho: Margens (Margins)
Preto: Borda (Border)
Verde: Preenchimentos (Paddings)

A partir daqui a gente já consegue ter uma noção breve de Box Model e apesar de ter descrito o modelo como essencial para projetos webs, o mesmo pode ser utilizado em todo tipo de interface. Nos próximos artigos pretendo trazer para vocês uma forma prática de como projetar componentes utilizando o Auto Layout do Figma.

Product & Design

Love podcasts or audiobooks? Learn on the go with our new app.