Não precisa ser assim! 
QUICK START 
MOBILE DESIGN 
Eduardo Roxius 
outubro 2014
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Esse cara sou eu 
Roxius 
· Graduando em Design na UFPE 
· D...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Por quê? 
Único designer na 
Tinha experiência em desenhar i...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
O que é? 
Case + coletânea de práticas, dicas e tutorial de ...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
NÃO
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
NÃO 
PRECISA
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
NÃO 
PRECISA 
SABER
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
NÃO 
PRECISA 
SABER 
PROGRAMAR
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Mobile Design? 
Apple 
(iOS) 
Android
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
MobiClub 3.0
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Painel de Controle 
MobiClub 3.0 
Aplicativo
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Algumas especificações de telas
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Site Map / Fluxograma
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Checklist
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Ferramentas utilizadas 
· Photoshop CS5+ 
· Illustrator CS5+...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
CHEGA DE AMOSTRAGEM! 
Vamos ao que interessa... 
Como eu com...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
O DesignMob estrutura um 
projeto de design mobile 
da segui...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Como o Roxius faz 
Briefing 
- Objetivos do projeto 
- Infor...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Como o Roxius faz
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Como o Roxius faz 
Site Map / Fluxograma 
Site Map 
Fluxogra...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Como o Roxius faz 
Site Map / Fluxograma 
= 
Gestão do proje...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Site Map ou Fluxograma? 
Site Map ≠ Fluxograma
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Site Map ou Fluxograma? 
Site Map ≠ Fluxograma 
Cataloga as ...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - Site Map 
WhatsApp
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Diagrama 
01 
Boas vindas
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
01 
Boas vindas 
02 
Digite o celular 
Digite o número do se...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
01 
Boas vindas 
02 
Digite o celular 
Digite o número do se...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
01 
Boas vindas 
02 
Digite o celular 
Digite o número do se...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
20 
01 
minutos 
Boas vindas 
02 
empresariais 
Digite o cel...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
20 
minutos 
01 
empresariais 
10 
minutos 
Boas vindas 
02 ...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
01 
tempo 
esgotado 
Boas vindas 
02 
Digite o celular 
Digi...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
Das telas identificadas, visitar todas 
a...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
Das telas identificadas, visitar todas 
a...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
Das telas identificadas, visitar todas 
a...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
Das telas identificadas, visitar todas 
a...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
15 
minutos 
empresariais 
Das telas iden...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
15 
minutos 
empresariais 
8 minutos 
Das...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Atividade - dados 
tempo 
esgotado 
Das telas identificadas,...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
INTERFACES 
O que são 
Onde vivem? 
Do que se alimentam?
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Interface 
Aquilo que interliga dois sistemas. 
No nosso cas...
TÁTIL
VISUAL
SONORA
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Interface 
DIGITAL ou ANALÓGICA
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
LAS 10 HEURISTICAS 
DE NIELSEN
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Las 10 heurísticas de Nielsen 
1) Feedback 
2) Falar a lingu...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Las 10 heurísticas de Nielsen 
vidjuzinhu
Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 
O que é preciso saber 
Interface 
UI ID 
AI 
IxD 
IHC 
UX
Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 
Zoa 
Interface 
UI ID 
AI 
IxD 
HCI 
UX 
User Interface 
Int...
Oficina Quick Start Mobile Design | Eduardo Roxius | 10/2014 
google: user experience venn diagram
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
google: elements of user experience
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Android Guidelines 
https://developer.android.com/
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
iOS Guidelines 
Google: “iOS guidelines”
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Elementos Básicos da UI 
1 - Status Bar 
2 - Navigation / Ma...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
O que eu tive que procurar 
idev101.com
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
O que eu tive que procurar 
androidpixels.net
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
O que eu tive que procurar 
Tem algumas coisas prontas na in...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Links Essenciais 
Ivo Mynttinen's iOS 7 Design Cheat Sheet 
...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Inspiração 
Dribbble 
https://dribbble.com/ 
UI Patterns 
ht...
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Considerações 
Finais
Oficina Quick Start Mobile Design | Eduardo Roxius | 11/2014 
Obrigado! 
Roxius 
eduardo@roxius.com 
http://eduardo.roxius...
Próximos SlideShares
Carregando em…5
×

Oficina Quick Start Mobile Design - R Design Recife 2014

586 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
586
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

×