Design para Desenvolvedores

Transcript

1. Design para desenvolvedores Nando Vieira
2. http://hellobits.com
3. howto. http://howtocode.com.br
4. http://codeplane.com.br
5. Designer != Design
6. Trabalho pro ssionalmente com web desde 1999 e sempre z meu próprio design.
7. No começo era extremamente frustrante, pois eu não era (e ainda não sou) um bom designer.
8. http://codeplane.com.br
9. http://howtocode.com.br
10. http://howtocode.com.br
11. http://hellobits.com
12. http://promo.howtocode.com.br
13. O design é como o desenvolvimento de software que hoje você domina. Exige prática.
14. Mas a prática só anda bem quando sabemos um pouco da teoria.
15. 01 Layout 02 Tipogra a 03 Cores 04 Dicas gerais
16. Layout
17. Layout Alinhamento
24. Posicione e redimensione os elementos. Esta regra se aplica a todos os elementos.
25. Mesmo que os blocos estejam separados verticalmente, eles devem ser alinhados.
32. Layout Grid
33. Sistema de linhas verticais espaçadas que permite de nir colunas.
34. coluna gutter
37. Cálculo largura da coluna * nº de colunas (nº de colunas - 1) * espaçamento +
38. Use um grid simples. 12 colunas funcionam bem para conteúdos de 1 a 4 colunas.
39. Cálculo (60 * 12) + (11 * 20) = 940px (54 * 12) + (11 * 30) = 978px
41. Sass. {style with attitude}
42. $grid-column: 54px; $grid-gutter: 30px; @mixin grid($columns: 12, $include-gutter: no, $inner-space: 0px) { $columns-size: $columns * $grid-column; $gutters-size: ($columns - 1) * $grid-gutter; $grid-size: $colums-size + $gutters-size; @if $include-gutter == yes { margin-right: $grid-gutter; } width: $grid-size - $inner-space; }
43. @import "grid"; .header, .footer { @include grid; } .main-content { @include grid(8, yes); float: left; } .sidebar { @include grid(4); float: left; }
44. @import "grid"; .header, .footer { @include grid; } .main-content { @include grid(8, yes); float: left; } .sidebar { @include grid(4); float: left; } 12 colunas, 978px 8 colunas, 642px 4 colunas, 306px
45. Layout Hierarquia
46. Conheça o Node.js, a plataforma criada em cima da engine V8 do Google, em um workshop totalmente mão na massa! Você verá como usar JavaScript para criar aplicações assíncronas e baseadas em eventos, com uma das tecnologias mais promissoras do momento. Aprenda Node.js na prática Tamanho
47. Conheça o Node.js, a plataforma criada em cima da engine V8 do Google, em um workshop totalmente mão na massa! Você verá como usar JavaScript para criar aplicações assíncronas e baseadas em eventos, com uma das tecnologias mais promissoras do momento. Aprenda Node.js na prática Cor
48. Conheça o Node.js, a plataforma criada em cima da engine V8 do Google, em um workshop totalmente mão na massa! Você verá como usar JavaScript para criar aplicações assíncronas e baseadas em eventos, com uma das tecnologias mais promissoras do momento. Aprenda Node.js na prática Espaçamento
49. Conheça o Node.js, a plataforma criada em cima da engine V8 do Google. Aprenda Node.js na prática Tipogra a
50. Layout Proximidade & Espaço
51. Proximidade cria relacionamentos entre os diferentes elementos.
57. Ruby e o duck typing No Ruby, nós não declaramos o tipo de objetos, nem o tipo do retorno de métodos. Embora isso possa parecer algo muito ruim para quem está acostumado com linguagens como Java, linguagens dinamicamente tipadas como o Ruby são muito exíveis, produtivas e, acredite, seguras. 02/01/2012
58. Ruby e o duck typing No Ruby, nós não declaramos o tipo de objetos, nem o tipo do retorno de métodos. Embora isso possa parecer algo muito ruim para quem está acostumado com linguagens como Java, linguagens dinamicamente tipadas como o Ruby são muito exíveis, produtivas e, acredite, seguras. 02/01/2012
59. iPod Pacman Imagens Comentários
60. iPod Pacman Imagens Comentários
61. Layout Espaços positivos & negativos
62. Espaço positivo se refere aos elementos que compõem o design.
63. Espaço negativo (também conhecido como whitespace) se refere ao espaço entre os elementos que compõem o design.
64. No Ruby, nós não declaramos o tipo de objetos, nem o tipo do retorno de métodos. Embora isso possa parecer algo muito ruim para quem está acostumado com linguagens como Java, linguagens dinamicamente tipadas como o Ruby são muito exíveis, produtivas e, acredite, seguras.
65. No Ruby, nós não declaramos o tipo de objetos, nem o tipo do retorno de métodos. Embora isso possa parecer algo muito ruim para quem está acostumado com linguagens como Java, linguagens dinamicamente tipadas como o Ruby são muito exíveis, produtivas e, acredite, seguras.
66. padding = margin = font size
67. .box { font-size: 16px; padding: 16px; } .box + .box { margin-top: 16px; }
68. Exemplos de sites que fazem um excelente uso do espaço.
69. http://apple.com
70. http://checkoutapp.com
71. http://steepster.com/tour
72. Espaço negativo faz com que o design se torne mais limpo e elegante.
73. Tipogra a
74. Tipogra a Papéis
75. Títulos devem destacar-se e podem ser mais decorativos e com tamanho maior.
76. Textos devem ter como objetivo a legibilidade.
77. Tipogra a Tipos
78. Serif
79. Serif
80. Slab Serif
81. Slab Serif
82. Sans Serif
83. Sans Serif
84. Script
85. Script
86. Um título genérico Este é um subtítulo genérico
87. Um título genérico Este é um subtítulo genérico
88. Um título genérico Este é um subtítulo genérico
89. Um título genérico Este é um subtítulo genérico
90. Um título genérico Este é um subtítulo genérico
91. Um título genérico Este é um subtítulo genérico
92. Um título genérico Este é um subtítulo genérico
93. Um título genérico Este é um subtítulo genérico
94. Um título genérico Este é um subtítulo genérico
95. Explore as possibilidades, misturando fontes diferentes para saber se elas combinam.
96. Tipogra a Legibilidade
97. Verdana & Lucida Grande
98. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
99. Seitan readymade fanny pack, hella locavore marfa jean shorts typewriter. Small batch fap butcher mumblecore, ethnic PBR viral next level umami. Typewriter banksy jean shorts thundercats, gluten-free butcher ethical master cleanse tofu whatever.
100. Seitan readymade fanny pack, hella locavore marfa jean shorts typewriter. Small batch fap butcher mumblecore, ethnic PBR viral next level umami. Typewriter banksy jean shorts thundercats, gluten-free butcher ethical master cleanse tofu whatever.
101. Seitan readymade fanny pack, hella locavore marfa jean shorts typewriter. Small batch fap butcher mumblecore, ethnic PBR viral next level umami. Typewriter banksy jean shorts thundercats, gluten-free butcher ethical master cleanse tofu whatever.
102. Web fonts
103. Web fonts são downloads adicionais que nem sempre fazem diferença em seu design.
104. http://craftingtype.com
105. Use tamanhos grandes para aumentar a legibilidade.
106. Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Gentrify wes anderson leggings ethnic, tru aut ngerstache direct trade pickled post-ironic.
107. Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Gentrify wes anderson leggings ethnic, tru aut ngerstache direct trade pickled post-ironic.
108. Aumente o espaçamento entre linhas.
109. Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Gentrify wes anderson leggings ethnic, tru aut ngerstache direct trade pickled post-ironic.
110. Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Gentrify wes anderson leggings ethnic, tru aut ngerstache direct trade pickled post-ironic.
111. http://michaelfeathers.typepad.com/
112. http://michaelfeathers.typepad.com/
113. Títulos Texto h1, h2, h3, h4, h5, h6 { line-height: 1.1; } body { font: 16px/1.5 "Lucida Grande", Verdana, sans-serif; }
114. Exemplos de sites que favorecem a legibilidade.
115. http://zeldman.com
116. http://elliotjaystocks.com
117. http://trentwalton.com/2012/05/08/in-flux/
118. http://informationarchitects.net/blog/responsive-typography/
119. Cores
120. Cores são relativas e in uenciam a percepção de outras cores.
122. Não invente sua própria paleta de cores.
123. Cores primárias, secundárias, terciárias, complementares, análogas, quentes, frias, signi cado.
124. http://kuler.adobe.com
125. Blending
126. Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo- jean shorts tofu brooklyn beard.
127. Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo- jean shorts tofu brooklyn beard.
128. Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo- jean shorts tofu brooklyn beard.
129. .box { background: #D1043E; color: #fff; color: rgba(255, 255, 255, .7); }
130. Blending Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Blending Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Blending Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater. Blending Mustache single-origin co ee ethnic polaroid. Tattooed next level selvage artisan. Craft beer godard ethical tofu photo booth raw denim, put a bird on it gentrify brooklyn before they sold out mumblecore retro cosby sweater.
131. Contraste é importante.
132. Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante.
133. http://contrastrebellion.com
134. Títulos Texto body { background: # f; color: #222; } Mudo p { color: #666; } h1, h2, h3, h4, h5, h6 { color: #191817; }
135. Dicas gerais
136. Não tente ser criativo.
137. http://carbonmade.com
138. http://www.carinsurance.org.uk
139. http://www.justdot.gr
140. Dicas gerais Inspiração
141. Em desenvolvimento de software nós lemos o código-fonte para conhecer o estilo de programação de outros devs.
142. Em web design nós também podemos fazer isso.
143. http://dribbble.com
144. http://forrst.com
145. http://littlebigdetails.com
147. Finalizando...
148. Legibilidade, contraste e padrões conhecidos.
149. Pratique. Copie. Inspire-se.
150. Divirta-se.
151. Design é muito mais do que qualquer ferramenta.
152. Design é muito mais do que qualquer ferramenta.
153. It's not just what it looks like and feels like. Design is how it works.
154. obrigado.
155. nando vieira @fnando nando@hellobits.com