37
Flat Design e a Re-Cultura da Interface //UX.BLOG

Flat Design e a Re-Cultura da Interface

  • Upload
    edu-agni

  • View
    17.414

  • Download
    0

Embed Size (px)

DESCRIPTION

Palestra ministrada no dia 06 de julho de 2012 no Sábado Criativo da SAIBADESIGN - http://bit.ly/17WdWSg

Citation preview

Page 1: Flat Design e a Re-Cultura da Interface

Flat Design e a Re-Cultura da

Interface

//UX.BLOG

Page 2: Flat Design e a Re-Cultura da Interface

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

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

O Mouse

Page 5: Flat Design e a Re-Cultura da Interface

Cultura da Interface

Page 6: Flat Design e a Re-Cultura da Interface

Mapeamento de Bits e o Espaço Informação

Page 7: Flat Design e a Re-Cultura da Interface

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
Page 9: Flat Design e a Re-Cultura da Interface

Interface: zona entre o meio e a mensagem

Page 10: Flat Design e a Re-Cultura da Interface

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

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
Page 13: Flat Design e a Re-Cultura da Interface
Page 14: Flat Design e a Re-Cultura da Interface

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
Page 16: Flat Design e a Re-Cultura da Interface
Page 17: Flat Design e a Re-Cultura da Interface
Page 18: Flat Design e a Re-Cultura da Interface
Page 19: Flat Design e a Re-Cultura da Interface
Page 20: Flat Design e a Re-Cultura da Interface
Page 21: Flat Design e a Re-Cultura da Interface

The Anti-Mac Interface1996 - Don Gentner e Jacob Nielsen

Page 22: Flat Design e a Re-Cultura da Interface

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

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

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
Page 26: Flat Design e a Re-Cultura da Interface

Flat DesignDesign sem utilização de Skeumorfismo e elementos tridimensionais como gradientes e sombreamentos.

Page 27: Flat Design e a Re-Cultura da Interface
Page 28: Flat Design e a Re-Cultura da Interface
Page 29: Flat Design e a Re-Cultura da Interface
Page 30: Flat Design e a Re-Cultura da Interface

Flat Design

★ Minimalista★ Cores chapadas★ Tipografia nítida★ Bons contrastes★ Fácil compreenção

Page 31: Flat Design e a Re-Cultura da Interface
Page 32: Flat Design e a Re-Cultura da Interface
Page 33: Flat Design e a Re-Cultura da Interface

Windows Phone x Windows 8

Page 34: Flat Design e a Re-Cultura da Interface

iOS 7 x OS X Mavericks

Page 35: Flat Design e a Re-Cultura da Interface

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

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

Edu Agni / UX Designer no iMasters

www.uxdesign.blog.br

www.twitter.com/eduagni

www.linkedin.com/in/eduagni

//UX.BLOG

Obrigado ;)