Estudo de Caso: Abduzeedo Redesign

Depois de meses de estudo, design e desenvolvimento, o novo Abduzeedo está no ar. Sei que pode parecer um pouco dramático, mas esse foi provavelmente o design em que eu mais me esforcei. Tentei definir exatamente como seria a user experience e como faria isso acontecer sem perder a referência dos designs anteriores.

Agora que o site está no ar, mesmo que eu ainda esteja trabalhando em alguns pequenos detalhes e bugs, vou compartilhar com vocês um pouco do meu processo criativo e o que me levou a tomar algumas decisões nesse novo design.

Objetivos

A primeira coisa a fazer em qualquer projeto de design - e não apenas de design - é definir os objetivos do projeto. Para a nova versão do Abduzeedo eu tinha centenas de ideias e de coisas que queria fazer, mas sou apenas um, então escolhi as que considerava mais importante, que eram:

• SIMPLICIDADE
• MOSTRAR MAIS CONTEÚDO
• NAVEGAÇÃO FÁCIL

Simplicidade

O design precisa ser simples em todos os sentidos possíveis. No meu ponto de vista, a UI deve ser quase invisível em um site como o Abduzeedo, onde o conteúdo é o que importa. E a única maneira de chamar a atenção do usuário é fazer uma UI simples.

Mostrar mais Conteúdo

Depois de quase 4 anos nós temos uma quantidade incrível de conteúdo, e a melhor parte disso é que o conteúdo é atemporal, os posts são inspiração pura e sempre serão... então era preciso deixar esse conteúdo ao alcance do usuário, deixar mais conteúdo disponível.

Navegação Fácil

Adoro iPad apps como Pulse por exemplo, elas são fáceis de navegar pelo conteúdo. O layout anterior do Abduzeedo era no estilo blog, com os posts dispostos em uma coluna. Era necessário usar muito o scroll down para ver 10 artigos. Precisávamos melhorar isso.

Definindo Restrições

Com os objetivos definidos, era importante definir algumas restrições para que pudesse começar a trabalhar. Para poder fazer um site simples, minha decisão foi não usar nada de graphics na interface. A UI seria simplesmente texto e alguns gradientes na navegação para separa o conteúdo, criando uma hierarquia.

Para conseguir mostrar mais conteúdo o site precisaria usar mais área de tela e ser mais fluído em algumas resoluções.

Outra coisa muito importante no meu caso foram as fontes de pessoas que eu teria para fazer isso. Fiz esse projeto basicamente sozinho, com alguns feedbacks do Fabiano Meneghetti e com uma ajuda do meu irmão Eduardo Sasso em jQuery no User News. Tive que trabalhar com minhas habilidades e também precisei aprender coisas necessárias para fazer o projeto acontecer, no entanto não podia reinventar a roda. É sempre bom conhecer suas limitações para saber onde podemos melhorar.

As estatísticas de visitas foram importantes para estipular restrições em termos de browsers e resoluções, áreas importantes e o que mostrar nelas.

Inspiração

Como mencionei antes, eu tinha centenas de ideias para o novo design. Mas primeiro queria mudar o grid style para algo mais magazine-ish grid style, pois assim poderia mostrar mais conteúdo.

Abaixo você pode conferir algumas referências que considerei.

Antes de começar no Fireworks, fiz alguns rascunhos tentando montar um fluid grid. Também fiz algo que achei muito bom e que farei mais vezes, antes de fazer o design da UI no Fireworks fui primeiro para o HTML. Então brinquei com cores sólidas e formas básicas para ver e sentir a ideia e não apenas um static mockup.

Meu primeiro conceito foi um layout totalmente fluido que se adaptasse a qualquer resolução e que enchesse a tela de conteúdo, gosto bastante dessa idea. No entanto, depois de testar o HTML notei que em certas resoluções o conteúdo principal ficava meio enfraquecido pela quantidade de conteúdo próximo a ele na sidebar. percebi isso apenas depois de testar o HTML, pois nos meus rascunhos estáticos a ideia parecia sensacional.

Abaixo você pode ver alguns rascunhos e o primeiro conceito HTML.

Click on the image to see the grid in action. Resize your browser window to see what happens.

Também testei alguns jQuery plugins para fluid layouts como o Masonry, que parecia incrível nas demo pages deles, no entanto quando testei no Abduzeedo, não funcionou bem. Quer dizer, o plugin fez o que precisava, o que aconteceu foi que o conteúdo mudava radicalmente de posição dependendo da resolução, enfraquecendo a concistencia da UI. Por exemplo, no meu computador a User News estava no topo a esquerda, no meu iPad estava na parte inferior na direita. Isso faria o usuário pensar muito para poder navegar pela página... e o que quero é que o usuário se inspire com o conteúdo, não que aprenda como a UI do Abduzeedo funciona.

We use this plugin for the User News section.

Design Final

Como você pode ver o design final é o que você está vendo agora. Apenas alguns highlights do design.

Header

O novo header usa menos tela. Antes o header tinha 250 pixels de altura, agora tem apenas 110 pixels. Com isso ganhamos mais espaço para o conteúdo. Mantivemos o estilo original preto e adicionamos um gradiente na barra de navegação para diferenciá-lo da área de conteúdo.

Background

Sou um grande fã de 'noisy backgrounds', especialmente os que são cinza escuro. Provavelmente porque eles me lembram do console do Atari 2660 com aquela textura que é muito parecida com a que temos agora no Abduzeedo.

Home-page and Section pages

Os posts agora tem um thumbnail menor com descrição e título. Eles estão organizados lado a lado e não mais em uma coluna. Nós tivemos esse tipo de estilo em um aversão anterior, mas era uma opção diferente de visualização para a home-page e um laboratório para nós :)

User News and Tutorial of the Week

Essa área é muito legal pois a cada semana temos um tutorial legal e muitas notícias bacanas enviadas por usuários. No design anterior o tutorial da semana era 'enterrado' no dia seguinte a sua publicação, o que não era legal. Agora ele vai ficar visível até que o próximo seja publicado. O mesmo vai acontecer com as User News... elas ficarão visíveis em todas as páginas.

Inspiração Randômica

Esse é um pequeno experimento que queria fazer. Queremos mostrar a vocês algumas inspirações randômicas, deixar o acaso mostrar algo legal para você :)

Footer

As tags estão agora em colunas, 'the end of the tag cloud' hehehe, e tem outros blocos com links para nossa iPhone App, que não estava sendo promovida na versão anterior. E é claro que no footer também tem nossa xícara de café mágica onde você pode nos pagar um café, afinal nós somos seres humanos e não aliens. ;)

Resoluções

O site agora tem 2 layouts para diferentes resoluções, então aqueles com resoluções maiores - que representam 65% da nossa audiência - farão menos scroll com a mesma quantidade de conteúdo.

Layout para iPads, Celulares, Netbooks 1024x760 pixels res

Layout para resoluções com mais de 1024x768 pixels

Temos muitas outras novas features como foco nas sharing features na Meebo Bar, o novo design de posts com imagens maiores, muitos efeitos legais CSS3 e transições como a Not-found page... e também estamos trabalhando em novidades enquanto ajustamos alguns bugs do site.

Espero que todos gostem do novo design e fiquem a vontade para comentar o layout e nos enviar sugestões, opiniões e críticas. Nosso objetivo é entregar o melhor conteúdo para vocês e para nós mesmos... pois também usamos o site como inspiração, então o site é tanto meu quanto de vocês.