Anda di halaman 1dari 39

Programa FORDE SK Escola Superior de

Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Web Design
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Objectivos :

No final da unidade o formando é capaz


de aplicar de forma adequada os princípios
de design na concepção do produto

Finalidade :

Aprender os conceitos de design de navegação,


design organizacional, e design de interface e
suas potencialidades.
Aplicar noções de alquimia da cor, e identificação
de layouts, interligar os conceitos na criação
de páginas gráficas
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Conteúdos teórico-práticos

Design de navegação Design Organizacional

Estrutura da informação Missão do Web design


Navegabilidade
Organização Informação organizacional
Interface
12 6
Design de interface Noções de layout

Feedback experimental O ritmo


Alquimia da cor Construção da mancha
Contraste Formato das paginas
18 Proporções das margens
9
Cor e espaços
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Aula 1

Resumo Introdutório

• Primeira Abordagem
• Importância de páginas bem desenhadas
• Dez erros mais cruciais
• Processo de desenho para a Web
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Primeira Abordagem

Sabemos da evolução da Internet como um meio de comunicação


cada vez mais popular.

A Internet já provou ser o futuro da disponibilização de conteúdos


a nível mundial.

Com cerca de 10 milhões de sites em 2000, e cerca de 100


milhões em 2002.

O numero de servidores WWW cresce a um ritmo exponencial,


mesmo superior ao numero de utilizadores da Internet, o que
mostra bem o interesse que a WWW tem actualmente para
todos os sectores das modernas sociedades de informação.
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Deve-se ao facto de :

- Facilidade de utilização

- Grande diversidade de
informação disponível

- Características multimédia
-
Conteudos Estáticos
Conteudos Dinâmicos

International Division

Transição Esta transição deve-se á necessidade de paginas vivas


que interajam com o interlocutor e que tenham elementos
dinâmicos que realcem e traduzam a realidade de uma Web
cada vez mais viva.
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Protocolos da Internet
O termo “aceder á Internet” implica a utilização de uma série de
programas denominados clientes. Um cliente estabelece uma interface
de acesso a determinados protocolos.
Existem actualmente mais de 100 protocolos entre os mais usados temos:

Cliente de correio electrónico Microsoft Outlook Express


Cliente de leitura de newsgroups Microsoft Outlook Express
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Protocolos de pesquisa

Protocolos de partilha
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

O hipertexto e as ligações

O hipertexto baseia-se na criação de áreas sensíveis num documento que,


uma vez accionadas, levam ao estabelecimento de uma comunicação
com outro computador.

WWW – World Wide Web (rede mundial)

através de uma URL (localizador uniforme de recursos) – transforma


um numero IP num endereço alfanumérico do tipo :
www.est.ipcb.pt
-cada pais
tem o seu próprio domínio: domínios internacionais :
pt – Portugal com – Sites comerciais
es – Espanha net – Serviços internet
uk - Reino Unido org – organizações internacionais
gov – sites governamentais
edu – escolas e universidades
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Browsers (visualizador)

Depois do desenvolvimento do hipertexto, surge a necessidade de ver


também documentos com imagens.

Surge então o desenvolvimento do HTML (Linguagem de Marcação de


Hipertexto), uma linguagem de formatação que permite a qualquer
pessoa publicar um documento com texto, imagem, som, animações
na Internet.

A WWW tem vantagens em relação á televisão , rádio, jornais , revistas,


etc.

Uma vez que permite a actualização ao minuto do conteúdos, pode conter


elementos multimédia, a quantidade de informação é ilimitada, a
pessoa pode interagir com a informação seleccionando apenas o que
interessa, e permite trabalhar de forma personalizada
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Importância de páginas bem desenhadas

- Homepage é a face da empresa para o mundo.

- Cada vez mais os clientes (ou possíveis clientes)


examinam a nossa presença na Web antes de fazer
qualquer negocio.

- Na Web, a concorrência não se limita as outras


empresas do mesmo sector. Com todos os outros
milhões de sites existentes estamos a concorrer com
o tempo e pela atenção do utilizador.
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

A função da Homepage

- Transmitir o que a empresa significa, a importância


do site em relação á concorrência e ao mundo físico,
e os produtos ou serviços oferecidos.

- Permitir o acesso a todos os recursos importantes

Analogias
Capa de revista
Primeira pagina de um jornal Homepage
Peça de arte
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Design da pagina

O design da pagina é a parte mais visível do Web design. Com a actual


tecnologia de Browsers, os utilizadores vêem uma única pagina de
cada vez (ou no máximo duas ou três paginas consoante o tamanho da
tela com varias janelas abertas), logo estas devem ser dominadas pelo
conteúdo de interesse do utilizador.

O design determina a forma. E a forma deve seguir a função.

A função primordial do design gráfico é estabelecer hierarquias visuais,


onde a ênfase é dada as partes mais importantes, de forma a que o
publico entenda a mensagem através de uma organização consistente
da informação.
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Design da pagina (cont.)

È fundamental que a informação esteja bem organizada.

Deve ser dividida logicamente em pequenos blocos.

Pequenos pedaços são melhor digeridos pelos utilizadores, sendo a


mensagem transmitida com maior eficácia.

O design procura o
contraste, uma vez que
este enfatiza e diferencia
diversos tipos de
informação
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

• Objectivos e conteúdos

Para a criação de um site para a WWW envolve fundamentalmente

- Organização
- Criatividade

Arquitectura da informação: consiste na produção de um programa


