21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a...
-
Upload
truongminh -
Category
Documents
-
view
222 -
download
3
Transcript of 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a...
![Page 1: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/1.jpg)
Inte
rfac
es
Pe
sso
a M
áqu
ina
Desenho de Páginas Web I
21
Cap. 13 – Desenho Para a Web
![Page 2: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/2.jpg)
Mu
dar…
para m
elho
r (!?)
Enviado por Pedro Bucho (69537)
![Page 3: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/3.jpg)
Mu
dar…
para m
elho
r (!?)Enviado por Pedro Bucho (69537)
![Page 4: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/4.jpg)
Mu
dar…
para m
elho
r (!?)Enviado por Pedro Bucho (69537)
![Page 5: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/5.jpg)
Onde está o Link?
![Page 6: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/6.jpg)
Onde está o Link?
![Page 7: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/7.jpg)
Qual o problema?
![Page 8: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/8.jpg)
Qual o problema?
Conteúdo ocupapequena %
![Page 9: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/9.jpg)
Resumo Aula Anterior
Manuais convencionais
Ajudas Interativas
Princípios e guias para manuais
Navegação
Aprendizagem
Leitura
Tipo de manual vs público alvo
Consistência entre IU, manuais e ajudas interativas
Modelo conceptual
![Page 10: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/10.jpg)
Perguntas!
A quem se destinam os manuais do utilizador
Quais as vantagens da documentação online face à documentação em papel?
![Page 11: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/11.jpg)
Sumário
Importância de páginas bem desenhadas
Princípios Fundamentais
Dez erros mais comuns em desenho Web
Layout
Conteúdo
![Page 12: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/12.jpg)
Bom desenho pode aumentar vendas
Antes:
“Most popular feature was … search … because people couldn't figure out how to navigate the site“
“The second most popular feature was the help button, because the search technology was so ineffective.”
Depois:
Uso do botão "help" diminuiu 84%
Vendas aumentaram 400%
http://www.nytimes.com/library/tech/99/08/cyber/commerce/30commerce.html
![Page 13: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/13.jpg)
Mau desenho pode levar ao desastre
Cobrar £3.2/sem por acesso ao site...Acessos cairam 90%Apenas 1.5% dos antigos leitores pagaram
Nem os assinantes (acesso grátis) acediam aos sites...
... Por terem de se autenticar onde tal não era esperado!
http://gigaom.com/2010/11/02/news-corp-paywall/
![Page 14: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/14.jpg)
Importância do bom desenho
Sucesso
Fracasso
![Page 15: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/15.jpg)
Exemplo de sucesso
![Page 16: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/16.jpg)
Simples, estético, minimalista
(1999)
![Page 17: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/17.jpg)
01PRINCÍPIOS
FUNDAMENTAIS
![Page 18: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/18.jpg)
Parte de uma experiência Integral
boogy_man@ sxc.hu
![Page 19: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/19.jpg)
Utilizadores controlam a navegação
![Page 20: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/20.jpg)
Diversidade de dispositivos e contextos
![Page 21: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/21.jpg)
Artefactos e Prática de Design
Mapas
Storyboards
Esquemas
Simulacros
![Page 22: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/22.jpg)
Mapas do Local
![Page 23: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/23.jpg)
Storyboards
![Page 24: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/24.jpg)
Esquemas
25
![Page 25: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/25.jpg)
Simulacros
![Page 26: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/26.jpg)
02DEZ ERROS MAIS
COMUNS
![Page 27: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/27.jpg)
Jakob Nielsen (http://www.useit.com)
![Page 28: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/28.jpg)
Lista de Nielsen (1996-2011)http://www.useit.com/alertbox/9605.html
![Page 29: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/29.jpg)
1 – Pesquisa Ineficiente
![Page 30: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/30.jpg)
2 – Ficheiros PDF para leitura online
![Page 31: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/31.jpg)
3 – Não mudar cor de links visitados
Já cá estive ou ainda não?
Aqui já estive, e aqui não...
![Page 32: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/32.jpg)
4 – Texto difícil de apreenderFrom this day forward, Flight Control will be known by two words: 'Tough' and 'Competent.' Toughmeans we are forever accountable for what we do or what we fail to do. We will never againcompromise our responsibilities. Every time we walk into Mission Control we will know what westand for. Competent means we will never take anything for granted. We will never be found shortin our knowledge and in our skills. Mission Control will be perfect. When you leave this meetingtoday you will go to your office and the first thing you will do there is to write 'Tough andCompetent' on your blackboards. It will never be erased. Each day when you enter the room thesewords will remind you of the price paid by Grissom, White, and Chaffee. These words are the priceof admission to the ranks of Mission Control. The size and age of the Cosmos are beyond ordinaryhuman understanding. Lost somewhere between immensity and eternity is our tiny planetaryhome. In a cosmic perspective, most human concerns seem insignificant, even petty. And yet ourspecies is young and curious and brave and shows much promise. In the last few millennia we havemade the most astonishing and unexpected discoveries about the Cosmos and our place within it,explorations that are exhilarating to consider. They remind us that humans have evolved to wonder,that understanding is a joy, that knowledge is prerequisite to survival. I believe our future dependspowerfully on how well we understand this Cosmos in which we float like a mote of dust in themorning sky. The Earth is a very small stage in a vast cosmic arena. Think of the rivers of bloodspilled by all those generals and emperors so that, in glory and triumph, they could become themomentary masters of a fraction of a dot. Think of the endless cruelties visited by the inhabitants ofone corner of this pixel on the scarcely distinguishable inhabitants of some other corner, howfrequent their misunderstandings, how eager they are to kill one another, how fervent their hatreds.Look again at that dot. That's here. That's home. That's us. On it everyone you love, everyone youknow, everyone you ever heard of, every human being who ever was, lived out their lives. Theaggregate of our joy and suffering, thousands of confident religions, ideologies, and economicdoctrines, every hunter and forager, every hero and coward, every creator and destroyer ofcivilization, every king and peasant, every young couple in love, every mother and father, hopefulchild, inventor and explorer, every teacher of morals, every corrupt politician, every "superstar,"every "supreme leader," every saint and sinner in the history of our species lived there--on a moteof dust suspended in a sunbeam. The Earth is the only world known to harbor life. Nowhere else.
![Page 33: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/33.jpg)
5 – Texto de tamanho fixo
![Page 34: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/34.jpg)
6 – Títulos pouco visíveis para m.pesquisa
“Página Principal”
???!!
![Page 35: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/35.jpg)
7 – Elementos semelhantes a publicidade
![Page 36: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/36.jpg)
8 – Violar convenções de desenho
![Page 37: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/37.jpg)
9 – Abrir novas janelas do navegador
![Page 38: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/38.jpg)
10 – Não dar resposta às questões do ut.
![Page 39: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/39.jpg)
03LAYOUT
![Page 40: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/40.jpg)
Estrutura da página
![Page 41: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/41.jpg)
Guiar o Olhar
![Page 42: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/42.jpg)
Atenção selectiva
![Page 43: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/43.jpg)
Atenção selectiva
![Page 44: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/44.jpg)
Ou encontro o que quero...
![Page 45: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/45.jpg)
Desenho Estético e Minimalista
![Page 46: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/46.jpg)
Tem que haver um equilíbrio
estética
funcionalidadeusabilidade
![Page 47: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/47.jpg)
Consistência
![Page 48: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/48.jpg)
Imagem de Marca
![Page 49: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/49.jpg)
![Page 50: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/50.jpg)
O que era???
Mais um...
![Page 51: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/51.jpg)
![Page 52: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/52.jpg)
O que era???
![Page 53: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/53.jpg)
Acertaram, claro! (?)
![Page 54: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/54.jpg)
Sinal vs. Ruído
![Page 55: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/55.jpg)
Espaço Desaproveitado
![Page 56: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/56.jpg)
Elementos Destacados
![Page 57: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/57.jpg)
Hierarquias Visuais Claras
![Page 58: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/58.jpg)
Acima da Dobra
![Page 59: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/59.jpg)
Layout Dinâmico
![Page 60: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/60.jpg)
Layout Dinâmico
![Page 61: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/61.jpg)
Layout Dinâmico
![Page 62: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/62.jpg)
04CONTEÚDO
![Page 63: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/63.jpg)
Útil, rápido de encontrar, ou...
![Page 64: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/64.jpg)
Pirâmide Invertida
65
This is the short blurb describing the article
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text
To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text Does this work at all? I don’t
know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which
is, is. The world is all that exists. Nothing unreal exists, metaphysics law #1. This is some the the the the nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are there questions that should never be asked? What is the nature of goodness? Why are we so mean to each other? How can we be so cruel to one another?
This is some nonsensical text This is some nonsensical text This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical textTo see how well this thing works
This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some nonsensical text This is some
Info Mais Importante
Info Menos Importante
.
.
.
TítuloShort Blurbs
(Sumário)Panorâmica
Informação de suporteDetalhes de Suporte
Frases Longas
![Page 65: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/65.jpg)
Pirâmide Invertida
www.publico.ptSociedade 13-11-2001 - 13h57
Investigadores afastam cenário de atentado
Caixa negra de Airbus suporta tese de
acidente
O estudo das conversas registadas pela caixa negra do Airbus 300 que se despenhou ontem em Nova Iorque suporta a tese de que se tratou de um acidente.
Os investigadores asseguraram que não foram detectados sons estranhos que levem a equacionar a hipótese de um atentado como causa do sinistro, noticia o "El Mundo". Uma falha no motor terá provocado a explosão de uma das turbinas que, segundo os investigadores, estavam para ser revistas em breve.Segundo a BBC, os estudos preliminares das autoridades americanas já confirmavam que a queda do avião teria tido origem num problema mecânico, afastando o cenário de atentado. O avião devia ter descolado às 08h40 locais mais a sua saída atrasou-se até às 09h13. Todo o equipamento tinha sido revisto por raio-x antes do embarque. O contacto por rádio entre o Airbus e a torre de controlo do aeroporto perdeu-se quatro minutos depois da descolagem.A morte de 260 passageiros, na sua maioria dominicanos, está já confirmada, mas o número de vítimas ainda não é definitivo, visto que é quase certo que haja mortos no solo, na sequência da queda do aparelho sobre o bairro de Queens.
Título conciso resume artigo
Trecho curto apres. conclusões
Parágrafo de suporte
Detalhes apoiam e ampliam história
![Page 66: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/66.jpg)
Texto Sucinto
Ajude-nos a melhorar o nosso serviço preenchendo o questionário em seguida apresentado. Não é estritamente necessário preencher todos os campos, apenas os assinalados com (*). Se quiser deixar comentários adicionais, existe uma caixa de texto no final do questionário que pode preencher.
(40 palavras)
![Page 67: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/67.jpg)
Texto Sucinto
Ajude-nos a melhorar o nosso serviço preenchendo o questionário em seguida apresentado. Não é estritamente necessário preencher todos os campos, apenas os assinalados com (*). Se quiser deixar comentários adicionais, existe uma caixa de texto no final do questionário que pode preencher.
(40 palavras)
Por favor ajude-nos preenchendo este questionário. Os campos
obrigatórios estão assinalados com um (*).
(13 palavras)
![Page 68: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/68.jpg)
Texto Sucinto
Bem-vindo ao nosso site! Somos a Consulta, uma empresa de consultadoria na área da informática que fará tudo ao seu dispor para o ajudar.
(26 palavras)
![Page 69: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/69.jpg)
Texto Sucinto
Bem-vindo ao nosso site! Somos a Consulta, uma empresa de consultadoria na área da informática que fará tudo ao seu dispor para o ajudar.
(26 palavras)
(0 palavras)
![Page 70: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/70.jpg)
Links reconhecíveis
Neste texto existe um link para informação sobre o produto. Boa sorte a descobrir onde...
![Page 71: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/71.jpg)
Links reconhecíveis
Neste texto existe um link para informação sobre o produto. Boa sorte a descobrir onde...
![Page 72: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/72.jpg)
Links Curtos
... quais os voos que partem do nosso aeroporto nas
próximas horas.
![Page 73: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/73.jpg)
Links Curtos
... quais os voos que partem do nosso aeroporto nas
próximas horas.
o mesmo ou diferentes?
![Page 74: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/74.jpg)
Alvo Reconhecível
![Page 75: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/75.jpg)
Alvo Reconhecível
... para saber mais informação clique aqui.
![Page 76: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/76.jpg)
Alvo Reconhecível
... para saber mais informação clique aqui.
???
![Page 77: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/77.jpg)
Information Scent
Utilizador percebe onde pode ir parar com contexto e texto da âncora...
![Page 78: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/78.jpg)
Alvo Reconhecível
Lei de ???
![Page 79: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/79.jpg)
Links Intrapágina
![Page 80: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/80.jpg)
Imagens e Botões
![Page 81: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/81.jpg)
Imagens para a Web
18MP, 5183x3456, 9MB 640x427, 190KB
![Page 82: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/82.jpg)
Resumo
Importância de páginas bem desenhadas
Princípios Fundamentais
Dez erros mais comuns em desenho Web
Layout
Conteúdo
![Page 83: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/83.jpg)
Referências
Nielsen’s top 10 list
http://www.useit.com/alertbox/9605.html
Web pages that suck
http://www.webpagesthatsuck.com/
User Interface Engineering
http://www.uie.com
![Page 84: 21 - Desenho Páginas Web I - Técnico Lisboa - … de Páginas Web I 21 Cap. 13 – Desenho Para a Web Mudar… para melhor (!?) Enviado por Pedro Bucho (69537) Mudar… para melhor](https://reader031.fdocuments.net/reader031/viewer/2022022008/5ad7f7e67f8b9a991b8cb612/html5/thumbnails/84.jpg)
TPC – Desenho para a Web (cont.)
Ler Cap. 13 do Livro
Secções 13.5 a 13.7