Brainstorm9

Branding

Em 2011, ano que o Brainstorm9 completou nove anos, desenvolvemos o novo projeto do

logo para celebrar e ratificar este acontecimento. Desde o início a idéia não era alterar
drasticamente o trabalho anterior, mas encontrar uma evolução elegante, clara e objetiva,
de acordo com o momento da empresa.

Uma releitura no ícone.

O último trabalho (desenvolvido um designer em 2009) cumpriu seu papel acrescentando
na marca e fazendo com que o “nove” deixasse de lado o caráter numérico e literal,
passando a ser reconhecido como elemento icônico e proprietário. Dentro de um sistema
(pré-determinado pela base completa da nova construção) desenvolvemos o novo
alinhamento e estruturação para este símbolo, corrigindo as inconsistências de volume e
forma e aumentando ainda mais sua presença (mesmo com a redução de massa na
construção final do projeto).
CORREÇÃO E ADEQUAÇÃO APROPRIADAS DE VOLUME

A nova tipografia.
Todo o projeto foi alicerçado em Franklin Gothic, uma tipografia com história: que já foi – e
ainda é – usada pelos principais veículos e canais de notícias. Mesmo possuindo mais de
100 anos de vida, mantém sua personalidade, jovialidade e equilíbrio entre o moderno e o
elegante.
 Kerning e construção.
O “Brainstorm9″ foi inteiramente baseado no módulo 2, com 2 níveis auxiliares para sub-
módulos. O novo kerning suporta reduções drásticas, sem comprometer sua leitura.
K: NEGATIVO / K: POSITIVO.

MARGEM DE DEFESA, 1/2 MÓDULO.

CONSTRUÇÃO NA GRID
 A simplificação.
O símbolo nove (que era acidentalmente usado e reconhecido como marca, por meio de
thumbnail de Twitter, Facebook, Apps, etc) recebe o prévio acréscimo de um “B”, e
assume oficialmente o papel de logo. Surge assim uma simplificação do Brainstorm9,
fazendo com que B9 se torne a principal marca da empresa. Mais simples, mais didática e
mais óbvia para o público em geral.
conheça outros projetos
Brainstorm9 v6.0
Site

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:

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.
Simples, rápido e objetivo: como um site
mobile deve ser.
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

SISTEMA DE POPULARIDADE DOS POSTS

MENU EXPANDIDO PARA CATEGORIAS