O que desenvolvedores deveriam aprender sobre design

Dicas de design básico para desenvolvedores.

Transcript

2. O que desenvolvedores deveriam aprender sobre design Débora Correia
3. QUEM SOU EU? @debscorreia Ciência da Computação na UFPE UX design IxDA Recife Django Girls Recife
4. LABCODES Estúdio de Software de Recife para o mundo Tecnologias trabalhadas Labcodes e a comunidade
5. MOTIVAÇÃO
6. MOTIVAÇÃO Designers devem aprender a programar? Devs devem aprender design?
7. MOTIVAÇÃO 1. Começando seu próprio negócio 2. Trabalhando com um designer 3. Trabalhando em uma pequena empresa com um pequeno time de design 4. Trabalhando em uma grande empresa mas a razão designers vs desenvolvedores ainda não é ideal
8. MOTIVAÇÃO https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/
9. MOTIVAÇÃO 1. Desenvolvedores tomam decisões que modelam os produtos todos os dias 2. Desenvolvedores pensam em coisas que os designers tendem a esquecer: acessibilidade, responsiveness, placeholders, erros, segurança 3. Design não é tornar pixels bonitos
10. O QUE É DESIGN User interface User experience
11. DESIGN DE INTERAÇÃO
12. CONTEÚDO
13. - Jeffrey Zeldman “Design in the absence of content is not design, it’s decoration.”
14. CONTEÚDO O conteúdo vem da pesquisa! O que é importante para o seu usuário saber sobre o seu produto? Qual é a informação relevante que o seu produto fornece para o usuário?
15. CONTEÚDO Abandone o lorem ipsum Sempre que tiver a oportunidade, coloque dados reais ou mais próximos do real nos seus projetos para ver como eles se comportam.
16. CONTEÚDO Analise o seu conteúdo. Remover o que é desnecessário. Agrupar para evidenciar a relação entre os conteúdos
17. CONTEÚDO As pessoas só escaneam 
 Menos é mais
 Parágrafos longos são um sinal de desordem HEADLINES
 Fale sobre benefícios, não detalhes
 Mantenha curto
 Use linguagem natural e amigável
18. https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
19. https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
20. CONTEÚDO Trabalhe a forma de visualizar o conteúdo Coloque o que puder em bullets Highlight partes do texto When it’s used well, whitespace makes a site easier to navigate. It improves the user experience by organizing content for easy comprehension. It creates a clear content hierarchy, separating elements from each other. Finally, a site design with built in whitespace forces site managers to keep their message clear, reducing site clutter, and adding content that supports users on their journey. texto: https://www.uxpin.com/studio/blog/ux-case-study- designing-whitespace-to-improve-conversions/
21. CONTEÚDO Trabalhe a forma de visualizar o conteúdo Coloque o que puder em bullets Highlight partes do texto When it’s used well, whitespace makes a site easier to navigate. • It improves the user experience by organizing content for easy comprehension. • It creates a clear content hierarchy, separating elements from each other. • Finally, a site design with built in whitespace forces site managers to keep their message clear, reducing site clutter, and adding content that supports users on their journey.
22. CONTEÚDO Trabalhe a forma de visualizar o conteúdo Coloque o que puder em bullets Highlight partes do texto When it’s used well, whitespace makes a site easier to navigate. • It improves the user experience by organizing content for easy comprehension. • It creates a clear content hierarchy, separating elements from each other. • Finally, a site design with built in whitespace forces site managers to keep their message clear, reducing site clutter, and adding content that supports users on their journey.
23. CONTEÚDO Trabalhe CTAS
 O que o usuário deve fazer quando entra na sua página? Chamar atenção para o principal.
26. VISUAL DESIGN
27. PRINCÍPIOS
28. PRINCÍPIOS "Principles are guidelines, not necessarily rules” 1. Equilíbrio 2. Alinhamento 3. Ritmo 4. Contraste 5. Escala 6. Proporção 7. Hierarquia visual 8. Ênfase https://mackenziechild.withcoach.com/design-for-developers
29. PRINCÍPIOS Equilíbrio
30. Equilíbrio PRINCÍPIOS
31. Equilíbrio PRINCÍPIOS
32. Equilíbrio PRINCÍPIOS
33. Equilíbrio PRINCÍPIOS
34. Alinhamento PRINCÍPIOS
35. Alinhamento PRINCÍPIOS
36. Ritmo PRINCÍPIOS
37. Ritmo PRINCÍPIOS
38. Escala e proporção PRINCÍPIOS
39. Escala e proporção PRINCÍPIOS
40. Contraste PRINCÍPIOS
42. Hierarquia e ênfase PRINCÍPIOS YOUR EYES HERE (then here) and finally here
43. Hierarquia e ênfase PRINCÍPIOS
44. Hierarquia e ênfase PRINCÍPIOS
45. Hierarquia e ênfase PRINCÍPIOS
46. COMO APLICAR? Cor Tipografia Grid Espaços Consistência
47. TIPOGRAFIA
48. TIPOGRAFIA Tamanho https://webdesign.tutsplus.com/articles/typography-basics-for-developers--webdesign-14025
49. TIPOGRAFIA Contraste
50. TIPOGRAFIA Espaçamento
51. TIPOGRAFIA Hierarquia
52. TIPOGRAFIA
53. TIPOGRAFIA Use no máximo duas fontes diferentes. Display font e Body font. Fontes de categorias diferentes. Contraste!
56. http://hellohappy.org/beautiful-web-type/
57. https://www.typewolf.com/
61. COR
62. COR Cor é um dos elementos mais importantes do design. Podem ser usadas para dar equilíbrio, contraste, ênfase e hierarquia visual aos elementos. Traz emoção para as pessoas.
63. COR The color wheel
64. COR Escolha uma paleta que se adeque ao se projeto
65. COR Média de 3 cores diferentes. Use cores complementares. Maioria neutra e uma cor para destaque. Monte uma paleta de cores
66. https://color.adobe.com/
67. https://coolors.co
68. http://www.colourlovers.com/palettes
72. GRID
73. GRID Alinhamento Diminuem a sensação de bagunça e composição mais atrativa. Oferece uma experiência melhor de forma subconsciente
76. ESPAÇOS
77. ESPAÇOS Espaço positivo e espaço negativo (whitespace)
81. ESPAÇOS https://www.uxpin.com/studio/blog/ux-case-study-designing-whitespace-to-improve-conversions/
84. OUTRAS COISAS Consistência Imagens e videos Mobile e design responsivo Prevenção de erros Empty states
86. “A clean UI is like clean code <3”
87. DEBORA CORREIA @debscorreia www.labcodes.com.br GitHub.com/labcodes twitter.com/labcodes\ speakerdeck.com/labcodes OBRIGADA!