Contente
Este artigo apareceu pela primeira vez na edição 229 da revista .net - a revista mais vendida do mundo para web designers e desenvolvedores.
Uma das coisas mais importantes em que você pode se concentrar quando se trata de definir o layout de uma página em HTML / CSS é o ritmo vertical - o padrão visual em que os blocos de tipo ou linhas de texto se formam à medida que você examina a página.
Outras coisas podem afetar esse ritmo, como títulos, itens de lista, imagens e assim por diante. Ter um bom ritmo vertical é fundamental porque ajuda a legibilidade e capacidade de leitura de sua (s) página (s).
Existem alguns bons tutoriais (veja aqui e aqui, por exemplo) na web onde você pode encontrar informações sobre como atingir tecnicamente o ritmo vertical adequado usando ems para a altura da linha e aprendendo sobre o que manter seu tipo 'em fase' meios.
Hierarquia
As coisas básicas para prestar atenção são a altura da linha entre os elementos e a hierarquia visual geral na página. Definir proporções de altura de linha adequadas pode ser um exercício de design complexo, mas é importante dominar. A hierarquia também é importante, pois as imagens e os elementos de texto devem estar em harmonia entre si visualmente - as coisas mais importantes geralmente são maiores e aparecem primeiro na página.
Os designers de impressão lidaram com a ideia de ritmo vertical por muitos anos e foi apenas em um passado recente que os web designers tiveram que realmente entrar nesse assunto. Com a necessidade cada vez maior de construir sites usando layouts de grade e prestar atenção às implementações responsivas para acomodar várias larguras de tela, é mais importante agora do que nunca de uma perspectiva de design visual, provavelmente mais do que apenas técnica.
Cinco exemplos para verificar
1. Os elementos do estilo tipográfico Este livro de Robert Bringhurst é o padrão para o estudo de tipografia. Leia, consuma, despeje em seu cérebro de qualquer maneira que puder.
2. Frank Chimero Além de ser absolutamente incrível em geral, a recente reformulação do site pessoal do designer Frank Chimero exibe um ritmo vertical excelente. Ele usa um efeito de paralaxe para ajudar a direcionar o ritmo à medida que você rola a página para baixo também.
3. Dan Cederholm Para um bom exemplo de ótimo ritmo vertical tipográfico, dê uma olhada no blog de Dan Cederholm. A altura da linha da cópia e dos títulos está em proporção perfeita.
4. Laboratório de foco A empresa de design de web e branding Focus Lab usa hierarquia habilmente para ajudar a comunicar o que é mais importante para o visitante.
5. Typofonderie O site do Typography Studio Typofonderie tem um ótimo ritmo vertical com suas imagens e textos. Os espaçamentos entre os elementos são proporcionais em todo o site e a hierarquia entre a imagem principal e as imagens / seções secundárias é perfeita.
Descubra 10 exemplos incríveis de design experimental no Creative Bloq.
