Upgrade to Pro — share decks privately, control downloads, hide ads and more …

O que desenvolvedores deveriam aprender sobre design

O que desenvolvedores deveriam aprender sobre design

Dicas de design básico para desenvolvedores.

Labcodes Software Studio

October 17, 2017
Tweet

More Decks by Labcodes Software Studio

Other Decks in Technology

Transcript

  1. QUEM SOU EU? @debscorreia Ciência da Computação na UFPE UX

    design IxDA Recife Django Girls Recife
  2. 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
  3. 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
  4. 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?
  5. 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.
  6. CONTEÚDO Analise o seu conteúdo. Remover o que é desnecessário.

    Agrupar para evidenciar a relação entre os conteúdos
  7. 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
  8. 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/
  9. 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.
  10. 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.
  11. CONTEÚDO Trabalhe CTAS
 O que o usuário deve fazer quando

    entra na sua página? Chamar atenção para o principal.
  12. 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
  13. TIPOGRAFIA Use no máximo duas fontes diferentes. Display font e

    Body font. Fontes de categorias diferentes. Contraste!
  14. COR

  15. 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.
  16. COR Média de 3 cores diferentes. Use cores complementares. Maioria

    neutra e uma cor para destaque. Monte uma paleta de cores
  17. GRID Alinhamento Diminuem a sensação de bagunça e composição mais

    atrativa. Oferece uma experiência melhor de forma subconsciente