ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni [email protected] Cel.: 9108.7973.

14
ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni [email protected] Cel.: 9108.7973

Transcript of ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni [email protected] Cel.: 9108.7973.

Page 1: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

ELABORAÇÃO DE PROJETOS

PARA WEB

Prof. [email protected]

Cel.: 9108.7973

Page 2: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

O DESAFIO DE CRIAR WEB SITES

A metáfora de interação dos leitores com uma página HTML é diferente da sua experiência com livros. Os usuários não se limitam a olhar a informação na web, eles interagem com o conteúdo. Ex.: Wikipédia.

Algum desafios para os Web Designers: Como subdividir, organizar e apresentar as

informações;

É necessário fornecer ao leitor ferramentas de busca e navegação, assim como “dicas” de onde ele está;

Qual o tamanho ideal para uma página;

É importante conhecer a audiência do site e suas expectativas.

Page 3: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

FASES

Determinação dos objetivos do site e o

retorno esperado;

Identificação da audiência do site;

Determinação do tipo de informação que se

quer armazenar (escopo);

Projeto do site: a metáfora de navegação

utilizada (Iconografia);

Projeto das páginas: o visual do site.

Page 4: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

PÁGINAS INDEPENDENTES

Páginas web diferem das páginas de um livro fundamentalmente num aspecto: os hyperlinks permitem o acesso a elas sem nenhum preâmbulo, logo páginas web precisam ser mais “independentes”.

As páginas precisam conter informações para situar o leitor/usuário: Quem – Sempre informe ao leitor qual a fonte da informação,

quem está falando com ele;

O Quê – O documento deve ter um título explicativo que resuma seu contéudo. Este título também se tornará o texto dos bookmarks feitos pelos usuários;

Quando – A informação na web é bastante volátil, logo é importante informar a data de criação ou revisão de um documento;

Onde – Uma página deve informar onde está localizada, a que organização pertence, qual a sua vizinhança.

Page 5: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

PROJETO DE INTERFACE CENTRADO NO USUÁRIO

As interfaces gráficas surgiram para dar

aos usuários um controle maior sobre as

tarefas realizadas no computador

Uma boa interface deve se adaptar às

necessidades dos usuários e não o

contrário

Por isso é tão importante saber para

quem se está projetando o site, conhecer

sua audiência

Page 6: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

NAVEGAÇÃO

Na web, desaparece a sensação “física” da informação e os links fornecem pouca informação sobre onde está o usuário

Páginas web devem fornecer ao leitor um conjunto de dicas sobre o contexto em que se encontram e a organização da informação, pois somente uma pequena parte do site é vista a cada vez pelo leitor

Hyperlinks conferem flexibilidade ao web designer, mas podem desorientar o usuário Top menus Barras de botões Botões “Back” and “Forward” Botões “Previous” and “Next”

Page 7: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

PROJETO DO WEB SITE

O projeto do site irá determinar sua estrutura organizacional, ou seja, como arranjar seu conteúdo a fim de melhor atender às necessidades dos usuários

Lembre-se: o objetivo principal de um site é prestar serviços à sua audiência

Pode ser um erro tático utilizar um site meramente para descrever a estrutura de uma empresa ou instituição

Page 8: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

SUBDIVISÃO DA INFORMAÇÃO

Sem uma organização lógica e coerente da informação, um site não será bem compreendido

Sabe-se que o ser humano consegue guardar cerca de quatro a sete unidades discretas de informação em sua memória de curto prazo

Portanto, pequenas porções de informação são mais fáceis de lembrar e manipular

Passos básicos para organizar a informação de um site: Divida o conteúdo em pequenas unidades lógicas; Estabeleça uma hierarquia entre as unidades; Use a hierarquia para estruturar relações entre as unidades; Construa o site segundo a estrutura de sua informação; Analise o site sob o ponto de vista estético e funcional.

Page 9: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

ORGANIZAÇÃO EM TEIA

Pode ser muito difícil de entender ou prever

Impõe poucas restrições aos relacionamentos entre as

páginas

Para que um conjunto de informação possa ser

organizado desta forma, é preciso que ele seja altamente

uniforme, com tópicos e sub-tópicos bem definidos

A audiência desse tipo de site é especializada e deve ser

treinada para esta forma de interação

Destina-se à elaboração de manuais de procedimentos,

descrições de casos médicos, listas de cursos etc.

Page 10: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

ALGUNS ELEMENTOS DE UM WEB SITE

Menus Guias Novidades Busca Informações de contato e feedback FAQs Referências Páginas de erro Redes sociais e outros

Page 11: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

PROJETO VISUAL

Um bom design de página pode conferir a

um site maior clareza, legibilidade,

organização e confiança por parte dos

usuários

A finalidade principal do web designer é

criar uma hierarquia visual forte e

consistente, logicamente organizada, que

dirija a atenção dos usuários à informação

que se quer mostrar

Page 12: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

PROJETO VISUAL (CONT.)

Contraste é essencial para capturar a atenção dos usuários

Uma página constituída apenas de texto torna-se monótona e indiferenciada

Uma página com excesso de cores, fontes ou gráficos também afasta a maioria dos usuários

Um bom contraste visual provê um senso de organização

Page 13: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

RECOMENDAÇÕES BÁSICAS

Estabeleça uma hierarquia visual É preciso que a página tenha uma hierarquia visual

forte e consistente, que enfatize os elementos importantes

Guie o olhar do leitor A parte superior de qualquer página é a mais

importante,

Distrações gráficas Evite gráficos “bonitinhos” e desnecessários. Cuidado

também com letras muito grandes e excesso de fontes

Consistência é fundamental Crie um layout básico para o seu site e seja fiel a ele

Page 14: ELABORAÇÃO DE PROJETOS PARA WEB Prof. Baroni marcos.baroni@gmail.com Cel.: 9108.7973.

ESTRUTURA BÁSICA

Cabeçalhos: Identidade do site

Rodapés: Proveniência

Tabelas (Absolutas ou Relativas)

Frames