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).

FIGURA 1–4: Imagem representando um modelo de caixa. A imagem é um retângulo contendo Margem externa, borda, preenchimento e conteúdo.

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:

FIGURA 2–4: Imagem com dois Botões um a esquerda e outro a direita. O primeiro Botão a esquerda é uma representação de um modelo de caixa ao botão contendo Margem externa, borda, preenchimento e conteúdo. O segundo botão a direita é uma representação do Botão a esquerda sem o modelo de caixa visível.

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)

FIGURA 3–4: Duas imagens de uma tela lado a lado, sendo a primeira do lado esquerdo uma representação da interface com o modelo de caixa visível e a segunda a mesma tela com o modelo não visível. A tela é uma representação visual de uma de uma pagina para conversão de moeda, contendo input para adicionar o valor a ser convertido e outro input com retorno da conversão e escolha da moeda, além dos inputs é possível visualizar o saldo da moeda primaria, navbar com botões de retornar para a pagina anterior e ajuda, além do botão converter e um disclaimer do valor a ser pago pela transação.

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.