![Page 1: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/1.jpg)
INTERNET ePROGRAMAÇÃO WEB
LAYOUT
![Page 2: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/2.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Layout é um esboç
o ou rascunho que m
ostra
a estrutura física de
uma página de um
jornal,
revista ou página na
internet (como um
blog, por exemplo).
O layout engloba ele
mentos como
texto, gráficos, imag
ens e a forma como
eles
se encontram em u
m determinado esp
aço.
![Page 3: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/3.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE Surpreenda! Como?
CRIATIVIDADE!!!
![Page 4: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/4.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE Surpreenda!
CRIATIVIDADE!!!
![Page 5: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/5.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Evoluir!
Experimentar!
Mudar!
![Page 6: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/6.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Precisamos sair da
convenção do layout.
Entender o negócio
e vivenciar
o projeto que estam
os trabalhando.
![Page 7: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/7.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Como fazer algo que você não
possui conhecimento?
✓ Faça perguntas?!✓ O ‘cara’ que fez esse site já acessou alguma vez?✓ Qual caminho deve ser memorizado?✓ Qual o público alvo?✓ Qual o fluxo de acesso?
![Page 8: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/8.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
É possível fazer um
projeto
Surpreendente? Co
mpare.
✓ Falta de ideias?✓ Referências?✓ Similares?✓ Concorrentes?✓ O que deu certo?✓ O que não funciona?
![Page 9: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/9.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Que cores vou usar?
![Page 10: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/10.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Que cores
vou usar?
![Page 11: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/11.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
![Page 12: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/12.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Acessibilidade
A expressão acessibilidade Web refere-s
e a prática
inclusiva de fazer we
bsites
que possam ser utili
zados por todas as
pessoas que tenham
deficiência ou não.
![Page 13: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/13.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE Acessibilidade
![Page 14: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/14.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE
Design Responsivo
Elaborar sites para f
ornecer uma ótima
experiência
de visualização, fácil
leitura e navegação
com um mínimo de
redimensionamento
e visionamento,
para uma ampla gam
a de dispositivos
![Page 15: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/15.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITEDesign Responsivo
![Page 16: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/16.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE Velocidade
![Page 17: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/17.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 18: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/18.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 19: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/19.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 20: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/20.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 21: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/21.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 22: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/22.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 23: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/23.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 24: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/24.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE CUIDADO!!!
![Page 25: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/25.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE LEGAL!!!
![Page 26: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/26.jpg)
Internet e Programação Web - Aula 02
Projeto de Desenvolvimento WEB
LAYOUT DE SITE DICA FINAL!!!
Você também
é um USUÁRIO!
![Page 27: Projeto de Desenvolvimento Web - Aula 02 - Layout](https://reader037.vdocuments.site/reader037/viewer/2022110120/557decc5d8b42a8b578b48c7/html5/thumbnails/27.jpg)
Internet e Programação Web - Aula 02
Vamos criar nosso
Layout?
Projeto de Desenvolvimento WEB