Design para web, uma visão funcional

Bernard De Luna - www.bernarddeluna.com - @bernarddeluna

Design para web, uma viso funcional.


Bernard De Luna Freire da Fonseca Bittencourt

Carioca, 26 anos, morador e apaixonado por Vila Isabel. Formado em Publicidade e ps-graduando em Gesto Estratgica de Marketing Digital. Atualmente lder de equipe de Design de Interfaces da Petrobras e professor de Webdesign da Faculdade CCAA. Motociclista, botafoguense, metdico e aracnofbico. Acha que tudo na vida deve ser padronizado.

Design para web, uma viso funcional




Front-end, front-who?


Voc a interface, voc o macarro!


Usurio

NecessidadeDesejoVontade

Front-end

AcessibilidadeUsabilidadeInteratividade

Back-end

FuncionalidadePerformanceEstabilidade



Front-end Acessibilidade

Permitir acesso e uso de um produto



Front-end Usabilidade

Facilidade e conforto no uso de um produto



Front-end Interatividade

Atividade que envolve interao.



Esttica?


Toddynho

W3C

Google


Objetivos a atingir

AcessibilidadeUsabilidadeInteratividade

Obrigao

Esttica



Design x Arte

Nova apresentao para uma velha discusso



Walter Gropius

Arquiteto alemoUm dos principais arquitetos do sculo XXPai da BauhausImpulsionador do modernismo atravs da Bauhaus



Walter Gropius

Arquiteto alemoUm dos principais arquitetos do sculo XXPai da BauhausImpulsionador do modernismo atravs da Bauhaus

O prprio Gropius afirma que antes de um exerccio puro do racionalismo funcional, a Bauhaus deveria procurar definir os limites deste enfoque, e atravs da separao daquilo que meramente arbitrrio do que essencial e tpico, permitir ao esprito criativo construir o novo sobre a base tecnolgica j adquirida pela humanidade

wikipdia



Walter Gropius

Arquiteto alemoUm dos principais arquitetos do sculo XXPai da BauhausImpulsionador do modernismo e do funcionalismo atravs da Bauhaus

O prprio Gropius afirma que antes de um exerccio puro do racionalismo funcional, a Bauhaus deveria procurar definir os limites deste enfoque, e atravs da separao daquilo que meramente arbitrrio do que essencial e tpico, permitir ao esprito criativo construir o novo sobre a base tecnolgica j adquirida pela humanidade

wikipdia



Manifesto da Bauhaus (1919)

A ao de vanguarda deles iria provoca uma alterao duradoura na histria da arquitetura e das artes plsticas em geral. No era para menos visto que a ambio do movimento era a nova construo do futuro. Comeava ento uma das mais importantes transformaes do sculo 20: a aliana entre a esttica e a tecnologia, entre o artista e a indstria.

Educaterra Voltaire Schilling



Manifesto da Bauhaus (1919)

A ao de vanguarda deles iria provoca uma alterao duradoura na histria da arquitetura e das artes plsticas em geral. No era para menos visto que a ambio do movimento era a nova construo do futuro. Comeava ento uma das mais importantes transformaes do sculo 20: a aliana entre a esttica e a tecnologia, entre o artista e a indstria.

Educaterra Voltaire Schilling



Gestalt

Continuidade,Segregao,Semelhana,Unidade.


Proximidade,Pregnncia,Fechamento,






KISSKeep it simple, Stupid!Keep it short and simpleKeep it simple and straightforward

Mantenha isto simples, estpido!


Simplify, and add lightness (Colin Chapman, the founder of Lotus Cars)


Great Design is Invisible

An interesting property of great design is that it is taken for granted. It works so well that we forget that creative effort was involved to bring it about...Bad design is obvious because it hurts to use. It is awkward, difficult, and complex. In a great irony of the world, bad design is much easier to see than good design. It raps us on the head like a bully. Because of its success, great design is often invisible.


Five Principles to Design by Joshua Porter


Simplicity is the Ultimate Sophistication

In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away. (Saint Exupery)


Five Principles to Design by Joshua Porter

Google

Bing

Vdeohttp://www.youtube.com/watch?v=XlcDtCX-GwE


Funcionalismo

Recurso tecnologia industrial, estandardizao e prefabricao em srie, isto , progressiva industrializao da produo de objetos da vida diria (design industrial);



Estandardizao

o processo de tornar-se e de concordar padres tcnicos. Um padro um original que estabelea a engenharia uniforme ou especificaes, critrios, mtodos, processos, ou prticas tcnicas.




Estandardizao do carrinho de compras



Estandardizao do carrinho de compras



Estandardizao da grade de times



Estandardizao da grade de times


Why Design Standards Help Users

know what features to expect,know how these features will look in the interface,know where to find these features on t\he site and on the page,know how to operate each feature to achieve their goal,don't have to ponder the meaning of unknown design elements,don't miss important features because they overlook a non-standard design element,don't get nasty surprises when something doesn't work as expected


sabem que funcionalidades esperarsabem a aparncia que as funcionalidades terosabem onde encontrar tal funcionalidade no site e na pginasabem como operar a interface para cumprir seu objetivono perdem tempo tentando entender elementos desconhecidosno perdem uma funcionalidade importanteno tm surpresas quando algo no reage como esperado

Jakob Nielsen - http://www.useit.com


Jakob Nielsen

O rei da usabilidadeCientista da computao alemoAutor de mais de 10 livros de usabilidade, entre eles o famoso Designing Web Usability: The Practice of SimplicityAutor e mantenedor do site http://www.useit.com/alertbox



Design x Design

Nova apresentao para uma NOVA discusso




x

Ideal Artstico

Ideal de engenharia



x

Ideal Artstico

Ideal de engenharia

O ideal artstico de expressar-se e o ideal da engenharia de resolver um problema para o cliente. Este livro coloca-se firmemente ao lado da engenharia. Embora eu reconhea que haja necessidade de arte, alegria e diverso na Web, acredito que o principal objetivo da maioria dos projetos da web seja facilitar aos clientes o desempenho de tarefas teis

Jakob Nielsen - Designing web usability: The practice of simplicity.


For web designers, is it ok to break the rules of usability when creating artisitic portfolio websites and blogs?

Yes. First, the definition of art vs. design allows you to do anything in an art project, because it doesnt serve a utilitarian purpose.

Even though there certainly would be a business purpose in something like a portfolio site, the standard usability guidelines still wouldnt be as critical, for two reasons:

First, the target audience would be people with vastly superior Web skills (other designers, Internet managers, and the like). And second, people typically dont do much when visiting a portfolio other than browse it and admire it.

Thus, they wont be as dependent on easily-accessed features as users of, say, a home banking site where it would be a disaster if people transferred money to the wrong account.


Exclusive interview for WDD by Walter Apai.


Design funcional


www.traineo.com

www.istockphoto.com

www.istockphoto.com

www.rememble.com

www.mindmeister.com

www.wishlistr.com

www.formee.org

www.drinkcafe.com.br

www.frazz.com.br

www.logolicia.com.br

www.logolicia.com.br

www.skidun.com.br

www.apple.com


Design funcional


Pensar na execuo do Design (viabilidade, tecnologia, tempo, custo)Pensar no usurio como utilizador e no admiradorPensar se a arte aplicada tendncia e se o projeto precisar ser redesenhado ao passar a tendnciaPensar no ROI (return on investment)


Agora com vocs!



A nova construo do futuro


Sejam malucos. Obrigado!

www.bernarddeluna.com@bernarddeluna

Design para web, uma visão funcional

Design

Transcript of Design para web, uma visão funcional