Web Design Aula 01 Jackson Eduardo [email protected]

Web DesignAula 01

Jackson [email protected]

Web Design- Entendendo

O que é?


A diferença entre

- Web Design- Web Designer Web Design

Produto – Desenho para a web

Web DesignerDesenhista – Profissional para projetar para web


Programas/Softwares

- ?- ? Photoshop

Adobe

IllustratorAdobe


Programas/Softwares

Não há um programa faz-tudo ideal para quem deseja ser um web designer profissional.

e sim boas fontes inspiradoras!


Fontes inspiradorasSe existem sites que nos surpreendem com seu visual, com certeza houve muito embasamento teórico por trás do projeto.

- sites inspiradores


Fontes inspiradoras

- http://www.ueek.com.br/


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.


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.


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.


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


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.


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.


3 - Crie uma identidade para seu sistema


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.


4 - Não exija esforço de seu usuário


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.


5 - Organize a informação


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


6 - O vazio nunca deve estar vazio


6 - O vazio nunca deve estar vazio


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


7 - Se aproveite do contrasteUtilize do recurso e gerencie a atenção do usuário para o que realmente é necessário.


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.


8 - Utilize as cores estrategicamenteÉ imprescindível utilizar as cores corretas, que variam em cada caso, estude sobre a psicologia das cores.


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


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.


9 - Dê o controle ao usuário


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.


10 - Faça o sistema conversar com o usuário


10 - Faça o sistema conversar com o usuário


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

Documents

Web Design Aula 01 Jackson Eduardo [email protected]