Quem navega entre o mundo das artes gráficas com certeza conhece o Abduzeedo (impossível não conhecer) além de ser um dos mais famosos sites sobre o assunto, na minha opinião é o mais bem desenvolvido de todos. Fabio Sasso e cia enfim colocou no ar o novo layout do Abduzeedo.
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.
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 o Pulse por exemplo, eles 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.
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.
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.
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.
Não postarei todo o estudo do novo desing, mas não deixe de conferir mais sobre a inspiração do Fabio Sasso no novo Abduzeedo.
Postar um comentário