em duas partes:

- Determinar os objectivos do site


- Compreender o publico alvo
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Objectivos

Qual a posição do cliente perante a concorrência do mercado?

O que se pretende com a sua presença na Web

“ sem objectivos claros, o desenvolvimento de do site cedo


estagna ao seguir caminhos não identificados, levando
inclusivamente a um fraco ROI ”

Então :
Todas as pessoas com importância decisiva devem ser
consultadas.
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Objectivos

O estabelecimento de objectivos passa necessariamente por


responder a :

- Qual o seu propósito?


- Quais os objectivos principais?
- Qual o publico alvo?
- Que informação disponibilizar?
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

• Conteúdos

Depois de traçados os objectivos é necessário definir


os conteúdos e que tipos de funcionalidades vamos
oferecer.

Então devemos :

elabora-se uma lista de conteúdos e funcionalidades


(discutida com os intervenientes no processo)
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Identificação de conteúdos
Existem 4 categorias:

- Estáticos – informação sobre direitos de autor, regras para


membros etc.

- Dinâmicos – informação actualizada...

- Funcionais – informações que carecem de programas para


serem disponibilizados como,por exemplo,consultas a BD.

- Transaccionais – informações relativas a pagamentos e suas


funcionalidades inerentes
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Estrutura e Navegação

Depois de
- Delineados objectivos
- Programado conteúdos

- Definir

Estrutura Organizacional da Informação


Acesso a essa mesma informação
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Estrutura

A informação deve ser estruturada por :

Categorias e Subcategorias

Dependendo do tipo de informação, assim será a estrutura do site.

Então a estrutura fundamental de qualquer site deve conter:


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Estrutura
Pagina Principal
Menu

Sub-Menu

Pagina de Conteúdos
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Navegação

A navegação deve ser feita a partir da pagina principal.


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Top 10

Dez erros a evitar em desenho de


paginas:

Lista de Nielson
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

1
Tempos de Carregamento Longos

Regra dos 10 segundos


Tempo que utilizador leva a perder interesse

15 seg pode ser aceitável na Internet

Mais do que este valor só para paginas de conteúdos

Banda larga ---- realidade ---- desde 1195


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

2
Informação desactualizada

Regra geral :
As pessoas preferem criar conteúdos do que mantê-los

E-commerce

Informação desactualizada  perda de interesse


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

3
Cores de elos não padronizadas

Paginas não visitadas – Azul


Paginas visitadas – Vermelho

Preferencial não alterar:


Ajuda a navegação
Consistência na aprendizagem
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

4
Falta de Apoio á Navegação

Utilizadores não conhecerem o nosso local


Utilizar mapa...
para se saber o que se esta a visitar
Utilizar um bom mecanismo de busca
“Logo local” no canto superior esquerdo ligado á
homepage.
Estrutura de outline indicando a localização actual
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

5
Paginas muito longas

Conteúdo critico e navegação no topo da pagina

Paginas de informação podem ser maiores – se existir interesse


irão procurar conteúdo

Importância decrescente – não usar mais de 3 ecrãs; informação


de topo mais importante
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

6
URLs Complicados

Não expor endereços maquina

Devem ser de fácil leitura por qualquer pessoa

Nomes devem reflectir o conteúdo


www.diariodenoticias.pt

URLs difíceis de enviar por email


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

7
Animações continuas

Muitas animações só complicam

Imagens em movimento estimulam um visão óptima.

Utilizadores desligam-nas

Os utilizadores tem de ter “sucesso” para ler os conteúdos.


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

8
Uso gratuito da tecnologia

Não atrair novos utilizadores com ofertas de software...

Os utilizadores normais estão preocupados com os conteúdos...


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

9
Paginas órfãs

Todas as paginas devem indicar qual o local onde pertencem

Elos para a homepage

Indicação onde pertencem e a posição na estrutura local


Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

10
Frames

Confundem utilizadores
Conflito com modelo utilizado da pagina web

Unidade de navegação diferente unidade de visualização


Motores de busca tem problemas com frames
Que parte dos framesets incluir nos índices
Utilizadoras de uma forma geral preferem paginas sem frames
70-90%
Nota : WWW =/= desktop
http://www.useit.com/alertbox/9605.html
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Processo de Desenho Web

Descoberta Avaliar as necessidades


Exploração . Compreender expectativas
Refinamento . Determinar âmbito do projecto
Produção . Características dos utilizadores
. Avaliar site actual e/ou
concorrência
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Processo de Desenho Web

Descoberta Gerar alternativas


Exploração . Ver de soluções para requisitos
Refinamento idênticos

Produção . Desenhar informação e navegação


. Primeiro Design gráfico

. Seleccionar um
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Processo de Desenho Web

Descoberta Detalhar desenho


Exploração . Níveis de detalhe crescente
Refinamento . Forte ênfase no design gráfico
Produção
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Processo de Desenho Web

Descoberta
Ultimar desenho
Exploração
. Criar produto final
Refinamento
. Especificações, linhas mestras e
Produção protótipos
. Alto nível de detalhe
Programa FORDE SK Escola Superior de
Tecnologia
Curso “Produção Multimedia”
Designação do Módulo – Web Design
Instituto Politécnico de Castelo Branco
Duração – 30 Horas
Formador – Pedro Silva

Designers

Criam representações de locais em múltiplos níveis de detalhe


Locais Web refinados a todos os níveis

Mapas
Soryboards
Esquemas
Simulacros