SlideShare una empresa de Scribd logo
1 de 81
Descargar para leer sin conexión
DESIGN X ARTE
O Próprio Gropius afirma que antes de um
exercício puro do racionalismo funcional, a
Bauhaus deveria procurar definir os limites deste
enfoque, e através da separação daquilo que é
meramente arbitrário do que é essencial e típico,
permitir ao espírito criativo construir o novo sobre a
base tecnológica já adquirida pela humanidade

                                                   wikipedia
O Próprio Gropius afirma que antes de um
exercício puro do racionalismo funcional, a
Bauhaus deveria procurar definir os limites deste
enfoque, e através da separação daquilo que é
meramente arbitrário do que é essencial e típico,
permitir ao espírito criativo construir o novo sobre a
base tecnológica já adquirida pela humanidade

                                                   wikipedia
MANIFESTO DE BAUHAUS (1919)
A ação de vanguarda deles iria provoca uma
alteração duradoura na história da arquitetura e
das artes plásticas em geral. Não era para
menos visto que a ambição do movimento era
“a nova construção do futuro.” Começava então
uma das mais importantes transformações do
século 20: a aliança entre a estética e a
tecnologia, entre o artista e a indústria.

                               Educaterra - História por Voltaire Schilling
MANIFESTO DE BAUHAUS (1919)
A ação de vanguarda deles iria provoca uma
alteração duradoura na história da arquitetura e
das artes plásticas em geral. Não era para
menos visto que a ambição do movimento era
“a nova construção do futuro.” Começava então
uma das mais importantes transformações do
século 20: a aliança entre a estética e a
tecnologia, entre o artista e a indústria.

                               Educaterra - História por Voltaire Schilling
IDEAL DE ENGENHARIA
 O Principal objetivo da maioria dos projetos
da web é facilitar ao cliente o desempenho de
                  tarefas úteis
IDEAL DE ENGENHARIA
 O Principal objetivo da maioria dos projetos
da web é facilitar ao cliente o desempenho de
                  tarefas úteis
ETAPAS DE PROJETO
•Contextualização do projeto
•Levantamento de requisitos
•Priorização de requisitos
•Criação de Personas e Cenários
•Mapeamento de Fluxo de navegação
•Sitemap
•Escrever roteiros de testes com usuário
•Wireframes
•Executar testes com usuário
•Documentar
•Apresentar
ETAPAS DE PROJETO
•Contextualização do projeto               •1d
•Levantamento de requisitos                •3d
•Priorização de requisitos                 •1d
•Criação de Personas e Cenários            •3d
•Mapeamento de Fluxo de navegação          •3d
•Sitemap                                   •3d
•Escrever roteiros de testes com usuário   •3d
•Wireframes                                •8d
•Executar testes com usuário               •4d
•Documentar                                •2d
•Apresentar                                •3d
34
   DIAS ÚTEIS
Aproximadamente 2 meses
R$   21.760


1 DESIGNER
Valor hora 80,00
DESIGNERS, NA VERDADE, NÃO
RESOLVEM PROBLEMAS. DESIGNERS
     TRABALHAM COM ELES.

                      MARTY NEUMEIER
MUITOS DESIGNERS NÃO SABEM
   A DIFERENÇA DE UX E UI
http://www.youtube.com/watch?v=2wZUTe70w1Y&feature=related
Jesse James Garrett
WIREFRAME TO CODE
PESSOAS METÓDICAS
CONFUSAS
PREGUIÇOSAS
MUITO PREGUIÇOSAS
MEDO
WIREFRAME


 DESIGN


FRONT-END


BACK-END
MODELO TRADICIONAL
Cada etapa finalizada dá origem ao começo
 da etapa seguinte. Processo demorado e
            gera dependência.
ANÁLISE


    DESIGN


DESENVOLVIMENTO


      QA
WIREFRAME


DESIGN    FRONT-END



               BACK-END
MODELO AVANÇADO
 Necessita de uma documentação bastante
  definida no protótipo para que a etapa de
   codificação possa ser iniciada. Com a
interação e arquitetura definida, ainda pode
 ser iniciada uma terceira etapa simultânea
  que é a do desenvolvimento do sistema.
