O documento discute os elementos essenciais de uma página web, incluindo títulos, links, rótulos, imagens, rodapés e tabelas. Também aborda formas de navegação como linear e hierárquica e a técnica do storyboarding para planejar páginas web. Princípios de design visual como clareza, consistência e concisão são explicados.

1. Fundamentos de Webdesign

2. PLANEJAMENTO

3. Elementos de uma página
Web
● Títulos
● Links
● Rótulos
● Imagens
● Rodapés
● Tabelas
● Áudio
● Vídeo
● Formulários

4. Elementos de uma página
Web
●
Deve-se especificar títulos para todas as páginas web
que se criar. Os títulos ajudam os internautas a
identificar a página, a fazer procuras mais precisas em
um banco de dados e, também a gerenciar as
informações.
●
Rodapés servem para fornecer informações
adicionais. Pode-se exibir informações sobre o autor
da página, mensagens de copyright e links para outras
páginas

5. Elementos de uma página
Web
●
Rótulos servem para organizar a informação da sua
página web de maneira eficiente. Os rótulos ajudam
a identificar seções e tópicos nos seus documentos.
●
Já as tabelas são utilizadas, principalmente, para
organizar a apresentação das informações na
página.
●
Formulários servem para dar interatividade,
coletando informações dos usuários

6. Formas de Navegação
●
Navegação Linear: usada para apresentar informações que
possuem uma sequência que deve ser obedecida. Por exemplo, uma
apresentação web sobre a instalação de uma aplicação contém uma
série de passos sequenciais que o usuário deve seguir.
●
Links necessários numa navegação linear:
– Da página pricipal para os tópicos que ela contém
– Dos tópicos para a página principal
– Para a próxima página
– Para a página anterior

7. Formas de Navegação
●
Navegação Linear – Exemplo:
http://www.ccuec.unicamp.br/treinamento_int2
004/conf_webpages_basico/pagina1.html

8. Formas de Navegação
●
Navegação linear com alternativa: é
necessário todos os links que se usa para navegar
linearmente e de outros links que vão interligar as
páginas web alternativas. Por exemplo: uma
página que descreve a instalação de um software
em sistemas Windows e Linux, usa-se a
navegação linear para os passos em comum e
links alternativos para a instalação específica de
cada sistema.

9. Formas de Navegação
●
Navegação Hierárquica: usada para demonstrar informações estruturadas. O webdesigner
especifica as informações gerais no topo da hierarquia e as específicas por último.
●
Fornece-se os mesmos links que usa em uma navegação linear. Na hierárquica, o link para a
próxima página está conectado ao próximo nível da hierarquia, da mesma forma como um link
para a página anterior está conectado ao nível anterior da hierarquia.
●
Deve-se restringir a apresentação web para três níveis de hierarquia, diminuindo o risco de
gerar confusão, por parte dos internautas.
●
Os internautas não podem navegar de uma página pertencente a uma categoria para outra de
categoria diferente. Por exemplo, um internauta não pode acessar uma página de animais
herbívoros quando está em uma página de carnívoros.

10. Formas de Navegação
●
Navegação Hierárquica – Exemplo de site:
portal.mec.gov.br

11. Formas de Navegação
●
Combinando navegações hierárquica e
linear: quando se quer deixar que os
internautas naveguem por páginas
pertencentes a outras categorias sem ter de
voltar ao índice. A combinação de navegação
linear e hierárquica permite ao internauta
navegar tanto sequencialmente quanto
hierarquicamente pela sua apresentação
web.

12. Técnica do Storyboarding
●
Storyboarding é a etapa em que você faz o esboço
da sua apresentação e estuda a aparência de cada
página web.
●
O storyboarding ajuda você a decidir quais tópicos
devem constar em cada página e a identificar os
links entre as páginas.

13. Quantidade e tamanho de
tópicos
●
No storyboarding é necessário considerar a
quantidade de tópicos e o tamanho de cada um
deles. Uma regra simples é exibir somente um tópico
por página web. Será preciso ignorar esta regra caso
se tenha um grande número de tópicos para exibir.
●
Quando há uma grande quantidade de tópicos, é
recomendável a criação de pequenos grupos
relacionados em uma única página.

14. Storyboarding
●
É nesta etapa que se deve determinar as diferentes
formas de navegação ou interligação das páginas.
●
Também é necessário definir os links (avançar,
voltar, subir ou descer), tanto na hierarquia quanto
para a página principal. Este é o momento para
definir outros links, para qualquer outra informação
extra que você pretenda adicionar.

15. DESIGN DE INTERFACES

16. Princípios de design visual
CLAREZA: refere-se a projetar páginas que são
simples e ordenadas. Para isto, é preciso
apresentar todos os elementos da página, como
textos e imagens, nos lugares certos.
Para assegurar a clareza é preciso usar uma
linguagem simples e inserir na página somente
tópicos e imagens relevantes.

17. Princípios de design visual
CONSISTÊNCIA é o segundo princípio do
design visual. Refere-se a estabelecer ou adotar
um estilo para apresentação web, de maneira
uniforme. Exemplo, para fazer páginas
consistentes, adicione o rodapé no mesmo local
em todas as páginas.
CONCISÃO é o terceiro princípio e se refere a
apresentar a informação necessária com o
mínimo de palavras possíveis.

