0
workshop de design de
interação
Design de Interface para dispositivos móveis
Tema da atividade:
TUrismo durante a copa do mundo
Workshop:

Daniel Lugondi - Felipe Cumaru - Helio Souza - Jonathas Silv...
Para ENTENDER o universo dos
dispositivos móveis é preciso entender
primeiro os USUÁRIOS
workshop de design de interação

...
...e o que eles buscam
Facilidade?

Entretenimento?
Agilidade?

workshop de design de interação

Inovação?
Design de Inter...
workshop de design de interação

Design de Interface para dispositivos móveis
workshop de design de interação

Design de Interface para dispositivos móveis
você tem que ser o usuário!

workshop de design de interação

Design de Interface para dispositivos móveis
você tem que ser o usuário!

A day in the life

workshop de design de interação

Design de Interface para dispositivos móv...
você tem que ser o usuário!
como funciona?
pesado ou leve?
confortável?
ergonômico?
como acesso as
funções?
● quais botões...
Não é um computador tradicional!

workshop de design de interação

Design de Interface para dispositivos móveis
A interface tem que ser repensada

workshop de design de interação

Design de Interface para dispositivos móveis
somente os elementos
chave continuam!

workshop de design de interação

Design de Interface para dispositivos móveis
Atividade vs. tempo

workshop de design de interação

Design de Interface para dispositivos móveis
Atividade vs. tempo

workshop de design de interação

Design de Interface para dispositivos móveis
Como fazemos?

workshop de design de interação

Design de Interface para dispositivos móveis
necessidades vs. funcionalidades

workshop de design de interação

Design de Interface para dispositivos móveis
necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso...
necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso...
necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso...
necessidades vs. funcionalidades
● Pessoas de negócios
ou usuários finais?
● jovens ou idosos?
● mulheres? crianças?
● uso...
design deve ser pensado como

diferencial
workshop de design de interação

Design de Interface para dispositivos móveis
workshop de design de interação

Design de Interface para dispositivos móveis
atividade
1. Utilizar o painel para composição das principais
necessidades (percebidas ou que se julgue verdadeiras)
dos u...
Fluxos

workshop de design de interação

Design de Interface para dispositivos móveis
mapas do site

workshop de design de interação

Design de Interface para dispositivos móveis
FLUXOS DE TAREFA

workshop de design de interação

Design de Interface para dispositivos móveis
FLUXOS HÍBRIDOS

workshop de design de interação

Design de Interface para dispositivos móveis
Fluxos - por onde começar?
De cima para baixo:

> Recomendado se quando
está no plano estratégico com
entendimento dos obj...
Fluxos - recomendações de apresentação

workshop de design de interação

Design de Interface para dispositivos móveis
Fluxos, vamos fazer!
>> Com os requisitos é hora de começar o fluxo…
> Podemos ter algumas etapas:

REQUISITOS

LISTA
DE
C...
Prototipação
Teste rápido, erre rápido, e acerte rápido.
Para seguir este caminho, que é a chave do sucesso na
inovação, s...
Prototipação em papel
Modelo básico, de baixo custo, que auxilia o teste de
usabilidade, validando fluxos e a interface de...
Sem desculpas de que não sabem desenhar!
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 desenvo...
1. Alinhamento e espaçamento
2. Consistência
3. Ecossistemas
4. LEGIBILIDADE
5. "AFFORDANCE"
6. CORES E FORMAS
7. HIERARQUIA VISUAL
8. TIPOGRAFIA
9. TESTES
10. ORGANIZAÇÃO
VAMOS PROTOTIPAR?

workshop de design de interação

Design de Interface para dispositivos móveis
Ícones
launcher

workshop de design de interação

Design de Interface para dispositivos móveis
workshop de design de interação

Design de Interface para dispositivos móveis
Significante x Significado

workshop de design de interação

Design de Interface para dispositivos móveis
Metodologia
●
●

Problema

Ordem

Caos
●

Resolução do
Problema

●

Produto final

Briefing

●

Pesquisa

●
●

Desenvolvim...
Skeumorphismo x Flat
●
●
●
●
●

Texturas
3D
Degradês
Sombras
Simula elementos reais

workshop de design de interação

●
●
...
onde o Flat começou?

Windows Phone???

workshop de design de interação

Windows 8???

Design de Interface para dispositiv...
O que é isso?

composição em vermelho, amarelo e azul

Piet Mondrian

workshop de design de interação

Design de Interface...
O estilo

o Neoplasticismo...
... defendia uma total limpeza
espacial para a pintura, reduzindo-a
a seus elementos mais pu...
Skeumorphismo x Flat

Piet Mondrian

workshop de design de interação

Design de Interface para dispositivos móveis
interface metro

workshop de design de interação

Design de Interface para dispositivos móveis
vamos ao q interessa!!!

quadrado

triângulo

workshop de design de interação

círculo

Design de Interface para dispositi...
Grid

iOS grid

workshop de design de interação

Design de Interface para dispositivos móveis
onde começa tudo isso?

workshop de design de interação

Design de Interface para dispositivos móveis
Conceito

workshop de design de interação

Design de Interface para dispositivos móveis
referências

workshop de design de interação

Design de Interface para dispositivos móveis
rafes manuais

workshop de design de interação

Design de Interface para dispositivos móveis
rafes digitais

workshop de design de interação

Design de Interface para dispositivos móveis
produto final

workshop de design de interação

Design de Interface para dispositivos móveis
aplicação em fundo colorido

workshop de design de interação

Design de Interface para dispositivos móveis
aplicações

workshop de design de interação

Design de Interface para dispositivos móveis
Referências e links

Referências:

>> UNGER, Russ & CHANDLER, Carolyn.O Guia para projetar UX: a experiência do
usuário (U...
Contatos
Daniel Lugondi - UX e interação
>> me@daniellugondi.net

Jonathas Silva - UX e fluxos
>> jonathassilvabr@gmail.co...
Obrigado!

workshop de design de interação

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

Workshop - Design de Interfaces para Dispositivos Móveis

492

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
492
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×