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.

Transcript

1. Do design gráfico a Web
2. Olá, eu sou Bruno Pulis! • @brunopulis • speakerdeck.com/brunopulis • brunopulis.com 2
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
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
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
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
9. CMYK x RGBA 9
10. Sistema Hexadecimal
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
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
13. Sistema Hexadecimal Número de cores que podem ser representadas pelo sistema: 256 x 256 x 256 = 16.777.216 13
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
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
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
20. Grid System
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
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
23. Grid System - Dicas para Designers 23
25. Grid System Os mais famosos são: • 960.gs; • Bootstrap; • Foundation; • Pure CSS; • Semantic CSS. 25
26. SVG
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
28. Dicas
29. Configure o Ps
37. Save for Web
40. Aprenda HTML/CSS
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
42. Aprenda HTML/CSS Coisas que podemos fazer com CSS: • Degradês; • Borda Arrendondadas; • Opacidade; • etc. 42
43. That's all folk's! :)
44. Perguntas?