Download - Design para web, uma visão funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional.
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Front-end, front-who?
Design para web, uma viso funcional
Voc a interface, voc o macarro!
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Usurio
NecessidadeDesejoVontade
Front-end
AcessibilidadeUsabilidadeInteratividade
Back-end
FuncionalidadePerformanceEstabilidade
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Front-end Acessibilidade
Permitir acesso e uso de um produto
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Front-end Usabilidade
Facilidade e conforto no uso de um produto
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Front-end Interatividade
Atividade que envolve interao.
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Esttica?
Design para web, uma viso funcional
Toddynho
W3C
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Objetivos a atingir
AcessibilidadeUsabilidadeInteratividade
Obrigao
Esttica
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design x Arte
Nova apresentao para uma velha discusso
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Walter Gropius
Arquiteto alemoUm dos principais arquitetos do sculo XXPai da BauhausImpulsionador do modernismo atravs da Bauhaus
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Gestalt
Continuidade,Segregao,Semelhana,Unidade.
Design para web, uma viso funcional
Proximidade,Pregnncia,Fechamento,
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
KISSKeep it simple, Stupid!Keep it short and simpleKeep it simple and straightforward
Mantenha isto simples, estpido!
Design para web, uma viso funcional
Simplify, and add lightness (Colin Chapman, the founder of Lotus Cars)
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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.
Design para web, uma viso funcional
Five Principles to Design by Joshua Porter
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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)
Design para web, uma viso funcional
Five Principles to Design by Joshua Porter
Bing
Vdeohttp://www.youtube.com/watch?v=XlcDtCX-GwE
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Funcionalismo
Recurso tecnologia industrial, estandardizao e prefabricao em srie, isto , progressiva industrializao da produo de objetos da vida diria (design industrial);
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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.
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Estandardizao do carrinho de compras
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Estandardizao do carrinho de compras
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Estandardizao da grade de times
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
Estandardizao da grade de times
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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
Design para web, uma viso funcional
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
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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 para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design x Design
Nova apresentao para uma NOVA discusso
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
x
Ideal Artstico
Ideal de engenharia
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design para web, uma viso funcional
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.
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
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.
Design para web, uma viso funcional
Exclusive interview for WDD by Walter Apai.
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design funcional
Design para web, uma viso 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
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Design funcional
Design para web, uma viso 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)
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
Agora com vocs!
Design para web, uma viso funcional
Bernard De Luna - www.bernarddeluna.com - @bernarddeluna
A nova construo do futuro
Design para web, uma viso funcional
Sejam malucos. Obrigado!
www.bernarddeluna.com@bernarddeluna