Oficina Quick Start Mobile Design - R Design Recife 2014

581 visualizações

Publicada em

THE SLIDES ARE IN PORTUGUESE (BRAZILIAN)
Slides of my workshop (Quick Start Mobile Design), at R Design Recife 2014, 8th November. Because there was no time anymore we couldn't go deeper in interface designing.

________________


Slides da oficina Quick Start Mobile Design, que ministrei no R Design Recife 2014, em 8 de novembro de 2014. Devido ao tempo, não foi possível entrar mais a fundo no desenvolvimento de interfaces gráficas.

0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
581
No SlideShare
0
A partir de incorporações
0
Número de incorporações
11
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Oficina Quick Start Mobile Design - R Design Recife 2014

  1. 1. Não precisa ser assim! QUICK START MOBILE DESIGN Eduardo Roxius outubro 2014
  2. 2. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Esse cara sou eu Roxius · Graduando em Design na UFPE · Designer Freelancer · Estudo Design de Interação · Interaction Design Foundation Local Leader (Recife)
  3. 3. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Por quê? Único designer na Tinha experiência em desenhar interfaces, conhecia as boas práticas mas nunca tinha realmente “fechado” o design de um aplicativo; Informações soltas em vários locais; Meus amigos não souberam responder algumas dúvidas.
  4. 4. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 O que é? Case + coletânea de práticas, dicas e tutorial de como fazer o fechamento das telas para os desenvolvedores.
  5. 5. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
  6. 6. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 NÃO
  7. 7. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 NÃO PRECISA
  8. 8. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 NÃO PRECISA SABER
  9. 9. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 NÃO PRECISA SABER PROGRAMAR
  10. 10. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Mobile Design? Apple (iOS) Android
  11. 11. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 MobiClub 3.0
  12. 12. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Painel de Controle MobiClub 3.0 Aplicativo
  13. 13. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Algumas especificações de telas
  14. 14. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Site Map / Fluxograma
  15. 15. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Checklist
  16. 16. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Ferramentas utilizadas · Photoshop CS5+ · Illustrator CS5+ · PNG Express ($29) · Skala Preview · Teehan & Lax iOS 7 GUI PSD (iPhone) · UI Android Design Kit 4.3 (Android)
  17. 17. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 CHEGA DE AMOSTRAGEM! Vamos ao que interessa... Como eu começo o projeto?
  18. 18. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 O DesignMob estrutura um projeto de design mobile da seguinte maneira: 1 - Pré-projeto 2 - Estratégia 3 - Escopo 4 - Estrutura 5 - Desenvolvimento 6 - Publicação http://designmob.com.br/
  19. 19. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Como o Roxius faz Briefing - Objetivos do projeto - Informações sobre a empresa - Orçamento disponível - Público - Cronograma do projeto - Definições técnicas - Tabela de prioridades para as funcionalidades Pesquisa de concorrência
  20. 20. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Como o Roxius faz
  21. 21. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Como o Roxius faz Site Map / Fluxograma Site Map Fluxograma
  22. 22. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Como o Roxius faz Site Map / Fluxograma = Gestão do projeto
  23. 23. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Site Map ou Fluxograma? Site Map ≠ Fluxograma
  24. 24. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Site Map ou Fluxograma? Site Map ≠ Fluxograma Cataloga as seções do sistema. É ótimo para ter um overview (visão geral). Identifica as interações sistema-usuário. Na construção dele você vai inevitavelmente complementar o site map.
  25. 25. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - Site Map WhatsApp
  26. 26. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Diagrama 01 Boas vindas
  27. 27. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 01 Boas vindas 02 Digite o celular Digite o número do seu celular OK
  28. 28. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 01 Boas vindas 02 Digite o celular Digite o número do seu celular OK 03 ...
  29. 29. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 01 Boas vindas 02 Digite o celular Digite o número do seu celular OK 03 ... ... ... ...
  30. 30. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 20 01 minutos Boas vindas 02 empresariais Digite o celular Digite o número do seu celular OK 03 ... ... ... ...
  31. 31. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 20 minutos 01 empresariais 10 minutos Boas vindas 02 Digite o celular Digite o número do seu celular OK 03 ... ... ... ...
  32. 32. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 01 tempo esgotado Boas vindas 02 Digite o celular Digite o número do seu celular OK 03 ... ... ... ...
  33. 33. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas.
  34. 34. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone do whatsapp, chats, pesquisar, nova mensagem, whitmans chat, 12:06 PM, Zissou: ..., “1”
  35. 35. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone do whatsapp, chats, pesquisar, nova mensagem, whitmans chat, 12:06 PM, Zissou: ..., “1”
  36. 36. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone da aplicação, nome da tela, botão de pesquisa, botão de nova mensagem; Mensagens - nome do usuário, hora/data da msg, fragmento da mensagem, número de mensagens novas
  37. 37. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados 15 minutos empresariais Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone da aplicação, nome da tela, botão de pesquisa, botão de nova mensagem; Mensagens - nome do usuário, hora/data da msg, fragmento da mensagem, número de mensagens novas
  38. 38. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados 15 minutos empresariais 8 minutos Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone da aplicação, nome da tela, botão de pesquisa, botão de nova mensagem; Mensagens - nome do usuário, hora/data da msg, fragmento da mensagem, número de mensagens novas
  39. 39. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Atividade - dados tempo esgotado Das telas identificadas, visitar todas as possíveis e identificar os dados contidos nelas. Número da tela: XX Nome: home/início/tela inicial/chats Dados identificados: ícone da aplicação, nome da tela, botão de pesquisa, botão de nova mensagem; Mensagens - nome do usuário, hora/data da msg, fragmento da mensagem, número de mensagens novas
  40. 40. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 INTERFACES O que são Onde vivem? Do que se alimentam?
  41. 41. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Interface Aquilo que interliga dois sistemas. No nosso caso: humano e computador .
  42. 42. TÁTIL
  43. 43. VISUAL
  44. 44. SONORA
  45. 45. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Interface DIGITAL ou ANALÓGICA
  46. 46. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 LAS 10 HEURISTICAS DE NIELSEN
  47. 47. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Las 10 heurísticas de Nielsen 1) Feedback 2) Falar a linguagem do usuário 3) Saídas claramente demarcadas 4) Consistência 5) Prevenir erros 6) Minimizar a sobrecarga de memória do usuário 7) Atalhos 8) Diálogos simples e naturais 9) Boas mensagens de erro 10) Ajuda e documentação
  48. 48. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Las 10 heurísticas de Nielsen vidjuzinhu
  49. 49. Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 O que é preciso saber Interface UI ID AI IxD IHC UX
  50. 50. Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 Zoa Interface UI ID AI IxD HCI UX User Interface Interface Designer Information Architect User Experience Interaction Design Human-Computer Interaction
  51. 51. Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 google: user experience venn diagram
  52. 52. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 google: elements of user experience
  53. 53. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Android Guidelines https://developer.android.com/
  54. 54. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 iOS Guidelines Google: “iOS guidelines”
  55. 55. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Elementos Básicos da UI 1 - Status Bar 2 - Navigation / Main Action Bar 3 - Content 4 - Tab Bar / Action Bar 5 - Navigation Bar Google: “Kinvey Mobile Cheatsheet”
  56. 56. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 O que eu tive que procurar idev101.com
  57. 57. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 O que eu tive que procurar androidpixels.net
  58. 58. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 O que eu tive que procurar Tem algumas coisas prontas na internet... mas cuidado!
  59. 59. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Links Essenciais Ivo Mynttinen's iOS 7 Design Cheat Sheet http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/ Petrno Hejl's Android Design Cheat Sheet http://petrnohejl.github.io/Android-Cheatsheet-For-Graphic-Designers/ Kintek Portkit http://kintek.com.au/blog/portkit-ux-metaphor-equiva-lents- for-ios-and-android/ Teehan & Lax http://www.teehanlax.com/
  60. 60. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Inspiração Dribbble https://dribbble.com/ UI Patterns http://uipatterns.net/ Android App Patterns http://www.android-app-patterns.com/ Mobile Patterns http://www.mobile-patterns.com/
  61. 61. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Considerações Finais
  62. 62. Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 Obrigado! Roxius eduardo@roxius.com http://eduardo.roxius.com

×