Este documento discute os princípios fundamentais do design para web, enfatizando a importância de considerar o usuário em todas as etapas do processo de design. Ele explora tópicos como tipografia, fotografia, semântica, percepção humana e comportamento para criar interfaces intuitivas e funcionais.

2. Não existe Web Design.
Existe o Design que faz Web

3. DESIGN PARA WEB
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

4. www.havenworks.com
21/07/09

5. DESIGN PARA WEB
O design é o domínio no qual se
estrutura a interação entre usuário e
produto, para facilitar ações efetivas.
Design industrial é essencialmente
design de interfaces.
(Gui Bonsiepe, Design do Material ao Digital - 1992)

6. O que é Interface?
O DIAGRAMA DO DESIGN
Primeiro:
Temos um usuário que quer realizar uma
ação.
-Um homem, uma mulher, um jovem, um
deficiente..
Segundo:
Temos uma necessidade que o usuário quer
cumprir.
-Cortar pão, utilizar uma informação,
passar batom, ler um livro, escutar música,
tomar cerveja...
Terceiro:
Temos um artefato (objeto ou informação),
de que o usuário precisa para realizar
efetivamente a ação.

7. Abridor de latas à pilha
High Tech Imports

8. A função do Design, além da estética, é
tornar um produto (ou site) funcional.

9. http://www.ikea.com/ms/sv_SE/kampanj/fy06_dromkok/dromkok.html
21/07/09

10. Para pensar...
• Quais são os elementos mais comuns
presentes nos websites?
• O que eles trazem como diferencial?
• Como fazer para que diferentes internautas
visitem o seu site com freqüência?

11. Voltando, um pouco, no tempo ...

12. Histórico
A internet vem evoluindo de maneira grandiosa.
Considerando as primeiras páginas da internet, nos
distantes anos 90.
E a invasão dos sites de conteúdo colaborativo que
rege a Web 2.0, com suas particularidades e estilos.

13. Histórico
Google GroupRedes sociais
Contexto da internet hoje = WEB 2.0

14. Histórico
A tecnologia cumpre seu papel e proporciona avanços
que tornam a internet mais “necessária” a cada dia.
Isso nos faz precisar de adaptações diárias de interfaces
capazes de atender a essas “necessidades” dos
usuários, ávidos por novas formas de ver o mundo.
Recursos tecnológicos são oferecidos e amplamente
utilizados para que possamos desenvolver interfaces
mais instigantes aos nossos clientes (usuários).

15. Hipermídia
HIPERTEXTO: Forma de representação textual não -linear,
que utiliza conexões entre termos relacionados como forma
de guiar o leitor;
HIPERMÍDIA: Mídia que utiliza elementos multimídia e
hipertextos para se comunicar;
MULTIMÍDIA: Mídia que utiliza elementos de áudio, vídeo e
animação, além de itens tradicionais de texto e imagem;
LINKS: As informações são amarradas por meio de elos
associativos. Permitem que o usuário avance em sua leitura
na ordem que desejar.

16. Hipermídia
Ted Nelson crítica a web como
uma simplificação limitada de
seu projeto, tendo em vista o
fato de que os links na web
serem apenas de mão-única
(apenas o autor pode inserir os
links, e os mesmos são apenas
de uma direção: um documento
apontando outro). Para Nelson,
uma das propriedades
principais do hipertexto seria
permitir ao interator decidir
onde por os links (as
associações seriam realizadas
pelo interator, não apenas pelo
autor do texto).

17. Hipermídia
A imagem apresenta uma
comparação entre uma
navegação linear e outra nãolinear.

18. Hipermídia
Características da Hipermídia
• Em geral, é composta por blocos de informações e por vínculos
eletrônicos (links) que ligam esses elementos;
• Costumam oferecer um sistema de ícones para navegação. Esses botões
devem estar presentes em todas as páginas;
• Possibilidade de criar conteúdos ilimitados, considerando a utilização de
conteúdos existentes em outras fontes disponíveis na internet.

19. O que é design?
Design é uma atividade criativa cuja finalidade é
estabelecer as qualidades multifacetadas de objetos,
processos, serviços e seus sistemas, compreendendo
todo seu ciclo de vida. Portanto, design é o fator central
da humanização inovadora de tecnologias e o fator
crucial para o intercâmbio econômico e cultural.
(International Council of Graphic Design Associations - ICOGRADA,
2003)

