Web Design Aula 01 Jackson Eduardo

Apresentação em tema: "Web Design Aula 01 Jackson Eduardo"— Transcrição da apresentação:

1

2 Web Design Aula 01 Jackson Eduardo jackson.e.silva@edu.sc.senai.br

3 Web Design - Entendendo O que é?

4 Web Design - Entendendo A diferença entre - Web Design - Web Designer Web Design Produto – Desenho para a web Web Designer Desenhista – Profissional para projetar para web

5 Web Design - Entendendo Programas/Softwares - ? Photoshop Adobe Illustrator Adobe

6 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!

7 Web Design - Entendendo Fontes inspiradoras Se existem sites que nos surpreendem com seu visual, com certeza houve muito embasamento teórico por trás do projeto. -sites inspiradores

8 Web Design - Entendendo Fontes inspiradoras - http://www.ueek.com.br/

9 Web Design - Entendendo Fontes desesperadoras  - http://www.desentupidorarolabosta.com.br/

10 Web Design - Usabilidade 1- Conheça a real necessidade do usuário O 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.

11 Web Design - Usabilidade 1 - Conheça a real necessidade do usuário O 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.

12 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.

13 Web Design - Usabilidade 2 - Seja simples: menos é mais! Evite elementos desnecessários e entregue os demais de maneira limpa e direta.

14 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.

15 Web Design - Usabilidade 3 - Crie uma identidade para seu sistema Usuá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.

16 Web Design - Usabilidade 3 - Crie uma identidade para seu sistema

17 Web Design - Usabilidade 4 - Não exija esforço de seu usuário Explicaçõ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.

18 Web Design - Usabilidade 4 - Não exija esforço de seu usuário

19 Web Design - Usabilidade 5 - Organize a informação Crie 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.

20 Web Design - Usabilidade 5 - Organize a informação

21 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”.

22 Web Design - Usabilidade 6 - O vazio nunca deve estar vazio

23 Web Design - Usabilidade 6 - O vazio nunca deve estar vazio

24 Web Design - Usabilidade 7 - Se aproveite do contraste Elementos com bom contraste saltam aos olhos, o contrário, por sua vez, passa mais facilmente despercebido.

25 Web Design - Usabilidade 7 - Se aproveite do contraste Utilize do recurso e gerencie a atenção do usuário para o que realmente é necessário.

26 Web Design - Usabilidade 8 - Utilize as cores estrategicamente O 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.

27 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.

28 Web Design - Usabilidade 8 - Utilize as cores estrategicamente É imprescindível utilizar as cores corretas, que variam em cada caso.

29 Web Design - Usabilidade 9 - Dê o controle ao usuário O usuário está no comando, ele quer e precisa ter o controle das ações e a liberdade de manusear o sistema.

30 Web Design - Usabilidade 9 - Dê o controle ao usuário

31 Web Design - Usabilidade 10 - Faça o sistema conversar com o usuário Toda 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.

32 Web Design - Usabilidade 10 - Faça o sistema conversar com o usuário

33 Web Design - Usabilidade 10 - Faça o sistema conversar com o usuário

34 Web Design - Usabilidade 10 - Faça o sistema conversar com o usuário Uma 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.

35 sc.senai.br | 48 3231.4100 | 48 3231.4211 Rodovia Admar Gonzaga, 2765 Itacorubi 88034-001 Florianópolis, SC