18. Tamanho da página
Se as informações da página não couberem na tela, os
usuários podem usar a barra de rolagem para visualizar
todo o conteúdo.
Entretanto, isso faz com que a informação seja um
pouco mais difícil de ser assimilada, pois é preciso
lembrar das informações que saíram da tela.
É recomendável limitar o tamanho da página para duas
ou três telas de informação, no formato 1024 X 768
pixels. Isso assegura que o usuário não precise rolar a
tela muitas vezes.

19. Tamanho da página
O ideal é que todos os conteúdos relacionados estejam
em uma página, o que torna muito mais fácil a
atualização e o gerenciamento.
Se houver muita informação para exibir, o ideal é
agrupar os tópicos relacionados em uma página e
fornecer links para outras páginas.

20. Leitura mais agradável
Se houver muita informação para exibir, o ideal é
agrupar os tópicos relacionados em uma página e
fornecer links para outras páginas.
Pode-se tornar a página mais atraente se balancear a
quantidade de texto e imagens no lado esquerdo e
direito e nas metades de cima e de baixo da página,
tornando-as mais simétricas.

21. Organização de páginas web
Adicionar títulos e rótulos para descrever o conteúdo de
cada página web.
Agrupar elementos relacionados, desenhar caixas ao
redor dos elementos e usar as mesmas fontes para
títulos parecidos.

22. Fatores que afetam a
legibilidade da página
● Caracteres Maiúsculos: letras maiúsculas
podem ser usadas nos títulos para chamar a
atenção do usuário. Mas deve-se evitar a
utilização de letras maiúsculas nos textos, pois
reduz a legibilidade.
● Abreviações: deve-se usar abreviações de
padrão universal ou acrônimos somente quando
o espaço em branco na sua página web for
limitado. Avenida – Av.; Número – Nº; Limitada –
Ltda.; Departamento – Dep.; Página – pág

23. Formulários e Botões
Tipos de formulários:
● de preechimento
● de lista de opções
● Livre
Como um formulário é formado ?
●Um formulário é formado por rótulos e campos
de entrada.
●Os rótulos descrevem os dados que serão
digitados.
●Campos de entrada são as áreas nas quais o
usuário digita as informações correspondentes
a cada rótulo

24. Formulários e Botões
O formulário onde o internauta digita os dados
manualmente é chamado de formulário de
preenchimento. Por exemplo, no formulário exibido
abaixo, o internauta precisa digitar os valores
pedidos.

25. Formulários e Botões
Um formulário onde o internauta seleciona um valor entre
várias opções é chamado de formulário de lista de opções.
O formulário onde o internauta pode digitar livremente como
em um processador de texto é chamado de formulário livre.
Para projetar um formulário de maneira eficiente, você
precisa antecipar a necessidade do internauta.
Para isto, precisará saber a frequência e sequência das
tarefas que ele executa.
Dependendo da natureza das tarefas que ele executa, você
adicionará rótulos, tabelas e links ao seu formulário.

26. Formulários e Botões
Adicionar uma tabela no seu formulário aumenta a
eficiência, já que pode-se receber pedidos de mais de um
item usando o mesmo formulário.
Dois elementos importantes para fazer o projeto de um
formulário são os rótulos e campos de entrada.

27. Formulários e Botões
Além de projetar rótulos consistentes, únicos, e que possam
ser entendidos, é preciso também organizar os campos de
maneira eficaz.
Faz-se necessário alinhar os rótulos para assegurar que
todos terminem no começo das suas respectivas caixas de
entrada. E colocar o rótulo de maneira consistente, a
esquerda ou acima da caixa de entrada

28. Formulários e Botões
Os campos relacionados devem ser agrupados usando
colunas. Por exemplo, Nome, Endereço e Telefone juntos
como se fossem um grupo lógico de informação. É preciso
arrumar os campos tanto na horizontal, da esquerda para
direita, quanto na vertical, de cima para baixo.

29. Formulários e Botões
Um botão é um objeto que faz alguma coisa quando é
ativado. Por exemplo, quando você clica no botão, você vê
uma página que contém informações na web.
Um botão é projetado dependendo da informação que se
quer enviar ao internauta.

30. Formulários e Botões
Pode-se exibir a ação associada com um botão mostrando
uma mensagem quando o internauta move o mouse sobre
o botão. Por exemplo, quando se move o mouse sobre o
botão Quí, aparece uma mensagem dizendo Portal de
Química.
Os botões que você adiciona precisam estar de acordo com
o design da sua página web.

31. Botões
Tentar projetar botões que se possa reutilizar na
apresentação web. Isso reduz a quantidade de imagens e
códigos a necessários, além de tornar sua página web
consistente.
Usar formas regulares
Pode-se adicionar sons para acompanhar o clique de um
botão.
Os botões precisam ser consistentes. Por exemplo, voltar
ao normal depois de clicado quando a ação associada ao
botão for executada.

32. Botões
Pode-se exibir a ação associada com um botão mostrando
uma mensagem quando o internauta move o mouse sobre
o botão. Por exemplo, quando se move o mouse sobre o
botão Quí, aparece uma mensagem dizendo Portal de
Química.

33. Botões
Pode-se exibir a ação associada com um botão mostrando
uma mensagem quando o internauta move o mouse sobre
o botão. Por exemplo, quando se move o mouse sobre o
botão Quí, aparece uma mensagem dizendo Portal de
Química.