Workshop - Design de Interfaces para Dispositivos Móveis

1,068 views
849 views

Published 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 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.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,068
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
39
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Workshop - Design de Interfaces para Dispositivos Móveis

  1. 1. workshop de design de interação Design de Interface para dispositivos móveis
  2. 2. Tema da atividade: TUrismo durante a copa do mundo Workshop: Daniel Lugondi - Felipe Cumaru - Helio Souza - Jonathas Silva
  3. 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. 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. 5. workshop de design de interação Design de Interface para dispositivos móveis
  6. 6. workshop de design de interação Design de Interface para dispositivos móveis
  7. 7. você tem que ser o usuário! workshop de design de interação Design de Interface para dispositivos móveis
  8. 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. 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. 10. Não é um computador tradicional! workshop de design de interação Design de Interface para dispositivos móveis
  11. 11. A interface tem que ser repensada workshop de design de interação Design de Interface para dispositivos móveis
  12. 12. somente os elementos chave continuam! workshop de design de interação Design de Interface para dispositivos móveis
  13. 13. Atividade vs. tempo workshop de design de interação Design de Interface para dispositivos móveis
  14. 14. Atividade vs. tempo workshop de design de interação Design de Interface para dispositivos móveis
  15. 15. Como fazemos? workshop de design de interação Design de Interface para dispositivos móveis
  16. 16. necessidades vs. funcionalidades workshop de design de interação Design de Interface para dispositivos móveis
  17. 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. 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. 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. 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. 21. design deve ser pensado como diferencial workshop de design de interação Design de Interface para dispositivos móveis
  22. 22. workshop de design de interação Design de Interface para dispositivos móveis
  23. 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. 24. Fluxos workshop de design de interação Design de Interface para dispositivos móveis
  25. 25. mapas do site workshop de design de interação Design de Interface para dispositivos móveis
  26. 26. FLUXOS DE TAREFA workshop de design de interação Design de Interface para dispositivos móveis
  27. 27. FLUXOS HÍBRIDOS workshop de design de interação Design de Interface para dispositivos móveis
  28. 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. 29. Fluxos - recomendações de apresentação workshop de design de interação Design de Interface para dispositivos móveis
  30. 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. 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. 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. 33. Sem desculpas de que não sabem desenhar!
  34. 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. 35. 1. Alinhamento e espaçamento
  36. 36. 2. Consistência
  37. 37. 3. Ecossistemas
  38. 38. 4. LEGIBILIDADE
  39. 39. 5. "AFFORDANCE"
  40. 40. 6. CORES E FORMAS
  41. 41. 7. HIERARQUIA VISUAL
  42. 42. 8. TIPOGRAFIA
  43. 43. 9. TESTES
  44. 44. 10. ORGANIZAÇÃO
  45. 45. VAMOS PROTOTIPAR? workshop de design de interação Design de Interface para dispositivos móveis
  46. 46. Ícones launcher workshop de design de interação Design de Interface para dispositivos móveis
  47. 47. workshop de design de interação Design de Interface para dispositivos móveis
  48. 48. Significante x Significado workshop de design de interação Design de Interface para dispositivos móveis
  49. 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. 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. 51. onde o Flat começou? Windows Phone??? workshop de design de interação Windows 8??? Design de Interface para dispositivos móveis
  52. 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. 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. 54. Skeumorphismo x Flat Piet Mondrian workshop de design de interação Design de Interface para dispositivos móveis
  55. 55. interface metro workshop de design de interação Design de Interface para dispositivos móveis
  56. 56. vamos ao q interessa!!! quadrado triângulo workshop de design de interação círculo Design de Interface para dispositivos móveis
  57. 57. Grid iOS grid workshop de design de interação Design de Interface para dispositivos móveis
  58. 58. onde começa tudo isso? workshop de design de interação Design de Interface para dispositivos móveis
  59. 59. Conceito workshop de design de interação Design de Interface para dispositivos móveis
  60. 60. referências workshop de design de interação Design de Interface para dispositivos móveis
  61. 61. rafes manuais workshop de design de interação Design de Interface para dispositivos móveis
  62. 62. rafes digitais workshop de design de interação Design de Interface para dispositivos móveis
  63. 63. produto final workshop de design de interação Design de Interface para dispositivos móveis
  64. 64. aplicação em fundo colorido workshop de design de interação Design de Interface para dispositivos móveis
  65. 65. aplicações workshop de design de interação Design de Interface para dispositivos móveis
  66. 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. 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. 68. Obrigado! workshop de design de interação Design de Interface para dispositivos móveis

×