WEB DESIGN

O que o Web Design?

Web Design a criao de ambientes digitais
que facilitam e incentivam a actividade
humana, reflecte ou adapta-se a vontades
individuais e contedos; e muda graciosamente ao
longo do tempo enquanto mantm a sua
identidade
Zeldman [2007]

http://www.alistapart.com/articles/understandingwebdesign/

O que o Web Design?

Web Design uma actividade no mbito da

produo
de pginas Web na perspectiva
do utilizador.
Engenharia Web que consiste na

Combinar as competncias tcnicas e artsticas de

forma a alimentar as exigncias de um pblicoalvo:

Web design

a capacidade de criar pginas Web.

O contedo de um site web (conjunto de pgina
ligadas por hiperligaes) tem que ser
relevante/til para quem a visita.
Apresentar a informao baseada nas
necessidades do pblico-alvo - utilizador/visitante.
Responsvel pela escolha do contedo a publicar.

Exigncias:

Usabilidade a facilidade com que os

utilizadores podem utilizar uma ferramenta
para executar uma tarefa especfica;
Aparncia o aspecto ou aquilo que se
mostra superficialmente (ou, digamos, primeira
vista);
Visibilidade a destreza com que os
utilizadores localizam e interpretam a
informao.

Navegao

Um site tem que ser user-friendly.

Uma navegao simples uma forma inteligente de
de cativar o utilizador a visitar o nosso site.
Quando fcil, o utilizador responde rapidamente:
Onde

estou? (Presente);
Onde posso ir? (Futuro);
Onde eu estive? (Passado).

Utilizadores

so Preguiosos, no lem;
Examinam um site rapidamente e se no encontram
o que pretendem fecham a pgina;
Querem sites objetivos e claros;

F-Shaped Pattern

10

Primeiro, os utilizadores lem em movimentos

horizontais, normalmente na parte superior da
rea de contedos;
Depois, movem um pouco para baixo a pgina
e lem atravs de um segundo movimento
horizontal, que cobre menor rea que o movimento
anterior;
Por fim, os utilizadores examinam o contedo da
esquerda num movimento vertical.

Papel do Web Designer

Criador

- concepo e o desenvolvimento de
pginas Web;

Auditor

- colabora no levantamento de
requisitos no desenvolvimento do software Web;

Consultor

- participa na avaliao e
fiscalizao da qualidade do stio Web;

11

Papel do Web Designer

Definir a estrutura (arrumao dos contedos e a

navegabilidade)
Definir o aspecto visual
Definir a usabilidade de um stio Web.

Metodologia:

levantamento

dos requisitos
desenho do modelo
implementao
12

Fases e tarefas da construo de um site

13

Fases e tarefas da construo de um site

Concepo: reconhecer o que o site deve abarcar,

nomeadamente a informao a processar, as
funcionalidades a implementar, as restries existentes;

Implementao: o objectivo identificar o como fazer o

site e construi-lo na realidade. Sero definidos e construdos
as estruturas de dados, os testes a realizar, a concretizao
do alojamento e do domnio. No final desta fase dever
ser disponibilizado o stio Web a funcionar;

Manuteno: inclui todas as alteraes posteriores

aceitao do stio Web pelo cliente como correco de
erros, introduo de melhorias e/ou novas funcionalidades.

14

PLANEAR UM WEBSITE

Planear um Website

Conjunto de etapas:
Estabelecer

os objectivos;
Reflectir sobre a audincia;
Listar as caractersticas pretendidas para o site e os
contedos a integrar o site;
Organizar a estrutura do site;
Definir e desenhar a estrutura das pginas;
Desenhar o site.

16

Estabelecer os seus objectivos

17

O estabelecimento dos objectivos do website na fase de

planeamento permite estruturar todo o seu desenvolvimento;
Antes necessrio efectuar um estudo prvio, em que a
equipa de desenvolvimento procura conhecer todos os
aspectos relacionados com a inteno de criar o website;
necessrio identificar, de forma clara, uma resposta a
questes como a sua finalidade, os objectivos principais a
atingir, a quem se destina e quais as informaes a divulgar;
necessrio descrimin-los por ordem da sua importncia,
devendo ser divulgados a todos os elementos envolvidos.

