View
218
Download
2
Category
Preview:
Citation preview
Web DesignAula 01
Jackson Eduardojackson.e.silva@edu.sc.senai.br
Web Design- Entendendo
O que é?
Web Design- Entendendo
A diferença entre
- Web Design- Web Designer Web Design
Produto – Desenho para a web
Web DesignerDesenhista – Profissional para projetar para web
Web Design- Entendendo
Programas/Softwares
- ?- ? Photoshop
Adobe
IllustratorAdobe
Web Design- Entendendo
Programas/Softwares
Não há um programa faz-tudo ideal para quem deseja ser um web designer profissional.
e sim boas fontes inspiradoras!
Web Design- Entendendo
Fontes inspiradorasSe existem sites que nos surpreendem com seu visual, com certeza houve muito embasamento teórico por trás do projeto.
- sites inspiradores
Web Design- Entendendo
Fontes inspiradoras
- http://www.ueek.com.br/
Web Design- Entendendo
Fontes desesperadoras
- http://www.desentupidorarolabosta.com.br/
Web Design- Usabilidade
1- Conheça a real necessidade do usuárioO telefone antigo é uma ótima analogia: simples e direta.
A necessidade do usuário neste caso podem ser duas: ligar para alguém utilizando um número ou atender uma ligação.
Web Design- Usabilidade
1 - Conheça a real necessidade do usuárioO elevador é outro bom exemplo: você pode se movimentar para cima ou para baixo com ele e nem por isso existem os botões “Ir para cima” ou “Ir para baixo”.
Seu objetivo é sempre um só: ir a um determinado andar, e por isso, círculos com os números – e/ou letras – diretos, simples e fáceis de serem usados.
Web Design- Usabilidade
2 - Seja simples: menos é mais!Que tal o Google Chrome como exemplo? O navegador mais utilizado do mundo (fonte: Wikipédia) tem uma das interfaces mais simples que se possa imaginar.
E engana-se quem pensa que ele é tão simples quanto seu visual, muito pelo contrário, é um aplicativo robusto e recheado de recursos, porém ficam “invisíveis” à primeira vista mas facilmente acessíveis, exatamente como deve ser.
Web Design- Usabilidade
2 - Seja simples: menos é mais!Evite elementos desnecessários e entregue os demais de maneira limpa e direta.
Web Design- Usabilidade
2 - Seja simples: menos é mais!Exemplo de ferramenta para estilização de texto (richtext) do Gmail: todas as ações de maneiras simples e fácil de se utilizar.
Web Design- Usabilidade
3 - Crie uma identidade para seu sistemaUsuários se sentem mais confortáveis e são mais eficientes em utilizar elementos e recursos padronizados em todo o sistema, o que podemos chamar de identidade.
Web Design- Usabilidade
3 - Crie uma identidade para seu sistema
Web Design- Usabilidade
4 - Não exija esforço de seu usuárioExplicações em excesso na tela demandará mais tempo do usuário e consequentemente, o deixará mais confuso e frustrado.
Minimize os impactos utilizando elementos consistentes, fáceis de serem entendidos e usados.
Web Design- Usabilidade
4 - Não exija esforço de seu usuário
Web Design- Usabilidade
5 - Organize a informaçãoCrie padrões de espaçamentos e grids, elementos fundamentais para organizar a informação e permitir que a atenção seja focada em porções específicas, facilitando a concentração do usuário.
Utilize fontes, tamanhos e cores diferentes nos textos, melhorando a dinâmica de leitura da página, legibilidade e leitura.
Web Design- Usabilidade
5 - Organize a informação
Web Design- Usabilidade
6 - O vazio nunca deve estar vazio O estado vazio acontece quando o sistema ainda não foi utilizado ou não tem dados para serem exibidos.
Seções sem conteúdo, tabelas vazias, campos não preenchidos, pesquisas que não encontram resultados, todas esses cenários se constituem como “estado vazio”.
Web Design- Usabilidade
6 - O vazio nunca deve estar vazio
Web Design- Usabilidade
6 - O vazio nunca deve estar vazio
Web Design- Usabilidade
7 - Se aproveite do contrasteElementos com bom contraste saltam aos olhos, o contrário, por sua vez, passa mais facilmente despercebido.
Web Design- Usabilidade
7 - Se aproveite do contrasteUtilize do recurso e gerencie a atenção do usuário para o que realmente é necessário.
Web Design- Usabilidade
8 - Utilize as cores estrategicamenteO uso estratégico das cores chama emocionalmente a atenção dos usuários e se bem utilizada, torna mais eficiente sua tomada de decisão.
Web Design- Usabilidade
8 - Utilize as cores estrategicamenteÉ imprescindível utilizar as cores corretas, que variam em cada caso, estude sobre a psicologia das cores.
Web Design- Usabilidade
8 - Utilize as cores estrategicamenteÉ imprescindível utilizar as cores corretas, que variam em cada caso.
Web Design- Usabilidade
9 - Dê o controle ao usuárioO usuário está no comando, ele quer e precisa ter o controle das ações e a liberdade de manusear o sistema.
Web Design- Usabilidade
9 - Dê o controle ao usuário
Web Design- Usabilidade
10 - Faça o sistema conversar com o usuárioToda ação gera uma reação (já dizia Newton) e em sistemas não deve ser diferente.
É comum termos ações que não geram resultado em tempo real, isto é, ações que exigem um tempo de resposta do sistema.
Web Design- Usabilidade
10 - Faça o sistema conversar com o usuário
Web Design- Usabilidade
10 - Faça o sistema conversar com o usuário
Web Design- Usabilidade
10 - Faça o sistema conversar com o usuárioUma interface agradável conversa com o usuário, o instrui sempre que necessário e fornece feedbacks a cada ação: sucesso, alertas e erros.
sc.senai.br | 48 3231.4100 | 48 3231.4211Rodovia Admar Gonzaga, 2765 Itacorubi 88034-001 Florianópolis, SC
Recommended