13
mestrado design de produto pós ergonomia usabilidade pós em comunicação graduação em design gráfico webdesigner nov/2008 a ago 2009 gerente de projeto dez/2008 a jul/2008 gerente dos webdesigners out/2004 a set/2006 diretora da agência jan/1999 a jul/2003 design gráfico house anglo americano 1995 sócia e diretora de arte desde jul/1995 professora da graduação publicidade e propaganda fev/1999 à jul/2004 professora da pós- graduação webdesign 2007 professora da graduação design digital desde 2007 professora da graduação publicidade e propaganda jul/2008 à fev/2009 professora das graduações redes e sistemas 2009 professora da pós-graduação ergonomia e usabilidade 2009 curriculum vitae professora desde ago/2009

m estrado design de produto

  • Upload
    sakura

  • View
    37

  • Download
    0

Embed Size (px)

DESCRIPTION

curriculum vitae. m estrado design de produto. webdesigner nov/2008 a ago 2009. professora da pós-graduação ergonomia e usabilidade 2009. gerente de projeto dez/2008 a jul/2008. professora das graduações redes e sistemas 2009. gerente dos webdesigners out/2004 a set/2006. - PowerPoint PPT Presentation

Citation preview

Page 1: m estrado design de produto

mestrado design de produto

pós ergonomia usabilidade

pós em comunicação

graduação em design gráfico

webdesignernov/2008 a ago 2009

gerente de projetodez/2008 a jul/2008

gerente dos webdesignersout/2004 a set/2006

diretora da agênciajan/1999 a jul/2003

design gráficohouse anglo americano 1995

sócia e diretora de artedesde jul/1995

professora da graduaçãopublicidade e propaganda

fev/1999 à jul/2004

professora da pós-graduação

webdesign 2007

professora da graduaçãodesign digital desde 2007

professora da graduaçãopublicidade e propaganda

jul/2008 à fev/2009

professora das graduaçõesredes e sistemas 2009

professora da pós-graduaçãoergonomia e usabilidade 2009

curriculum vitae

professoradesde ago/2009

Page 2: m estrado design de produto

cores rgb hexadecima

is

02|14

Page 3: m estrado design de produto

o p i x e lz o o m

Page 4: m estrado design de produto

abreviação de picture element(elemento da foto);

unidade mínima de construção da imagem digital.

p i x e l o q u e é?

05|14

Page 5: m estrado design de produto

p i x e lo q u e é?

menor parte de uma imagem digitalizada

cada um destes pontos possui a informação que determina sua cor: este conjunto de pontos é arrumado no formato de uma matriz e essa matriz forma a imagem.

determina a resolução desta imagem

06|14

Page 6: m estrado design de produto

p i x e lc o m o é p o s s í v e l a c e s s á – l o ?

um pixel só é acessado via softwares de edição de imagem bitmap… por exemplo adobe photoshop

07|14

Page 7: m estrado design de produto

p i x e lo q u e é r e s o l u ç ã o ?

é a quantidade de pixels em sentido horizontal e vertical e o número de cores geradas pela placa de vídeo e aceitas pelo monitor;

quanto maior a quantidade de pixels e de cores, mais claras e precisas são as imagens!

a unidade de medida de resolução é a dpi(dots per inch) pontos por polegada,e é expressa da seguinte forma:

L x A (largura X altura)800 x 600 pixels… 1440 x 900...

quanto às cores, as configurações básicas podem ser 256 cores , 65.536 (chamada high color 16 bits) e 16,7 milhões (high color 24 bits): a norma segue sendo SVGA (Super Video Graphics Array).

08|14

Page 8: m estrado design de produto

como definir a cor de um pixel?

o valor da cor de um pixel é calculado em valores da escala RGB (red, green and blue);

cada valor pode variar de 0 à 255;

a mistura dos valores determina sua cor final;

pode ser "transparente“: chama-se canal alpha;

pode ser indexado: cada pixel assume um valor presente numa paleta de 256 cores (este modo é útil para aplicações multimídia e para publicar na web, pois imagens/fotos “.GIF” ficam bem mais leves*)

* imagens pequenas sobrecarregam menos o sistema!

pixelvermelho

R: 255G: 0B: 0

pixelverde

R: 0G: 255B: 0

pixelazul

R: 0G: 0B: 255

09|14

Page 9: m estrado design de produto

R: FFG: 00B: 00

como definir o código hexadecimal?

é um código RGB alfanumérico;formado por 3 pares de caracteres que representam, da esquerda para a direita, as intensidades relativas de vermelho, de verde e de azul que formam uma determinada cor,

sendo que 00 = 0% e FF = 100%;

usa números entre0, 1, 2, 3, 4, 5, 6, 7, 8, 9

e letrasA, B, C, D, E, F

em qualquer combinação de seis dígitos; começando pelo símbolo “#” *

nas interfaces web | desenvolvimento de interfaces gráficas computadorizadas, nem sempre as cores escolhidas podem ser visualizadas por todos da mesma forma!

#FF0000vermelho

#00FF00verde

R: 00G: FFB: 00

#0000FFazul

R: 00G: 00B: FF

10|14

Page 10: m estrado design de produto

R: FFG: FFB: FF

se…código hexadecimal é um códigoRGB alfanumérico;

lembrando...para os que trabalham com computador, as primárias são:vermelho, verde e azul-violetado;

então…

a mistura dessas três luzes coloridas produz o branco, denominando-se o fenômeno síntese aditiva.

#FFFFFFbranco

#000000preto

R: 00G: 00B: 00

11|14

Page 11: m estrado design de produto

os monitores c o r e s p r o t e g i d a s

browsers

netscape, mosaic e internet explorer compartilham o mesmo processo de gerenciamento de cores, onde, das 256 cores, 216 são comuns a qualquer plataforma (macintosh ou windows), e as outras são reservadas para o sistema operacional;

cores protegidas*

são 216;

definidas matematicamente em conversões de RGB para “hexadecimal”;

subdividem-se em 6 vermelhos, 6 verdes e 6 azuis, que variam em contraste e se combinam em variações de 00, 33, 66, 99, CC e FF.

cuidado! Nem todas as imagens e fotos que você for utilizar em seu site devem estar, necessariamente, dentro destes valores de cores seguras. Normalmente as cores seguras são utilizadas para a codificação HTML (cores com valores hexadecimais, como links e cores de fundo) e imagens com cores sólidas. Evite utilizar esta paleta em fotos e imagens com efeitos gradientes.

!

12|14

Page 12: m estrado design de produto

os monitorese a b u s c a v i s u a l

n a i n t e r f a c e w e b

para organizar | diagramar websites de forma eficiente, é preciso pensar nas informações que estarão aparentes no espaço da tela;cores, textos, imagens, ícones, botões, etc

por exemplo:

anúncios (banners) localizados no topo e nas partes esquerdas da interface recebem a maioria da atenção dos olhares;

em anúncios separados de conteúdo textual, através de um espaço em branco ou uma linha, a fixação do olhar torna-se mais difícil do que nos casos onde não há tal separação;

cuidado! A maioria dos usuários se cansa rapidamente dos

gráficos animados e barulhentos, cores intensas ocupando áreas grandes, assim como dos longos downloads, das irritações da compatibilidade de plug-ins e dos estímulos perturbadores que complicam interfaces construídas neste estilo!

!

13|14

Page 13: m estrado design de produto

www.sschnaider.com.br

[email protected]

sschnaider.wordpress.com

[email protected]

silvia schnaider

silviaschnaider

14|14