Guia Inicial de Box Model para UI Designers

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

Guia pratico de Box Model para UX e UI Designers
FIGURA 1–4: Imagem representando um modelo de caixa. A imagem é um retângulo contendo Margem externa, borda, preenchimento e conteúdo.
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
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.

--

--

Product & Design

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store