WIREFRAME   DESENVOLVIMENTO


 DESIGN           QA
MODELO ÁGIL
 Sprint 1: prever, mapear e arquitetar o que
será feito na sprint 2. Paralelo a isso, temos
que codificar o que será trabalhado na sprint
 atual e corrigir erros e melhorias da sprint
            atual e sprint anterior.
12
 5
40  PROJETOS
 DESIGNERS
DESENVOLVEDORES
  SIMULTÂNEOS
15MIN X 12 =   3 HORAS!
PLANNING
  3HORAS
  REVIEW
   1HORA
    X12


48 HORAS!
NOS TORNAMOS
PROFISSIONAIS REATIVOS
POSTURA REATIVA
Investigar o que está errado e corrigir
POSTURA PROATIVA
Além da correção, age-se de modo
   aperfeiçoativo e preventivo.
HORÁCIO SOARES NETO (O TIRO E O ALVO)
A postura reativa é filha do passado enquanto
         a proativa é mãe do futuro.
LEAN UX
Conceito   Aprovação   Iteração   feedback
Diagram of the iterative design and critique process. Warfel, Todd Zaki
Jakob Nielsen - http://www.useit.com/alertbox/20000319.html
ATENDER REQUISITOS NÃO
GERA UMA BOA APLICAÇÃO
UM LAYOUT BONITO NÃO
GERA UMA BOA APLICAÇÃO
USAR HTML5 NÃO GERA UMA
     BOA APLICAÇÃO
AGRADAR O CLIENTE NÃO
GERA UMA BOA APLICAÇÃO
SATISFAZER O USUÁRIO GERA
    UMA BOA APLICAÇÃO
IDEAL DE ENGENHARIA
 O Principal objetivo da maioria dos projetos
da web é facilitar ao cliente o desempenho de
                  tarefas úteis
ADAPTE O PROCESSO AO
    SEU NEGÓCIO
ADAPTE O SEU NEGÓCIO
     AO USUÁRIO
STARTUP




Lance   feedback
USER EXPERIENCE DESIGN PROCES
  HTTP://IAINSTITUTE.ORG/DOCUMENTS/TOOLS/EXPERIENCEDESIGNFLOW_BW
THINKS IN FLOWS, NOT SCREENS



                          Jason Putorti
SEMPRE TRABALHE COM MELHORIAS CONTÍNUAS
SIMPLICIDADE É A MAIS NOVA SOFISTICAÇÃO




                                  Saint Exupery
GREATE DESIGN IS INVISIBLE




                             Joshua Porter
Não é possível obter uma criação coletiva
 a partir da soma de criações individuais.
 Uma criação é sempre resultado de um
      processo conjunto de criação.

                               Horácio Soares Neto
Joshua Porter



www.bernarddeluna.com | @bernarddeluna

Más contenido relacionado

La actualidad más candente

Maker Innovation - estratégias maker inspirando inovação
Maker Innovation - estratégias maker inspirando inovaçãoMaker Innovation - estratégias maker inspirando inovação
Maker Innovation - estratégias maker inspirando inovaçãoHeloisa Neves
 
Estratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisEstratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisRobson Santos
 
Movimento maker e a rede Fab Lab
Movimento maker e a rede Fab Lab Movimento maker e a rede Fab Lab
Movimento maker e a rede Fab Lab Heloisa Neves
 
Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/20103bits Estúdio Criativo
 
workshop - Conheça o Fab Lab: Como criar um Fab Lab
workshop - Conheça o Fab Lab: Como criar um Fab Labworkshop - Conheça o Fab Lab: Como criar um Fab Lab
workshop - Conheça o Fab Lab: Como criar um Fab LabHeloisa Neves
 
Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Pedro Moreira da Silva
 

La actualidad más candente (8)

04 O artefato organizador para um espaço de trabalho projeto 21_ v 2015.2
04 O artefato organizador  para um espaço de trabalho projeto 21_ v 2015.204 O artefato organizador  para um espaço de trabalho projeto 21_ v 2015.2
04 O artefato organizador para um espaço de trabalho projeto 21_ v 2015.2
 
