O design é como o desenvolvimento de software que hoje você domina. Exige prática. Page 16. Mas a prática só anda .... P...
Design para desenvolvedores Nando Vieira
http://hellobits.com
howto. http://howtocode.com.br
http://codeplane.com.br
yep! curti a palestra do @fnando! #rubyconfbr nope! a palestra do @fnando foi ruim! #rubyconfbr
Designer != Design
Trabalho profissionalmente com web desde 1999 e sempre fiz meu próprio design.
No começo era extremamente frustrante, pois eu não era (e ainda não sou) um bom designer.
http://codeplane.com.br
http://howtocode.com.br
http://howtocode.com.br
http://hellobits.com
http://promo.howtocode.com.br
O design é como o desenvolvimento de software que hoje você domina. Exige prática.
Mas a prática só anda bem quando sabemos um pouco da teoria.
01 02 03 04
Layout Tipografia Cores Dicas gerais
Layout
Layout Alinhamento
Posicione e redimensione os elementos. Esta regra se aplica a todos os elementos.
Mesmo que os blocos estejam separados verticalmente, eles devem ser alinhados.
Layout Grid
Sistema de linhas verticais espaçadas que permite definir colunas.
gutter coluna
Cálculo
+
largura da coluna * nº de colunas (nº de colunas - 1) * espaçamento
Use um grid simples. 12 colunas funcionam bem para conteúdos de 1 a 4 colunas.
Cálculo
(60 * 12) + (11 * 20) = 940px (54 * 12) + (11 * 30) = 978px
Sass. {style with attitude}
$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; }
@import "grid"; .header, .footer { @include grid; } .main-content { @include grid(8, yes); float: left; } .sidebar { @include grid(4); float: left; }
@import "grid"; .header, .footer { @include grid; }
12 colunas, 978px
.main-content { @include grid(8, yes); float: left; }
8 colunas, 642px
.sidebar { @include grid(4); float: left; }
4 colunas, 306px
Layout Hierarquia
Tamanho
Aprenda Node.js na prática 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.
Cor
Aprenda Node.js na prática 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.
Espaçamento
Aprenda Node.js na prática
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.
Tipografia
Aprenda Node.js na prática Conheça o Node.js, a plataforma criada em cima da engine V8 do Google.
Layout Proximidade & Espaço
Proximidade cria relacionamentos entre os diferentes elementos.
Ruby e o duck typing 02/01/2012
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 flexíveis, produtivas e, acredite, seguras.
Ruby e o duck typing 02/01/2012
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 flexíveis, produtivas e, acredite, seguras.
iPod
Pacman
Imagens
Comentários
iPod
Pacman
Imagens
Comentários
Layout Espaços positivos & negativos
Espaço positivo se refere aos elementos que compõem o design.
Espaço negativo (também conhecido como whitespace) se refere ao espaço entre os elementos que compõem o design.
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 flexíveis, produtivas e, acredite, seguras.
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 flexíveis, produtivas e, acredite, seguras.
padding = margin = font size
.box { font-size: 16px; padding: 16px; } .box + .box { margin-top: 16px; }
Exemplos de sites que fazem um excelente uso do espaço.
http://apple.com
http://checkoutapp.com
http://steepster.com/tour
Espaço negativo faz com que o design se torne mais limpo e elegante.
Tipografia
Tipografia Papéis
Títulos devem destacar-se e podem ser mais decorativos e com tamanho maior.
Textos devem ter como objetivo a legibilidade.
Tipografia Tipos
Serif
Serif
Slab Serif
Slab Serif
Sans Serif
Sans Serif
Script
Script
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Um título genérico Este é um subtítulo genérico
Explore as possibilidades, misturando fontes diferentes para saber se elas combinam.
Tipografia Legibilidade
Verdana & Lucida Grande
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
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.
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.
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.
Web fonts
Web fonts são downloads adicionais que nem sempre fazem diferença em seu design.
http://craftingtype.com
Use tamanhos grandes para aumentar a legibilidade.
Mustache single-origin coffee 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, truffaut fingerstache direct trade pickled post-ironic.
Mustache single-origin coffee 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, truffaut fingerstache direct trade pickled post-ironic.
Aumente o espaçamento entre linhas.
Mustache single-origin coffee 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, truffaut fingerstache direct trade pickled post-ironic.
Mustache single-origin coffee 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, truffaut fingerstache direct trade pickled post-ironic.
http://michaelfeathers.typepad.com/
http://michaelfeathers.typepad.com/
Títulos
h1, h2, h3, h4, h5, h6 { line-height: 1.1; }
Texto
body { font: 16px/1.5 "Lucida Grande", Verdana, sans-serif; }
Exemplos de sites que favorecem a legibilidade.
http://zeldman.com
http://elliotjaystocks.com
http://trentwalton.com/2012/05/08/in-flux/
http://informationarchitects.net/blog/responsive-typography/
Cores
Cores são relativas e influenciam a percepção de outras cores.
Não invente sua própria paleta de cores.
Cores primárias, secundárias, terciárias, complementares, análogas, quentes, frias, significado.
http://kuler.adobe.com
Blending
Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo-fi jean shorts tofu brooklyn beard.
Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo-fi jean shorts tofu brooklyn beard.
Blending Carles swag narwhal, blog viral +1 bicycle rights high life organic direct trade gentrify squid raw denim ethical. Forage lo-fi jean shorts tofu brooklyn beard.
.box { background: #D1043E; color: #fff; color: rgba(255, 255, 255, .7); }
Blending Mustache single-origin coffee 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 coffee 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 coffee 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 coffee 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.
Contraste é importante.
Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante.
Contraste é importante. Contraste é importante. Contraste é importante. Contraste é importante.
http://contrastrebellion.com
Títulos
h1, h2, h3, h4, h5, h6 { color: #191817; }
Texto
body { background: #fff; color: #222; }
Mudo
p { color: #666; }
Dicas gerais
Não tente ser criativo.
http://carbonmade.com
http://www.carinsurance.org.uk
http://www.justdot.gr
Dicas gerais Inspiração
Em desenvolvimento de software nós lemos o código-fonte para conhecer o estilo de programação de outros devs.
Em web design nós também podemos fazer isso.
http://dribbble.com
http://forrst.com
http://littlebigdetails.com
Finalizando...
Legibilidade, contraste e padrões conhecidos.
Pratique. Copie. Inspire-se.
Divirta-se.
Design é muito mais do que qualquer ferramenta.
Design é muito mais do que qualquer ferramenta.
It's not just what it looks like and feels like.
Design is how it works.
obrigado.
nando vieira @fnando
[email protected]
