Appdesign2Kelma

Princípios de design

Adaptações

Teoria básica das Cores

Círculo de cores

Características das cores

Todas as cores possuem 3 características (Matiz, Tom, Intensidade)

Síntese das cores

Cores aditivas e subtrativas

Escalas de cores

Círculo de cores

O que é COR?

A luz é composta por sete cores, vermelho, laranja, amarelo, verde, azul, anil e violeta. Quando a luz incide sobre um objeto parte dela é absorvida e parte dela é refletida. A cor que enxergamos é a luz refletida por um objeto.

Características das cores

Todas as cores possuem 3 características.

Matiz é a característica que define e distingue uma cor. Por exemplo, vermelho, verde ou azul são matizes. Para se mudar o matiz de uma cor, acrescenta-se a ela outra matiz.

Tom refere-se à maior ou menor quantidade de luz presente na cor. Quando se adiciona preto a determinado matiz, este se torna gradualmente mais escuro, e essas graduações são chamadas escalas tonais. Para se obterem escalas tonais mais claras, acrescenta-se branco.

Intensidade diz respeito ao brilho da cor. Um matiz de intensidade alta ou forte é vívido e saturado, enquanto o de intensidade baixa ou fraca caracteriza cores apagadas ou pastel. Por exemplo, o disco de cores mostra que o amarelo tem intensidade alta, enquanto a do violeta é baixa.

Cores primárias aditivas

Escala RGB, também conhecida por cor-luz

No sistema RGB (Red Green Blue) as cores primárias são vermelho, verde e azul e as secundárias são, ciano, magenta e amarelo. A junção de todas as cores-luz resulta na luz branca.

Quais seriam as cores terciárias?

Cores primárias subtrativas

Escala CMY, também conhecida por cor-pigmento

Já no Sistema CMY (Cyan Magenta Yellow) primárias são ciano, magenta e amarelo e as secundárias são vermelho, azul e verde. A junção de todas as cores-pigmento resulta na cor preta.

Curiosidades

Qual dos dois sistemas consiste naquele utilizado

em monitores, televisões, câmeras digitais,

scanners e afins?

R- RGB, mas ambos os sistemas estão presentes nos nossos cotidiano; a exemplo, o sistema cor-pigmento é fundamental para a pintura.

A televisão e os monitores funcionam a partir de uma imagem formada por pontinhos de cor-luz primárias, que ao serem vistos de longe formam as outras cores que são necessárias para a reprodução da imagem.

Curiosidades

Qual dos dois sistemas consiste naquele utilizado

para os sistemas de impressão?

R- CMY

Dica:

Trabalhe sempre em RGB no seu computador. Isso porque as imagens que usamos são captadas no sistema RGB. Quando terminar o layout, transforme em CMY e observe o resultado. Faça os ajustes necessários. Depois, salve o arquivo como um TIFF e mande para a gráfica.

Escala monocromática

Variação de claro e escuro da mesma cor

Isto representa uma boa combinação.

Contraste de valor

Variação de claro e escuro da mesma cor Contraste de valor

Variação de valor, mantendo um mesmo matiz, como é o caso das escalas monocromáticas, não provocam desconforto visual. Em combinações predominantemente claras, os escuros chamam mais atenção e vice-versa.

Escala de cores análogas

São as que aparecem lado a lado no disco

Isto também representa uma razoável combinação.

Escala de cores complementares

São as que aparecem opostas no disco

Escala complementares divididas

Cores que aparecem ao lado de seu complementar

Esta combinação é menos conflitate que a anterior.

Contraste complementar

Variação de claro e escuro da mesma cor Contraste complementar

O mais intenso dos contrastes, gerado entre cores complementares, podendo provocar um certo desconforto visual na combinação.

Contraste simultâneo

Contraste simultâneo

Fenômeno explicado pela necessidade do olho de buscar a complementar da cor observada para diminuir a tensão na retina provocada por ela.

Porque o preto possui menos luz reforçando desta forma, o brilho do amarelo.

Porque o azul tende a buscar seu complementar

Escala de cores quentes

Cores que variam do amarelo ao violeta

