Workshop - Design de Interfaces para Dispositivos Móveis
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Workshop - Design de Interfaces para Dispositivos Móveis

  • 498 views
Uploaded on

Workshop desenvolvido para a 5ª Semana de Design do Centro Universitário do Norte – UNINORTE em Manaus. O principal objetivo desta ação foi principalmente compartilhar as principais atividades do......

Workshop desenvolvido para a 5ª Semana de Design do Centro Universitário do Norte – UNINORTE em Manaus. O principal objetivo desta ação foi principalmente compartilhar as principais atividades do designer em um time multidisciplinar com foco na produção de interfaces para dispositivos móveis.

Com atividades que mesclaram tanto o viés teórico quanto atividades práticas, os alunos tiveram a oportunidade de verificar por meio das expertises dos palestrantes o mindset necessário a concepção de interfaces, as principais características, diferenças e similaridades entre plataformas, tendências assim como ferramentas que podem subsidiar esse processo criativo.

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
498
On Slideshare
475
From Embeds
23
Number of Embeds
2

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 23

https://www.behance.net 22
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. workshop de design de interação Design de Interface para dispositivos móveis
  • 2. Tema da atividade: TUrismo durante a copa do mundo Workshop: Daniel Lugondi - Felipe Cumaru - Helio Souza - Jonathas Silva
  • 3. Para ENTENDER o universo dos dispositivos móveis é preciso entender primeiro os USUÁRIOS workshop de design de interação Design de Interface para dispositivos móveis
  • 4. ...e o que eles buscam Facilidade? Entretenimento? Agilidade? workshop de design de interação Inovação? Design de Interface para dispositivos móveis
  • 5. workshop de design de interação Design de Interface para dispositivos móveis
  • 6. workshop de design de interação Design de Interface para dispositivos móveis
  • 7. você tem que ser o usuário! workshop de design de interação Design de Interface para dispositivos móveis
  • 8. você tem que ser o usuário! A day in the life workshop de design de interação Design de Interface para dispositivos móveis
  • 9. você tem que ser o usuário! como funciona? pesado ou leve? confortável? ergonômico? como acesso as funções? ● quais botões ele possui? ● quais aplicativos são legais? ● ● ● ● ● A day in the life workshop de design de interação Design de Interface para dispositivos móveis
  • 10. Não é um computador tradicional! workshop de design de interação Design de Interface para dispositivos móveis
  • 11. A interface tem que ser repensada workshop de design de interação Design de Interface para dispositivos móveis
  • 12. somente os elementos chave continuam! workshop de design de interação Design de Interface para dispositivos móveis
  • 13. Atividade vs. tempo workshop de design de interação Design de Interface para dispositivos móveis
  • 14. Atividade vs. tempo workshop de design de interação Design de Interface para dispositivos móveis
  • 15. Como fazemos? workshop de design de interação Design de Interface para dispositivos móveis
  • 16. necessidades vs. funcionalidades workshop de design de interação Design de Interface para dispositivos móveis
  • 17. necessidades vs. funcionalidades ● Pessoas de negócios ou usuários finais? ● jovens ou idosos? ● mulheres? crianças? ● uso diário? ocasional? workshop de design de interação Design de Interface para dispositivos móveis
  • 18. necessidades vs. funcionalidades ● Pessoas de negócios ou usuários finais? ● jovens ou idosos? ● mulheres? crianças? ● uso diário? ocasional? workshop de design de interação ● consumir ou produzir conteúdo? ● Serviços acoplados? ● resolver um problema ou apenas entretenimento? Design de Interface para dispositivos móveis
  • 19. necessidades vs. funcionalidades ● Pessoas de negócios ou usuários finais? ● jovens ou idosos? ● mulheres? crianças? ● uso diário? ocasional? ● consumir ou produzir conteúdo? ● Serviços acoplados? ● resolver um problema ou apenas entretenimento? O que o usuário realmente quer? workshop de design de interação Design de Interface para dispositivos móveis
  • 20. necessidades vs. funcionalidades ● Pessoas de negócios ou usuários finais? ● jovens ou idosos? ● mulheres? crianças? ● uso diário? ocasional? ● consumir ou produzir conteúdo? ● Serviços acoplados? ● resolver um problema ou apenas entretenimento? O que o usuário realmente quer? O que o usuário realmente precisa? workshop de design de interação Design de Interface para dispositivos móveis
  • 21. design deve ser pensado como diferencial workshop de design de interação Design de Interface para dispositivos móveis
  • 22. workshop de design de interação Design de Interface para dispositivos móveis
  • 23. atividade 1. Utilizar o painel para composição das principais necessidades (percebidas ou que se julgue verdadeiras) dos usuários. 2. Utilizar uma coluna análoga para sugerir as funcionalidade compatíveis para a resolução dos problemas/necessidades elencados. :) workshop de design de interação Design de Interface para dispositivos móveis
  • 24. Fluxos workshop de design de interação Design de Interface para dispositivos móveis
  • 25. mapas do site workshop de design de interação Design de Interface para dispositivos móveis
  • 26. FLUXOS DE TAREFA workshop de design de interação Design de Interface para dispositivos móveis
  • 27. FLUXOS HÍBRIDOS workshop de design de interação Design de Interface para dispositivos móveis
  • 28. Fluxos - por onde começar? De cima para baixo: > Recomendado se quando está no plano estratégico com entendimento dos objetivos do produto e necessidades dos usuários. De baixo para cima: > Recomendado para análise do conteúdo e requisitos funcionais, começando com material já existente, objetiva refletir as necessidades dos usuários. FONTE: GARRET, Jesse James.The Elements of User Experience: User-Centered Design for the Web and Beyond, Second Edition. NewRiders, 2011. workshop de design de interação Design de Interface para dispositivos móveis
  • 29. Fluxos - recomendações de apresentação workshop de design de interação Design de Interface para dispositivos móveis
  • 30. Fluxos, vamos fazer! >> Com os requisitos é hora de começar o fluxo… > Podemos ter algumas etapas: REQUISITOS LISTA DE CAMINHOS workshop de design de interação FLUXO Design de Interface para dispositivos móveis
  • 31. Prototipação Teste rápido, erre rápido, e acerte rápido. Para seguir este caminho, que é a chave do sucesso na inovação, saber prototipar e modelar um projeto evita que se gaste com ideias que talvez não estejam prontas para o mercado. workshop de design de interação Design de Interface para dispositivos móveis
  • 32. Prototipação em papel Modelo básico, de baixo custo, que auxilia o teste de usabilidade, validando fluxos e a interface de aplicações e websites. workshop de design de interação Design de Interface para dispositivos móveis
  • 33. Sem desculpas de que não sabem desenhar!
  • 34. MAS ASSIM, TÃO FÁCIL? O protótipo é a melhor forma de testar se uma ideia funciona ou não antes de investir em seu desenvolvimento. Mas dar corpo a uma ideia e tirá-la do papel não é uma tarefa fácil. workshop de design de interação Design de Interface para dispositivos móveis
  • 35. 1. Alinhamento e espaçamento
  • 36. 2. Consistência
  • 37. 3. Ecossistemas
  • 38. 4. LEGIBILIDADE
  • 39. 5. "AFFORDANCE"
  • 40. 6. CORES E FORMAS
  • 41. 7. HIERARQUIA VISUAL
  • 42. 8. TIPOGRAFIA
  • 43. 9. TESTES
  • 44. 10. ORGANIZAÇÃO
  • 45. VAMOS PROTOTIPAR? workshop de design de interação Design de Interface para dispositivos móveis
  • 46. Ícones launcher workshop de design de interação Design de Interface para dispositivos móveis
  • 47. workshop de design de interação Design de Interface para dispositivos móveis
  • 48. Significante x Significado workshop de design de interação Design de Interface para dispositivos móveis
  • 49. Metodologia ● ● Problema Ordem Caos ● Resolução do Problema ● Produto final Briefing ● Pesquisa ● ● Desenvolvimento Conceituação workshop de design de interação Design de Interface para dispositivos móveis
  • 50. Skeumorphismo x Flat ● ● ● ● ● Texturas 3D Degradês Sombras Simula elementos reais workshop de design de interação ● ● ● ● ● ● ● Uniforme 2D Preenchimento Sólido Sombra chapada Simplificação de elementos Tipografia Favorece a pregnância Design de Interface para dispositivos móveis
  • 51. onde o Flat começou? Windows Phone??? workshop de design de interação Windows 8??? Design de Interface para dispositivos móveis
  • 52. O que é isso? composição em vermelho, amarelo e azul Piet Mondrian workshop de design de interação Design de Interface para dispositivos móveis
  • 53. O estilo o Neoplasticismo... ... defendia uma total limpeza espacial para a pintura, reduzindo-a a seus elementos mais puros e buscando suas características mais próprias. ● ● ● Van Doesburg Piet Mondrian Gerrit Rietvield A revista "De Stijl" foi uma publicação iniciada em 1917 por Theo van Doesburg e alguns colegas que viriam a compor o movimento artístico conhecido por Neoplasticismo. workshop de design de interação Design de Interface para dispositivos móveis
  • 54. Skeumorphismo x Flat Piet Mondrian workshop de design de interação Design de Interface para dispositivos móveis
  • 55. interface metro workshop de design de interação Design de Interface para dispositivos móveis
  • 56. vamos ao q interessa!!! quadrado triângulo workshop de design de interação círculo Design de Interface para dispositivos móveis
  • 57. Grid iOS grid workshop de design de interação Design de Interface para dispositivos móveis
  • 58. onde começa tudo isso? workshop de design de interação Design de Interface para dispositivos móveis
  • 59. Conceito workshop de design de interação Design de Interface para dispositivos móveis
  • 60. referências workshop de design de interação Design de Interface para dispositivos móveis
  • 61. rafes manuais workshop de design de interação Design de Interface para dispositivos móveis
  • 62. rafes digitais workshop de design de interação Design de Interface para dispositivos móveis
  • 63. produto final workshop de design de interação Design de Interface para dispositivos móveis
  • 64. aplicação em fundo colorido workshop de design de interação Design de Interface para dispositivos móveis
  • 65. aplicações workshop de design de interação Design de Interface para dispositivos móveis
  • 66. Referências e links Referências: >> UNGER, Russ & CHANDLER, Carolyn.O Guia para projetar UX: a experiência do usuário (UX) para projetistas de conteúdo digital, aplicações e web sites. Rio de Janeiro: Alta Com. Com. Ltda., 2009. Links: >> http://iainstitute.org/pt/translations/000332.html >> Android DevSite: http://developer.android.com/design/index.html >> I Phone DevSite: https://developer.apple.com/devcenter/ios/index.action >> Windows Phone DevSite: http://developer.windowsphone.com/en-us >> Alessandra Mess: http://www.behance.net/gallery/Processo-criativo-marcapessoal/6292423 Ferramentas: Microsoft Visio - http://office.microsoft.com/visio Axure RP Pro - http://www.axure.com OmniGraffle - http://www.omnigroup.com/omniGraffle/ POP - https://popapp.in/ Fluid UI - https://fluidui.com/ workshop de design de interação Design de Interface para dispositivos móveis
  • 67. Contatos Daniel Lugondi - UX e interação >> me@daniellugondi.net Jonathas Silva - UX e fluxos >> jonathassilvabr@gmail.com Felipe Cumaru - UI e wireframes >> fcumaru@gmail.com Hélio Souza - UI e ícones >> helio2010br@gmail.com workshop de design de interação Design de Interface para dispositivos móveis
  • 68. Obrigado! workshop de design de interação Design de Interface para dispositivos móveis