Maker Innovation - estratégias maker inspirando inovação
Maker Innovation - estratégias maker inspirando inovaçãoMaker Innovation - estratégias maker inspirando inovação
Maker Innovation - estratégias maker inspirando inovação
 
Pp1 f8 estudo de caso 1
Pp1 f8   estudo de caso 1Pp1 f8   estudo de caso 1
Pp1 f8 estudo de caso 1
 
Estratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos DigitaisEstratégia para Desenvolvimento de Produtos Digitais
Estratégia para Desenvolvimento de Produtos Digitais
 
Movimento maker e a rede Fab Lab
Movimento maker e a rede Fab Lab Movimento maker e a rede Fab Lab
Movimento maker e a rede Fab Lab
 
Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010Design & Código - Palestra Oi Futuro - Jul/2010
Design & Código - Palestra Oi Futuro - Jul/2010
 
workshop - Conheça o Fab Lab: Como criar um Fab Lab
workshop - Conheça o Fab Lab: Como criar um Fab Labworkshop - Conheça o Fab Lab: Como criar um Fab Lab
workshop - Conheça o Fab Lab: Como criar um Fab Lab
 
Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)Designing Systems: An Approach to Responsive Web Design (Portuguese)
Designing Systems: An Approach to Responsive Web Design (Portuguese)
 

Destacado

História da Arte: Arte e design
História da Arte: Arte e design História da Arte: Arte e design
História da Arte: Arte e design Raphael Lanzillotte
 
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01Fátima Soares
 
Apresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - DadaísmoApresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - DadaísmoAmanda Gondim
 
Segunda aplicação do enem 2013: Artes
Segunda aplicação do enem 2013: ArtesSegunda aplicação do enem 2013: Artes
Segunda aplicação do enem 2013: Artesma.no.el.ne.ves
 
Da idade média ao renascimento
Da idade média ao renascimentoDa idade média ao renascimento
Da idade média ao renascimentoma.no.el.ne.ves
 
Segunda aplicação do enem 2009, artes
Segunda aplicação do enem 2009, artesSegunda aplicação do enem 2009, artes
Segunda aplicação do enem 2009, artesma.no.el.ne.ves
 
Arte acadêmica ou academicismo no ENEM
Arte acadêmica ou academicismo no ENEMArte acadêmica ou academicismo no ENEM
Arte acadêmica ou academicismo no ENEMma.no.el.ne.ves
 
Segunda aplicação do enem 2014, Artes
Segunda aplicação do enem 2014, ArtesSegunda aplicação do enem 2014, Artes
Segunda aplicação do enem 2014, Artesma.no.el.ne.ves
 
Segunda aplicação do enem 2011, artes
Segunda aplicação do enem 2011, artesSegunda aplicação do enem 2011, artes
Segunda aplicação do enem 2011, artesma.no.el.ne.ves
 
Criação Publicitária - Espaço Pixel - 15-02-2014
Criação Publicitária - Espaço Pixel - 15-02-2014Criação Publicitária - Espaço Pixel - 15-02-2014
Criação Publicitária - Espaço Pixel - 15-02-2014Netto Carvalho
 
Segunda aplicação do enem 2015, Artes
Segunda aplicação do enem 2015, ArtesSegunda aplicação do enem 2015, Artes
Segunda aplicação do enem 2015, Artesma.no.el.ne.ves
 
Terceira aplicação do enem 2014: Artes
Terceira aplicação do enem 2014: ArtesTerceira aplicação do enem 2014: Artes
Terceira aplicação do enem 2014: Artesma.no.el.ne.ves
 
ENEM-2015 resolvido e comentado: Artes
ENEM-2015 resolvido e comentado: ArtesENEM-2015 resolvido e comentado: Artes
ENEM-2015 resolvido e comentado: Artesma.no.el.ne.ves
 
Arte contemporânea novas linguagens 2012
Arte contemporânea novas linguagens 2012Arte contemporânea novas linguagens 2012
Arte contemporânea novas linguagens 2012soniamarys
 
Segunda aplicação do enem 2013: Compreensão textual
Segunda aplicação do enem 2013: Compreensão textualSegunda aplicação do enem 2013: Compreensão textual
Segunda aplicação do enem 2013: Compreensão textualma.no.el.ne.ves
 
