Nov212006

À procura do layout perfeito - parte II

Acabo de fazer mais alguns ajustes no layout deste site. Trabalhei, praticamente, só no realinhamento dos componentes do layout, alterando, apenas, seu CSS. Ou seja, modificação zero na marcação.

As alterações realizadas foram implementadas para melhor dispor os textos no corpo do site. Tenho falado de tipografia por aqui, então, resolvi integrar os conceitos que escrevo com o layout que os visitantes encontram quando aqui chegam.

Tipografia como elemento do design

Este site é composto, praticamente, somente de texto. Então, não há como não voltar o design à uma boa estrutura tipográfica. Como já disse no artigo anterior, tipografia é elemento essencial em qualquer webdesign. Para tanto, coloquei em prática alguns recursos que tinha em mente há algum tempo. Dois deles são os recursos de pullquotes1 e de info labels2.

1 - Os pullquotes foram implementados à partir da solução de Roger Johansson.

Além desses recursos decorativos, ousei em realinhar a área de conteúdo, alterando, também, sua largura. O layout continua totalmente líquido, porém a área de conteúdo pouco muda quando a janela é redimensionada. Isso só foi possível por conta do espaço na esqueda, que deixei disponível apenas para os info labels e algumas imagens em grande largura.

2 - Os info labels (aqui exemplificados) foram inspirados na solução criada por Khoi Vinh para dispor o conteúdo dos seus posts.

O que mudou, de fato?

Abaixo, pequeno chek-list de modificações implementadas:

  • Pequeno ajuste no logo (sombra mal direcionada);
  • Retirada dos controles de tamanho e alinhamento de texto;
  • Conteúdo dos posts agora com alinhamento justificado;
  • Reajustes de tamanho para os headers;
  • Todos os textos com 1.4em de line-height;
  • Redução da largura da área de texto para possibilitar uma leitura mais agradável; e
  • Pequenos ajustes gerais que não me recordo agora. :)

E assim vamos nós! Sempre à procura do layout perfeito! ;)

Poste um comentário




Você pode utilizar as seguintes tags para formatação: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Oscomentários

Comentários diversos dos visitantes

Highlander disse:

Seu comentário está aguardando moderação. que sux :@@...

RamonPage disse:

Olá @Hebertphp. Sim! Você pode criar campos na coluna que desejar. Basta criar as colunas antecessoras com labels sem conteúdo. ...

RamonPage disse:

Olá Monica! Que honra! Respondendo ao que você disse sobre qualidade, o ponto que passo neste artigo é o da qualidade no desenvolvimento das soluçõ...

Jader Rubini disse:

O layout ficou muito bom. Só uma coisinha: os ícones do RSS no rodapé ainda estão com o fundo preto. ;)...

Gustavo Viana disse:

Excelente blog! Parabéns!...

Quemsou

Uma prévia de quem é RamonPage

Avatar RamonPageMeu nome é Ramon Bispo. Sou web developer/ designer e natural do Rio de Janeiro, Brasil. Saiba mais sobre mim…