SlideShare ist ein Scribd-Unternehmen logo
1 von 37
Downloaden Sie, um offline zu lesen
Flat Design e a
Re-Cultura da
Interface
//UX.BLOG
Trabalha há nove anos com projetos nas áreas de
usabilidade, interface, interação, criação e web standards.
É curador da área de Design da Campus Party Brasil.
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Edu Agni / UX Designer no iMasters
Em 1968, Doug Engelbart fez a
demonstração de um produto no San
Franscisco Civic Auditorium que mudou o
curso da história...
O Mouse
Cultura da Interface
Mapeamento de Bits e o
Espaço Informação
Dados passam a ter uma localização física
e uma localização virtual, sendo
manipulados diretamente pelo usuário.
Interface: zona entre o meio
e a mensagem
Essas metaformas, esses mapeamentos
de bits virão para ocupar praticamente
todas as facetas da sociedade
contemporânea: trabalho, divertimento,
amor, família, arte elevada, cultura
popular, política.
Skeumorfismo
Ornamento físico, desenho ou técnica
sobre um objeto feito para se parecer com
um outro material ou técnica.
O desktop começa com a descoberta da
metáfora do escritório e em seguida
examina as dificuldades da representação
da vida social nessa moldura limitada.
The Anti-Mac Interface
1996 - Don Gentner e Jacob Nielsen
O artigo The Anti-Mac Interface viria a
inspirar designers da geração seguinte e
revolucionar a forma como nós
interagimos com nossos computadores.
Realidade
Delegação
Descrever e comandar
Diversidade
Representar significado
Controle compartilhado
Sistema lida com detalhes
Modelar ações do usuário
Variedade gráfica
Sugestões ricas
Metáforas
Manipulação Direta
Ver e apontar
Consistência
WYSIWYG
Controle do usuário
Feedback e diálogo
Remissão
Integridade estética
Janelas restritivas
Anti-macMac x
The Mac and Anti-Mac
design principles
O design de Interfaces vem se
aproximando da tendência de um
design mais simples, minimalista,
responsivo e vetorial.
Flat Design
Design sem utilização de Skeumorfismo e
elementos tridimensionais como
gradientes e sombreamentos.
Flat Design
★ Minimalista
★ Cores chapadas
★ Tipografia nítida
★ Bons contrastes
★ Fácil compreenção
Windows Phone x Windows 8
iOS 7 x OS X Mavericks
As metáforas de hoje são outras.
Asnovasgeraçõessãoorganicamentedigitais.
Cada vez mais, o menos é mais.
Algumas referências
★ Livro: Cultura da Interface, de Steven Johnson
★ The Anti-Mac Interface (http://bit.ly/XC4lc3)
★ The Floppy Disk means Save, and 14 other old people Icons that don't make sense
anymore (http://bit.ly/IDt0nn)
★ Skeumorfismo, uma análise (http://bit.ly/16Dp7fe)
★ Flat Design x Skeuomorfismo: tendência ou necessidade? (http://bit.ly/14lrKBC)
//UX.BLOG
Edu Agni / UX Designer no iMasters
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)

Weitere ähnliche Inhalte

Was ist angesagt?

Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design InterfaceOdair Cavichioli
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalMarconi Pacheco
 
Interação Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisInteração Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisJuliano Padilha
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digitalMarconi Pacheco
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemasanatofol
 
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
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioEdu Agni
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirUXPA-Rio
 
Material design mesmice ou inovação
Material design   mesmice ou inovaçãoMaterial design   mesmice ou inovação
Material design mesmice ou inovaçãoDirect Talk
 
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
 
Workshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáWorkshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáJonathas Scott
 

Was ist angesagt? (20)

style guide ui
style guide uistyle guide ui
style guide ui
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Webdesign - Design Interface
Webdesign - Design InterfaceWebdesign - Design Interface
Webdesign - Design Interface
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
Interação Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturaisInteração Homem-Computador - Interfaces naturais
Interação Homem-Computador - Interfaces naturais
 
Evolução do design digital
Evolução do design digitalEvolução do design digital
Evolução do design digital
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Ux vs Ui
Ux vs UiUx vs Ui
Ux vs Ui
 
Usabilidade para sistemas
Usabilidade para sistemasUsabilidade para sistemas
Usabilidade para sistemas
 
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
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Desenvolvimento Centrado no Usuário
Desenvolvimento Centrado no UsuárioDesenvolvimento Centrado no Usuário
Desenvolvimento Centrado no Usuário
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
 
Material design mesmice ou inovação
Material design   mesmice ou inovaçãoMaterial design   mesmice ou inovação
Material design mesmice ou inovação
 
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
 
Workshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - CuiabáWorkshop moodle rede de escolas - Cuiabá
Workshop moodle rede de escolas - Cuiabá
 

Andere mochten auch

Tcc flat design na rede globo - felipe clark teodoroski
Tcc   flat design na rede globo - felipe clark teodoroskiTcc   flat design na rede globo - felipe clark teodoroski
Tcc flat design na rede globo - felipe clark teodoroskiDiego Moreau
 
Metáforas de interface
Metáforas de interfaceMetáforas de interface
Metáforas de interfaceNiurcaC
 
O usuário está bêbado
O usuário está bêbadoO usuário está bêbado
O usuário está bêbadojlcarv
 
A EvoluçãO AnalóGico X Digital
A EvoluçãO AnalóGico X DigitalA EvoluçãO AnalóGico X Digital
A EvoluçãO AnalóGico X Digitalagenciatarget
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação Leonardo Foletto
 
TDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaTDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaAndressa Chiara
 
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid MarquesiMasters
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon KulikowskiiMasters
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEOEdu Agni
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceEdu Agni
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetupPedro Donati
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Horácio Soares
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosEiti Kimura
 
Como lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLComo lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLpichiliani
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliverySamanta Cicilia
 

Andere mochten auch (18)

Tcc flat design na rede globo - felipe clark teodoroski
Tcc   flat design na rede globo - felipe clark teodoroskiTcc   flat design na rede globo - felipe clark teodoroski
Tcc flat design na rede globo - felipe clark teodoroski
 
Metáforas de interface
Metáforas de interfaceMetáforas de interface
Metáforas de interface
 
O usuário está bêbado
O usuário está bêbadoO usuário está bêbado
O usuário está bêbado
 
A EvoluçãO AnalóGico X Digital
A EvoluçãO AnalóGico X DigitalA EvoluçãO AnalóGico X Digital
A EvoluçãO AnalóGico X Digital
 
Arquitetura da informação
Arquitetura da informação Arquitetura da informação
Arquitetura da informação
 
TDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem traumaTDC POA 2016 - Priorizando sem trauma
TDC POA 2016 - Priorizando sem trauma
 
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
7Masters jQuery - Acessibilidade com jQuery Validate, com Deivid Marques
 
7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski7Masters jQuery - jQuery além do código, com Leon Kulikowski
7Masters jQuery - jQuery além do código, com Leon Kulikowski
 
UX é o novo SEO
UX é o novo SEOUX é o novo SEO
UX é o novo SEO
 
Jornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerceJornada do Consumidor no E-commerce
Jornada do Consumidor no E-commerce
 
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
#NoEndState : Plataformas, Produtores e Interfaces no Product tank meetup
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
 
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas DistribuídosQConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
QConSP16 - Apache Cassandra Evoluindo Sistemas Distribuídos
 
SPL Datastructures
SPL DatastructuresSPL Datastructures
SPL Datastructures
 
Como lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQLComo lidar com dados temporais e intervalos com a linguagem SQL
Como lidar com dados temporais e intervalos com a linguagem SQL
 
Metáforas em interfaces digitais
Metáforas em interfaces digitaisMetáforas em interfaces digitais
Metáforas em interfaces digitais
 
CNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous DeliveryCNQS - Testes Automatizados & Continuous Delivery
CNQS - Testes Automatizados & Continuous Delivery
 
Let's log!
Let's log!Let's log!
Let's log!
 

Ähnlich wie Flat Design e a Re-Cultura da Interface

Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Marcelo Prudente
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Oziel Moreira Neto
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Mauro Pinheiro
 
Agner Abciber 2011
Agner Abciber 2011Agner Abciber 2011
Agner Abciber 2011Luiz Agner
 
Design de interfaces gráficas
Design de interfaces gráficasDesign de interfaces gráficas
Design de interfaces gráficasUTFPR
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interaçãoLuiz Agner
 
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 20107Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010Kao Tokio
 
Experiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoExperiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoUFPE
 
O que é o design parte 1
O que é o design  parte 1O que é o design  parte 1
O que é o design parte 1Luis Vieira
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosLuara Schamó
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisDaniel Lugondi
 
Arquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do UsuárioArquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do UsuárioThais Campas
 
Tiago esteves n%c2%ba12
Tiago esteves n%c2%ba12Tiago esteves n%c2%ba12
Tiago esteves n%c2%ba12Pedro Fidalgo
 

Ähnlich wie Flat Design e a Re-Cultura da Interface (20)

Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!Interface e Usabilidade: Como levar o usuário onde queremos!
Interface e Usabilidade: Como levar o usuário onde queremos!
 
Metro UI na IxDA Floripa
Metro UI na IxDA FloripaMetro UI na IxDA Floripa
Metro UI na IxDA Floripa
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...
 
Agner Abciber 2011
Agner Abciber 2011Agner Abciber 2011
Agner Abciber 2011
 
Interface web
Interface webInterface web
Interface web
 
Design de interfaces gráficas
Design de interfaces gráficasDesign de interfaces gráficas
Design de interfaces gráficas
 
Seminario
SeminarioSeminario
Seminario
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
 
O que é o Design
O que é o DesignO que é o Design
O que é o Design
 
O que é o design
O que é o designO que é o design
O que é o design
 
7Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 20107Game Design Interface Kao Tokio Unibero 2010
7Game Design Interface Kao Tokio Unibero 2010
 
Experiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no GovernoExperiência do usuário e Design de Interfaces no Governo
Experiência do usuário e Design de Interfaces no Governo
 
Trends 2017
Trends 2017Trends 2017
Trends 2017
 
O que é o design parte 1
O que é o design  parte 1O que é o design  parte 1
O que é o design parte 1
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgos
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
Engenharia semiotica
Engenharia semioticaEngenharia semiotica
Engenharia semiotica
 
Arquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do UsuárioArquitetura da Informação e Experiência do Usuário
Arquitetura da Informação e Experiência do Usuário
 
Tiago esteves n%c2%ba12
Tiago esteves n%c2%ba12Tiago esteves n%c2%ba12
Tiago esteves n%c2%ba12
 

Mehr von Edu Agni

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEdu Agni
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEdu Agni
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User ExperienceEdu Agni
 
UX Maturity
UX MaturityUX Maturity
UX MaturityEdu Agni
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaEdu Agni
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UXEdu Agni
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digitalEdu Agni
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência DigitalEdu Agni
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosEdu Agni
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalEdu Agni
 
Design Emocional
Design EmocionalDesign Emocional
Design EmocionalEdu Agni
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasEdu Agni
 

Mehr von Edu Agni (12)

Emancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do DesignEmancipação pelo Aprendizado do Design
Emancipação pelo Aprendizado do Design
 
Ensino do design em tempos de quarentena
Ensino do design em tempos de quarentenaEnsino do design em tempos de quarentena
Ensino do design em tempos de quarentena
 
Inovação e User Experience
Inovação e User ExperienceInovação e User Experience
Inovação e User Experience
 
UX Maturity
UX MaturityUX Maturity
UX Maturity
 
Pesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-EstruturadaPesquisa de Campo e a Entrevista Semi-Estruturada
Pesquisa de Campo e a Entrevista Semi-Estruturada
 
Projetando com Lean UX
Projetando com Lean UXProjetando com Lean UX
Projetando com Lean UX
 
A imersão na experiência digital
A imersão na experiência digitalA imersão na experiência digital
A imersão na experiência digital
 
Gamificando a Experiência Digital
Gamificando a Experiência DigitalGamificando a Experiência Digital
Gamificando a Experiência Digital
 
A evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessáriosA evolução da internet e os cuidados necessários
A evolução da internet e os cuidados necessários
 
Design Emocional e a Experiência Digital
Design Emocional e a Experiência DigitalDesign Emocional e a Experiência Digital
Design Emocional e a Experiência Digital
 
Design Emocional
Design EmocionalDesign Emocional
Design Emocional
 
Social interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoasSocial interface Design: projetando interações entre pessoas
Social interface Design: projetando interações entre pessoas
 

Flat Design e a Re-Cultura da Interface

  • 1. Flat Design e a Re-Cultura da Interface //UX.BLOG
  • 2. Trabalha há nove anos com projetos nas áreas de usabilidade, interface, interação, criação e web standards. É curador da área de Design da Campus Party Brasil. www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni //UX.BLOG Edu Agni / UX Designer no iMasters
  • 3. Em 1968, Doug Engelbart fez a demonstração de um produto no San Franscisco Civic Auditorium que mudou o curso da história...
  • 6. Mapeamento de Bits e o Espaço Informação
  • 7. Dados passam a ter uma localização física e uma localização virtual, sendo manipulados diretamente pelo usuário.
  • 8.
  • 9. Interface: zona entre o meio e a mensagem
  • 10. Essas metaformas, esses mapeamentos de bits virão para ocupar praticamente todas as facetas da sociedade contemporânea: trabalho, divertimento, amor, família, arte elevada, cultura popular, política.
  • 11. Skeumorfismo Ornamento físico, desenho ou técnica sobre um objeto feito para se parecer com um outro material ou técnica.
  • 12.
  • 13.
  • 14. O desktop começa com a descoberta da metáfora do escritório e em seguida examina as dificuldades da representação da vida social nessa moldura limitada.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. The Anti-Mac Interface 1996 - Don Gentner e Jacob Nielsen
  • 22. O artigo The Anti-Mac Interface viria a inspirar designers da geração seguinte e revolucionar a forma como nós interagimos com nossos computadores.
  • 23. Realidade Delegação Descrever e comandar Diversidade Representar significado Controle compartilhado Sistema lida com detalhes Modelar ações do usuário Variedade gráfica Sugestões ricas Metáforas Manipulação Direta Ver e apontar Consistência WYSIWYG Controle do usuário Feedback e diálogo Remissão Integridade estética Janelas restritivas Anti-macMac x The Mac and Anti-Mac design principles
  • 24. O design de Interfaces vem se aproximando da tendência de um design mais simples, minimalista, responsivo e vetorial.
  • 25.
  • 26. Flat Design Design sem utilização de Skeumorfismo e elementos tridimensionais como gradientes e sombreamentos.
  • 27.
  • 28.
  • 29.
  • 30. Flat Design ★ Minimalista ★ Cores chapadas ★ Tipografia nítida ★ Bons contrastes ★ Fácil compreenção
  • 31.
  • 32.
  • 33. Windows Phone x Windows 8
  • 34. iOS 7 x OS X Mavericks
  • 35. As metáforas de hoje são outras. Asnovasgeraçõessãoorganicamentedigitais. Cada vez mais, o menos é mais.
  • 36. Algumas referências ★ Livro: Cultura da Interface, de Steven Johnson ★ The Anti-Mac Interface (http://bit.ly/XC4lc3) ★ The Floppy Disk means Save, and 14 other old people Icons that don't make sense anymore (http://bit.ly/IDt0nn) ★ Skeumorfismo, uma análise (http://bit.ly/16Dp7fe) ★ Flat Design x Skeuomorfismo: tendência ou necessidade? (http://bit.ly/14lrKBC) //UX.BLOG
  • 37. Edu Agni / UX Designer no iMasters www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni //UX.BLOG Obrigado ;)