Demonstrar a importância do planejamento da interface do usuário (UI) e escolha dos elementos visuais que melhor se adaptem ao público-alvo. Apresentar ferramentas que auxiliem na criação e testes de layouts e estruturas visuais de um website.

1. César Augusto Pessôa

2. Sumário
 Objetivos
 Planejando o website
 Benchmarking
 Ferramentas
 Boas práticas
 Agradecimentos
 Dúvidas

3. Objetivos
 Demonstrar a importância do planejamento
da interface do usuário (UI) e escolha dos
elementos visuais que melhor se adaptem
ao público-alvo.
 Apresentar ferramentas que auxiliem na
criação e testes de layouts e estruturas
visuais de um website.

4. Planejando...
 Defina a sua linha de base
 Palavras-chave e objetivos principais
 Conheça o seu público alvo
 Elabore o seu conteúdo
 Identifique a plataforma alvo
 Tamanho das telas
 Usabilidade e ferramentas disponíveis
 Navegadores
 Servidores de hospedagem

5. Planejando...
 Escolha o banco de dados
 Considere o valor
 Considere a plataforma destino
 Considere o servidor de hospedagem
 Verifique o valor para hospedagem
 Verifique o domínio
 Disponibilidade
 Valor para registro
 Haverá necessidade de mais de um domínio

6. Planejando...
 Crie o mapa do site
 Agrupe as informações por tema
 Não se esqueça das páginas para contato e com
informações sobre a sua empresa.
 Faça protótipos (mockups)
 Desenhe cada uma das páginas/telas
 Tente criar um layout atrativo e intuitivo
 Valide o layout com seu cliente
 Faça testes de usabilidade com o seu público alvo
 Valide o seu layout na plataforma alvo

7. Benchmarking
 O termo vem do inglês e se aplica a prática de
pesquisar e analisar as melhores práticas para
realizar uma determinada atividade.
 Durante este processo pode-se pesquisar boas
práticas realizadas por concorrentes ou setores
similares, buscando adquirir experiência por
meio da observação.
 O processo de benchmarking não se resume a
cópia, mas sim ao estudo com o intuito de
propor melhorias.

8. Benchmarking
 Pode-se utilizar alguns sites de referência
para o estudo de bons layouts e para
incentivar a criatividade.
 www.awwwards.com
 cssmania.com
 onepagelove.com
 https://www.printi.com.br/download-de-gabaritos

9. Ferramentas
 Além da pesquisa, é possível aproveitar
inúmeras ferramentas disponíveis de forma
gratuita.
 https://fonts.google.com
 ui-cloud.com
 freepik.com
 https://testmysite.thinkwithgoogle.com/intl/pt-br/
 http://www.w3schools.com/browsers/default.asp

10. Boas práticas
 Mantenha o tema do cliente
 Identidade visual
 Logo
 Imagens padrão
 Evite usar fundos demasiadamente coloridos
ou poluídos.
 Mantenha o equilíbrio
 Layouts clean transmitem credibilidade

11. Boas práticas
 Crie suas próprias imagens e ilustrações.
 Se precisar utilizar imagens de terceiros tome
cuidado com os direitos autorais e com a
mensagem original na qual aquela imagem está
inserida.
 Utilize fontes adequadas e que facilitem a
leitura.
 Capriche na diagramação
 Crie suas próprias fontes se necessário
 Testes as suas fontes em diversos dispositivos

12. Boas práticas
 Use frases simples e de incentivo (call to
action)
 Acesse agora
 Cadastre-se aqui
 Venha conhecer
 Acesse o nosso site
 Conheça a nossa fanpage
 Entre em contato
 Faça seu cadastro
 Compre agora
 Compre com um clique

13. Agradecimentos
Find Icons
http://findicons.com
Iconfinder
https://www.iconfinder.com

14. Dúvidas?

15. César Augusto Pessôa
capfg@hotmail.com