Web Design

Gustavo Zimmermann

A 3ª Área do Design

Quem sou eu?

Gustavo Zimmermann???

Twitter: @gust4vo

LinkedIn: http://br.linkedin.com/in/gust4vo

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

webAlpha

Como tudo começa?

webAlpha

web design

• 1975: 100 sites na Arpanet;

• 1982: 315 sites na Internet;

• Hoje: mais de 174 milhões de sites, na Internet.

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

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

webGerações

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)

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

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

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

webGerações

web design

não Somos entendidos quando...

webGerações

web design

...queremos estar com

quem amamos!

webGerações

web design

...falamos com

quem amamos!

webGerações

web design

...a nossa maior atenção é para

quem amamos!

webGerações

web design

...quando não queremos ficar longe de

quem amamos!

web++

evolução do conteúdo na Web

web++

web design

web 1.0 o ontem...

apresentação + informação = divulgação 1991

web++

web design

web 2.0 o hoje...

interação + intuição + feedback = colaboração 2004

web++

web design

web 3.0 o amanhã...

receber + compreender + feedback = web semântica 2016???

Agência Digital

Como funciona?

web design

depto.

Comercial

depto.

Criação

depto. Desenvolvimento

Agência Digital

Cliente

web design

Agência Digital

depto. Comercial

• Dir. Comercial

• Gerente de Projetos

• Consultor Comercial

• Conector

web design

Agência Digital

depto. Criação

• Dir. Criação

• UX Designer

• Montion Designer

• Web Designer

• Codificador

web design

Agência Digital

depto. Desenvolvimento

• Dir. Desenvolvimento

• Hoster

• TI

• Web Developer

• Flash Developer

• Programador

o Projeto Como lidar com projetos web?

web design

o Projeto

depto. Comercial: o contrato

Vídeo: Designers vs. Clientes (http://youtu.be/CYu1cQs4Y5Y)

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

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

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

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

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

web design

o Projeto

Vídeo: Placa de STOP (http://youtu.be/GjXXsUujpLI)

depto. Comercial: o briefing

Briefing pronto? Reunir a galera!

Brainstorm já

web design

o Projeto

Benchmarking

• Referências de Marca

• Referências de Negócio

• Referências de Layout

web design

o Projeto

Site Map: uma representação

hierárquica da estrutura

de um site, composta

por páginas web.

Site Map (fluxograma)

web design

depto.

Comercial

depto.

Criação

Agência Digital

Briefing

Benchmarking

Site Map

Cliente

Cliente

Validou?

SIM NÃO

web design

o Projeto

Wireframe

Wireframe: documento que rege a

hierarquização dos

elementos/conteúdos.

1/7 Wireframe: NationWide / NASCAR

2/7 Wireframe: 5 Anos de Firefox

3/7 Wireframe: Links

4/7 Wireframe: GEOINT2009 (Microsite)

5/7 Wireframe: Coastal Capital Partners

6/7 Wireframe: Vimeo Página de Profile

7/7 Wireframe: CommLogix Wireframe

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)

web design

o Projeto

Problemas de comunicação

durante o projeto

web design

o Projeto

Case: Super Iveco

Agora Web Design

\o\O/o/

web design

Web Design

Você pode ser um Web Designer??

web design

Web Design

O que clientes esperam que web designers saibam?

Vídeo: O desabafo de um Web Designer:

(http://youtu.be/m711mKI54iI)

Web Design é o cara!

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

web design

Web Design

Mas o que o Web Designer FAZZ afinal? ‘-.-

web design

Web Design

Design

Gráfico Produto

web design

Web Design

Gráfico Produto

Design

Digital

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.

web design

Web Design

conhecimentos

• UX Design/UCD/Ergonomia

• Arquitetura de Informação

• Usabilidade/Navegabilidade

• Acessibilidade Digital

• Linguagem de Marcação e Formatação

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

web design

Web Design

Usabilidade/Navegabilidade

• Cross-browser

• 25 pontos do Dr. Peter Mayers http://bit.ly/akmpT

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

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?

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.

web design

Web Design

Todo o Super Herói

tem “arqui-inimigos”

web design

Web Design

Web Design Vs. Web Developer

web design

Web Design

Web Design Vs. Sobrinho

O Sobrinho

web design

Web Design

Layout de Sites produzidos por Web Designers

web design

Web Design

Layout de Site produzidos pelo Sobrinho

web design

Web Design

Layout de Blog produzidos por Web Designers

web design

Web Design

Layout de Blog produzido pelo Sobrinho

web design

Web Design

Layout para YouTube produzidos por Web Designers

web design

Web Design

Layout para YouTube produzido pelo Sobrinho

Web Design 1.0

A Era dos Layouts Miguxos

web design

Web Design 1.0

Web Design 2.0

Layout mais legais :D

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

web design

Web Design 2.0

Menus de navegação claros

web design

Web Design 2.0

Menus de navegação claros

web design

Web Design 2.0

Mais espaçamentos em branco

Pouco Espaçamento

Bom Espaçamento

web design

Web Design 2.0

Bloco de introdução

web design

Web Design 2.0

Bloco de introdução

web design

Web Design 2.0

Bloco de Mídia

web design

Web Design 2.0

Carrosséis

web design

Web Design 2.0

Layout multi-colunas

web design

Web Design 2.0

Layout multi-colunas

web design

Web Design 2.0

Janelas Modelo

web design

Web Design 2.0

Ilustrações

web design

Web Design 2.0

Evolução de um Web Designer

1. Sobrinho Tabela Telmo Junior http://twitpic.com/nao8p

web design

Web Design 2.0

Evolução de um Web Designer

2. CTRL + C

web design

Web Design 2.0

Evolução de um Web Designer

3. CTRL + C e Modifica

web design

Web Design 2.0

Evolução de um Web Designer

4. Insight

web design

Web Design 2.0

Evolução de um Web Designer

5. Quee Massa http://www.janploch.de

Layout Web

Partindo do 3º nível

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

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/

web design

Layout Web

Trabalhe usando Grid

web design

Layout Web

Estrutura de um site

• Topo

• Área de Conteúdo

• Área de apoio (sidebar)

• Rodapé

web design

Layout Web

Estrutura de um site

Topo

web design

Layout Web

Estrutura de um site

Topo

web design

Layout Web

Estrutura de um site

Conteúdo

web design

Layout Web

Estrutura de um site

Área de apoio

web design

Layout Web

Estrutura de um site

Rodapé

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!

web design

Perguntas

Gustavo Zimmermann

E-mail: gustavozimer@gmail.com

Twitter: @gust4vo

LinkedIn: http://br.linkedin.com/in/gust4vo