• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Workshop - Design de Interfaces para Dispositivos Móveis
 

Workshop - Design de Interfaces para Dispositivos Móveis

on

  • 325 views

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

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.

Statistics

Views

Total Views
325
Views on SlideShare
308
Embed Views
17

Actions

Likes
0
Downloads
11
Comments
0

2 Embeds 17

https://www.behance.net 16
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Workshop - Design de Interfaces para Dispositivos Móveis Workshop - Design de Interfaces para Dispositivos Móveis Presentation Transcript

    • 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
    • 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? Entretenimento? Agilidade? workshop de design de interação Inovaçã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! 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 diário? ocasional? 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 ● consumir ou produzir conteúdo? ● Serviços acoplados? ● resolver um problema ou apenas entretenimento? 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? ● 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
    • 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
    • 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. :) workshop de design de interação Design de Interface para dispositivos móveis
    • 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 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
    • 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 CAMINHOS workshop de design de interação FLUXO 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 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
    • 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
    • onde o Flat começou? Windows Phone??? workshop de design de interação Windows 8??? Design de Interface para dispositivos móveis
    • 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
    • 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
    • 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 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
    • 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 (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
    • 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
    • Obrigado! workshop de design de interação Design de Interface para dispositivos móveis