IED São Paulo | Design de Interação
Prototipagem de alta definição | prof.: Ricardo Couto
Claudio Watabe | @Pedro Henrique da Paz| Vitor Magro
BRIEFING (1ª AULA)
A proposta acadêmica oferecida, foi de trabalharmos no desenvolvimento de um protótipo de alta definição — curso ministrado pelo mestre Ricardo Couto, no IED São Paulo — num período de 12 aulas (36 horas).
Na 1ª aula discutimos sobre a estrutura do cronograma dessas 12 aulas, e passamos por um processo de ideação — onde o objetivo era encontrar um problema que poderia ser resolvido através de uma interface.
Esse processo nos auxiliou na decisão da proposta de nosso produto.
DEFINIÇÃO DO PROJETO (2ª AULA)
Um aplicativo (mobile) que ajuda as pessoas a escolherem um local próximo para comer ou beber.
Após definirmos a proposta de nosso projeto (carinhosamente e temporariamente nomeado de Birita Finder), avançamos para a definição de features e do cronograma de desenvolvimento — ambas passaram por uma validação junto ao mentor do curso, e chegamos ao seguinte resultado:
FEATURES
- login do usuário (social media)
- exibir perfil do usuário;
- filtrar a ocasião (comer, beber e diversão);
- exibir estabelecimento próximos no mapa;
- exibir estabelecimentos próximos em lista;
- exibir informações do estabelecimento;
- exibir estabelecimentos em alta (trending);
- ajuda contextual.
CRONOGRAMA
- 3ª aula: pesquisa de referência;
- 4ª aula: criação de fluxos;
- 5ª aula: criação de fluxos (definição);
- 6ª aula: desenvolvimento de wireframe;
- 7ª aula: definição do estilo gráfico;
- 8ª aula: desenvolvimento do protótipo de alta definição;
- 9ª aula: desenvolvimento do protótipo de alta definição;
- 10ª aula: criação da biblioteca de padrões;
- 11ª aula: criação da biblioteca de padrões;
- 12ª aula: entrega final (apresentação do projeto).
PESQUISA DE REFERÊNCIAS (3ª AULA)
Com o objetivo de desenvolver uma solução adequada e condizente com a nossa proposta, realizamos uma pesquisa de referências gráficas e de benchmark.
Where the f*ck should I go to eat?
Aplicativo com versões desktop (gratuito) e mobile (pago) que sugere um local próximo para comer, usando sua localização como referência.
Sua linguagem informal está presente durante a experiência inteira, e o app permite que você descarte a sugestão para receber um novo (f*cking) local para comer — porém o mesmo não oferece muitas informações sobre o estabelecimento sugerido.
Zomato
Aplicativo com versões desktop e mobile (ambas gratuitas), e que oferece lugares próximos para comer e permite filtrar por ranking, distância, custo, popularidade e entre outros.
O Zomato possui um sistema gamificado de acordo com avalizações e fotos que somam pontos no perfil do usuário, concedendo títulos como: foodie, big foodie, super foodie e entre outros. É possível seguir esses perfis e conferir seus roteiros gastronômicos.
EatStreet
Aplicativo com versões desktop e mobile (ambas gratuitas), e diferente das referências citadas anteriormente, esse app sugere estabelecimentos próximos à sua localização, e que realizam entregas.
Foursquare
Aplicativo com versões desktop e mobile (ambas gratuitas) que auxilia na descobertas de locais, baseados nas preferências de seus usuários.
Outras referências (gráficas) podem ser conferidas no link:
https://drive.google.com/drive/folders/0B8A2LiO2MWgMcURoYkJ5TktUc1E?usp=sharing
CRIAÇÃO DE FLUXOS (4ª AULA)
Nesta etapa demos início na criação de fluxos de nosso projeto, baseados nas features definidas anteriormente — e chegamos à esse primeiro resultado.
REFINANDO OS FLUXOS (5ª AULA)
Reestruturamos os fluxos de telas para facilitar a navegação dos usuários, deixando as etapas principais do aplicativo mais claras focando numa interface que converse diretamente com o usuário de forma clara. Com essa modificação o usuário primeiro escolhe o que deseja fazer(comer, beber, diversão, etc.) e são apontados os locais próximos para que decida onde ir, conforme o fluxograma a seguir.
WIREFRAMES DE MÉDIA FIDELIDADE (6ª AULA)
Finalizadas as mudanças no fluxo, partimos para a criação dos wireframes de média fidelidade.
Figma
Figma é uma ferramenta para design de interfaces via navegador, que permite a colaboração de equipes para desenvolver projetos. Escolhemos essa ferramenta por ser de fácil interação e possuir uma versão para testes (gratuita) cujas funcionalidades servem aos propósitos desse trabalho acadêmico.
Utilizando o Figma criamos as telas de acordo com o diagrama de fluxograma usando informações próximas.
Essa proposta traduz as informações necessárias disposta de forma que fiquem claras aos usuários para podermos testar a facilidade dos usuários identificar informações e interagirem com elas. Aprovado o wireframe, definiremos na próxima etapa o estilo gráfico da aplicação.
DEFINIÇÃO DO ESTILO GRÁFICO (7ª AULA)
Após analisarmos as nossas referências de UI, chegamos a conclusão de que o projeto deve ter um apelo visual mais forte como diferencial, por isso optamos pelas cores escuras como base, e dar ênfase nos itens de destaques através de cores mais vivas.
Além disso, definimos o nome do projeto para Jenkins — um personagem de um MMORPG (sigla para jogos de RPG online e em massa para multijogadores) — baseado em um mundo de fantasia medieval, que ficou famoso por não esperar o seu grupo decidir qual estratégia seria usada para enfrentar os inimigos da próxima sala. Por causa de sua ação, Jenkins se tornou um “ícone” e possui várias homenagens dentro do jogo.
Por isso, acreditamos que sua atitude se relaciona diretamente com a definição de nosso projeto, de decidir rapidamente onde ir para comer ou beber. Levando em consideração que o personagem Leeroy Jenkins era um paladino (normalmente designado como protetor), buscamos a identidade de um escudo para representar o nosso logo:
DESENVOLVIMENTO DE PROTÓTIPO DE ALTA DEFINIÇÃO (8ª AULA)
Depois de definirmos o estilo gráfico e logo do projeto, demos início no desenvolvimento das telas do aplicativo, em alta definição. O software escolhido para o desenvolvimento do projeto, foi o Framer — uma ferramenta que mescla design, prototipagem e códigos, e possibilita a criação de protótipos com alta complexidade de interação — não encontrada em outras opções que analisamos, como: Adobe XD, Invision, MarvelApp e Figma.
O estilo gráfico aplicado às telas do nosso projeto resulta em:
DESENVOLVIMENTO DE PROTÓTIPO DE ALTA DEFINIÇÃO (9ª AULA)
Demos continuidade ao desenvolvimento de nosso projeto, e algumas mudanças foram feitas, tanto no estilo gráfico quanto na escolha da ferramenta para prototipagem.
Um ponto que não foi considerado é que a ferramenta escolhida anteriormente (Framer), não permite a edição de alguns elementos na versão gratuita— por isso, decidimos seguir com outras ferramentas da Adobe para conduzir as microinterações, e o Invision App para a prototipagem.
CRIAÇÃO DE BIBLIOTECA DE PADRÕES (10ª AULA)
Nesta etapa, iniciamos a criação de nosso style guide — contemplando a família tipográfica escolhida, paleta de cores, ícones e os componentes de interface. Abaixo, segue uma prévia do arquivo referente à biblioteca de padrões.
A versão mais atualizada (WIP) pode ser encontrada no link a seguir: https://www.behance.net/gallery/57780043/Jenkins-(style-guide)
CRIAÇÃO DE BIBLIOTECA DE PADRÕES (11ª AULA)
Demos continuidade no desenvolvimento do protótipo de alta definição e da biblioteca de padrões, que podem ser conferidos nos links abaixo:
Protótipo: https://invis.io/8PK1228628326J#/258420408_Splash-Anim
Style guide: https://www.behance.net/gallery/57780043/Jenkins-(style-guide)
