T.I.C.
Web Design
PARTE I
André Coutinho
www.coutinho.wikispaces.com
1
Web Design
Objectivos
- Introduzir alguns conceitos de design
- Apresentar algumas considerações sobre o desenho
de páginas web
- Apresentar um conjunto de regras para produzir sítios
web atraentes e funcionais
André Coutinho
www.coutinho.wikispaces.com
2
Alguns conceitos de design:
- Funcionalidade, Conteúdo, Estética
- Briefing do design
- Mais alguns conceitos de design
- Design criativo, design funcional, design gráfico
- Considerações sobre design de sítios web
André Coutinho
www.coutinho.wikispaces.com
3
Alguns conceitos de design
O design de um sítio web poderá obedecer a
um conjunto variado de critérios que tendem a
ser todos relacionados com três pressupostos:
- Funcionalidade
- Conteúdo
- Estética
André Coutinho
www.coutinho.wikispaces.com
4
Funcionalidade
A funcionalidade prevista para quem utiliza o sítio,
determina grandemente o seu design.
- Se um sítio pretende mostrar uma empresa, criar
um espaço para mostrar as suas instalações será
óbvio, mas se pretende ser uma loja de venda de
produtos, mostrar vários produtos em série pode ser
um importante factor de promoção das vendas.
André Coutinho
www.coutinho.wikispaces.com
5
Funcionalidade

