(Guia Prático para) Criação de User Interfaces Charmosas

Lightning talk apresentada no GruPy SP em 16 de julho de 2015.

Transcript

1. guia prático para Criação de User Interfaces Charmosas P O R F E L I P E B E R N A R D E S
2. F E L I P E B E R N A R D E S Front End Dev ~ 1 ano Fullstack Padawan ~ 3 meses Estagiário na Tegra http://tegra.me github.com/felipebernardes twitter.com/felip_bernardes
3. “qual a relação entre Python e design?”
4. “por que eu deveria me interessar por design?”
5. empirismo e bom senso
6. formas básicas
7. .circle { height: 60px width: 60px border-radius: 50%; }
8. .square { height: 60px width: 60px }
9. .triangle { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 60px solid #00F; }
13. luzes & sombras podem ser semânticas
15. luz vem sempre de cima
19. p { text-shadow: x y blur color; }
20. p { text-shadow: 1px 1px 1px #000; } div { box-shadow: 1px 1px 1px #000; }
21. cores
22. identidade semântica destaques
26. se tudo estiver destacado, nada estará destacado.
28. 1. P&B primeiro 2. cores depois, semânticamente
30. div { color: #333; color: rgba(0,0,0,0.3); }
31. paletas de cores
33. espaçamentos
34. whitespace as a default
36. “e no mobile?”
38. dobre seus espaçamentos
39. padding & margin
40. content padding margin
41. margin: $font-size*2 auto; padding: $font-size*1.5;
42. texto sobre imagens & legibilidade
43. problema: imagens dinâmicas
44. cor do texto sempre branca #FFF 4life
45. cor de fundo no texto
47. p { color: #FFF; background-color: rgba(0,0,0,0.7); }
48. camada entre imagem e texto
52. .section-x { background-image: url(‘./img/x’); }
53. .section-x:before { content: ‘’; width: 100%; height: 100%; z-index: -1; background-color: rgba(0,0,0,0.4); }
56. imagem em grayscale, camada colorida @ ~.4 alpha
57. imagem colorida, camada em preto @ ~.4 alpha
58. opcional textshadow @ ~.4 alpha
59. dribbble.com
60. speakerdeck.com/felipebernardes