Pronto, agora temos uma fonte mais rica de informação do que somente os links do sidebar aqui do lado. →
E aguardem! Temos mais planos para esta recém-inaugurada página. Breve acabaremos com o suspense...
Nosso filhote está crescendo e se tornando um homenzinho! :)
Hoje lançamos os novos vídeos no site do Be on the Net. Filmados pelo cinegrafista Julio Machado, eles explicam de forma breve e simples o que é o Be on the Net, quanto custa, o que o sistema permite aos usuários e como os sites fazem para subir nas ferramentas de busca. Vale a pena conferir.
Mas o que vale mais a pena conferir são os dois vídeos [não tão sérios] que veiculamos aqui.
O primeiro, logo a seguir, é um making-of das filmagens que reúne os mais cômicos erros de gravação que eu cometi até que tivéssemos algum conteúdo decente para os vídeos oficiais.
Os (divertidos) bastidores da produção dos vídeos
E o segundo, pasmem!, é uma rápida entrevista exclusiva que o Vinícius conseguiu com um... marciano! Aparentemente, o Be on the Net já chegou a Marte, e sua usabilidade e simplicidade são as prováveis causas de os marcianos não quererem mais destruir a Terra. Confira.
Extra! Entusiasmados com Be on the Net, marcianos desistem de destruir a Terra
Quanto mais tosco e engraçado, mais memorável. Compartilhe por aí esses momentos de descontração e ria a valer. Abraços!
P.S.: Sim, há uma mensagem subliminar em um deles, que reflete nossa posição em relação a certos contratos.
Há pouco mais de uma semana eu e o Leandro redesenhamos a página inicial do Be on the Net e ela ficou assim:
Para efeito de comparação, antes ela era assim:
Na nossa opinião, a página inicial do Be on the Net melhorou muito com este exercício. Mas, meu objetivo aqui não é falar tanto sobre o resultado final, mas sim sobre o exercício que nos conduziu a ele. Experimentamos uma técnica que nunca tínhamos usado e deu certo.
A estrutura do exercício
Para simplificar e acelerar a conversa, desenhei um retângulo no quadro branco que seria usado para experimentar idéias para a nova página. Do lado esquerdo dele, coloquei três palavras que resumem a essência da mensagem que queríamos transmitir, ao lado de tópicos importantes que também deveriam ser tratados. Em seguida, imprimi as páginas iniciais de vários sites que consideramos interessantes. Elas foram coladas no quadro, com fita crepe, em torno do retângulo que mencionei antes. Veja:
Talvez fique mais fácil identificar cada parte com as legendas abaixo:
Em busca de inspiração
As imagens acima mostram o exercício já em sua fase mais avançada. No início o retângulo que chamei acima de área de trabalho estava vazio.
Começamos o exercício analisando os sites que havíamos impresso. É importante mencionar que não estávamos interessado no conteúdo completo da página inicial dos sites. Só queríamos projetar aquela parte da página que aparece à primeira vista, assim que entramos em um site. É uma área de aproximadamente 960 x 630 px, considerando-se uma resolução de 1024 pixels e as devidas perdas com barra de rolagem, barra de programas etc.
Avançando de página em página dos demais sites, eu e o Leandro nos perguntávamos: o que há de bom no design dessa página? O que não funcionou bem? Por que?
Um detalhe importante é que estávamos acomodados em puffs bem confortáveis, a uma distância de uns três metros do quadro. Isso era o suficiente para não conseguirmos ler cada detalhe do que estava escrito nas páginas. Em princípio, isso seria ruim, mas logo revelou-se uma das melhores partes do exercício, praticamente por acaso.
Efeitos inesperados
Logo que começamos o exercício, percebemos que os tamanhos das fontes importam bastante, além do posicionamento dos elementos. Quando olhávamos para sites que tinham muito texto na primeira página, a única coisa que conseguíamos ver era um borrão onde havia o texto. Se a fonte fosse suficientemente grande, como em um título, por exemplo, a gente conseguia ler o título. Caso contrário, era apenas um borrão.
Isso acontecia com a própria página do Be on the Net que estávamos tentando mudar. Olhando à distância, ela ficava assim:
Logo me dei conta que isso não acontece apenas quando olhamos a página à três metros de distância. Efeito semelhante tende a acontecer assim que o visitante entra no site pela primeira vez. Nos primeiros três segundos, a pessoa tem uma impressão geral da página que está visitando. Dependendo dessa impressão, ela fica um pouco mais ou simplesmente navega para outro site.
Três segundos é pouquíssimo tempo (se é que chega a tanto). Então a pessoa só passa o olho. Na parte em que o texto é pequeno e abundante, tudo o que ela vê é um borrão. Portanto, esse texto é inútil nesses primeiros segundos. Pior, ele é um desperdício de espaço, que poderia ser melhor aproveitado.
Construção do texto
As percepções que obtivemos na primeira parte do exercício, quando analisamos cada um dos sites na nossa frente, nos ajudaram a compreender que é necessário eliminar tanto texto quanto possível e focar apenas no essencial. Daí começou a parte mais difícil, que foi escrever o texto zilhões de vezes, eliminando cada vez mais, até que não tivéssemos mais o que tirar.
O texto final, que pode ser visto se você desabilitar o CSS, ficou assim:
"Seu negócio encontrado, adorado, disputado. Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas. Só R$ 99 por mês. Peça o seu."
É óbvio que há muito mais a se explicar sobre o Be on the Net. Mas, essa é a essência. Repare que a maior frase é:
"Fazemos seu site em 24 horas, lindão, sem limite de imagens e vídeos e super bem posicionado nas buscas."
Para facilitar a leitura e dar destaque às partes, criamos quadrados coloridos, nos quais colocamos cada parte da frase. Jogando com spans e CSS, eliminamos as pontuações da frase. Embora elas possam ser vistas normalmente, se o CSS não estiver habilitado. Com isso, o site transmite a mensagem adequadamente, mesmo quando o CSS não está presente.
De um modo geral, procuramos utilizar fontes em tamanho grande, justamente para evitar que o texto ficasse "borrado" se visto de longe ou na correria. Isso só foi possível porque reduzimos absurdamente a quantidade de texto.
Finalização
O redesign consumiu pouco mais de dois dias. No primeiro, fizemos esse exercício no quadro que nos ajudou a alcançar a idéia rapidamente. O Leandro foi para o Photoshop e montou uma imagem representando o que viria a ser a página.
Depois do primeiro dia, o Leandro consumiu outro dia e meio para fazer o CSS e, voilà, agora temos uma página inicial bem melhor!
O que aprendemos
Mais uma vez, percebemos o poder de um quadro branco bem utilizado. Colocar tanta informação quanto possível na nossa frente, em um quadro ou uma parede, ajuda muito. Além disso, fazer a modelagem de uma solução em conjunto com outra pessoa ou outras pessoas, acelera bastante as coisas.
Olhando os demais sites pudemos perceber a importância de cada detalhe e isso nos levou a uma preocupação maior com os detalhes do que estávamos construindo. Isso é particularmente verdadeiro no que diz respeito ao texto. É possivelmente a parte mais difícil: encontrar as palavras certas, na medida certa.
Gostamos muito do exercício e voltaremos a usá-lo outras vezes para aprimorar as demais partes do site, incluindo o restante da página inicial.
