Planos a partir de R$ 39/mês Inscreva-se Agora

Padding é a Revolução do Layout na Web

Padding é a Revolução do Layout na Web

As vezes eu acredito que no inicio da Web, os Designers não estavam tão interessados nessa nova mídia.

Principalmente devido as limitações da tecnologia na época (CSS) e a dificuldade de aprendizado, já que não existiam tanto conteúdo como hoje.

E por isso, pessoas sem os conhecimentos dos fundamentos do design ficavam responsáveis pela criação dos layouts das páginas na web.

Bom, isso é apenas algo que eu acho. Porém o fato é que no início da web, o espaço negativo foi muitas vezes ignorado pelos responsáveis pela interface.

Pegue um layout de 2006 e verá que não só as cores mudaram (flat / material design), mas principalmente a quantidade de padding que cada elemento de uma página possui hoje em dia.

O padding é simplesmente uma margem interna que separa o conteúdo da borda de sua caixa (já que a Web é um emaranhado de caixas). Essa margem deixa o conteúdo respirar, dando mais destaque e importância ao mesmo.

Conteúdo pode ser o texto de um botão, um ícone de um produto, a descrição de um site e por ai vai.

Esse é um erro presente no layout de quase 95% dos iniciantes que eu vejo criando um site. A falta de espaço negativo, principalmente o padding.

Então na próxima vez lembre-se, desgrude qualquer conteúdo de sua borda e terá um layout milhões de vezes melhor.

Mantenha também padronizado o espaço negativo, ou seja, se um botão tem 20px de padding-left e padding-right, mantenha isso para todo o site (a não ser que queira comunicar algo diferente).

Mais Dicas

Design

Dica #11 Tipografia – Alinhamento

Código

Animation Timing Function

Código

Como criar um Scroll Suave para links internos

Código

Animação Durante o Scroll

Código

Dica #01 CSS – box-sizing