Conteúdo principal
Curso: Programação > Unidade 2
Lição 8: Aprendizagem futuraDesign de página web
Mostramos como criar páginas web, mas não necessariamente como fazer com que elas fiquem bonitas. Claro, a beleza está nos olhos de quem vê, então fica a seu critério (e dos seus usuários) decidir se sua página "está bonita", mas podemos dar algumas dicas e ensinar alguns truques!
Além da beleza, você provavelmente também irá querer que sua página web seja diferente de outras para que se destaque.
Normalmente esta é a parte difícil — fazê-la parecer bonita e distinta das demais. Você pode deixá-la bem diferente cobrindo-a com listras de zebra e usando uma fonte de 64 pixels, mas você deve fazer isso? Provavelmente não.
Escolhendo boas fontes
Por padrão, os navegadores mostram as páginas com a família genérica de fontes com serifa, que tende a dar uma aparência mais formal à uma página. Você pode decidir mudar isso para a família de fontes genérica sem serifa, ou você pode especificar uma família de fontes que está instalada na maioria dos computadores, como Garamond ou Helvética.
Para deixar sua página web com uma aparência diferente, você também pode usar uma fonte web personalizada. Por exemplo, a Khan Academy usa Lato em todas as suas páginas, uma fonte sans-serif muito legal:
Quando você usa uma fonte da web, você na verdade está fazendo com que o navegador do usuário baixe a fonte em seu computador e referenciando esse arquivo de fonte a partir do CSS. É um download a mais para o navegador, então você não deve usar muitas e deve usar todas as que você incluir. Um excelente lugar para fontes gratuitas é o Google Web Fonts. Dê uma olhada nesse exemplo de página web na Khan Academy que usa 2 fontes do Google Web Fonts.
De onde quer que você tire suas fontes, tome cuidado com o excesso. Geralmente, não se deve utilizar mais de dois ou três tipos de fonte em sua página e elas devem ficar bem juntas. Aqui está um website útil que dá exemplos de Google Web Fonts que ficam bem juntas.
Escolhendo boas cores
Quando estiver criando uma página web, geralmente você quer usar uma paleta de cores — uma gama de cores que trabalham bem juntas e podem ser usadas em várias partes da sua página web. Essas cores podem ser baseadas no logo de sua companhia, podem se relacionar ao tema da página ou apenas ficam bem juntas.
Precisa de ajuda escolhendo uma paleta? Se você já sabe de algumas cores que quer utilizar como base para sua paleta, dê uma olhada no Paletton, uma ferramenta que te deixa ver diferentes paletas: monocromática, tríades, cores adjacentes e tétrades.
Se você está começando do zero, você pode procurar por diferentes paletas em COLOURLovers, uma comunidade de pessoas que amam cores e contribuem com cor, paletas e padrões. Aqui está uma paleta chamada de Giant Goldfish:
Depois de escolher sua paleta, virá a parte difícil: escolher quais cores aplicar em cada parte da página web. Que cores os títulos devem possuir? Os links? O texto? O fundo? A parte boa do Paletton é que eles te dão uma página de exemplo que usa a paleta:
Conforme você decide como sua paleta será traduzida em CSS, considere algumas coisas:
- Se você alterar muito o estilo dos links em relação ao padrão, os usuários podem não perceber que eles são links.
- As cores do primeiro plano e do plano de fundo devem contrastar uma com a outra o suficiente para que seus usuários não precisem apertar os olhos. Verifique suas cores usando este verificador de contrastes.
- Muitos humanos são daltônicos. Algumas combinações de cores não têm contraste para eles. Verifique suas cores usando este simulador de daltonismo.
Se você não tem certeza sobre a forma de utilização de sua paleta de cores, envie-a para alguns amigos e peça uma opinião sincera. Eles conseguem ler tudo? Eles sabem o que pode ser clicado? Alguma cor faz com que eles torçam o nariz? De que cores eles gostam?
Usando bem o espaço em branco
Uma vez perguntei a um colega, que hoje é designer da Google, qual era seu segredo para fazer excelentes designs. Sua resposta? "Espaço em branco!"!
Espaços em branco se referem a qualquer espaço em branco entre os elementos, e na terra do CSS, eles geralmente vêm em propriedades como espaçamento, margem e altura de linha.
Meu amigo está certo - o espaço em branco pode ter um grande efeito na aparência de sua página web e na facilidade para ler o conteúdo. Às vezes, meus amigos designers passam horas ajustando o espaço em branco para acertá-lo, porque eles sabem o quanto ele é importante.
Como um exemplo extremo, aqui está uma comparação da barra lateral do nosso curso com e sem espaços em branco:
O que isso significa para você? É difícil ditar regras simples e objetivas para espaços em branco; apenas fique atento. Sempre que você tiver um elemento ao lado de outro elemento, considere a margem entre eles. Se você tem um elemento com fundo ou borda, considere o espaçamento que eles devem ter. Quando estiver criando parágrafos e listas, considere se uma linha com uma altura a mais daria mais espaço para leitura.
Começando com modelos e estruturas
Você pode ficar intimidado depois de ler todas essas instruções, principalmente se você não se considera um bom designer. Não se preocupe, você não precisa ser um expert em design para ter uma página web com uma bela aparência. Ao invés disso, você pode partir de um template ou framework e tirar vantagem do esforço que outros designers realizaram.
Um template é um código HTML e CSS que já se parece uma página web completa, normalmente preenchido com um conteúdo falso. Você pode encontrar templates em OpenDesigns.org ou procurando por "templates gratuitos para páginas web" (e torcer para que os que você encontrar sejam de fato gratuitos!). Quando você tiver baixado um template, você pode substituir seu conteúdo e continuar modificando o CSS para satisfazer suas necessidades.
Uma estrutura CSS é uma coleção de regras CSS que te dão um grande pontapé inicial para o início do site. Existem muitas estruturas CSS populares que deixarão mais fácil para que você crie uma bela página web — Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat, e mais. Você pode ver exemplos em Twitter Bootstrap e ZURB foundation aqui na Khan Academy.
Depois de baixar uma estrutura CSS, você pode navegar através da documentação — geralmente eles também possuem modelos! — e descobrir que nome de classe CSS vai conseguir o que você deseja.
Quando você usa templates ou frameworks, você corre o risco de que seu site fique exatamente igual a algum outro, não se destacando tanto na mente do seu usuário. Para evitar isso, adicione seu logotipo e altere alguns elementos chave, como o tipo de fonte ou a cor de fundo.
Quer participar da conversa?
Quero aprender mais sobre designe de web, vocês tem algum outro curso sobre o assunto?(20 votos)
É possível encontrar alguns cursos bons em plataformas como Udemy. Geralmente, o valor está entre R$25 e $50, muito em conta para o conteúdo.(4 votos)
Esse post é maravilho, tem muito conteúdo!(2 votos)- eu gostei bastante de estilar e modificar páginas web, como faça para aprender mais sobre designe de páginas web ?? voçês têm alguma comemendação ?(1 voto)
- Olá ! Acabo de concluir e gostaria de saber se receberei algum tipo de comprovação para esse módulo!(1 voto)
- Olá ! Acabo de concluir e gostaria de saber se receberei algum tipo de comprovação para esse módulo!(0 votos)
Não tem certificado, neste o que vale é o aprendizado.(2 votos)