O documento discute os principais elementos do layout de um site, incluindo wireframes, espaçamento, seção "Sobre", call to action, botões, rodapé, imagens, ferramenta de busca, fontes e contato. O documento fornece dicas sobre como projetar esses elementos chave de um site.

1. Projeto de Aplicações Web II – PRAW II
Professores:
Eduardo Florence Batista;
Renata Florence dos Santos.

2. DESENVOLVIMENTO DO LAYOUT
AULA 01

3. Competências
Desenvolver, aprimorar e publicar um sistema web de
acordo com a análise de requisitos.

4. Habilidades
1.1. Utilizar técnicas de modelagem de dados.
1.2. Aplicar as técnicas de modularização, especificação e verificação de websites.
1.3. Utilizar ferramentas de apoio ao desenvolvimento de websites.
1.4. Entender a orientação a objetos na construção de websites.
1.5. Identificar as necessidades dos usuários no que se refere ao suporte.
1.6. Aplicar soluções para resolver os problemas de suporte.

5. Bases Tecnológicas
1. Desenvolvimento do leiaute;
2. Definição da estrutura do site: navegabilidade;
3. Desenvolvimento do banco de dados;
4. Integração entre o site e o banco de dados;
5. Desenvolvimento de manual administrativo;
6. Definição da política de implantação: instalação, configuração e treinamento;
7. Publicação na Internet;

6. Wireframe
Antes de criar o layout do site é necessário criar o Wireframe. O wireframe é
um guia visual que ajuda a identificar a estrutura principal e também o
posicionamento de todos os elementos em tela. Poderíamos resumir dizendo
que o wireframe é um rascunho do layout final, gerando assim uma
ilustração do site antes mesmo de iniciar a criação do layout.

7. Wireframe
A criação de um wireframe pode ser feita
com papel e caneta ou até mesmo usando
softwares e ferramentas online, e pode
apresentar diferentes níveis de
qualidade/detalhamento.

8. Retirado do site: http://dev.rbtech.info/files/2013/06/wireframe-hand.jpg

9. SITE: http://quirktools.com/wires/

10. O que é um Layout
Layout é a forma que você dividirá o conteúdo do seu
site, ou seja, mostra a estrutura física.
O layout engloba elementos como texto, gráficos,
imagens e a forma como eles se encontram em um
determinado espaço.
Layout é a aparência de cada coisa, e isso envolve os
elementos que a compõem.

11. Importância do Layout
O layout de uma página é o responsável por transmitir
seriedade, confiança e gerar economia de tempo do usuário.
Investir em um bom design e desenvolvimento é
imprescindível para promover o seu site no mundo online.
Quanto mais simples, direto, agradável e intuitivo, melhor. É
importante também pensar em tornar o seu site responsivo.

12. Importância do Layout
Uma das primeiras imagens que se consolida na
mente de um cliente em potencial quando ele
acessa o site em busca de informações é o layout.
Quanto mais específico o design da página, será
mais fácil a localização de informações para o
usuário e consequentemente terá mais
visibilidade e aceitação do usuário.

14. Principais elementos do layout de site
Sites, assim como outras peças de comunicação, baseiam-se em tendências
de mercado. São elas que indicam padrões de cores, fotos, ilustrações,
tipografias e diagramação. Todavia, não é somente através de tendências
que construímos os layouts. Cada designer tem um plano diferente para
construção de um site.

15. Principais elementos do layout de site:
 Espaçamento ou Espaços de respiro;
 Seção “Sobre”;
 Call to action;
 Botões;
 Rodapé;
 Imagens;
 Ferramenta de busca;
 Fontes;
 Contato.

16. Espaçamento ou Espaços de respiro
Quando você cria um layout website, uma das questões mais
importantes a se considerar são os espaços em branco, são
importantes para compor uma harmonia visual.
Espaço é um dos recursos de design mais importantes porque dita
quase tudo, do fluxo a leiturabilidade.

17. Espaçamento ou Espaços de respiro
Entretanto, não basta sair colocando um monte de espaço em
branco entre os elementos do seu layout para que ele se torne
necessariamente melhor. Uma boa relação espacial inclui uma
consistência entre espaços, ou seja, elementos similares devem
incluir espaçamentos parecidos.
Dessa forma, a distância entre linhas em um parágrafo deve ser a
mesma em todos eles.

18. Espaçamento ou Espaços de respiro
A grande importância de espaço de respiro é que ele cria um
ponto focal nos elementos que circunda. Textos e imagens que
são contornados por espaço parecem mais relevantes do que
aqueles que estão espremidos entre outras dezenas de
elementos.

19. Exemplo
Retirado do site: www.homemmaquina.com.br

20. Seção sobre o cliente
Um site é um cartão de visitas virtual, e como todo cartão de
visitas, ele tem um único objetivo: dizer quem você é e o que
você faz. Por isso, nenhuma página poderia estar completa
sem uma seção sobre o seu cliente.

21. Seção Sobre
 Definição clara e concisa sobre o objetivo principal do site;
 Deve abordar a filosofia da empresa (Missão, Visão, Valores
e Objetivos);
 Exibir testemunho de clientes, cases de sucesso;

22. Exemplo
Retirado do site: www.nerdsti.com.br

