Interfaces intuitivas en dispositivos móviles de pantalla táctil
Workshop - Design de Interfaces para Dispositivos Móveis
77
workshop de design de interação Design de Interface para dispositivos móveis
-
Upload
daniel-lugondi -
Category
Design
-
view
494 -
download
1
description
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.
Transcript of Workshop - Design de Interfaces para Dispositivos Móveis
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 Silva
workshop de design de interação Design de Interface para dispositivos móveis
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
...e o que eles buscam
Facilidade?
Agilidade?
Entretenimento?
Inovação?
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
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óveis
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
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!
Atividade vs. tempo
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 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 diário? ocasional?
workshop de design de interação Design de Interface para dispositivos móveis
necessidades vs. funcionalidades
● consumir ou produzir conteúdo?
● Serviços acoplados?● resolver um problema
ou apenas entretenimento?
● 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
necessidades vs. funcionalidades
● consumir ou produzir conteúdo?
● Serviços acoplados?● resolver um problema
ou apenas entretenimento?
● Pessoas de negócios ou usuários finais?
● jovens ou idosos?● mulheres? crianças?● uso diário? ocasional?
O que o usuário realmente quer?
workshop de design de interação Design de Interface para dispositivos móveis
necessidades vs. funcionalidades
● consumir ou produzir conteúdo?
● Serviços acoplados?● resolver um problema
ou apenas entretenimento?
● Pessoas de negócios ou usuários finais?
● jovens ou idosos?● mulheres? crianças?● uso diário? ocasional?
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
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 usuários.
2. Utilizar uma coluna análoga para sugerir as funcionalidade compatíveis para a resolução dos problemas/necessidades elencados.
:)
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?
workshop de design de interação Design de Interface para dispositivos móveis
De cima para baixo:> Recomendado se quando está no plano estratégico com entendimento dos objetivos do produto e 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.
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.
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
LISTADE
CAMINHOS
FLUXO
workshop de design de interação Design de Interface para dispositivos móveis
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
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
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 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
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
● Briefing
● Pesquisa
● Conceituação
● Desenvolvimento
● Produto finalCaos Ordem
● Resolução do Problema
workshop de design de interação Design de Interface para dispositivos móveis
Skeumorphismo x Flat
● Texturas● 3D● Degradês● Sombras● Simula elementos reais
● Uniforme● 2D● Preenchimento Sólido● Sombra chapada● Simplificação de elementos● Tipografia● Favorece a pregnância
workshop de design de interação Design de Interface para dispositivos móveis
onde o Flat começou?
Windows Phone??? Windows 8???
workshop de design de interação Design de Interface para dispositivos móveis
O que é isso?
composição em vermelho, amarelo e azulPiet Mondrian
workshop de design de interação Design de Interface para dispositivos móveis
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.
● Van Doesburg
● Piet Mondrian
● Gerrit Rietvield
O estilo
o Neoplasticismo...
workshop de design de interação Design de Interface para dispositivos móveis
... defendia uma total limpeza espacial para a pintura, reduzindo-a a seus elementos mais puros e buscando suas características mais próprias.
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 círculo
workshop de design de interação Design de Interface para dispositivos móveis
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
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
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-marca-pessoal/6292423
Ferramentas:Microsoft Visio - http://office.microsoft.com/visioAxure RP Pro - http://www.axure.comOmniGraffle - 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
Contatos
Daniel Lugondi - UX e interação>> [email protected]
Jonathas Silva - UX e fluxos>> [email protected]
Felipe Cumaru - UI e wireframes>> [email protected]
Hélio Souza - UI e ícones>> [email protected]
workshop de design de interação Design de Interface para dispositivos móveis
Obrigado!
workshop de design de interação Design de Interface para dispositivos móveis
