Aula 2 Webdesign

Treinamento de Webdesign

Instrutor: Danilo Rozisca Organização:
O i ã
Fema-CEPEIN
Jul/2008

Sumário

- Princípios de Design;
í
- g
Elementos do Design;
- Imagens / Sistemas de Cores;
- Tipografia;
- Psicologia das Cores;
- Influência.
ê

Treinamento de Webdesign - Aula 2

Princípios de design

A execução de um design consistente envolve - mesmo que
seja instintivamente - conceitos estéticos consagrados
j g
como função e estrutura, além dos princípios básicos da
Gestalt. Todos esses fatores são meras variações do mesmo
ç
tema de sempre, o bom senso.

Eles podem ser resumidos em sete tópicos:
RADFAHRER, 2000


1. Proximidade e alinhamento
- elementos que pertençam a
um mesmo grupo devem estar
próximos.

RADFAHRER, 2000


2. Equilíbrio, proporção e simetria -
todos os componentes devem ser
complementares.

IMAGENS, Textos,
cores e ALINHAMENTOS.

RADFAHRER, 2000

3. Contraste, cores e brancos - layouts dinâmicos
chamam a atenção e causam impacto.

RADFAHRER, 2000


Design Web: Equilíbrio entre Elementos

Ter espaço em branco adequado em torno de
agrupamentos di i
t direciona a atenção d usuários para
t ã dos ái
pontos importantes sem forçar a visão.

NIELSEN; LORANGER, 2007

4. Ordem, consistência e repetição - liberdade para
criar as regras, mas deve segui-las.
segui las.

RADFAHRER, 2000

5. Simplificação – simplicidade é sinônimo de elegância,
objetividade e, acima detudo clareza
Treinamento de tudo, clareza. - Aula 2
e Webdesign

RADFAHRER, 2000


6. Legibilidade - textos existem para serem lidos.
Exemplo:

Curiosidade, inovação e descoberta: o desafio do
design digital
A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de
layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a
enorme
qualquer instante.
Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de
arte da história.
Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem
restrições de tempo.

RADFAHRER, 2000

7. Integração – o design não pode desafinar.

RADFAHRER, 2000


Convenções de desenho de Interface

A padronização d interfaces é um d conceitos mais
d das f dos
importantes para se projetar websites.

Estão relacionadas a conceitos de psicologia cognitiva,
como facilidade de aprendizado e memorização,
p ç ,
diminuindo as chances de dúvidas e erros por parte dos
usuários.
MEMÓRIA, 2005


Design Web: Elementos

Um bom design web se difere por sua funcionalidade e
harmonia estética entre seus elementos:

•Elementos de Navegação;
•Elementos
Elementos de Orientação;
•Elementos de Conteúdo;
•Elementos de Emoção.


Design Web: Elementos de Navegação

Arquitetura da Informação e Webdesign

Design Web: Elementos de Orientação


Design Web: Elementos de Conteúdo
Textos, fotos, ícones, videos…


Design Web: Elementos de Emoção

Apelam para o sentimento do usuário e provocando curiosidade.


Design Web: Diagramação (Construção de Layout)

É a distribuição de elementos gráficos em um espaço
limitado, buscando a clareza, a organização e a
confiabilidade das informações;

Lógica visual, criando um perfeito equilíbrio entre a
sensação visual e as informações gráficas;

CAVICHIOLI,
CAVICHIOLI 2008


Design Web: Extensões de Gráficos para Web

GIF e JPG: Estes formatos fazem parte das imagens
bitmaps, obtidas através de processos de compressão de
imagens que tornam o arquivo mais leve, possibilitando o
carregamento mais eficiente em várias velocidade de
conexão.

DAMASCENO, 2003



Formato de arquivo GIF(Graphics Interface Format):

- Suporta apenas 256 cores;
- Suporta transparência;
- Suporta animações(quadro a quadro).

DAMASCENO, 2003



Formato de arquivo JPG(Join Photografic Experts Group):

- Permite manter as caracteristicas originais da imagem;
g g
- Trabalha com milhões de cores.

DAMASCENO, 2003


Design Web: Tipografia

É a arte, o processo de criação e a classificação do
desenho de letras do alfabeto e de caracteres usados para
formar palavras.

CAVICHIOLI, 2008



As fontes tipográficas
(ou apenas fontes) são
classificadas em 4 grupos
básicos: as com serifas, as
sem serifas, as cursivas e
as fontes dingbats.

DigitalPaperWeb.com.br, 2008



Fontes Tipográficas diferentes podem significar fantasia ou
seriedade e, tamanho e cores podem dar maior destaque ao
conteúdo.




Fontes pré-instaladas:
Arial;
;
Arial black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
p ;
Times New Roman;
Trebuchet MS;
Verdana.
V d

Fontes legíveis para web:

Nome da Fonte Caracteristica
Arial Moderna, limpa, básica.

Fonte com serifa projetada para leitura on-line.
Georgia Aparência Tradicional, visual mais moderno que
Times News Roman.

Trebuchet MS Moderna, simples.

Fonte on-line mais legivel, mesmo em texto
Verdana
pequeno

