Design para Programadores - Tipografia

papo reto bluesoft, design para programadores - Tipografia

Transcript

1. Design para Programadores Diogo Beato - @dvbeato
2. Também quero desenvolver sites bonito
3. Influência do conteúdo • audiência: 
 idade, genero, cultura. • tom: 
 casual, formal, sarcasmo. • propósito: 
 institucional, informativo, conversão
4. Cores Tipografia Layout
5. Style guide tenha um style guide de como será a tipografia do seu design
6. Tamanhos Bodycopy: (14px - 16px) Headerline: 300% Sub Headerline: 150% Nav: 100% Byline: 75%
7. Largura do texto CPL - Characteres por linha Ideal - 50 - 70 Faça responsivo Elimine os widows
8. Classificação serif sans-serif script
9. Estilos de serif Estilo - Conteúdo
10. Humanist Serif Jornalismo | História
11. Transitional Serif Acadêmico | Leis
12. Modern Serif Arte | Cultura
13. Slab Serif Marketing | Promocional
14. Estilos de sans-serif Estilo - Conteúdo
15. Humanist Sans-Serif Governamentais | Educacionais
16. Transitional Sans-Serif Tecnologia | Transportes
17. Geometric Sans-Serif Ciências | Arquitetura
18. Estilos de script
19. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla viverra ligula ac eros ullamcorper, nec finibus mi imperdiet. Ut id ligula massa. Donec non hendrerit nisi. Nulla dapibus placerat lorem id rhoncus. Cras scelerisque, massa non ullamcorper rutrum, nulla lacus consectetur arcu, sed scelerisque turpis orci interdum leo. Donec leo nibh, aliquam quis risus ut, sollicitudin congue nulla. Ut scelerisque vel est ac luctus. Proin in ornare est. Ut sit amet turpis velit. Fusce sodales luctus enim non suscipit. Nunc eget nisi ante. Pellentesque ut metus eros. Proin faucibus dignissim ex, sit amet fermentum ipsum imperdiet id.
20. Misturando Estilos • Não misture mesmos estilo • Não misture mesma classe • Serif títulos e sans-serif body • Humanist-serif - Humanist-sans-serif • Crie contraste • Na dúvida sans-serif.