Designdevs2.pdf
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Designdevs2.pdf as PDF for free.
More details
- Words: 768
- Pages: 88
O que desenvolvedores deveriam aprender sobre design Débora Correia
QUEM SOU EU? @debscorreia Ciência da Computação na UFPE UX design IxDA Recife Django Girls Recife
LABCODES Estúdio de Software de Recife para o mundo Tecnologias trabalhadas Labcodes e a comunidade
MOTIVAÇÃO
MOTIVAÇÃO Designers devem aprender a programar? Devs devem aprender design?
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
MOTIVAÇÃO
https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/
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
O QUE É DESIGN
User interface
User experience
DESIGN DE INTERAÇÃO
CONTEÚDO
“Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman
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?
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.
CONTEÚDO Analise o seu conteúdo. Remover o que é desnecessário. Agrupar para evidenciar a relação entre os conteúdos
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
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
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-studydesigning-whitespace-to-improve-conversions/
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.
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.
CONTEÚDO Trabalhe CTAS O que o usuário deve fazer quando entra na sua página? Chamar atenção para o principal.
VISUAL DESIGN
PRINCÍPIOS
PRINCÍPIOS "Principles are guidelines, not necessarily rules” 1. Equilíbrio
6. Proporção
2. Alinhamento
7. Hierarquia visual
3. Ritmo
8. Ênfase
4. Contraste 5. Escala
https://mackenziechild.withcoach.com/design-for-developers
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Alinhamento
PRINCÍPIOS Alinhamento
PRINCÍPIOS Ritmo
PRINCÍPIOS Ritmo
PRINCÍPIOS Escala e proporção
PRINCÍPIOS Escala e proporção
PRINCÍPIOS Contraste
PRINCÍPIOS Hierarquia e ênfase
YOUR EYES HERE (then here) and finally here
PRINCÍPIOS Hierarquia e ênfase
PRINCÍPIOS Hierarquia e ênfase
PRINCÍPIOS Hierarquia e ênfase
COMO APLICAR? Cor Tipografia Grid Espaços Consistência
TIPOGRAFIA
TIPOGRAFIA Tamanho
https://webdesign.tutsplus.com/articles/typography-basics-for-developers--webdesign-14025
TIPOGRAFIA Contraste
TIPOGRAFIA Espaçamento
TIPOGRAFIA Hierarquia
TIPOGRAFIA
TIPOGRAFIA Use no máximo duas fontes diferentes. Display font e Body font. Fontes de categorias diferentes. Contraste!
http://hellohappy.org/beautiful-web-type/
https://www.typewolf.com/
COR
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.
COR
The color wheel
COR Escolha uma paleta que se adeque ao se projeto
COR Média de 3 cores diferentes. Use cores complementares. Maioria neutra e uma cor para destaque. Monte uma paleta de cores
https://color.adobe.com/
https://coolors.co
http://www.colourlovers.com/palettes
GRID
GRID Alinhamento Diminuem a sensação de bagunça e composição mais atrativa. Oferece uma experiência melhor de forma subconsciente
ESPAÇOS
ESPAÇOS Espaço positivo e espaço negativo (whitespace)
ESPAÇOS
https://www.uxpin.com/studio/blog/ux-case-study-designing-whitespace-to-improve-conversions/
OUTRAS COISAS Consistência Imagens e videos Mobile e design responsivo Prevenção de erros Empty states
“A clean UI is like clean code <3”
OBRIGADA! DEBORA CORREIA @debscorreia www.labcodes.com.br GitHub.com/labcodes twitter.com/labcodes\ speakerdeck.com/labcodes
QUEM SOU EU? @debscorreia Ciência da Computação na UFPE UX design IxDA Recife Django Girls Recife
LABCODES Estúdio de Software de Recife para o mundo Tecnologias trabalhadas Labcodes e a comunidade
MOTIVAÇÃO
MOTIVAÇÃO Designers devem aprender a programar? Devs devem aprender design?
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
MOTIVAÇÃO
https://techcrunch.com/2017/05/31/here-are-some-reasons-behind-techs-design-shortage/
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
O QUE É DESIGN
User interface
User experience
DESIGN DE INTERAÇÃO
CONTEÚDO
“Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman
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?
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.
CONTEÚDO Analise o seu conteúdo. Remover o que é desnecessário. Agrupar para evidenciar a relação entre os conteúdos
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
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
https://www.youtube.com/watch?v=uKpfO331DY4&t=1277s
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-studydesigning-whitespace-to-improve-conversions/
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.
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.
CONTEÚDO Trabalhe CTAS O que o usuário deve fazer quando entra na sua página? Chamar atenção para o principal.
VISUAL DESIGN
PRINCÍPIOS
PRINCÍPIOS "Principles are guidelines, not necessarily rules” 1. Equilíbrio
6. Proporção
2. Alinhamento
7. Hierarquia visual
3. Ritmo
8. Ênfase
4. Contraste 5. Escala
https://mackenziechild.withcoach.com/design-for-developers
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Equilíbrio
PRINCÍPIOS Alinhamento
PRINCÍPIOS Alinhamento
PRINCÍPIOS Ritmo
PRINCÍPIOS Ritmo
PRINCÍPIOS Escala e proporção
PRINCÍPIOS Escala e proporção
PRINCÍPIOS Contraste
PRINCÍPIOS Hierarquia e ênfase
YOUR EYES HERE (then here) and finally here
PRINCÍPIOS Hierarquia e ênfase
PRINCÍPIOS Hierarquia e ênfase
PRINCÍPIOS Hierarquia e ênfase
COMO APLICAR? Cor Tipografia Grid Espaços Consistência
TIPOGRAFIA
TIPOGRAFIA Tamanho
https://webdesign.tutsplus.com/articles/typography-basics-for-developers--webdesign-14025
TIPOGRAFIA Contraste
TIPOGRAFIA Espaçamento
TIPOGRAFIA Hierarquia
TIPOGRAFIA
TIPOGRAFIA Use no máximo duas fontes diferentes. Display font e Body font. Fontes de categorias diferentes. Contraste!
http://hellohappy.org/beautiful-web-type/
https://www.typewolf.com/
COR
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.
COR
The color wheel
COR Escolha uma paleta que se adeque ao se projeto
COR Média de 3 cores diferentes. Use cores complementares. Maioria neutra e uma cor para destaque. Monte uma paleta de cores
https://color.adobe.com/
https://coolors.co
http://www.colourlovers.com/palettes
GRID
GRID Alinhamento Diminuem a sensação de bagunça e composição mais atrativa. Oferece uma experiência melhor de forma subconsciente
ESPAÇOS
ESPAÇOS Espaço positivo e espaço negativo (whitespace)
ESPAÇOS
https://www.uxpin.com/studio/blog/ux-case-study-designing-whitespace-to-improve-conversions/
OUTRAS COISAS Consistência Imagens e videos Mobile e design responsivo Prevenção de erros Empty states
“A clean UI is like clean code <3”
OBRIGADA! DEBORA CORREIA @debscorreia www.labcodes.com.br GitHub.com/labcodes twitter.com/labcodes\ speakerdeck.com/labcodes
More Documents from "Walter Angolar Da Silva"
Wsgi.pdf
December 2019 5
O Temido Map.pdf
December 2019 9
Python E Flow.pdf
December 2019 8
Designdevs2.pdf
April 2020 5