brainstorm9.com.br

Design Digital

No momento em que assumimos o projeto do Brainstorm9, em 2010, fizemos um plano a longo prazo: onde pudéssemos pensar em uma grande evolução dentro de um calendário de dois anos. Logo no início veio a mudança do logo e pequenas adaptações no site; Seguida por uma mudança muito mais significativa em 2011 (um ano após da primeira); E finalmente essa versão, chamada de “6.0” e que comemora os 10 anos do blog.

O layout inteligente se adapta automaticamente aos diversos tipos de resoluções – e para isso, criamos três versões do B9, que se comunicam pelo mesmo sistema gráfico. O conteúdo foi aumentado em quase duas vezes se comparado com a versão 5.0 (2011), e é apresentado ao leitor em tamanho máximo, em todas as três variações.

A performance do site se tornou oito vezes mais rápida que a versão anterior, e o conteúdo aumentou (e simplificou o acesso) de forma significativa.

Um dos maiores desafios estava em fazer com que o responsive web design (método empregado para variações entre as diferentes versões de layout) acontecesse de forma natural, em um simples redimensionamento do browser, como é possível ver abaixo:

Responsive Web Design

A questão foi resolvida e também demonstrada no vídeo de lançamento do site, por Carlos Merigo e Saulo Mileti. Vídeo, aliás, que apresenta todo o projeto funcionando alguns momentos antes de entrar oficialmente no ar. Para mais detalhes, confira aqui:

Versão Mobile

Antes de criarmos essa versão, o leitor do B9 que tentava acessar pelo seu smartphone precisava baixar uma página inicial de quase 7000kb. O que, claro, inviabilizava o acesso rápido do conteúdo. A solução reduziu a página para menos de 20kb, fazendo com que a conexão seja estabelecida em poucos segundos, por qualquer conexão 3G.

Boa parte da experiência está na simplificação que a versão 480 pixels apresenta. Onde nenhuma publicidade, menu lateral ou qualquer outro detalhe é apresentado. O leitor tem acesso, basicamente, a busca, aos destaques mais importantes, os últimos artigos, as categorias e as páginas de mídia social do site.

Versão mobile

Simples, rápido e objetivo: como um site mobile deve ser.

Tipos adequados para leitura mobile

Tipos adequados para leitura mobile

Versão para telas de 13″ (ou menos)

Como dito anteriormente, o site mantém em todas as versões o padrão de posts com praticamente o dobro da largura da versão 5.0. No layout para telas de 13″ (ou menores, como tablets) o menu lateral foi reduzido em 3 vezes (a altura) e integrado dentro da largura de 1000 pixels – dominada pelo post.

Versão para telas acima de 13″

Na versão final do site (que é ativa se o browser é ampliado para uma proporção acima de 1300 pixels) a área de posts continua com os mesmos 1000 pixels de largura, mas títulos, olhos, textos, citações e legendas ganham uma nova proporção, para que a leitura fique adequada em monitores dessa proporção.

O menu lateral sai do bloco do post, e volta para o lugar de origem, fazendo com que todo o espaço branco valorize ainda mais fotos e vídeos – inseridos naturalmente em 720p.

Outros detalhes

Menu expandido com conteúdo do podcast

Menu expandido com conteúdo do podcast

Sistema de popularidade dos posts

Sistema de popularidade dos posts

Menu expandido para categorias

Menu expandido para categorias

Social Media bar flutuante

Social Media bar flutuante



Atuação.

Website. Conheça a primeira etapa do projeto aqui.

Vamos conversar.

Que tal um café para nos contar mais sobre seus projetos? Você nos encontra no Facebook, Twitter, email ou telefone: +55 11 3078 6595.

Conheça outros projetos