Ultimamente tenho pesquisado bastante sobre grids para internet e tenho descoberto muitas “magavilhas”.
Vamos começar com um artigo que circulou pelos sites e redes sociais semana passada. O post trata sobre o redesenho do site da BBC e divulga superficialmente como foi este processo e como o grid do portal foi criado. E como é óbvio, nada foi por acaso. Tudo foi milimetricamente estudado e analisado.
Antes de iniciar o projeto, eles tinham em mente que o novo site deveria ser flexível, tornando seu layout dinâmico e que pudesse ser adaptado em todas as páginas internas e hotsites.
O desenvolvimento do grid começou partindo de medidas dos banners publicitários que fariam parte do novo layout. Após muitos calculos, chegaram à divisão de colunas mínimas. Cada uma medindo 16 pixels. Colocadas uma ao lado da outra, ocupariam o espaço inteiro disponível no navegador.
Abaixo é possível perceber como este grid de colunas funciona na home.
Note como o sistema primário de colunas dá lugar à colunas maiores. A definição do tamanho das imagens, posição dos textos e mais variáveis foram todos baseados neste sistema de grid.
Abaixo é possível observar a flexibilidade permitida no layout das páginas internas:
Note que a quantidade e a largura das colunas são variáveis (mesclando as colunas mínimas de 16 pixels).
Pesquisando mais sobre o assunto, encontrei uma entrevista muito legal com Yasodara Córdova, designer de interação, onde ele fala um pouco sobre o processo feito pela BBC e bastante sobre wireframes e arquitetura de informação. Matéria riquíssima. Ela foi publicada junto com uma matéria sobre o assunto na revista WebDesign de novembro passado. Pena que não encontrei ela para ler.
Nesta entrevista Yasodara indica dois links sobre o site da BBC. O primeiro é o manual de uso do grid do website da rede de tv em 2008.
O segundo link é o “Behind The Glass Wall“, onde é apresentado todo o material sobre o desenvolvimento da nova identidade visual da BBC em 2002, incluindo as pesquisas feitas com os visitantes dos sites da empresa.
Por falar em “Behind The Glass Wall”, muito do material que existe neste pdf, pode ser visto no livro “Design para Internet” do Felipe Memória. O livro é interessantíssimo e aborda diversos processos de testes de navegabilidade, usabilidade e desenvolvimento de grids – ele não trata exclusivamente do redesign do site da BBC, mas usa este como um dos exemplos, assim como os sites da Amazon, Globo.com e BBB4.
Voltando então ao desenvolvimento de Grids para sites, na entrevista com Yasodara ele indica um terceiro site: o 960 Grid System, nele é possível desenvolver grids facilmente para facilitar o seu trabalho. Existe também uma galeria com os layouts de sites desenvolvidos utilizando os sistemas de grids desenvolvidos por eles.
É interessante notar que mesmo os grids sendo repetidos entre os sites, eles não possuem muita semelhança visual entre si. Tal fato ocorre pois o uso de colunar permite grande flexibilidade ao layout.
E para finalizar (por hoje) o assunto sobre grids, indico um site cujo conteúdo não é exclusivo sobre grids para internet, mas que oferece conteúdo de primeira sobre o assunto: The Grid System.
Nele estão disponíveis artigos, ferramentas, livros, templates prontos, blog, fórum de discussão e muitos outros links para consultas. O problema é que está tudo em inglês. Portanto, se não sabe inglês, matricule-se já em uma escola de idiomas, vai lhe fazer bem!
Este post foi mais um apanhado de links e informações sobre Grids. Espero em breve postar mais sobre o assunto de forma mais aprofundada.
Conhece algum site interessante sobre Grids? Poste nos comentários!
Abs…
Posts relacionados
Olá, Fernando. Tudo bem? Espero que sim. Agradecemos a referência sobre a entrevista da Yasodara no site da Revista Webdesign. Sou diretor de redação da revista e este assunto tem sido recorrente na publicação. Não sei se você já teve acesso, mas um bom material de consulta sobre o assunto é o livro “Grid – Construção e Desconstrução”, de Timothy Samara. Além deste especial de novembro de 2009, fizemos uma capa sobre o assunto na edição de abril de 2008 (http://migre.me/mITl). Se puder ter acesso a elas, acho que poderão ajudar em suas pesquisas. Grande abraço, parabéns pelo post, vamos nos falando!
Olá Luis Rocha, legal saber que existem revistas que se preocupam em conversar com o público que visita seus sites e blogs e, principalmente o público que recomenda alguma coisa.
Obrigado pelo comentário e conheço sim este livro recomendado. Ele é muito bom e serve de base para muita gente.
Abs…