Do design gráfico a Web

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Olá, eu sou Bruno Pulis! • @brunopulis • speakerdeck.com/brunopulis • brunopulis.com 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

CMYK x RGBA 9

Slide 10

Slide 10 text

Sistema Hexadecimal

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Sistema Hexadecimal Número de cores que podem ser representadas pelo sistema: 256 x 256 x 256 = 16.777.216 13

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Grid System

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Grid System - Dicas para Designers 23

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Grid System Os mais famosos são: • 960.gs; • Bootstrap; • Foundation; • Pure CSS; • Semantic CSS. 25

Slide 26

Slide 26 text

SVG

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Dicas

Slide 29

Slide 29 text

Configure o Ps

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Save for Web

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Aprenda HTML/CSS

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Aprenda HTML/CSS Coisas que podemos fazer com CSS: • Degradês; • Borda Arrendondadas; • Opacidade; • etc. 42