planear um website

8/16/2019 Planear um Website

1/63

WEB DESIGN


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/


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:


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.


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.


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).


7/637


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;


9/639

F-Shaped Pattern


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.


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;


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


13/6313

Fases e tarefas da construção de um site


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.


15/63

PLANEAR UMWEBSITE


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


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


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.


19/63

Caracterizar o público-alvo


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


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?


22/63

Que conteúdos? Em que formato?


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


24/63


25/63


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


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.


28/63

28

Linear


29/63

29

Hierárquica


30/63

30

Estrela / Radial


31/63

31

Rede


32/63

32

Composta


33/63

33

AltaCapacidadeExpressiva

BaixaCapacidadeExpressiva

PrevisívelBaixo risco

ImprevisívelPotencialmente confusoAlto risco

Sequencial Árvore

Grade

Rede


34/63

34


35/63

35


36/63

36


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


38/63

Esquema de Navegação


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


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


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


42/63


43/63

Desenhar o esquema de navegaçãoEsquema

denavegação

global

Esquemade

navegaçãocontextual

Esquemade

navegaçãolocal

Ousecundária


44/63

Estruturar a página


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


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 ).


47/63

47


48/63

48


49/63

49


50/63


51/63

51


52/63

52


53/63

53


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:


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


56/63

EXERCÍCIO 1ANÁLISE DE UM SITE


57/63

57

O site escolhido poderá ser posteriormentetrabalhado para apresentar nova proposta deDesign e Concepção.


58/63

58

ESTRUTURATipo de estruturaDesenhar mapa do site com número de páginas e suasucessão/ligação.

Pontos a analisar:


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.


60/63

60

DESIGN/APRESENTAÇÃOCÓDIGOS DE CORElementos gráficos principaisTipo de botõesTexto/legibilidade

Pontos a analisar:


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.


62/63

EXERCÍCIO 2


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

planear um website

Documents