Escala de cores frias

Cores que variam do verde ao azul

Contraste quente/frio

Cores quentes, normalmente mais claras quando saturadas, chamam mais atenção ao serem combinadas às cores frias.

Design de interface

Primeiros passos

Entendendo o produto e público-alvo.

Projeto de interface

Oferecer ao usuário o entendimento da aplicação. Profissional deve conhecer as convenções do dispositivo alvo.

Primeiros passos

Que informações serão disponibilizadas

Quem é o usuário

O melhor meio de conhecê-lo é realizando pesquisas.

Primeiros passos

Entendendo o produto e público-alvo.

Primeiros passos

Primeiros passos

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Conhecer as convenções do dispositivo alvo

Oferecer ao usuário o entendimento da aplicação.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Web

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Por exemplo, caso eu vá desenvolver um site de notícias, o primeiro passo será pesquisar sites de notícia e observar as convenções quanto à:

•  Comprimento da página •  Logotipo

•  Pesquisa •  Navegação

•  Cores do texto e plano de fundo

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Comprimento da página:

•  Recomenda-se uma ou duas telas inteiras. •  Não mais do que 3 telas inteiras (entre 1000 e 1600pxs)

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Logotipo:

•  Geralmente no canto superior esquerdo. •  Tamanho padrão 80x68px

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Pesquisa:

•  Preferencialmente no canto superior (esquerdo ou direito).

•  Utilizar uma caixa branca, para pelo menos 25 caracteres (30 é o ideal) e o label pesquisar (search) ou ir (go) no botão de busca.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Navegação: •  Menu à esquerda, •  Abas, •  Menu superior •  Categorias.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para web

Cores do texto e plano de fundo: •  Texto preto,

•  Tamanho de fonte 12 (cambiável) e sem serifa.

•  Plano de fundo branco.

A L

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

TV Digital

Conhecer o dispositivo - televisão

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Conhecer o dispositivo – Controles Remotos

TV Digital

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Assistir aos vídeos e observar as convenções quanto à: •  Comprimento da página

•  Logotipo •  Pesquisa •  Navegação

•  Tipografia e plano de fundo •  Organização visual da TV

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Comprimento da página:

•  Recomenda-se uma tela inteira.

•  Média de 13 linhas de texto e 10 palavras por linha. •  Dividir o conteúdo através de paginação.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Logotipo:

•  Geralmente no canto superior esquerdo. •  Tamanho padrão 80x30px.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Pesquisa:

Geralmente indisponível.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Navegação:

Menu à esquerda, menu inferior ou categorias.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Convenções para TV

Cores do texto e plano de fundo:

Texto geralmente branco, tamanho 24 (mínimo 18) e sem serifa.

Plano de fundo geralmente azul ou preto.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Celular

Projeto de interface

Oferecer ao usuário o entendimento das aplicações.

Outros Bons Artifícios

Utilização de Hints (Dica)

Outros Bons Artifícios

Outros Bons Artifícios

Campos predefinidos

Outros Bons Artifícios

Outros Bons Artifícios

Outros Bons Artifícios

Ajuda (Helps, Tutorial e Afins)

Outros Bons Artifícios

Outros Bons Artifícios

Guias de Estilos (CSS)

CSS foi proposto pelo W3 Consortium (comitê que define os padrões de programação para a internet).

Foi introduzido pela primeira vez pela Microsoft, no lançamento do Internet Explorer 3.0.

Guia de estilos - Cascading Style Sheets (CSS) ou ainda

Folhas de Estilo em Cascata, é um padrão de formatação para adicionar estilos aos documentos, ou seja é um conjunto de

tags que auxiliam a formatação, proporcionando ao designer

um maior controle sobre os atributos visuais (layout das páginas) tais como: margem do texto, tamanho e cor das fontes, espaçamento entre linhas e caracteres, sobreposição de texto sobre texto ou texto sobre imagens (utilizando

layers), dentre outros.

 

Elabore as telas de seu Sistema (Trabalho da AV1),

baseado nos:

 

Princípios de organização visual;

 

Contraste de tipos;

 

Cores;