Fase 1 Definir os objectivos do Web Site

Para

qu?
Qual o propsito ou finalidade do Web Site?
Uma definio sucinta dos objectivos necessria e til
para fundamentar as decises que se tomam quanto
sua estrutura, contedo e manuteno.

18

Caracterizar o pblico-alvo

Reflectir sobre a audincia

20

A reflexo sobre a audincia do website a desenvolver

deve permitir conhecer melhor os potenciais futuros
utilizadores;
Deve ser feito em conjunto com os clientes e procurar
respostas para questes como quem so os potenciais
utilizadores, que idade ou idades tm, qual o seu nvel
econmico, que nvel de instruo possuem, quais os seus
interesses, quais as suas competncias tcnicas, quais as
actividades desempenhadas e quais os novos utilizadores
que podem ser fidelizados.

Fase 2 Caracterizar o pblico-alvo

Para

quem?
A quem se dirige?
Para qualquer pessoa em geral, ou para um
determinado tipo de utilizador?

21

Que contedos? Em que formato?

Listar as caractersticas e os contedos

pretendidos para o site

23

Deve ser efectuada tendo por base os dados das

duas etapas anteriores, identificando a marca
principal e outras propriedades que caracterizam o
site e permitem diferenci-lo dos demais;
Exemplo: O google, apesar do logtipo sofrer
alteraes de acordo com os diferentes momentos,
o website continua a manter as suas caractersticas
de marca, que o permitem identificar facilmente.

Fase 3 Identificar os contedos a publicar

O

qu?
Que informao deve conter?
Devem ter em conta os objectivos definidos, o pblico
alvo.
Tipo de formato de contedos: textos, vdeos, sons,
pdfs, docs, galerias de imagens, etc....

24

Estruturar o site

Organizar a estrutura do site

Passa pela definio das ligaes entre as pginas que o

compem;
Deve ser intuitiva e fcil de compreender pelo utilizador;
De acordo com as ligaes que so estabelecidas entre
as pginas de um site, podem existir diferentes tipos de
estruturas:

26

Hierrquico;
Rede;
Combinao dos dois, com maior ou menor complexidade.

Fase 4 Estruturar o site

Trata-se

de pensar o site em termos globais ou de

estrutura (no ainda em relao aos detalhes).
Executar um esboo ou esquema das pginas que vo
integrar o site;
Organizar o site por seces;
Definir relaes ou ligaes entre as pginas a
estrutura hierrquica.

27

Linear

28

Hierrquica

29

Estrela / Radial

30

Rede

31

Composta

32

Alta
Capacidade
Expressiva
Grade
Rede

Baixa
Capacidade
Expressiva

Sequencial

Previsvel
Baixo risco

33

rvore

Imprevisvel
Potencialmente confuso
Alto risco

34

35

36

Organizar a estrutura do site

37

A situao ideal encontrar um ponto de equilbrio,

para evitar que, por um lado, o utilizador efectue
muitos cliques para atingir a informao
pretendida e, por outro lado, tenha de escolher
uma opo de entre muitas opes possveis

Esquema de Navegao

Desenhar esquema de navegao

Navegao global ou principal:

As

hiperligaes esto sempre presente ao longo das

pginas , no topo;
permitem o acesso s principais reas do website

Navegao local ou secundria

Completam

o esquema de navegao global;

permitem o acesso a locais mais especficos dentro da
rea em que o utilizador se encontra.

39

Desenhar esquema de navegao

A navegao pode ser:

Externa

hiperligaes a outras pginas do mesmo

site.
Interna hiperligaes na mesma pgina.

40

Desenhar o esquema de navegao

Existem vrios esquemas de navegao:

41

Global as hiperligaes encontram-se, normalmente, em todas

