a 3ª Área do design: web design
DESCRIPTION
Palestra ministrada na 12ª Semana Acadêmica do curso de Design da UnijuíTRANSCRIPT
![Page 1: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/1.jpg)
Web Design
Gustavo Zimmermann
A 3ª Área do Design
![Page 2: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/2.jpg)
Quem sou eu?
Gustavo Zimmermann???
Twitter: @gust4vo
LinkedIn: http://br.linkedin.com/in/gust4vo
![Page 3: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/3.jpg)
path de navegação
1. webAlpha
2. webGerações
3. Uma Agência Digital
4. Um Projeto Digital
5. O Web Designer
6. Layout Web
7. Dúvidas e tomates
![Page 4: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/4.jpg)
webAlpha
Como tudo começa?
![Page 5: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/5.jpg)
webAlpha
web design
• 1975: 100 sites na Arpanet;
• 1982: 315 sites na Internet;
• Hoje: mais de 174 milhões de sites, na Internet.
![Page 6: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/6.jpg)
webAlpha
web design
Tim Berners-Lee Inventor do HTML e diretor da W3C
07 de agosto de 1991:
1º site na Web, construído por
Tim Berners-Lee : http://bit.ly/z1N8L
![Page 7: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/7.jpg)
webAlpha
web design
10,7% - Google Chrome
22,75% - Mozilla Firefox
6,3% - Safari
56% - Internet Explorer
2,28% - Opera
Via: Net Applications http://bit.ly/cLNsfS
![Page 8: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/8.jpg)
webGerações
![Page 9: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/9.jpg)
webGerações
web design
1. Tradicionais (até 1945)
2. Baby-Boomers (1946 a 1964)
3. Geração X (1965 a 1977)
4. Geração Y (a partir de 1978)
![Page 10: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/10.jpg)
webGerações
web design
• Nascidos antes de 1960
• Renda per capta baixa;
• Viviam sem a necessidade de
um computador;
• O computador não era visto
como futuro.
1ª Geração
![Page 11: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/11.jpg)
webGerações
web design
• Nascidos antes de 2010
• Melhor renda per capta ;
• Não vivem sem o computador
(estudos + profissional);
• A utilização global do computador é o
futuro.
2ª Geração
![Page 12: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/12.jpg)
webGerações
web design
• Nascidos antes de 2030
• Renda per capta indiferente;
• Não mais sobrevivem sem o
computador e a Internet;
• A Internet em constante evolução na
utilização do dia-a-dia.
3ª Geração
![Page 13: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/13.jpg)
webGerações
web design
não Somos entendidos quando...
![Page 14: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/14.jpg)
webGerações
web design
...queremos estar com
quem amamos!
![Page 15: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/15.jpg)
webGerações
web design
...falamos com
quem amamos!
![Page 16: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/16.jpg)
webGerações
web design
...a nossa maior atenção é para
quem amamos!
![Page 17: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/17.jpg)
webGerações
web design
...quando não queremos ficar longe de
quem amamos!
![Page 18: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/18.jpg)
web++
evolução do conteúdo na Web
![Page 19: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/19.jpg)
web++
web design
web 1.0 o ontem...
apresentação + informação = divulgação 1991
![Page 20: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/20.jpg)
web++
web design
web 2.0 o hoje...
interação + intuição + feedback = colaboração 2004
![Page 21: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/21.jpg)
web++
web design
web 3.0 o amanhã...
receber + compreender + feedback = web semântica 2016???
![Page 22: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/22.jpg)
Agência Digital
Como funciona?
![Page 23: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/23.jpg)
web design
depto.
Comercial
depto.
Criação
depto. Desenvolvimento
Agência Digital
Cliente
![Page 24: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/24.jpg)
web design
Agência Digital
depto. Comercial
• Dir. Comercial
• Gerente de Projetos
• Consultor Comercial
• Conector
![Page 25: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/25.jpg)
web design
Agência Digital
depto. Criação
• Dir. Criação
• UX Designer
• Montion Designer
• Web Designer
• Codificador
![Page 26: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/26.jpg)
web design
Agência Digital
depto. Desenvolvimento
• Dir. Desenvolvimento
• Hoster
• TI
• Web Developer
• Flash Developer
• Programador
![Page 27: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/27.jpg)
o Projeto Como lidar com projetos web?
![Page 28: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/28.jpg)
web design
o Projeto
depto. Comercial: o contrato
Vídeo: Designers vs. Clientes (http://youtu.be/CYu1cQs4Y5Y)
![Page 29: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/29.jpg)
web design
o Projeto
depto. Comercial: o contrato
• Descrição do projeto, revisões e layout
• Pagamentos
• Direitos autorais e copyright
• Prazos
• Aprovação final
• Cancelamento de projeto
![Page 30: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/30.jpg)
web design
o Projeto
1. Projeto de web site novo ou redesenho de web site antigo?
2. Quais são os objetivos da empresa com o web site?
3. Quais são as páginas (divisões) que a empresa irá precisar que tenha no web site?
depto. Comercial: o briefing
![Page 31: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/31.jpg)
web design
o Projeto
4. Você possui o acompanhamento de alguma agência ou fotografo que possa lhe auxiliar na geração de imagens?
5. Você possui o acompanhamento de alguma agência ou profissional na área de comunicação (RP/ Publicitário/ Jornalista) que possa lhe auxiliar na geração de textos/conteúdo?
depto. Comercial: o briefing
![Page 32: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/32.jpg)
web design
o Projeto
6. Quais sistemas você pensa serem necessários para uso no site (ex.: cadastro de clientes, newsletter, e-commerce, etc...)?
7. Você quer realizar a manutenção do web site de forma autônoma (você gerenciando o conteúdo), ou gostaria de manutenção mensal?
8. Você já possui domínio registrado e hospedagem para o web site?
depto. Comercial: o briefing
![Page 33: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/33.jpg)
web design
o Projeto
9. Você possui alguma data limite para a publicação do web site?
10. Você pode listar abaixo alguns web sites que julgue possuírem características desejadas para o web site da sua empresa? Se possível comentar o que julga bom em cada caso.
depto. Comercial: o briefing
![Page 34: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/34.jpg)
web design
o Projeto
Vídeo: Placa de STOP (http://youtu.be/GjXXsUujpLI)
depto. Comercial: o briefing
![Page 35: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/35.jpg)
Briefing pronto? Reunir a galera!
Brainstorm já
![Page 36: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/36.jpg)
web design
o Projeto
Benchmarking
• Referências de Marca
• Referências de Negócio
• Referências de Layout
![Page 37: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/37.jpg)
web design
o Projeto
Site Map: uma representação
hierárquica da estrutura
de um site, composta
por páginas web.
Site Map (fluxograma)
![Page 38: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/38.jpg)
web design
depto.
Comercial
depto.
Criação
Agência Digital
Briefing
Benchmarking
Site Map
Cliente
Cliente
Validou?
SIM NÃO
![Page 39: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/39.jpg)
web design
o Projeto
Wireframe
Wireframe: documento que rege a
hierarquização dos
elementos/conteúdos.
![Page 40: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/40.jpg)
1/7 Wireframe: NationWide / NASCAR
![Page 41: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/41.jpg)
2/7 Wireframe: 5 Anos de Firefox
![Page 42: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/42.jpg)
3/7 Wireframe: Links
![Page 43: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/43.jpg)
4/7 Wireframe: GEOINT2009 (Microsite)
![Page 44: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/44.jpg)
5/7 Wireframe: Coastal Capital Partners
![Page 45: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/45.jpg)
6/7 Wireframe: Vimeo Página de Profile
![Page 46: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/46.jpg)
7/7 Wireframe: CommLogix Wireframe
![Page 47: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/47.jpg)
web design
o Projeto
1. Contrato 2. Briefing 3. Benchmarking 4. Site Map
depto.
Comercial 5. Wireframe
depto.
Criação
6. Layout Estrutura
Validação (com Cliente)
7. Layout Conteúdo
Validação (com Cliente)
8. Codificação Estrutura
Validação (com Cliente)
9. Codificação Conteúdo
10. Scripts, Animações
Validação (com Cliente)
depto. Desenvolvimento
11. Validação HTML/CSS
12. Des. de Sistemas
13. Aplicação dos Sistemas
Validação (com Cliente)
15. Validação HTML/CSS
14. Testes
16. Publicação
Validação (com Cliente)
![Page 48: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/48.jpg)
web design
o Projeto
Problemas de comunicação
durante o projeto
![Page 49: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/49.jpg)
![Page 50: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/50.jpg)
web design
o Projeto
Case: Super Iveco
![Page 51: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/51.jpg)
Agora Web Design
\o\O/o/
![Page 52: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/52.jpg)
web design
Web Design
Você pode ser um Web Designer??
![Page 53: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/53.jpg)
web design
Web Design
O que clientes esperam que web designers saibam?
Vídeo: O desabafo de um Web Designer:
(http://youtu.be/m711mKI54iI)
![Page 54: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/54.jpg)
Web Design é o cara!
![Page 55: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/55.jpg)
web design
Web Design
O que clientes esperam que web designers saibam?
1. Programação em PHP
2. Ilustração
3. Criatividade
4. Design de logos
5. PSD limpo, código limpo
6. CSS 3
7. Javascript e Frameworks de Javascript
8. Desenvolvimento para aparelhos móveis
![Page 56: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/56.jpg)
web design
Web Design
Mas o que o Web Designer FAZZ afinal? ‘-.-
![Page 57: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/57.jpg)
web design
Web Design
Design
Gráfico Produto
![Page 58: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/58.jpg)
web design
Web Design
Gráfico Produto
Design
Digital
![Page 59: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/59.jpg)
web design
Web Design
A preocupação fundamental do web designer
é agregar os conceitos de usabilidade com o
planejamento da pessoa em destaque
interface, garantindo que o usuário final
atinja seus objetivos de forma agradável e
intuitiva.
![Page 60: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/60.jpg)
web design
Web Design
conhecimentos
• UX Design/UCD/Ergonomia
• Arquitetura de Informação
• Usabilidade/Navegabilidade
• Acessibilidade Digital
• Linguagem de Marcação e Formatação
![Page 61: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/61.jpg)
web design
Web Design
UX Design/UCD/Ergonomia + Arquitetura de Informação
• O que as pessoas vão procurar no site?
• Site um escorregador para o usuário!
• Prevendo a Expansão
![Page 62: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/62.jpg)
web design
Web Design
Usabilidade/Navegabilidade
• Cross-browser
• 25 pontos do Dr. Peter Mayers http://bit.ly/akmpT
![Page 63: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/63.jpg)
web design
Web Design
Acessibilidade Digital
• Site verde e vermelho \o
e se o usuário for daltônico?
• Área de leitura Vs. Sono
• Background
![Page 64: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/64.jpg)
web design
Web Design
Acessibilidade Digital
1. Entrei aqui para encontrar algo;
2. Se acessei seu site, é por que eu quero entrar nele;
3. Quer me parar de tentar me vender algo antes de eu
poder acessar o site?;
4. Eu tenho pressa;
5. Gosto é que nem roupa – cada um tem seu estilo;
Página de abertura?
![Page 65: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/65.jpg)
web design
Web Design
Acessibilidade Digital
Página de abertura?
6. Por que eu -preciso- escutar isso?;
7. Como que faço para pular isto?;
8. Pare de comer meu processador!;
9. Cadê o menu?;
10. A página inicial é a mais importante.
![Page 66: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/66.jpg)
web design
Web Design
Todo o Super Herói
tem “arqui-inimigos”
![Page 67: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/67.jpg)
![Page 68: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/68.jpg)
web design
Web Design
Web Design Vs. Web Developer
![Page 69: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/69.jpg)
web design
Web Design
Web Design Vs. Sobrinho
O Sobrinho
![Page 70: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/70.jpg)
web design
Web Design
Layout de Sites produzidos por Web Designers
![Page 71: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/71.jpg)
web design
Web Design
Layout de Site produzidos pelo Sobrinho
![Page 72: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/72.jpg)
web design
Web Design
Layout de Blog produzidos por Web Designers
![Page 73: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/73.jpg)
web design
Web Design
Layout de Blog produzido pelo Sobrinho
![Page 74: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/74.jpg)
web design
Web Design
Layout para YouTube produzidos por Web Designers
![Page 75: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/75.jpg)
web design
Web Design
Layout para YouTube produzido pelo Sobrinho
![Page 76: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/76.jpg)
Web Design 1.0
A Era dos Layouts Miguxos
![Page 77: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/77.jpg)
web design
Web Design 1.0
![Page 78: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/78.jpg)
Web Design 2.0
Layout mais legais :D
![Page 79: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/79.jpg)
web design
• Menus de navegação claros
• Mais espaços em branco
• Blocos de introdução
• Blocos de mídia
• Carrosséis
• Layout multi-colunas
• Janelas modelos (lightbox)
• Ilustrações
Web Design 2.0
![Page 80: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/80.jpg)
web design
Web Design 2.0
Menus de navegação claros
![Page 81: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/81.jpg)
web design
Web Design 2.0
Menus de navegação claros
![Page 82: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/82.jpg)
web design
Web Design 2.0
Mais espaçamentos em branco
Pouco Espaçamento
Bom Espaçamento
![Page 83: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/83.jpg)
web design
Web Design 2.0
Bloco de introdução
![Page 84: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/84.jpg)
web design
Web Design 2.0
Bloco de introdução
![Page 85: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/85.jpg)
web design
Web Design 2.0
Bloco de Mídia
![Page 86: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/86.jpg)
web design
Web Design 2.0
Carrosséis
![Page 87: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/87.jpg)
web design
Web Design 2.0
Layout multi-colunas
![Page 88: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/88.jpg)
web design
Web Design 2.0
Layout multi-colunas
![Page 89: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/89.jpg)
web design
Web Design 2.0
Janelas Modelo
![Page 91: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/91.jpg)
web design
Web Design 2.0
Evolução de um Web Designer
1. Sobrinho Tabela Telmo Junior http://twitpic.com/nao8p
![Page 92: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/92.jpg)
web design
Web Design 2.0
Evolução de um Web Designer
2. CTRL + C
![Page 93: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/93.jpg)
web design
Web Design 2.0
Evolução de um Web Designer
3. CTRL + C e Modifica
![Page 94: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/94.jpg)
web design
Web Design 2.0
Evolução de um Web Designer
4. Insight
![Page 95: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/95.jpg)
web design
Web Design 2.0
Evolução de um Web Designer
5. Quee Massa http://www.janploch.de
![Page 96: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/96.jpg)
Layout Web
Partindo do 3º nível
![Page 97: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/97.jpg)
web design
Layout Web
• Inspiração (massageie a Criatividade)
• Trabalhe usando um Grid
• Entenda a estrutura básica de um site
• A Página Inicial é uma página totalmente diferente das demais
![Page 98: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/98.jpg)
web design
Layout Web
Inspiração
1. The FWA: http://thefwa.com/
2. The CSS Awards: http://www.thecssawards.com/
3. Creattica: http://creattica.com/
4. ThemeForest: http://themeforest.net/
5. Template Monster: http://www.templatemonster.com/
6. CSS Mania: http://cssmania.com/
7. CSSelite.com: http://www.csselite.com/
8. HTML5 Gallery: http://html5gallery.com/
9. Smashing Magazine: http://www.smashingmagazine.com/
10. Onextrapixel: http://www.onextrapixel.com/
![Page 100: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/100.jpg)
web design
Layout Web
Estrutura de um site
• Topo
• Área de Conteúdo
• Área de apoio (sidebar)
• Rodapé
![Page 101: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/101.jpg)
web design
Layout Web
Estrutura de um site
Topo
![Page 102: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/102.jpg)
web design
Layout Web
Estrutura de um site
Topo
![Page 103: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/103.jpg)
web design
Layout Web
Estrutura de um site
Conteúdo
![Page 104: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/104.jpg)
web design
Layout Web
Estrutura de um site
Área de apoio
![Page 105: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/105.jpg)
web design
Layout Web
Estrutura de um site
Rodapé
![Page 106: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/106.jpg)
web design
Ùltimas coisas
• Certificações Vs. Experiências
• Meu foco é:
O que eu gosto? NÃO!
O que o Cliente gosta? NÃO!
O que gera Resultado? SIM!
![Page 107: A 3ª Área do Design: Web Design](https://reader036.vdocuments.us/reader036/viewer/2022062614/5479eb4fb4795983098b48ec/html5/thumbnails/107.jpg)
web design
Perguntas
Gustavo Zimmermann
E-mail: [email protected]
Twitter: @gust4vo
LinkedIn: http://br.linkedin.com/in/gust4vo