Web Design em 4 minutos

Vamos supor que você tem um produto, um portfólio, ou apenas uma ideia que você quer compartilhar com todo mundo no seu próprio website. Antes de publicá-lo na internet, você quer o tornar atraente, profissional, ou pelo menos algo decente de se olhar

Qual é a primeira coisa que você precisa trabalhar?

Conteúdo

O propósito do design é melhorar a apresentação do conteúdo em que está aplicado. Pode parecer óbvio, mas o conteúdo deve ser o elemento primário do site, não deve ser deixado como segundo plano.

Conteúdo escrito, como esse parágrafo que você está lendo nesse momento, compõe mais de 90% da Internet. Estilizar esse conteúdo de texto vai ser um longo caminho.

Vamos supor que você já terminou o conteúdo que quer publicar, e acabou de criar um style.css vazio, qual é a primeira regra que você vai escrever?

Centralização

Linhas longas de texto podem ser difíceis de analisar, o que acaba as tornando difíceis de ler. Determinar um limite de caracteres por linha melhora bastante a legibilidade e o apelo de um textão.

body {
  margin: 0 auto;
  max-width: 50em;
}

Depois de estilizar os blocos de texto, o que acha de estilizar o texto propriamente dito?

Font family

A fonte default do navegador é "Times", o que pode deixar com uma cara não-atrativa (principalmente por ser uma fonte sem estilo). Fazer a mudança para uma fonte sans-serif como a "Helvetica" ou "Arial" pode melhorar muito o visual da sua página.

body {
  font-family: "Helvetica", "Arial", sans-serif;
}

Se optar por uma fonte serifada, tente a "Georgia".

Esse procedimento deixa a fonte mais atraente, agora vamos torná-la mais legível.

Espaçameto

Quando uma página parece meio "quebrada" para um usuário, geralmente é problema com espaçamento. Colocar um espaçamento por fora e por dentro do seu conteúdo aumenta o apelo da sua página.

body {
  line-height: 1.5;
  padding: 4em 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

Esse layout já melhorou bastante, mas vamos continuar aplicando mais algumas mudanças sutis.

Cor & Contraste

Texto preto num fundo branco é de doer os olhos. Optar por um tom mais suave de preto para o texto deixa a página mais confortável de se ler.

body {
  color: #555;
}

E para manter um nível bacana de contraste, vamos pegar um tom mais escuro para palavras importantes

h1,
h2,
strong {
  color: #333;
}

Boa parte da página melhorou visualmente, mas alguns elementos (como os pedacinhos de código) ainda parecem deslocados.

Equilíbrio

Pra corrigir o equilíbrio da página, só precisamos de alguns pequenos toques:

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

A essa altura do campeonato, você pode querer fazer sua página se destacar e dar uma identidade a ela.

Cor primária

A maioria das marcas possui uma cor primária que age como uma expressão visual. Em um site, essa expressão pode ser usada para dar ênfase a elementos interativos, como links .

a {
  color: #e81c4f;
}

Mas para manter o equilíbrio, vamos precisar de umas cores adicionais.

Cores secundárias

A cor predominante pode ser complementada com alguns tons sutis, usado em bordas, planos de fundo, ou até no corpo do texto.

body {
  color: #566b78;
}

code,
pre {
  background: #f5f7f9;
  border-bottom: 1px solid #d8dee9;
  color: #a7adba;
}

pre {
  border-left: 2px solid #69c;
}

Se mudamos os tons, por que não mudar as formas...

Fontes customizadas

Já que o texto é o conteúdo principal de uma página, usar uma fonte customizada dá para a página uma identidade ainda mais notável.

Você pode colocar sua própria fonte customizada ou usar algum serviço online tipo o Typekit, mas aqui vamos usar "Roboto" do Google Fonts, que é um serviço gratuito.

@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

Depois de melhorar a identidade do texto, que tal adicionar algumas mil palavras...

Gráficos e ícones podem ser usados tanto para ornar seu conteúdo, quanto para fazer parte de forma ativa na mensagem que você quer passar.

Vamos melhorar nosso cabeçalho com uma imagem de background do Unsplash

header {
  background-color: #263d36;
  background-image: url("header.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 10vw 2em;
  text-align: center;
}

Vamos por também uma logo

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

Aproveitando aqui e melhorando os estilos dos textos

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 300;
}

header a {
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: white;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
}

header a:hover {
  background:  #e81c4f;
  color: white;
}

E voilà!

Fizemos o layout de uma página decente em apenas alguns minutos, seguindo princípios básicos do web design. Tem só uma última coisinha que falta fazer...