Segunda aplicação do enem 2014, Literatura
Segunda aplicação do enem 2014, LiteraturaSegunda aplicação do enem 2014, Literatura
Segunda aplicação do enem 2014, Literaturama.no.el.ne.ves
 

Destacado (20)

História da Arte: Arte e design
História da Arte: Arte e design História da Arte: Arte e design
História da Arte: Arte e design
 
Arte x comércio
Arte x comércioArte x comércio
Arte x comércio
 
Slides bullying 2010
Slides bullying 2010Slides bullying 2010
Slides bullying 2010
 
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01
Histriadaarte tendnciasdaartecontempornea-140315155657-phpapp01
 
Apresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - DadaísmoApresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - Dadaísmo
 
Segunda aplicação do enem 2013: Artes
Segunda aplicação do enem 2013: ArtesSegunda aplicação do enem 2013: Artes
Segunda aplicação do enem 2013: Artes
 
Da idade média ao renascimento
Da idade média ao renascimentoDa idade média ao renascimento
Da idade média ao renascimento
 
Segunda aplicação do enem 2009, artes
Segunda aplicação do enem 2009, artesSegunda aplicação do enem 2009, artes
Segunda aplicação do enem 2009, artes
 
Arte acadêmica ou academicismo no ENEM
Arte acadêmica ou academicismo no ENEMArte acadêmica ou academicismo no ENEM
Arte acadêmica ou academicismo no ENEM
 
Segunda aplicação do enem 2014, Artes
Segunda aplicação do enem 2014, ArtesSegunda aplicação do enem 2014, Artes
Segunda aplicação do enem 2014, Artes
 
Segunda aplicação do enem 2011, artes
Segunda aplicação do enem 2011, artesSegunda aplicação do enem 2011, artes
Segunda aplicação do enem 2011, artes
 
Criação Publicitária - Espaço Pixel - 15-02-2014
Criação Publicitária - Espaço Pixel - 15-02-2014Criação Publicitária - Espaço Pixel - 15-02-2014
Criação Publicitária - Espaço Pixel - 15-02-2014
 
Segunda aplicação do enem 2015, Artes
Segunda aplicação do enem 2015, ArtesSegunda aplicação do enem 2015, Artes
Segunda aplicação do enem 2015, Artes
 
Arte barroca no ENEM
Arte barroca no ENEMArte barroca no ENEM
Arte barroca no ENEM
 
Terceira aplicação do enem 2014: Artes
Terceira aplicação do enem 2014: ArtesTerceira aplicação do enem 2014: Artes
Terceira aplicação do enem 2014: Artes
 
ENEM-2015 resolvido e comentado: Artes
ENEM-2015 resolvido e comentado: ArtesENEM-2015 resolvido e comentado: Artes
ENEM-2015 resolvido e comentado: Artes
 
Arte contemporânea novas linguagens 2012
Arte contemporânea novas linguagens 2012Arte contemporânea novas linguagens 2012
Arte contemporânea novas linguagens 2012
 
Soutode moura
Soutode mouraSoutode moura
Soutode moura
 
Segunda aplicação do enem 2013: Compreensão textual
Segunda aplicação do enem 2013: Compreensão textualSegunda aplicação do enem 2013: Compreensão textual
Segunda aplicação do enem 2013: Compreensão textual
 
Segunda aplicação do enem 2014, Literatura
Segunda aplicação do enem 2014, LiteraturaSegunda aplicação do enem 2014, Literatura
Segunda aplicação do enem 2014, Literatura
 

Similar a Design agil: Encaixando o Design no processo

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
PARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMPARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMJose Vargas
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...Agile Trends
 
Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Jornalismo Digital
 
TDC 2012 - Fishbowl conversation sobre Arquitetura
TDC 2012 - Fishbowl conversation sobre ArquiteturaTDC 2012 - Fishbowl conversation sobre Arquitetura
TDC 2012 - Fishbowl conversation sobre ArquiteturaLeandro Daniel
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Projeto arquitetônico
Projeto arquitetônicoProjeto arquitetônico
Projeto arquitetônicorodrigo ramon
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
Arte Computacional
Arte ComputacionalArte Computacional
Arte ComputacionalLucas Cabral
 
