Fundamentosdowebdesign

  • 898 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
898
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 visualCLAREZA: refere-se a projetar páginas que são simples e ordenadas. Para isto, é precisoapresentar todos os elementos da página, como textos e imagens, nos lugares certos. Para assegurar a clareza é preciso usar umalinguagem simples e inserir na página somente tópicos e imagens relevantes.
  • 17. Princípios de design visual CONSISTÊNCIA é o segundo princípio dodesign visual. Refere-se a estabelecer ou adotar um estilo para apresentação web, de maneira uniforme. Exemplo, para fazer páginasconsistentes, 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áginaSe as informações da página não couberem na tela, osusuá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 768pixels. Isso assegura que o usuário não precise rolar a tela muitas vezes.
  • 19. Tamanho da páginaO 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 webAdicionar 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úsculaspodem ser usadas nos títulos para chamar aatenção do usuário. Mas deve-se evitar autilização de letras maiúsculas nos textos, poisreduz a legibilidade.● Abreviações: deve-se usar abreviações depadrão universal ou acrônimos somente quandoo espaço em branco na sua página web forlimitado. 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 camposde entrada.●Os rótulos descrevem os dados que serãodigitados.●Campos de entrada são as áreas nas quais ousuário digita as informações correspondentesa cada rótulo
  • 24. Formulários e BotõesO formulário onde o internauta digita os dadosmanualmente é chamado de formulário depreenchimento. Por exemplo, no formulário exibidoabaixo, o internauta precisa digitar os valorespedidos.
  • 25. Formulários e BotõesUm formulário onde o internauta seleciona um valor entrevárias opções é chamado de formulário de lista de opções.O formulário onde o internauta pode digitar livremente comoem 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 dastarefas 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õesAdicionar uma tabela no seu formulário aumenta aeficiência, já que pode-se receber pedidos de mais de umitem usando o mesmo formulário.Dois elementos importantes para fazer o projeto de umformulário são os rótulos e campos de entrada.
  • 27. Formulários e BotõesAlém de projetar rótulos consistentes, únicos, e que possamser entendidos, é preciso também organizar os campos demaneira eficaz.Faz-se necessário alinhar os rótulos para assegurar quetodos terminem no começo das suas respectivas caixas deentrada. E colocar o rótulo de maneira consistente, aesquerda ou acima da caixa de entrada
  • 28. Formulários e BotõesOs campos relacionados devem ser agrupados usandocolunas. Por exemplo, Nome, Endereço e Telefone juntoscomo se fossem um grupo lógico de informação. É precisoarrumar os campos tanto na horizontal, da esquerda paradireita, quanto na vertical, de cima para baixo.
  • 29. Formulários e BotõesUm 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 sequer enviar ao internauta.
  • 30. Formulários e BotõesPode-se exibir a ação associada com um botão mostrandouma mensagem quando o internauta move o mouse sobreo botão. Por exemplo, quando se move o mouse sobre obotão Quí, aparece uma mensagem dizendo Portal deQuímica.Os botões que você adiciona precisam estar de acordo como design da sua página web.
  • 31. BotõesTentar projetar botões que se possa reutilizar naapresentação web. Isso reduz a quantidade de imagens ecódigos a necessários, além de tornar sua página webconsistente.Usar formas regularesPode-se adicionar sons para acompanhar o clique de umbotão.Os botões precisam ser consistentes. Por exemplo, voltarao normal depois de clicado quando a ação associada aobotão for executada.
  • 32. BotõesPode-se exibir a ação associada com um botão mostrandouma mensagem quando o internauta move o mouse sobreo botão. Por exemplo, quando se move o mouse sobre obotão Quí, aparece uma mensagem dizendo Portal deQuímica.
  • 33. BotõesPode-se exibir a ação associada com um botão mostrandouma mensagem quando o internauta move o mouse sobreo botão. Por exemplo, quando se move o mouse sobre obotão Quí, aparece uma mensagem dizendo Portal deQuímica.