CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2....

24
CONCEITOS DE DESIGN Acessibilidade e usabilidade. Conhecendo a função das cores, letras e formas. Anderson Gomes Eleutério

Transcript of CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2....

Page 1: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

CONCEITOS DE DESIGN

Acessibilidade e usabilidade.

Conhecendo a função das

cores, letras e formas.

Anderson Gomes Eleutério

Page 2: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Linguagem de Programação II

Usabilidade e Acessibilidade

Cores, letras e formas

Tratamento de Imagens

Tratamento de fotos

Layouts de sites

Page 3: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Distribuição de Pontos

5,0 pontos – participação

5,0 pontos – exercício avaliativo

15,0 pontos – prova parcial

25,0 pontos – prova somativa

Page 4: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Planejamento 2013 – Linguagem de Programação II

1. Usabilidade WEB – Conceitos

2. Conhecendo o ambiente de trabalho do Photoshop;

3. Teclas de atalho

4. Caixa de ferramentas

5. Trabalhando com paletas

6. Trabalhando com textos

7. Trabalhando com imagens

8. Filtros e Efeitos

9. Imagens para WEB (imagens GIF e JPG)

10. Criando imagens com área mapeada

11. Trabalhando com layouts para sites

12. Criando layouts para sites

13. FrontPage e Dreaweaver

14. Editando layouts criados no Photoshop

Page 5: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

O princípio básico da Web é acesso por qualquer tipo

de pessoa, em qualquer lugar, mas são poucos os

websites que seguem esse princípio. Ora por

incompetência técnica, ora por desinteresse

comercial, a maioria dos criadores de websites

ignoram boas práticas que viabilizam o acesso à

informação (acessibilidade) e seu uso (usabilidade).

Page 6: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Acessibilidade e usabilidade são condições básicas

para a inclusão social digital.

"O poder da web está em sua universalidade. Ser

acessada por todos, independente de deficiência, é

um aspecto essencial."

Page 7: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Acessibilidade é a flexibilidade do acesso às

funcionalidades de um determinado produto ou local.

Se um produto ou local é acessível, então ele permite

que pessoas com necessidades especiais, seja por

deficiência ou por limitações dos meios utilizados,

utilizem-no para seus fins.

Page 8: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Usabilidade é sinônimo de facilidade de uso.

Se um produto é fácil de usar, o usuário tem maior

produtividade: aprende mais rápido a usar, memoriza

as operações e comete menos erros.

Page 9: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

“A usabilidade é um atributo de qualidade relacionado à

facilidade do uso de algo. Mais especificamente, refere-se à

rapidez com que os usuários podem aprender a usar alguma

coisa, a eficiência deles ao usá-la, o quanto lembram daquilo,

seu grau de propensão a erros e o quanto gostam de utilizá-la.

Se as pessoas não puderem ou não utilizarem um recurso, ele

pode muito bem não existir” (por Jakob Nielsen)

Page 10: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Não existe Web Design.

Existe o Design

que faz Web

Page 11: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Existe o Design que faz Web, e esse profissional tem

que aprender tudo: Tipografia, Fotografia, Semiótica,

Gestalt,Matemática,Ótica,Percepção,Comportamento

Humano, etc. Senão ele não consegue fazer Web.

Alexandre Wollner

Page 12: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

O que é Design?

Design refere-se ao projeto visual e funcional de um

produto, a adaptação de um produto a necessidade

dos seus usuários, cativando o seu uso através da

estética, aplicando-se conceitos e usabilidade a sua

forma.

Page 13: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Design é uma área Projetual

Sua função é responsável por gerar desempenho,

qualidade, durabilidade e aparência a um produto.

A função do Design, além da estética, é tornar um

produto funcional.

Page 14: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

É transformar

Informação em

Comunicação

Page 15: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Os Softwares são apenas ferramentas, e não garantem a

qualidade do projeto.

“Saber como a ferramenta funciona”

é bem diferente de

“Saber o que fazer com ela”

Page 16: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Nenhum software deve ser encarado como

uma solução pronta.

A definição do que é Design vai

muito além do Photoshop.

Page 17: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Design = Projeto

Page 18: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas
Page 19: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas
Page 20: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas
Page 21: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Psicodinâmica

das

Cores

Page 22: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Cada cor transmite

informações, sensações

e emoções diferentes

Page 23: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

Combinações Cromáticas

Por mais que se saiba que cores transmitem as

sensações desejadas, é essencial saber como

combina-las.

Page 24: CONCEITOS DE DESIGNescolanovaerense.com.br/aula001.pdf · 1. Usabilidade WEB –Conceitos 2. Conhecendo o ambiente de trabalho do Photoshop; 3. Teclas de atalho 4. Caixa de ferramentas

1 – Qual o veículo de divulgação é mais importante

na sua opinião? Porque?

2 – O que é design digital?