Hexagonal Architecture
Hexagonal ArchitectureHexagonal Architecture
Hexagonal ArchitectureLucas Moura
 
Aula 02 ciclo de um produto
Aula 02   ciclo de um produtoAula 02   ciclo de um produto
Aula 02 ciclo de um produtoRenaldo Adriano
 
aula1introducaoarquitetura.pdf
aula1introducaoarquitetura.pdfaula1introducaoarquitetura.pdf
aula1introducaoarquitetura.pdfAntonio Lobato
 
Introducao a Arquitetura de Software
Introducao a Arquitetura de SoftwareIntroducao a Arquitetura de Software
Introducao a Arquitetura de SoftwareUFPA
 
Chega de "tapa na UX" - Agile trends 2016
Chega de "tapa na UX" - Agile trends 2016Chega de "tapa na UX" - Agile trends 2016
Chega de "tapa na UX" - Agile trends 2016Tiago Silva da Silva
 
Profissão: Designer de Interação
Profissão: Designer de InteraçãoProfissão: Designer de Interação
Profissão: Designer de InteraçãoTersis Zonato
 

Similar a Design agil: Encaixando o Design no processo (20)

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
PARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMPARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIM
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Guia_Bim_AsBEA.pdf
Guia_Bim_AsBEA.pdfGuia_Bim_AsBEA.pdf
Guia_Bim_AsBEA.pdf
 