Todas com 10 pontos ou acima.


Design Web: Sistema de Cores

RGB:

• Sistema de cores subtrativamente(pigmento);
• Formado por vermelho (Red), verde (Green) e azul (Blue);
• É utilizado na eletrônica e recursos visuais eletrônicos.

CAVICHIOLI, 2008


Design Web: Psicologia das cores

Desde os primórdios da humanidade, a cor já é utilizada
como elemento de sinalização;

Para cada sociedade do planeta, uma mesma cor possui
diferentes significados
significados.

DAMASCENO, 2003

Design Web: Psicologia das cores
As cores podem ter alguns significados e provocar lembranças e sensações
diferentes às pessoas dependendo de sua cultura:

Cinza: elegância, humildade, respeito, reverência, sutileza;
Vermelho: paixão, força, energia, amor, velocidade, liderança, masculinidade,
alegria (China), perigo, fogo, raiva, revolução, quot;parequot;;
Azul: harmonia, confidência, conservadorismo, austeridade, monotonia,
dependência, tecnologia,
dependência tecnologia liberdade;
Verde: natureza, primavera, fertilidade, juventude, desenvolvimento, riqueza,
dinheiro (Estados Unidos), boa sorte, ciúmes, ganância;
Amarelo: concentração, otimismo, alegria, felicidade, idealismo, riqueza
(ouro), fraqueza;
Branco:
Branco: pureza, inocência, reverência, paz, simplicidade, esterilidade,
ê ê
rendição;
Preto: poder, modernidade, sofisticação, formalidade, morte, medo,
anonimato, raiva, mistério.
CAVICHIOLI, 2008


Design Web: Combinação de cores

Círculo cromático - Método de representar o
espectro visível agrupando as cores na seqüência
da freqüência espectral;
q p ;

Seu gráfico é conhecido como Roda das cores,
Círculo das cores ou Círculo cromático.

CAVICHIOLI, 2008

Círculo cromático

Esquema Triádico

– Combina três cores eqüidistantes
(triangulação);

– Como a intensidade entre as cores
são pouco distintas, esse esquema
é mais versátil;

– Pode-se utilizar essa técnica para
diminuir a vibração óptica das
cores.

Dica: http://www studiosol com br/esquema-de-cores/
http://www.studiosol.com.br/esquema de cores/
CAVICHIOLI, 2008

Gerador de Esquemas de Cores

www.studiosol.com.br/esquema-de-cores/
www studiosol com br/esquema de cores/


Design Web: Caracteristicas da Web 2.0

ou

Webdesign 2.0, Redesign, Moda da internet?


Design Web: Caracteristicas da Web 2.0


Considerações Finais:

Com a prática d simplicidade na construção d l
C áti da i li id d ã de layouts para
websites seguindo cuidadosamente os elementos de design, resultam
em layouts elegantes e funcionais
funcionais.

Cada ícone, figura, imagem e animação devem servir a um propósito
e comunicar algo significativo.



Na Prática

- Ph t h CS3-
Photoshop CS3


Muito Obrigado

Fim


Referências:

DAMASCENO, ANIELLE
Webdesign: Teoria e Prática; Visual Books; Florianópolis; 2003.

MEMÓRIA, FELIPE
Design para Internet: projetando a experiência perfeita;
Rio de Janeiro; Elsevier; 2005.

MORROGH, EARL
Information Architecture: An Emerging 21st Century Profession;
New Jersey; Prentice Hall; 2003.

PEON ESPANTOSO, JOSE JUAN
ESPANTOSO
O arquiteto da informação e o bibliotecário do futuro; Revista de Biblioteconomia de Brasília, v.23/24, n.2, p.135-146;
1999/2000.

RADFAHRER, LULI
Design/Web/Design:2; 2ª Edição; 2000;
Formato: PDF;
Disponibilizado no endereço: http://www.luli.com.br/dwd2.

ROSENFELD, L. ; MO V
OS N , . MORVILLE, P ,
Information Architecture for the Word Wide Web. 2ed. Sebastopol: O'Reilly, 2006.


Referências (Sit ):
Sites

CAVICHIOLI ODAIR JR
http://cavichioli.blogspot.com/
Acessado: 26/05/2008
Slide - Design de Interface;
- Tipografia;
- Teoria das Cores;
- Diagramação de Sites.

MUNIZ,
MUNIZ RODRIGO
http://rodrigomuniz.com/blog/moda-no-design-para-a-web/
- Influência da Apple.

WIKEPÉDIA
http://www.wikepedia.org
- Webdesign.

DIGITAL PAPER
http://digitalpaperweb.com.br/ezine/tipografia/o que e tipografia
http://digitalpaperweb.com.br/ezine/tipografia/o-que-e-tipografia
- Tipografia.

PINCELADAS DA WEB
http://www.pinceladasdaweb.com.br/blog/category/web-20/
A d
- Web 2.0

Aula 2 Webdesign

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (18)

Semelhante a Aula 2 Webdesign

Semelhante a Aula 2 Webdesign (20)

Aula 2 Webdesign