Flat Design e a Re-Cultura da Interface
description
Transcript of Flat Design e a Re-Cultura da Interface
![Page 1: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/1.jpg)
Flat Design e a Re-Cultura da
Interface
//UX.BLOG
![Page 2: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/2.jpg)
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
![Page 3: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/3.jpg)
Em 1968, Doug Engelbart fez a demonstração de um produto no San Franscisco Civic Auditorium que mudou o curso da história...
![Page 4: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/4.jpg)
O Mouse
![Page 5: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/5.jpg)
Cultura da Interface
![Page 6: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/6.jpg)
Mapeamento de Bits e o Espaço Informação
![Page 7: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/7.jpg)
Dados passam a ter uma localização física e uma localização virtual, sendo manipulados diretamente pelo usuário.
![Page 8: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/8.jpg)
![Page 9: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/9.jpg)
Interface: zona entre o meio e a mensagem
![Page 10: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/10.jpg)
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.
![Page 11: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/11.jpg)
SkeumorfismoOrnamento físico, desenho ou técnica sobre um objeto feito para se parecer com um outro material ou técnica.
![Page 12: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/12.jpg)
![Page 13: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/13.jpg)
![Page 14: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/14.jpg)
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.
![Page 15: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/15.jpg)
![Page 16: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/16.jpg)
![Page 17: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/17.jpg)
![Page 18: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/18.jpg)
![Page 19: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/19.jpg)
![Page 20: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/20.jpg)
![Page 21: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/21.jpg)
The Anti-Mac Interface1996 - Don Gentner e Jacob Nielsen
![Page 22: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/22.jpg)
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.
![Page 23: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/23.jpg)
RealidadeDelegaçãoDescrever e comandarDiversidadeRepresentar significadoControle compartilhadoSistema lida com detalhesModelar ações do usuárioVariedade gráficaSugestões ricas
MetáforasManipulação Direta
Ver e apontarConsistência
WYSIWYGControle do usuárioFeedback e diálogo
RemissãoIntegridade estética
Janelas restritivas
Anti-macMac x
The Mac and Anti-Macdesign principles
![Page 24: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/24.jpg)
O design de Interfaces vem se aproximando da tendência de um design mais simples, minimalista, responsivo e vetorial.
![Page 25: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/25.jpg)
![Page 26: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/26.jpg)
Flat DesignDesign sem utilização de Skeumorfismo e elementos tridimensionais como gradientes e sombreamentos.
![Page 27: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/27.jpg)
![Page 28: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/28.jpg)
![Page 29: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/29.jpg)
![Page 30: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/30.jpg)
Flat Design
★ Minimalista★ Cores chapadas★ Tipografia nítida★ Bons contrastes★ Fácil compreenção
![Page 31: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/31.jpg)
![Page 32: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/32.jpg)
![Page 33: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/33.jpg)
Windows Phone x Windows 8
![Page 34: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/34.jpg)
iOS 7 x OS X Mavericks
![Page 35: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/35.jpg)
As metáforas de hoje são outras.As novas gerações são organicamente digitais.Cada vez mais, o menos é mais.
![Page 36: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/36.jpg)
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
![Page 37: Flat Design e a Re-Cultura da Interface](https://reader033.fdocuments.net/reader033/viewer/2022052622/5590b15f1a28abe4058b4669/html5/thumbnails/37.jpg)
Edu Agni / UX Designer no iMasters
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni
//UX.BLOG
Obrigado ;)