Fique ligado nas novidades do mercado

Inscreva-se em nosso site, todo mês nós vamos te mandar novidades quentinhas sobre design.

Assine

OS DETALHES QUE FAZEM O DESIGN


Este é um texto sobre os detalhes que realmente fazem o design acontecer e porque precisamos nos preocupar com isso.

A palavra design não é novidade e apesar das diversas derivações que ela acabou ganhando ao longo de sua vida, ainda é grande o número de pessoas que tem dificuldade de responder uma simples pergunta:

Onde está o design nesse projeto?

Recentemente tive a oportunidade de trabalhar em um projeto muito bacana para uma grande marca brasileira. Convidada pela nossa grande parceira Next Idea, uma importante agência digital da nossa região, a Ozório ficou responsável por todo o desenvolvimento da interface do sistema em questão. Não é o primeiro trabalho que fazemos de UI (User Interface), mas este foi um que me inspirou muito e me fez querer compartilhar as ferramentas que aplicamos no processo.

Por ser um projeto com a deadline apertada, foi preciso gerir o tempo ao máximo para que não perdêssemos produtividade, e por incrível que pareça aqui começa o design. O primeiro problema do projeto não era na aplicação, mas na gestão do seu desenvolvimento e é papel do designer responsável encontrar um método rápido e eficaz para entregar a solução dentro do tempo pré determinado. Muitos ainda pensam que o designer é apenas aquele cara que senta na frente do PC e começa a desenhar um interface bacana, eu acredito que um bom designer precisa ter capacidade de se conectar com o projeto por inteiro, se preocupando inclusive com o passo a passo de cada etapa.

Não se engane, design não está apenas no resultado final.

Depois que definimos um bom fluxo de trabalho é hora de garantir assertividade, afinal, projetos com pouco tempo são como cirurgias de emergência: precisam ser rápidos e eficazes.

Bom, nós tínhamos um escopo escrito pelo cliente e algumas ideias de como seria a aplicação e com isso começamos a desenhar possíveis rotas que o usuário faria. Aqui é muito importante ter um ponto de partida: qual a primeira tela de interação que vamos ter? Tendo isso definido é preciso refletir sobre as etapas seguintes: quais os caminhos percorridos, para onde o usuário vai e pra onde ele deve voltar.

Não se preocupe com a estética, o que importa é expressar as ideias de forma rápida. Eu particularmente gosto de usar papel e caneta, não existe maneira mais rápida de fazer um bom wireframe inicial.

Essa noite foi cansativa. Nós ficamos por horas desenhando as possíveis rotas do usuário, e quando chegamos a uma conclusão que parecia boa, partimos para o computador para projetar um wireframe mais elaborado e então testar.

É importante tomar alguns cuidados quando se faz o wireframe no computador. Precisamos deixá-lo mais fiel possível com o que imaginamos: posição de ícones, tamanho de fontes e distribuição das informações, isso poupa um tempo importante na hora de desenhar a interface final.

Com o protótipo pronto fizemos alguns links básicos no Invision e rodamos internamente para testar, é incrível como apareceram problemas, mas isso é normal. Veja essa situação como um filtro, na primeira tentativa o mockup apresenta inúmeras falhas e com o passar das etapas você vai afunilando até ter a solução ideal.

O gráfico ao lado traz um pouco de como nós vemos os projetos naOzório. Na primeira etapa é normal que apareçam diversos erros e muitos problemas na solução proposta, o importante é corrigir isso para que no protótipo possamos apenas cuidar dos pequenos detalhes que ficaram para trás. E depois disso partir para o layout, onde fazemos os refinamentos finais.

Lembrando que tudo isso deve ser validado com o maior número de pessoas possíveis, para que o usuário final receba a solução mais refinada possível.

Outro ponto bacana desse projeto foi a possibilidade de trabalhar com micro interações, aqueles pequenos detalhes que a maioria das pessoas nem imagina o trabalho que dá para desenvolver (Se você quiser se aprofundar mais sobre esse tema vale a leitura do texto nesse link). Mas, em resumo, micro interações são aqueles mínimos detalhes que pensamos para uma interface, como por exemplo a a forma como um botão vai funcionar ao passa o mouse em cima.

Nos gifs que fizemos é possível ver um pouco desse trabalho.

Nas micro interações é possível dizer como queremos que cada elemento surja na tela.

São detalhes pequenos, mas é isso que torna o produto mais amigável e humano.

Bom, o resultado final do projeto ainda não está divulgado, assim que possível vocês vão poder ver tudo que desenvolvemos, mas até lá, espero que esse texto tenha sido útil e ajudado a perceber que o design não está apenas no layout final, mas em todo o processo de desenvolvimento.

#Identidadevisual

  • Facebook Basic Square
  • Twitter Basic Square
  • Google+ Basic Square
RSS Feed

FIQUE POR DENTRO