O documento discute design funcional para web, apresentando os conceitos de usabilidade, acessibilidade e interatividade no frontend e funcionalidade, performance e estabilidade no backend. Defende uma abordagem funcional ao design web focada no usuário e suas necessidades, em oposição a um enfoque mais artístico.

1. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional.

2. 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 pós-graduando em Gestão Estratégica de Marketing Digital. Atualmente líder de equipe de Design de Interfaces da Petrobras e professor de Webdesign da Faculdade CCAA. Motociclista, botafoguense, metódico e aracnofóbico. Acha que tudo na vida deve ser padronizado. Design para web, uma visão funcional

3. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional

4. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Front-end, front-who ? Design para web, uma visão funcional

5. Você é a interface, você é o macarrão!

6. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Usuário Necessidade Desejo Vontade Front-end Acessibilidade Usabilidade Interatividade Back-end Funcionalidade Performance Estabilidade Design para web, uma visão funcional

7. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Front-end Acessibilidade Permitir acesso e uso de um produto Design para web, uma visão funcional

8. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Front-end Usabilidade Facilidade e conforto no uso de um produto Design para web, uma visão funcional

9. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Front-end Interatividade Atividade que envolve interação. Design para web, uma visão funcional

10. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Estética? Design para web, uma visão funcional

11. Toddynho

12. W3C

13. Google

14. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Objetivos a atingir Acessibilidade Usabilidade Interatividade Obrigação Estética Design para web, uma visão funcional

15. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design x Arte Nova apresentação para uma velha discussão Design para web, uma visão funcional

16. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Walter Gropius Arquiteto alemão Um dos principais arquitetos do século XX Pai da Bauhaus Impulsionador do modernismo através da Bauhaus Design para web, uma visão funcional

17. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Walter Gropius Arquiteto alemão Um dos principais arquitetos do século XX Pai da Bauhaus Impulsionador do modernismo através da Bauhaus O próprio Gropius afirma que antes de um exercício puro do racionalismo funcional , a Bauhaus deveria procurar definir os limites deste enfoque, e através da separação daquilo que é meramente arbitrário do que é essencial e típico , permitir ao espírito criativo construir o novo sobre a base tecnológica já adquirida pela humanidade “ wikipédia Design para web, uma visão funcional

18. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Walter Gropius Arquiteto alemão Um dos principais arquitetos do século XX Pai da Bauhaus Impulsionador do modernismo e do funcionalismo através da Bauhaus O próprio Gropius afirma que antes de um exercício puro do racionalismo funcional , a Bauhaus deveria procurar definir os limites deste enfoque, e através da separação daquilo que é meramente arbitrário do que é essencial e típico , permitir ao espírito criativo construir o novo sobre a base tecnológica já adquirida pela humanidade “ wikipédia Design para web, uma visão funcional

19. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Manifesto da Bauhaus (1919) A ação de vanguarda deles iria provoca uma alteração duradoura na história da arquitetura e das artes plásticas em geral. Não era para menos visto que a ambição do movimento era “ a nova construção do futuro ”. Começava então uma das mais importantes transformações do século 20: a aliança entre a estética e a tecnologia, entre o artista e a indústria . “ Educaterra – Voltaire Schilling Design para web, uma visão funcional

20. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Manifesto da Bauhaus (1919) A ação de vanguarda deles iria provoca uma alteração duradoura na história da arquitetura e das artes plásticas em geral. Não era para menos visto que a ambição do movimento era “ a nova construção do futuro ”. Começava então uma das mais importantes transformações do século 20: a aliança entre a estética e a tecnologia, entre o artista e a indústria . “ Educaterra – Voltaire Schilling Design para web, uma visão funcional

21. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Gestalt Continuidade, Segregação, Semelhança, Unidade. Design para web, uma visão funcional Proximidade, Pregnância, Fechamento,

22. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional

23. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional

24. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna KISS Keep it simple, Stupid! Keep it short and simple Keep it simple and straightforward Mantenha isto simples, estúpido! Design para web, uma visão funcional

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

26. 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 visão funcional Five Principles to Design by Joshua Porter “

27. 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 visão funcional Five Principles to Design by Joshua Porter “

28. Google

29. Bing

30. Vídeo http://www.youtube.com/watch?v=XlcDtCX-GwE

31. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Funcionalismo Recurso à tecnologia industrial, à estandardização e à prefabricação em série, isto é, à progressiva industrialização da produção de objetos da vida diária (design industrial); Design para web, uma visão funcional

32. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Estandardização É o processo de tornar-se e de concordar padrões técnicos . Um padrão é um original que estabeleça a engenharia uniforme ou especificações, critérios, métodos, processos, ou práticas técnicas . Design para web, uma visão funcional

33. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional Estandardização do carrinho de compras

34. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional Estandardização do carrinho de compras

35. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional Estandardização da grade de times

36. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional Estandardização da grade de times

37. 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 te 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 visão funcional sabem que funcionalidades esperar sabem a aparência que as funcionalidades terão sabem onde encontrar tal funcionalidade no site e na página sabem como operar a interface para cumprir seu objetivo não perdem tempo tentando entender elementos desconhecidos não perdem uma funcionalidade importante não têm surpresas quando algo não reage como esperado Jakob Nielsen - http://www.useit.com

38. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Jakob Nielsen O rei da usabilidade Cientista da computação alemão Autor de mais de 10 livros de usabilidade, entre eles o famoso “Designing Web Usability: The Practice of Simplicity” Autor e mantenedor do site http://www.useit.com/alertbox Design para web, uma visão funcional

39. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design x Design Nova apresentação para uma NOVA discussão Design para web, uma visão funcional

40. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional x Ideal Artístico Ideal de engenharia

41. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design para web, uma visão funcional x Ideal Artístico Ideal de engenharia O ideal artístico 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 reconheça que haja necessidade de arte, alegria e diversão 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.

43. 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 doesn’t serve a utilitarian purpose. Even though there certainly would be a business purpose in something like a portfolio site, the standard usability guidelines still wouldn’t 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 don’t do much when visiting a portfolio other than browse it and admire it . Thus, they won’t 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 visão funcional Exclusive interview for WDD by Walter Apai. “

44. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design funcional Design para web, uma visão funcional

45. www.traineo.com

46. www.istockphoto.com

47. www.istockphoto.com

48. www.rememble.com

49. www.mindmeister.com

50. www.wishlistr.com

51. www.formee.org

52. www.drinkcafe.com.br

53. www.frazz.com.br

54. www.logolicia.com.br

55. www.logolicia.com.br

56. www.skidun.com.br

57. www.apple.com

58. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Design funcional Design para web, uma visão funcional Pensar na execução do Design (viabilidade, tecnologia, tempo, custo) Pensar no usuário como utilizador e não admirador Pensar se a arte aplicada é tendência e se o projeto precisará ser redesenhado ao passar a tendência Pensar no ROI (return on investment)

59. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna Agora é com vocês! Design para web, uma visão funcional

60. Bernard De Luna - www. bernarddeluna .com - @bernarddeluna A nova construção do futuro Design para web, uma visão funcional

61. Sejam malucos. Obrigado! www.bernarddeluna.com @bernarddeluna