A funcionalidade é determinada por
todos os mecanismos, automatismos,
formulários ou módulos implementados
no sítio e que proporcionam a
experiência ao visitante.
André Coutinho
www.coutinho.wikispaces.com
6
Conteúdo
-Texto, imagens, informação, fixos ou
dinâmicos, todos contribuem para
determinar qual o design adequado
para um sítio
- A distribuição das diferentes formas
de conteúdo é uma das mais difíceis
tarefas do Web Designer
André Coutinho
www.coutinho.wikispaces.com
7
Estética
A estética é importante mas não é um pressuposto
Único;
- Um sítio bonito é diferente de um sítio útil, embora
muitas vezes se confundam as coisas
- As preferências individuais são causadoras de
incompatibilidades, pelo que uma estética escolhida
para agradar à maioria pode ser um factor de sucesso
bem como a inversa pode ser factor de selecção de
visitantes
André Coutinho
www.coutinho.wikispaces.com
8
Briefing do design
- Briefing
-Curta apresentação
- Design
- Padrão, intenção, projecto,
criação; desenho, esboço;
- Briefing do design
- Curta apresentação de um
padrão
André Coutinho
www.coutinho.wikispaces.com
9
Briefing do design
- Modelo seguido para orientar a reunião com o
Cliente
- Conjunto de questões para definir intenções e
argumentos para a produção do design das
páginas de um sítio
- O modelo não deve ser exaustivo nem
definitivo,
pelo que devemos ter o cuidado de analisar a
especificidade de cada projecto e identificar
melhoramentos para futuras evoluções
André Coutinho
www.coutinho.wikispaces.com
10
Funcionalidade: algumas
questões
Foi definido o objectivo de criação do sítio? O que se
pretende conseguir? - seja concreto; ex.: aumentar clientes em 10%, conseguir
1000 visitantes por mês.
Foi definida uma estratégia compatível com o objectivo? - ex.: implementar
um inquérito, criar uma newsletter.
Qual é a estrutura central do sítio? Em quantas e quais áreas ou secções este
se divide?
Dentro dessas áreas ou secções existem subdivisões ou secções de nível
inferior? Quais?
Existe uma estrutura de páginas definida? Foi decidida uma lista de páginas
que constituem o sítio? Como é ela constituída?
André Coutinho
www.coutinho.wikispaces.com
11
Funcionalidade: algumas
questões
- Foi definida para cada página a funcionalidade que nela
se pretende implementar? Qual é ela?
- Existe uma preferência pelo tipo de navegação a efectuar
no sítio? Prefere-se uma navegação fixa (opções
permanentes) ou dinâmica (opções e/ou sub-opções
variáveis)?
- A navegação é feita somente num local ou pretende-se
efectuar navegação no contexto (embebida no
conteúdo)? Em que locais?
- Existe alguma simbologia definida ou preferida para a
navegação (botões, menus, separadores, etc.)? Qual?
- Qual o compromisso de velocidade desejado? Pretende
privilegiar a rapidez ou a funcionalidade?
André Coutinho
www.coutinho.wikispaces.com
12
Conteúdo: algumas questões
- Existem conteúdos definidos para incluir no sítio?
Quais?
- O conteúdo cobre todas as necessidades para se
cumprir com o objectivo do sítio? Porquê?
- Existem mecanismos de inserção e alteração do
conteúdo? Quais?
- Qual o conteúdo que é estático (alterado somente por
edição das páginas) e qual é dinâmico (alterável com
frequência, através de mecanismos de inserção e
alteração)?
- Qual o compromisso de velocidade desejado?
Pretende-se privilegiar a rapidez ou o mais (ou maior)
conteúdo?
André Coutinho
www.coutinho.wikispaces.com
13
Conteúdo: algumas questões
- Quais as emoções (confiança, diversão, segurança,
descontracção, etc.) que deve sentir o visitante do
Site? Descreva-as de forma clara e exaustiva?
- Quais as impressões (tradição, domínio, estilo,
modernidade, etc.) que o visitante deve obter através
do sítio? Descreva-as de forma clara e exaustiva?
- Existe uma imagem de marca, corporativa ou outra,
definida em concreto e que deve ser seguida? Qual?
Existe um Manual de Imagem?
- Existem logótipos, símbolos, ícones, fotos ou imagens
que devem ser utilizados? De que forma?
- Existem outros elementos a ter em conta para a
produção (como Anúncios, Folhetos, Brochuras, Papel
Timbrado, etc.)?
André Coutinho
www.coutinho.wikispaces.com
14
Estética: algumas questões
Que destaque deve ser dado aos diferentes
elementos? Algum desses elementos tem um
posicionamento mais importante?
- Qual o compromisso de velocidade desejado?
Pretende-se privilegiar a rapidez ou a Estética?
- Foi definido o grau de animação pretendido? Qual a
intensidade de uso de imagens e animações simples?
- Qual a intensidade de uso de animações multimedia?
- Existem preferências por outros Sites? Quais?
André Coutinho
www.coutinho.wikispaces.com
15
Mais alguns conceitos de design
Design criativo
- determinação e demonstração dos
aspectos diferenciadores do projecto
- Ex. criação de uma promoção de
lançamento, criação de uma nova
forma de divulgação, ...
André Coutinho
www.coutinho.wikispaces.com
16
Mais alguns conceitos de design
Design funcional
- elaboração do plano de funcionalidades e sua
dependência, com destaque para:
- dados (bases de dados e sua estrutura)
- procedimentos (programas, rotinas, etc.)
- cliente (interface do utilizador)
Ex. base de dados de visitantes, página de
lançamento de informação e agradecimentos.
André Coutinho
www.coutinho.wikispaces.com
17
Mais alguns conceitos de design
Design gráfico
- determinação dos aspectos
relevantes do design gráfico da
solução
- Ex. orientações, emoções, limitações;
cor, logótipos, símbolos, imagens,
grafismos; estilo e referências
André Coutinho
www.coutinho.wikispaces.com
18
Considerações sobre design de
sítios web
Alguma vez se sentiu frustrado enquanto
navegava na Web devido ao tempo de
download das páginas ou porque o conteúdo
estava mal organizado?
- Estes devem ser aspectos a ter em conta
quando se desenham páginas web
André Coutinho
www.coutinho.wikispaces.com
19
Considerações sobre design de
sítios web
Mantenha a informação acessível
- Toda a informação principal do sítio web deve
estar a duas hiperligações (links) da página
inicial
- Os utilizadores ficam muitas vezes confusos e
frustrados quando têm de seguir mais do que
dois links para encontrar a informação que
pretendem
André Coutinho
www.coutinho.wikispaces.com
20
Considerações sobre design de
sítios web
Minimize a utilização de som
- Transferir som através da Internet requer
grande largura de banda
- Isto significa que utilizadores com ligações
largura de banda reduzida (através de linha
telefónica) demorarão longos períodos de
tempo a descarregar páginas de sítios web
que incluam ficheiros de som
André Coutinho
www.coutinho.wikispaces.com
21
Considerações sobre design de
sítios web
Coordene cores
- Utilize as cores que transmitam
informação ou direccione a atenção para
onde ela seja
efectivamente necessária
- Se se utiliza uma imagem de fundo,
certifique-se de que ela não perturba a
informação do sítio web
(Algumas imagens tornam o texto ilegível)
André Coutinho
www.coutinho.wikispaces.com
22
Considerações sobre design de
sítios web
Considerações sobre texto:
- O texto deve ser suficientemente
grande para ser lido;
- Cores ou imagens de fundo não
devem tornar o texto mais difícil de
ler.
André Coutinho
www.coutinho.wikispaces.com
23
Considerações sobre design de
sítios web
Consistência:
- Consistência é um aspecto fundamental na criação de
um bom sítio web;
- Se desenhar um sítio web para uma intranet, deve focar
a atenção no facilidade de acesso e em disponibilizar
informação importante
- Se desenhar um sítio web para a Internet, deve dar
relevância à imagem corporativa e às mensagens de
marketing
- Em ambos os casos esforçar-se por criar um sítio de fácil
navegação, tornando simples para o utilizador a procura
da informação que está a procurar
André Coutinho
www.coutinho.wikispaces.com
24
Considerações sobre design de
sítios web
Aspectos legais:
- Regra geral, um sítio web pode ser
facilmente copiado pelos utilizadores;
- No entanto, pode sujeitar a informação
disponibilizada a copyright; isto informa os
utilizadores de que não podem copiar
informação sem autorização prévia.
André Coutinho
www.coutinho.wikispaces.com
25
ACESSIBILIDADE NA WEB
PARTE II
André Coutinho
www.coutinho.wikispaces.com
26
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB
1- Garanta que todas as imagens se
encontram legendadas ou descritas
com texto
 Nota: Esta medida é essencial para
