8/16/2019 Planear um Website
1/63
WEB DESIGN
8/16/2019 Planear um Website
2/63
2
O que é o Web Design?“Web Design é a criação de ambientes digitais
que facilitam e incentivam a actividadehumana, reflecte ou adapta-se a vontades
individuais e conteúdos; e muda graciosamente aolongo do tempo enquanto mantém a sua
identidade”
Zeldman [2007]
http://www.alistapart.com/articles/understandingwebdesign/
8/16/2019 Planear um Website
3/63
3
O que é o Web Design?Web Design é uma actividade no âmbito daEngenharia Web que consiste naprodução
de páginas Web na perspectivado utilizador .Combinar as competências técnicas e artísticas deforma a alimentar as exigências de um público-alvo:
8/16/2019 Planear um Website
4/63
4
Web designÉ a capacidade de criar páginas Web.
O conteúdo de um site web (conjunto de páginaligadas por hiperligações) tem que serrelevante/útil para quem a visita.Apresentar a informação baseada nas
necessidades do público-alvo - utilizador/visitante.
Responsável pela escolha do conteúdo a publicar.
8/16/2019 Planear um Website
5/63
5
Exigências:Usabilidade – é a facilidade com que osutilizadores podem utilizar uma ferramentapara executar uma tarefa específica;Aparência – é o aspecto ou aquilo que semostra superficialmente (ou, digamos, à primeiravista);
Visibilidade – é a destreza com que osutilizadores localizam e interpretam ainformação.
8/16/2019 Planear um Website
6/63
6
NavegaçãoUm site tem que seruser-friendly.Uma navegação simples é uma forma inteligente de
de cativar o utilizador a visitar o nosso site.Quando é fácil, o utilizador responde rapidamente:Onde estou? (Presente);Onde posso ir? (Futuro);Onde eu estive? (Passado).
8/16/2019 Planear um Website
7/637
8/16/2019 Planear um Website
8/638
Utilizadoressão Preguiçosos, não “lêem”;
Examinam um site rapidamente e se não encontram
o que pretendem fecham a página;Querem sites objetivos e claros;
8/16/2019 Planear um Website
9/639
F-Shaped Pattern
8/16/2019 Planear um Website
10/6310
Primeiro, os utilizadoreslêem em movimentoshorizontais , normalmente na parte superior daárea de conteúdos ;Depois, movem um pouco para baixo a páginae lêem através de um segundo movimentohorizonta l, que cobre menor área que o movimento
anterior;Por fim, os utilizadores examinam o conteúdo daesquerda num movimento vertical.
8/16/2019 Planear um Website
11/6311
Papel do Web Designer
Criador - concepção e o desenvolvimento depáginas Web;
Auditor - colabora no levantamento derequisitos no desenvolvimento do software Web;
Consultor - participa na avaliação efiscalização da qualidade do sítio Web;
8/16/2019 Planear um Website
12/6312
Papel do Web DesignerDefinir a estrutura (arrumação dos conteúdos e anavegabilidade)Definir o aspecto visualDefinir a usabilidade de um sítio Web.
Metodologia:levantamento dos requisitosdesenho do modeloimplementação
8/16/2019 Planear um Website
13/6313
Fases e tarefas da construção de um site
8/16/2019 Planear um Website
14/6314
Fases e tarefas da construção de um site
Concepção: reconhecer “o que o site deve abarcar”,nomeadamente a informação a processar, asfuncionalidades a implementar, as restrições existentes;
Implementação: o objectivo é identificar “o como fazer osite” e construi -lo na realidade. Serão definidos e construídosas estruturas de dados, os testes a realizar, a concretizaçãodo alojamento e do domínio. No final desta fase deveráser disponibilizado o sítio Web a funcionar;Manutenção: inclui todas as alterações posteriores àaceitação do sítio Web pelo cliente como correcção deerros, introdução de melhorias e/ou novas funcionalidades.
8/16/2019 Planear um Website
15/63
PLANEAR UMWEBSITE
8/16/2019 Planear um Website
16/6316
Conjunto de etapas:Estabelecer os objectivos;Reflectir sobre a audiência;Listar as características pretendidas para o site e osconteúdos a integrar o site;Organizar a estrutura do site;
Definir e desenhar a estrutura das páginas;Desenhar o site.
Planear umWebsite
8/16/2019 Planear um Website
17/6317
O estabelecimento dos objectivos do website na fase deplaneamento permiteestruturar todo o seu desenvolvimento ;Antes é necessário efectuar umestudo prévio , em que a
equipa de desenvolvimento procura conhecer todos osaspectos relacionados com a intenção de criar o website ;É necessário identificar, de forma clara, uma resposta aquestões como a sua finalidade, os objectivos principais aatingir, a quem se destina e quais as informações a divulgar;
É necessário descriminá-los por ordem da sua importância,devendo ser divulgados a todos os elementos envolvidos.
Estabelecer os seus objectivos
8/16/2019 Planear um Website
18/6318
Fase 1 – Definir os objectivos do Web SitePara quê?Qual o propósito ou finalidade do Web Site?Uma definição sucinta dos objectivos é necessária e útilpara fundamentar as decisões que se tomam quanto àsua estrutura, conteúdo e manutenção.
8/16/2019 Planear um Website
19/63
Caracterizar o público-alvo
8/16/2019 Planear um Website
20/6320
A reflexão sobre a audiência do website a desenvolverdeve permitir conhecer melhor os potenciais futurosutilizadores;
Deve ser feito em conjunto com os“clientes” e procurarrespostas para questões como quem são os potenciaisutilizadores, que idade ou idades têm, qual o seu níveleconómico, que nível de instrução possuem, quais os seuinteresses, quais as suas competências técnicas, quais asactividades desempenhadas e quais os novos utilizadoresque podem ser fidelizados.
Reflectir sobre a audiência
8/16/2019 Planear um Website
21/6321
Fase 2 – Caracterizar o público-alvoPara quem?A quem se dirige?Para qualquer pessoa em geral, ou para umdeterminado tipo de utilizador?
8/16/2019 Planear um Website
22/63
Que conteúdos? Em que formato?
8/16/2019 Planear um Website
23/63
23
Deve ser efectuada tendo por base os dados dasduas etapas anteriores, identificando a marcaprincipal e outras propriedades que caracterizam osite e permitem diferenciá-lo dos demais;Exemplo: Ogoogle , apesar do logótipo sofreralterações de acordo com os diferentes momentos,o website continua a manter as suascaracterísticasde marca , que o permitem identificar facilmente.
Listar as características e os conteúdospretendidos para o site
8/16/2019 Planear um Website
24/63
8/16/2019 Planear um Website
25/63
8/16/2019 Planear um Website
26/63
26
Passa pela definição das ligações entre as páginas que ocompõem;Deve ser intuitiva e fácil de compreender pelo utilizador;De acordo com as ligações que são estabelecidas entreas páginas de um site, podem existir diferentes tipos deestruturas:
Hierárquico;Rede;Combinação dos dois, com maior ou menor complexidade.
Organizar a estrutura do site
8/16/2019 Planear um Website
27/63
27
Fase 4 – Estruturar o siteTrata-se de pensar o site em termos globais ou deestrutura (não ainda em relação aos detalhes).Executar um esboço ou esquema das páginas que vãointegrar o site;Organizar o site por secções;
Definir relações ou ligações entre as páginas – aestrutura hierárquica.
8/16/2019 Planear um Website
28/63
28
Linear
8/16/2019 Planear um Website
29/63
29
Hierárquica
8/16/2019 Planear um Website
30/63
30
Estrela / Radial
8/16/2019 Planear um Website
31/63
31
Rede
8/16/2019 Planear um Website
32/63
32
Composta
8/16/2019 Planear um Website
33/63
33
AltaCapacidadeExpressiva
BaixaCapacidadeExpressiva
PrevisívelBaixo risco
ImprevisívelPotencialmente confusoAlto risco
Sequencial Árvore
Grade
Rede
8/16/2019 Planear um Website
34/63
34
8/16/2019 Planear um Website
35/63
35
8/16/2019 Planear um Website
36/63
36
8/16/2019 Planear um Website
37/63
37
A situação ideal é encontrar um ponto de equilíbrio,para evitar que, por um lado, o utilizador efectuemuitos cliques para atingir a informaçãopretendida e, por outro lado, tenha de escolheruma opção de entre muitas opções possíveis
Organizar a estrutura do site
8/16/2019 Planear um Website
38/63
Esquema de Navegação
8/16/2019 Planear um Website
39/63
39
Navegação global ou principal:As hiperligações estão sempre presente ao longo daspáginas , no topo;permitem o acesso às principais áreas do website
Navegação local ou secundáriaCompletam o esquema de navegação global;
permitem o acesso a locais mais específicos dentro daárea em que o utilizador se encontra.
Desenhar esquema de navegação
8/16/2019 Planear um Website
40/63
40
A navegação pode ser:Externa – hiperligações a outras páginas do mesmosite.Interna – hiperligações na mesma página.
Desenhar esquema de navegação
8/16/2019 Planear um Website
41/63
41
Existem vários esquemas de navegação:Global – as hiperligações encontram-se, normalmente, em todasas páginas do site e no topo destas; permitem o acesso àsprincipiais áreas do website .
Local – as hiperligações encontram-se, habitualmente, no ladoesquerdo do site ; permitem o acesso a locais mais específicosdentro da área em que o utilizador se encontra.Contextual – as hiperligações permitem o acesso a locais nãoabrangidos pelos esquemas de navegação global e local.
As navegações externas permitem navegar para outraspáginas do mesmo site; as navegações internas permitemnavegar dentro da mesma página
Desenhar o esquema de navegação
8/16/2019 Planear um Website
42/63
8/16/2019 Planear um Website
43/63
Desenhar o esquema de navegaçãoEsquema
denavegação
global
Esquemade
navegaçãocontextual
Esquemade
navegaçãolocal
Ousecundária
8/16/2019 Planear um Website
44/63
Estruturar a página
8/16/2019 Planear um Website
45/63
45
É a última etapa do planeamento de um website antes da suaimplementação, publicação e manutenção;Pode ser feito em papel, um esquema da estrutura depáginas com a disposição dos seus componentes e avaliandoas várias hipóteses;São definidas as resoluções das páginas para impressão evisualização por diferentes equipamentos;A definição da estrutura das páginas não pode perder devista o objectivo de obter um equilíbrio entre o aspectoestético, a funcionalidade e o conteúdo informativo dasmesmas.
Definir a estrutura das páginas
8/16/2019 Planear um Website
46/63
46
Fase 5 – Estrutura das páginasManter umaidentidade visual própria que se devemanter ao longo de todas as páginas para que outilizador encontre a informação que procura utilizandosempre os mesmos procedimentos.
Deste modo, antes de elaborar o site deve serprimeiro definir oWIREFRAMEdefinido o aspectovisual das páginas (Layout ).
8/16/2019 Planear um Website
47/63
47
8/16/2019 Planear um Website
48/63
48
8/16/2019 Planear um Website
49/63
49
8/16/2019 Planear um Website
50/63
8/16/2019 Planear um Website
51/63
51
8/16/2019 Planear um Website
52/63
52
8/16/2019 Planear um Website
53/63
53
8/16/2019 Planear um Website
54/63
54
Destacar o título utilizando formatos maiores, maiúsculas ounegrito;Aplicar nas listagens marcas e/ou numeração;
Identificar claramente os links e a página para onde remete;Não sobrecarregar as páginas com muitas cores, de forma anão distrair o utilizador. Não usar mais de três cores.Escolher uma cor de fundo neutra que garantalegibilidade .O excesso de objectos multimédia sobrecarrega as páginas etorna a navegação lenta e difícil.
Alguns cuidados a ter:
8/16/2019 Planear um Website
55/63
55
As imagens devem ser gravadas em formatos adequados às suascaracterísticas: – GIF: imagens com poucas cores. – JPG ou JPEG – fotografias, imagens com muitas tonalidades.
Os sons: – WAVE: utilizado apenas em ambiente windows, ocupa muito espaço e torna a página
lenta. – MPEG: ficheiros mais leves.
Os vídeos introduzem muita lentidão na visualização das páginas. Os formatosmais utilizados são: – MPEG: relativamente pouco pesados e com qualidade. – AVI: ocupa muito espaço.
Imagens, Sons e Vídeo
8/16/2019 Planear um Website
56/63
EXERCÍCIO 1ANÁLISE DE UM SITE
8/16/2019 Planear um Website
57/63
57
O site escolhido poderá ser posteriormentetrabalhado para apresentar nova proposta deDesign e Concepção.
8/16/2019 Planear um Website
58/63
58
ESTRUTURATipo de estruturaDesenhar mapa do site com número de páginas e suasucessão/ligação.
Pontos a analisar:
8/16/2019 Planear um Website
59/63
59
Pontos a analisar:WIREFRAME(modelo – quando existe),com identificação dasgrandes áreas deinteracção e informação:
Menusprincipal/secundário (etc);Identificação
LogotiposCabeçalhoConteúdo
RodapéBarra de NavegaçãoLocalizaçãoBarras LATERAISÀreas de publicidadeEtc.
8/16/2019 Planear um Website
60/63
60
DESIGN/APRESENTAÇÃOCÓDIGOS DE CORElementos gráficos principaisTipo de botõesTexto/legibilidade
Pontos a analisar:
8/16/2019 Planear um Website
61/63
61
Trabalho em grupo (2 formandos) ou individualFormato final do trabalho:Apresentar em formato digital - APRESENTAÇÃOEM POWERPOINT.Apresentação à turma: entre 10 a 20minutos.
8/16/2019 Planear um Website
62/63
EXERCÍCIO 2
8/16/2019 Planear um Website
63/63
Elabore o plano de um site com o máximo de 8páginas. Nesse documento deve definir:
– O tema – O público-alvo – A informação a integrar em cada página – As imagens/sons/vídeos a incluir
– O esquema hierárquico (estutrutura) das páginas – O layout mais adequado da página principal e o
modelo de página das restantes páginas
Exercício – preparação de site pessoal