César Augusto Pessôa

Sumário

Objetivos

Planejando o website

Benchmarking

Ferramentas

Boas práticas

Agradecimentos

Dúvidas

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.

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

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

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

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.

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

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

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

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

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

Agradecimentos

Find Icons

http://findicons.com

Iconfinder

https://www.iconfinder.com

Dúvidas?

César Augusto Pessôa

capfg@hotmail.com