as pginas do site e no topo destas; permitem o acesso s
principiais reas do website.
Local as hiperligaes encontram-se, habitualmente, no lado
esquerdo do site; permitem o acesso a locais mais especficos
dentro da rea em que o utilizador se encontra.
Contextual as hiperligaes permitem o acesso a locais no
abrangidos pelos esquemas de navegao global e local.

As navegaes externas permitem navegar para outras

pginas do mesmo site; as navegaes internas permitem
navegar dentro da mesma pgina

Esquema de navegao
global

Esquema de
navegao local

Esquema de
navegao
contextual

Desenhar o esquema de navegao

Esquema
de
navegao
global
Esquema
de
navegao
local
Ou
secundria

Esquema
de
navegao
contextual

Estruturar a pgina

Definir a estrutura das pginas

45

a ltima etapa do planeamento de um website antes da sua

implementao, publicao e manuteno;
Pode ser feito em papel, um esquema da estrutura de
pginas com a disposio dos seus componentes e avaliando
as vrias hipteses;
So definidas as resolues das pginas para impresso e
visualizao por diferentes equipamentos;
A definio da estrutura das pginas no pode perder de
vista o objectivo de obter um equilbrio entre o aspecto
esttico, a funcionalidade e o contedo informativo das
mesmas.

Fase 5 Estrutura das pginas

Manter

uma identidade visual prpria que se deve

manter ao longo de todas as pginas para que o
utilizador encontre a informao que procura utilizando
sempre os mesmos procedimentos.

Deste

modo, antes de elaborar o site deve ser

primeiro definir o WIREFRAME definido o aspecto
visual das pginas (Layout).

46

47

48

49

50

51

52

53

Alguns cuidados a ter:

54

Destacar o ttulo utilizando formatos maiores, maisculas ou

negrito;
Aplicar nas listagens marcas e/ou numerao;
Identificar claramente os links e a pgina para onde remete;
No sobrecarregar as pginas com muitas cores, de forma a
no distrair o utilizador. No usar mais de trs cores.
Escolher uma cor de fundo neutra que garanta legibilidade.
O excesso de objectos multimdia sobrecarrega as pginas e
torna a navegao lenta e difcil.

Imagens, Sons e Vdeo

As imagens devem ser gravadas em formatos adequados s suas

caractersticas:
GIF: imagens com poucas cores.
JPG ou JPEG fotografias, imagens com muitas tonalidades.

Os sons:
WAVE: utilizado apenas em ambiente windows, ocupa muito espao e torna a pgina
lenta.
MPEG: ficheiros mais leves.

Os vdeos introduzem muita lentido na visualizao das pginas. Os formatos

mais utilizados so:
MPEG: relativamente pouco pesados e com qualidade.
AVI: ocupa muito espao.

55

EXERCCIO 1
ANLISE DE UM SITE

57

O site escolhido poder ser posteriormente

trabalhado para apresentar nova proposta de
Design e Concepo.

Pontos a analisar:

ESTRUTURA
Tipo

de estrutura
Desenhar mapa do site com nmero de pginas e sua
sucesso/ligao.

58

Pontos a analisar:

WIREFRAME
(modelo quando existe),
com identificao das
grandes reas de
interaco e informao:

59

Menus
principal/secundrio (etc);
Identificao
Logotipos
Cabealho
Contedo

Rodap
Barra

de Navegao
Localizao
Barras LATERAIS
reas de publicidade
Etc.

Pontos a analisar:

DESIGN/APRESENTAO
CDIGOS

DE COR
Elementos grficos principais
Tipo de botes
Texto/legibilidade

60

61

Trabalho em grupo (2 formandos) ou individual

Formato final do trabalho:
Apresentar em formato digital - APRESENTAO
EM POWERPOINT.
Apresentao turma: entre 10 a 20minutos.

EXERCCIO 2

Exerccio preparao de site pessoal

Elabore o plano de um site com o mximo de 8
pginas. Nesse documento deve definir:
O tema
O pblico-alvo
A informao a integrar em cada pgina
As imagens/sons/vdeos a incluir
O esquema hierrquico (estutrutura) das pginas
O layout mais adequado da pgina principal e o
modelo de pgina das restantes pginas

63