Guia BIM AsBEA
Guia BIM AsBEAGuia BIM AsBEA
Guia BIM AsBEA
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...
Fabricio Dore - Design e Agile – esqueceram de combinar com os russos (Como c...
 
Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1Planejamento de produtos digitais - 1
Planejamento de produtos digitais - 1
 
TDC 2012 - Fishbowl conversation sobre Arquitetura
TDC 2012 - Fishbowl conversation sobre ArquiteturaTDC 2012 - Fishbowl conversation sobre Arquitetura
TDC 2012 - Fishbowl conversation sobre Arquitetura
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Projeto arquitetônico
Projeto arquitetônicoProjeto arquitetônico
Projeto arquitetônico
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Arte Computacional
Arte ComputacionalArte Computacional
Arte Computacional
 
Hexagonal Architecture
Hexagonal ArchitectureHexagonal Architecture
Hexagonal Architecture
 
Aula 02 ciclo de um produto
Aula 02   ciclo de um produtoAula 02   ciclo de um produto
Aula 02 ciclo de um produto
 
Usabilidade Simples
Usabilidade SimplesUsabilidade Simples
Usabilidade Simples
 
aula1introducaoarquitetura.pdf
aula1introducaoarquitetura.pdfaula1introducaoarquitetura.pdf
aula1introducaoarquitetura.pdf
 
Introducao a Arquitetura de Software
Introducao a Arquitetura de SoftwareIntroducao a Arquitetura de Software
Introducao a Arquitetura de Software
 
Chega de "tapa na UX" - Agile trends 2016
Chega de "tapa na UX" - Agile trends 2016Chega de "tapa na UX" - Agile trends 2016
Chega de "tapa na UX" - Agile trends 2016
 
Profissão: Designer de Interação
Profissão: Designer de InteraçãoProfissão: Designer de Interação
Profissão: Designer de Interação
 

Más de Bunee.io - Hiring with Intelligence

[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna Bunee.io - Hiring with Intelligence
 

Más de Bunee.io - Hiring with Intelligence (20)

O que não lhe contaram sobre a carreira de DEV
O que não lhe contaram sobre a carreira de DEVO que não lhe contaram sobre a carreira de DEV
O que não lhe contaram sobre a carreira de DEV
 
Como fazer um Pitch Fantástico
Como fazer um Pitch FantásticoComo fazer um Pitch Fantástico
Como fazer um Pitch Fantástico
 
The BGs - Background CSS
The BGs - Background CSSThe BGs - Background CSS
The BGs - Background CSS
 
Pensando em Redesign
Pensando em RedesignPensando em Redesign
Pensando em Redesign
 
Como ser Único (sexy)?
Como ser Único (sexy)?Como ser Único (sexy)?
Como ser Único (sexy)?
 
A importância de Aprender Ensinando
A importância de Aprender EnsinandoA importância de Aprender Ensinando
A importância de Aprender Ensinando
 
Lean UX: Parem de criar produtos, comecem a criar experiências
Lean UX: Parem de criar produtos, comecem a criar experiênciasLean UX: Parem de criar produtos, comecem a criar experiências
Lean UX: Parem de criar produtos, comecem a criar experiências
 
Lean UX para aplicativos mobile
Lean UX para aplicativos mobileLean UX para aplicativos mobile
Lean UX para aplicativos mobile
 
Design behind scenes and layers
Design behind scenes and layersDesign behind scenes and layers
Design behind scenes and layers
 
Semântica: Uma jornada pelos componentes web
Semântica: Uma jornada pelos componentes webSemântica: Uma jornada pelos componentes web
Semântica: Uma jornada pelos componentes web
 
como pensar front para wordpress
como pensar front para wordpresscomo pensar front para wordpress
como pensar front para wordpress
 
Atenção: Dev no palco!
Atenção: Dev no palco!Atenção: Dev no palco!
Atenção: Dev no palco!
 
Layouts Responsivos
Layouts ResponsivosLayouts Responsivos
Layouts Responsivos
 
Surpresa
SurpresaSurpresa
Surpresa
 
Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3Quero ser um ninja em xHTML, HTML5 e CSS3
Quero ser um ninja em xHTML, HTML5 e CSS3
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
UX SUX
UX SUXUX SUX
UX SUX
 
Planejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativosPlanejamento de um wireframe orientado para aplicativos
Planejamento de um wireframe orientado para aplicativos
 
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna [FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
[FrontinBH] Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
 
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de LunaQuero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
Quero ser um ninja em xHTML, HTML5 e CSS3 - Bernard de Luna
 

Design agil: Encaixando o Design no processo

  • 1.
  • 3.
  • 4. O Próprio Gropius afirma que antes de um exercício puro do racionalismo funcional, a Bauhaus deveria procurar definir os limites deste enfoque, e através da separação daquilo que é meramente arbitrário do que é essencial e típico, permitir ao espírito criativo construir o novo sobre a base tecnológica já adquirida pela humanidade wikipedia
  • 5. O Próprio Gropius afirma que antes de um exercício puro do racionalismo funcional, a Bauhaus deveria procurar definir os limites deste enfoque, e através da separação daquilo que é meramente arbitrário do que é essencial e típico, permitir ao espírito criativo construir o novo sobre a base tecnológica já adquirida pela humanidade wikipedia
  • 6. MANIFESTO DE BAUHAUS (1919) A ação de vanguarda deles iria provoca uma alteração duradoura na história da arquitetura e das artes plásticas em geral. Não era para menos visto que a ambição do movimento era “a nova construção do futuro.” Começava então uma das mais importantes transformações do século 20: a aliança entre a estética e a tecnologia, entre o artista e a indústria. Educaterra - História por Voltaire Schilling
  • 7. MANIFESTO DE BAUHAUS (1919) A ação de vanguarda deles iria provoca uma alteração duradoura na história da arquitetura e das artes plásticas em geral. Não era para menos visto que a ambição do movimento era “a nova construção do futuro.” Começava então uma das mais importantes transformações do século 20: a aliança entre a estética e a tecnologia, entre o artista e a indústria. Educaterra - História por Voltaire Schilling
  • 8.
  • 9. IDEAL DE ENGENHARIA O Principal objetivo da maioria dos projetos da web é facilitar ao cliente o desempenho de tarefas úteis
  • 10. IDEAL DE ENGENHARIA O Principal objetivo da maioria dos projetos da web é facilitar ao cliente o desempenho de tarefas úteis
  • 11. ETAPAS DE PROJETO •Contextualização do projeto •Levantamento de requisitos •Priorização de requisitos •Criação de Personas e Cenários •Mapeamento de Fluxo de navegação •Sitemap •Escrever roteiros de testes com usuário •Wireframes •Executar testes com usuário •Documentar •Apresentar
  • 12. ETAPAS DE PROJETO •Contextualização do projeto •1d •Levantamento de requisitos •3d •Priorização de requisitos •1d •Criação de Personas e Cenários •3d •Mapeamento de Fluxo de navegação •3d •Sitemap •3d •Escrever roteiros de testes com usuário •3d •Wireframes •8d •Executar testes com usuário •4d •Documentar •2d •Apresentar •3d
  • 13. 34 DIAS ÚTEIS Aproximadamente 2 meses
  • 14. R$ 21.760 1 DESIGNER Valor hora 80,00
  • 15.
  • 16. DESIGNERS, NA VERDADE, NÃO RESOLVEM PROBLEMAS. DESIGNERS TRABALHAM COM ELES. MARTY NEUMEIER
  • 17. MUITOS DESIGNERS NÃO SABEM A DIFERENÇA DE UX E UI
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 31. MEDO
  • 33. MODELO TRADICIONAL Cada etapa finalizada dá origem ao começo da etapa seguinte. Processo demorado e gera dependência.
  • 34. ANÁLISE DESIGN DESENVOLVIMENTO QA
  • 35.
  • 36. WIREFRAME DESIGN FRONT-END BACK-END
  • 37. MODELO AVANÇADO Necessita de uma documentação bastante definida no protótipo para que a etapa de codificação possa ser iniciada. Com a interação e arquitetura definida, ainda pode ser iniciada uma terceira etapa simultânea que é a do desenvolvimento do sistema.
  • 38.
  • 39. WIREFRAME DESENVOLVIMENTO DESIGN QA
  • 40. MODELO ÁGIL Sprint 1: prever, mapear e arquitetar o que será feito na sprint 2. Paralelo a isso, temos que codificar o que será trabalhado na sprint atual e corrigir erros e melhorias da sprint atual e sprint anterior.
  • 41.
  • 42.
  • 43. 12 5 40 PROJETOS DESIGNERS DESENVOLVEDORES SIMULTÂNEOS
  • 44.
  • 45.
  • 46. 15MIN X 12 = 3 HORAS!
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52. PLANNING 3HORAS REVIEW 1HORA X12 48 HORAS!
  • 53.
  • 55. POSTURA REATIVA Investigar o que está errado e corrigir
  • 56. POSTURA PROATIVA Além da correção, age-se de modo aperfeiçoativo e preventivo.
  • 57. HORÁCIO SOARES NETO (O TIRO E O ALVO) A postura reativa é filha do passado enquanto a proativa é mãe do futuro.
  • 58.
  • 59.
  • 60.
  • 62. Conceito Aprovação Iteração feedback
  • 63. Diagram of the iterative design and critique process. Warfel, Todd Zaki
  • 64. Jakob Nielsen - http://www.useit.com/alertbox/20000319.html
  • 65. ATENDER REQUISITOS NÃO GERA UMA BOA APLICAÇÃO
  • 66. UM LAYOUT BONITO NÃO GERA UMA BOA APLICAÇÃO
  • 67. USAR HTML5 NÃO GERA UMA BOA APLICAÇÃO
  • 68. AGRADAR O CLIENTE NÃO GERA UMA BOA APLICAÇÃO
  • 69. SATISFAZER O USUÁRIO GERA UMA BOA APLICAÇÃO
  • 70. IDEAL DE ENGENHARIA O Principal objetivo da maioria dos projetos da web é facilitar ao cliente o desempenho de tarefas úteis
  • 71. ADAPTE O PROCESSO AO SEU NEGÓCIO
  • 72. ADAPTE O SEU NEGÓCIO AO USUÁRIO
  • 73.
  • 74. STARTUP Lance feedback
  • 75. USER EXPERIENCE DESIGN PROCES HTTP://IAINSTITUTE.ORG/DOCUMENTS/TOOLS/EXPERIENCEDESIGNFLOW_BW
  • 76. THINKS IN FLOWS, NOT SCREENS Jason Putorti
  • 77. SEMPRE TRABALHE COM MELHORIAS CONTÍNUAS
  • 78. SIMPLICIDADE É A MAIS NOVA SOFISTICAÇÃO Saint Exupery
  • 79. GREATE DESIGN IS INVISIBLE Joshua Porter
  • 80. Não é possível obter uma criação coletiva a partir da soma de criações individuais. Uma criação é sempre resultado de um processo conjunto de criação. Horácio Soares Neto