Do design gráfico a Web

590371c05fc56adf612fd91ea509cf74?s=47 Bruno Pulis
September 26, 2014

Do design gráfico a Web

Palestra que ilustra a transição do design gráfico para o webdesign mostrando conceitos da web para pessoas que trabalham com design gráfico e tem interesse para migrar para web.

590371c05fc56adf612fd91ea509cf74?s=128

Bruno Pulis

September 26, 2014
Tweet

Transcript

  1. 3.

    Quem sou • Desenvolvedor Frontend desde 2010; • Tecnólogo em

    Sistema para Internet pela Faculdade Pitágoras; • Especialista em acessibilidade; • Idealizador do projeto Acessibilidade Urbana; • Um dos staff's do Minas Dev; 3
  2. 4.

    4

  3. 5.

    Minas Dev É uma comunidade de desenvolvedores que querem promover

    o diálogo e troca de conhecimento. Alguns projetos do Minas Dev: • Acessibilidade Urbana • Dev In Company • Dev In University • Minas Dev Beer 5
  4. 6.
  5. 7.

    CMYK x RGBA O padrão CMYK é mais usado para

    impressão, enquanto que monitores e televisões usam o padrão RGB. Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum e mais utilizada. Mesmo assim, há outros formatos menos comuns que funcionam sem problemas, um destes formatos é o RGB. 7
  6. 8.

    CMYK x RGBA O RGBA funciona da mesma forma que

    o RGB. No caso do RGBA, além dos 3 canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a opacidade da cor de background, borda, color ou qualquer propriedade que contenha cor sem afetar a transparência dos outros elementos. 8
  7. 11.

    Sistema Hexadecimal O Web colors ou Tripleto hexadecimal é um

    número de seis dígitos formado por três bytes em hexadecimal. É utilizado em documentos HTML, CSS e em outras aplicações em computação. 11
  8. 12.

    Sistema Hexadecimal Cada byte usa a faixa de 00h a

    FFh (notação hexadecimal) ou de 0 a 255 em notação decimal. O hexadecimal é formado pela concatenação dos três bytes: • Byte 1: Valor em vermelho; • Byte 2: Valor em verde; • Byte 3: Valor em azul. 12
  9. 13.
  10. 14.
  11. 15.

    Tipografia Esqueça as fontes em serif, para utilizar na web

    usamos a família sans-serif. Para uma variação de famílias de fontes usamos o Google Fonts um repositório de fontes compatíveis para uso na web, e para conversão de alguma fonte usamos o Font Squirrel. 15
  12. 16.

    Tipografia A web é definida em pixels, por isso não

    é recomendado a utilização de centímetros para tipografia e nem para nada relacionado a ela, como por exemplo, largura, altura e definições de layout. 16
  13. 17.

    Tipografia Na web não existe hifenização de textos, por isso

    tenha cuidado em usar o texto justificado, utilize textos alinhados na esquerda ou na direita. Nela não renderiza pixels quebrados, por exemplo, 13,33px caso queira precisão ou arredonde para 14px, ou deixe em 13px. 17
  14. 18.
  15. 19.
  16. 21.

    Grid System É um sistema que foi desenvolvido para realizar

    alinhamento dos elementos da interface, onde existe um tamanho mínimo de resolução. Ele facilita a vida dos designers e desenvolvedores, pois trás medidas pré-definidas na maiores das vezes em 12 colunas ou mais. 21
  17. 22.

    Grid System - Dicas para Designers Respeite o espaçamento dos

    gutters do Grid System. Você não precisa criar tudo do zero, logo irá reaproveitar muita coisa. 22
  18. 24.

    24

  19. 25.

    Grid System Os mais famosos são: • 960.gs; • Bootstrap;

    • Foundation; • Pure CSS; • Semantic CSS. 25
  20. 26.

    SVG

  21. 27.

    SVG (Scalabe Vetorial Graphics) São vetores que podem ser usados

    na web, é uma recomendação da W3C. Usamos geralmente SVG para logos e ícones por causa da sua alta flexibilidade, podendo aumentar ou diminuir sua largura e altura sem perda de qualidade. 27
  22. 28.
  23. 30.
  24. 31.
  25. 32.
  26. 33.
  27. 34.
  28. 35.
  29. 36.
  30. 38.
  31. 39.
  32. 41.

    Aprenda HTML/CSS Aprendendo essas tecnologias você terá mais consciência ao

    desenhar um layout, saberá das limitações e coisas que se podem fazer com elas. 41
  33. 42.

    Aprenda HTML/CSS Coisas que podemos fazer com CSS: • Degradês;

    • Borda Arrendondadas; • Opacidade; • etc. 42