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

Curso Web Design Responsivo - Parte 2 de 4

Curso Web Design Responsivo - Parte 2 de 4

Parte 2 de 4: Elementos do Responsive Web Design: o Grid.

Explico as bases do responsive web design e elabora sobre grids na web.

Curso ministrado em Março/2014.

#grids #rwd #responsive #webdesign #course #NIC.

Rhawbert Costa

March 26, 2014
Tweet

More Decks by Rhawbert Costa

Other Decks in Design

Transcript

  1. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do Responsive Web Design ! 1. Design flexível, baseado em grids;! 2. Imagens e mídias flexíveis;! 3. Media-queries. #RWD
  2. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Tamanho

    Desejado ÷ Contexto = Resultado 32px ÷ 16px = 2 A fórmula universal do RWD Elementos do RWD: o Grid
  3. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Tamanho

    Desejado ÷ Contexto = Resultado Elementos do RWD: o Grid body {! font: normal 100% Helvetica, Arial, sans-serif;! } h1 {! font-family: Georgia, serif;! font-size: 1.5em; /* 24px / 16px */! } 24px ÷ 16px = 1.5 p {! font-size: .875em; /* 14px / 16px */! }
  4. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Tamanho

    Desejado ÷ Contexto = Resultado Elementos do RWD: o Grid Título 550px Conteúdo 670px Menu 180px Largura total = 850px (contexto) 0.21176470588235 (180/850px) 0.64705882352941 (550/850px) 0.78823529411765 (550/850px)
  5. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Legendary

    Tonight Show Comedian David Brenner Dies With Johnny Carson ➜ Exercício: Antes do Grid Elementos do RWD: o Grid
  6. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid O browser é nosso verdadeiro “canvas”
  7. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Usamos

    técnicas consagradas Séculos de herança cultural da página impressa Elementos do RWD: o Grid
  8. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Van

    de Graaf Leis secretas da harmonia da página Elementos do RWD: o Grid
  9. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Leis

    secretas da harmonia da página Elementos do RWD: o Grid Villard de Honnecourt
  10. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Leis

    secretas da harmonia da página Elementos do RWD: o Grid Raúl Rosarivo
  11. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Leis

    secretas da harmonia da página Elementos do RWD: o Grid Jan Tschichold
  12. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Leis

    secretas da harmonia da página Elementos do RWD: o Grid Todos Juntos
  13. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Fonte:

    http://retinart.net/graphic-design/secret-law-of-page-harmony/
  14. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Fonte:

    http://retinart.net/graphic-design/secret-law-of-page-harmony/
  15. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 φ

    (Phi) ! = ! 1.618 Secção Áurea Elementos do RWD: o Grid
  16. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid “O grid é a mais vívida manifestação da vontade de criar ordem no design gráfico” Mark Boulton http://markboulton.co.uk
  17. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid “Um dos maiores problemas em se trabalhar com grids na web é que não há muito a ser feito quanto as proporções verticais. Geralmente o conteúdo é dinâmico e o melhor a fazer é aproximar.[…] ! O foco está no layout horizontal, ou seja, nas colunas” Dave Shea http://www.mezzoblue.com/archives/ 2005/05/13/columns_grid/index.php
  18. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Unidades! São blocos uniformes de construção do grid. 12 unidades
  19. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Gutters! Espaço entre as unidades. 12 unidades = 11 gutters
  20. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 3

    colunas de 4 unidades Elementos do RWD: o Grid Colunas! Grupos de unidades. Criam a estrutura visual de uma página e não precisam de uniformidade.
  21. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid 4 colunas de 3 unidades Colunas! Grupos de unidades. Criam a estrutura visual de uma página e não precisam de uniformidade.
  22. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Desenhar de dentro (conteúdo) pra fora (página)
  23. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 350px

    Elementos do RWD: o Grid Calculando o tamanho das unidade Legendary Tonight Show Comedian David Brenner Dies With Johnny Carson »
  24. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Unidade = (elemento – gutters) ÷ unidades Legendary Tonight Show Comedian David Brenner Dies With Johnny Carson » Elemento “X" (Largura) Qtd. & Larg. Gutters Qtd. Unidades 350px ( 350px – (5 x 10px) ) ÷ 6 = 50px
  25. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid “Sabe o que seria ótimo? Mais um sistema de grids em CSS” Ninguém. Nunca. http://hugogiraudel.com/2013/03/04/css-grids/
  26. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Frameworks anti-loucura 1) Popularização das 12 colunas (divisível por 3 e 4) 2) Ponto de partida para começar uma página. Simplicidade e elegância de algumas soluções das frameworks 3) Responsive deixou a tarefa ainda mais complexa 4) Advento dos Pré-processadores de CSS (LESS, SASS, etc.)
  27. NIC - Webdesign Responsivo by Rhawbert Costa - Mar/2014 Elementos

    do RWD: o Grid Eu Mesmo @rhawbert “Não há regras… cada vez você adapta ou cria seu próprio grid.”