botões e ligações feitas com recurso a
imagens. O leitor de ecrã utilizado por
um cego irá ler o texto alternativo
associado à imagem.

André Coutinho
www.coutinho.wikispaces.com
27
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB

2 - Garanta que o tamanho do texto
pode ser aumentado com as opções
do seu navegador

Nota: Esta facilidade é muito utilizada por pessoas
idosas com algumas dificuldades visuais.
André Coutinho
www.coutinho.wikispaces.com
28
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB


3 - Garanta que o comprimento do
texto na página se ajusta ao
tamanho da Janela
Nota: Esta característica facilita a utilização de software de
ampliação.
André Coutinho
www.coutinho.wikispaces.com
29
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB


4 - Garanta a identificação do
campos dos formulários
Nota: Coloque etiquetas em todos os campos do formulário
identificando a sua funcionalidade. No caso do elemento que
executa o envio dos dados do formulário ser uma imagem, não se
esqueça de a legendar.
André Coutinho
www.coutinho.wikispaces.com
30
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB


5 - Permita a activação dos
elementos da página através do
teclado
Nota: Pessoas com destreza reduzida ou com incapacidade de ver
o cursor do ecrã têm dificuldade em usar um dispositivo apontador
como o rato. O teclado pode ser a única alternativa.
André Coutinho
www.coutinho.wikispaces.com
31
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB


6 - Garanta que os textos das
ligações sejam compreensíveis fora
do contexto
Nota: Use a tecla TAB para saltar de ligação em ligação numa página Web e
leia em voz alta o respectivo texto. Um cego usa uma técnica semelhante para
navegar recorrendo a um leitor com síntese de fala para substituir a falta de
visão. Ligações compostas por "clique aqui" não são esclarecedoras para quem
ouve apenas a informação das ligações. Do mesmo modo, se usar várias vezes o
mesmo texto para compor ligações diferenciadas gera ambiguidade. As ligações
podem ser legendadas com texto alternativo para evitar ambiguidades.
André Coutinho
www.coutinho.wikispaces.com
32
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB

7 - Forneça uma forma simples para
contactar o responsável

Nota: O utilizador poderá comunicar-lhe as
dificuldades que sente no acesso aos conteúdos do seu
sítio. Facilite o feedback dos utilizadores.
André Coutinho
www.coutinho.wikispaces.com
33
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB

8 - Utilize ferramentas e imagens
◦
◦
◦
◦

Flash
Dreamweaver
Joomla
FrontPage
Imagens uniformes e de boa qualidade
André Coutinho
www.coutinho.wikispaces.com
34
9 CONSELHOS PARA A ACESSIBILIDADE DE
UM SÍTIO WEB

9 - Afixe o símbolo de acessibilidade
na Web

Nota: Utilize o Símbolo de Acessibilidade na
Web para indicar que o seu sítio contém
funcionalidades de acessibilidade para cidadãos
com necessidades especiais, para diferentes
ambientes,
situações,
equipamentos
e
navegadores.
André Coutinho
www.coutinho.wikispaces.com
35
Prática
Faça um breve trabalho, analisando um
Website à sua escolha. Verifique se este
respeita os 9 conceitos da acessibilidade.
Atento ao Web design deve verificar a
sua:
- Funcionalidade;
-Conteúdo;
- Estética.
André Coutinho
www.coutinho.wikispaces.com
36
Referências
http://www.acessibilidade.net
 http://www.usabilidade.net
 http://www.usableweb.com
 http://www.w3.org/
 http://msdn.microsoft.com/library/default.
asp?url=/library/enus/dnanchor/html/anch
_UIDesignDev.asp

André Coutinho
www.coutinho.wikispaces.com
37