20. O que é design?
Embalagem para bebida
Fonte: internet

21. O que é design para internet?
Tende à multidisciplinaridade, uma vez que a
construção de páginas web requer subsídios de diversas
áreas técnicas. Áreas como a arquitetura da informação,
programação, usabilidade, acessibilidade entre outros.
Sua preocupação fundamental é agregar os conceitos
de usabilidade com o planejamento da interface,
garantindo que o usuário final atinja seus objetivos de
forma agradável e intuitiva.

22. O que é design para internet?
Modelo para Design de Interação
proposto por Dan Saffer

23. Primeira página web - 1992
www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

24. Mas o que isso tem a ver com PUBLICIDADE?

25. Web como plataforma
WEB 2.0

26. Mais colaborativa
• Construção do conhecimento por meio da troca de
experiências entre os próprios usuários
WEB 2.0

27. Experiência mais rica para os usuários
WEB 2.0

28. Experiência mais rica entre os usuários
WEB 2.0

29. Foco no usuário
WEB 2.0
Acessibilidade Portabilidade Flexibilidade

30. Design digital
Royo, 2008 p.42
Estrutura da relação entre
Tecnologia – Cultura - Design

31. Design digital
A criação de conteúdo (cultura) para sistemas digitais,
dependem diretamente da tecnologia existente e assim
pode apresentar ferramentas projetuais capazes de
atender as necessidades socio-culturais (design).
Isso reforça o design como agente solucionador de
problemas – ou seja – apresenta formas de comunicar
com um público específico de maneira inteligível.

32. Usabilidade + Design . . .
... e não Usabilidade x Design
De nada adianta um website que ninguém
consegue usar porque é complicado ou difícil
demais.
Usabilidade

33. “A usabilidade refere-se à capacidade de um software de ser
compreendido, aprendido, utilizado e ser atrativo para o
usuário, em condições específicas de utilização.” (ISO/IEC
9126)
Simplificando, 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.
Usabilidade

34. Usuário
Antecipação. Não espere o usuário procurar pela informação
ou serviço, um bom design de interação é aquele que causa
surpresas positivas no usuário, Tente adiantar ao máximo a
informação (conhecer bem seu público-alvo é essencial).
Autonomia. Tudo “pertence” ao usuário. Dê autonomia, mas
com regras, limites. Deixe-o pensar que controla tudo. Use
mecanismos de status, para manter usuários cientes
informados e manter a informação em fácil localização.
Cores. Use cores para complementar sua informação. Mas
mantenha o visual limpo. Cores podem passar mais
informação do que parece.
Consistência. É importante estar de acordo sempre com as
expectativas do cliente.

35. www.closeup.com.br
21/07/09

36. Foco no usuário. Olhe para o usuário, não para o
computador. Mantenha o usuário ocupado. Deixe
mensagens para ajuda, e faça-as ajudar a solucionar o
problema.
Interfaces exploráveis. Não dê toda informação.
Prenda o usuário, mas mantenha tudo fácil e acessível. O
usuário gosta de se sentir em casa. Sempre habilite
“retroceder”.
Objetos humanos de interface. São todas as
coisas que podem exercer influência no usuário; podem
ser vistas, ouvidas, tocadas ou percebidas de outra
maneira.
Aprendizagem. Todas as aplicações e serviços, não
importa quão simples, indicarão uma curva da
aprendizagem.
Usuário

37. Metáforas. O uso de metáforas podem criar figuras
visíveis na mente, e elas deixam o processo de
entendimento da interface mais fácil. Sempre uma
comparação do cotidiano é melhor do que apenas a
explicação da teoria.
Leitura. Deixe a leitura o mais fácil possível. Ler em
tela geralmente é chato, tente minimizar a chatice
dessa tarefa ao máximo.
Navegação visível. Evite a navegação invisível,
que é mais para sites dinâmicos, como blogs, onde
todos podem entrar e comentar. Falando em
interatividade, é bom sempre ter um controle da
informação que está correndo no seu site, já que esse
conteúdo é de sua responsabilidade.
Usuário

38. www.usabilidoido.com
21/07/09