23. Call to action
Significa a “chamada para ação”. Geralmente
são links de uma página que levam os
usuários a realizar ações, com o principal
objetivo de direciona-los para uma nova
página. Normalmente esses links são
representados por hiperlinks ou imagens.

24. Call to action
Um layout de site que contém uma call to action deve colocá-la
em local de destaque, de maneira que ela seja óbvia para o
usuário e que seja um contraste com o resto de seu conteúdo.
Se você deseja que ele faça um download, se inscreva ou faça
uma cotação, escreva um texto atraente e breve.

25. Exemplo

26. Botões
Todos os botões de um website devem ser reconhecidos como
botões e, portanto, como elementos clicáveis do seu layout.
Assim, eles precisam ter sempre o mesmo formato, os
mesmos efeitos de design e as mesmas características, ainda
que sirvam a propósitos diferentes.

27. Botões
Criar as características únicas de um botão pode ser um
desafio, principalmente considerando a complexidade de
determinados projetos. Todavia, você pode optar por um kit de
design para criar elementos consistentes entre si.

28. Exemplos
Retirado do site: http://comoeufaco.com

29. Rodapé
O rodapé é uma forma de resumir seu site e trazer pra frente páginas
que tenham relação à parte institucional da sua empresa, como redes
sociais, endereço e contato. Por sua localização ser ao final da página,
também é o espaço ideal para um pequeno mapa do site, links
pertinentes e uma breve descrição do que é o site.

30. Rodapé
Faça com que o rodapé seja simples e útil!
Ao desenhar um rodapé que exponha links ou botões, o
importante é estar visualmente integrado ao site. Pode até ter
um toque muito mais minimalista que o todo, mas dê uma
personalidade para ele.

31. Exemplo
Retirado do site: http://uol.com.br

32. Imagens
Crie visuais deslumbrantes para agradar usuários em seu site.
Boas imagens ou ilustrações são um jeito fácil para fazer isso.
Com um pequeno conjunto de grandes fotografias você pode
exibir produtos, pessoas, ou qualquer coisa para incentivar os
usuários em seu site.

33. Imagens
Como a internet está em um estágio que o peso das imagens
não é um fator que compromete o acesso ao site, temos mais
liberdade para usar imagens de maior resolução, mas lembre-
se de oferecer uma alternativa para dispositivos móveis.

34. Imagens
Dicas:
• Procure um fotógrafo ou ilustrador para desenvolver e criar
um set de imagens único.
• Confie mais nas imagens exclusivas que nas de banco de
imagem;
• Ofereça uma experiência visual única.
• Capriche no tamanho das imagens.

35. Bancos de imagens gratuitos
Pexels;
Free Images;
StockSnap.io;
FreePik;
Viintage.

36. Ferramenta de busca
Apostamos que não foram poucas as vezes em que você
precisou encontrar uma informação antiga em uma página e
não teve como fazê-lo. É nesses momentos que uma barra de
busca se faz útil. Esse recurso é vital para usuários que tem
costume de frequentar uma página e não pode ser deixado de
lado por você na construção de um layout de site.

37. Ferramenta de busca
Crie barras de busca de modo que elas não obstruam a
navegação e sejam fáceis de utilizar. Procure optar por utilizar
um ícone, não invente: use a lupa que é entendida
universalmente.

38. Exemplo

39. Fontes
Antigamente na web era ordenada por um restrito conjunto
de fontes porque as opções que eram reconhecidas pela
maioria dos navegadores eram limitadíssimas. Mas hoje essa
limitação não existe mais e temos grandes ferramentas Open
Source para uso de uma gama muito maior de fontes
exclusivas.

40. Fontes
Entretanto, as fontes nativas ainda são muito importantes
por duas razões: compatibilidade e performance, portanto
não abuse de fontes carregadas e aproveite as que já estão
disponíveis no sistema. Webfonts também podem ser
importantes para o posicionamento do site em mecanismos
de busca (SEO) por que pode se confundir a fonte como
imagem.

41. Sites de fontes
https://www.dafont.com/pt/
https://fonts.google.com/
https://edgewebfonts.adobe.com/fonts

42. Contato
Elemento mais importante de qualquer website são as
informações de contato que permitem aos visitantes entrar
em contato. Você quer que esses dados estejam tão visíveis
quanto possível e que o seu telefone, endereço e formulário
de contato sejam claros e fáceis de encontrar. Por isso,
planeje seu formulário de contato com cuidado e tente não
solicitar informações desnecessárias nele.

43. Contato
Retirado do site: https://viverdeblog.com/erro-numero-1-em-design/

44. Referências
 http://www.dokacomunicacao.com.br/blog/importancia-layout-site/
 http://www.administradores.com.br/artigos/marketing/a-importancia-
do-layout-do-seu-site-para-seu-negocio-online/108358/
 http://dev.rbtech.info/o-processo-de-criacao-de-sites-criando-o-design/

45. Referências
 https://uolhost.uol.com.br/faq/v2/criacao-de-sites/site-pronto/o-que-
e-layout.html#rmcl
 http://blog.welancer.com/layout-de-site/
 https://www.homemmaquina.com.br/design/design-dicas-para-um-
layout-infalivel/