SlideShare uma empresa Scribd logo
A 3ª Área do Design




        Web Design
                      Gustavo Zimmermann
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

• 1975: 100 sites na Arpanet;
• 1982: 315 sites na Internet;
• Hoje: mais de 174 milhões de sites, na Internet.




                                                     web design
webAlpha

           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




                                           web design
webAlpha
           56% - Internet Explorer

           22,75% - Mozilla Firefox

           10,7% - Google Chrome

           6,3% - Safari


           2,28% - Opera

                     Via: Net Applications
                     http://bit.ly/cLNsfS


                               web design
webGerações
webGerações

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)




                                  web design
webGerações
                      • 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

                                  web design
webGerações
                  • 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

                                       web design
webGerações
                    • 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


                                         web design
webGerações

não Somos entendidos
quando...



                 web design
webGerações




              ...queremos estar com
              quem amamos!

                         web design
webGerações


              ...falamos com
              quem amamos!




                         web design
webGerações


         ...a nossa maior atenção é para
         quem amamos!




                                 web design
webGerações


        ...quando não queremos ficar longe de
        quem amamos!




                                  web design
web++
  evolução do conteúdo na Web
web++
apresentação + informação = divulgação
                 1991




web 1.0
   o ontem...




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




  web 2.0
      o hoje...




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




 web 3.0
   o amanhã...




                                          web design
Agência Digital
            Como funciona?
Agência Digital
                            depto.
                           Criação

               depto.
  Cliente    Comercial

                             depto.
                         Desenvolvimento




                              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


                          web design
o Projeto
   Como lidar com projetos web?
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
 depto. Comercial: o briefing




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?




                                                  web design
o Projeto
 depto. Comercial: o briefing




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?



                                                 web design
o Projeto
 depto. Comercial: o briefing



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?

                                                web design
o Projeto
 depto. Comercial: o briefing




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.




                                                  web design
o Projeto
depto. Comercial: o briefing




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




                                               web design
Briefing pronto?
             Reunir a galera!




   Brainstorm já
o Projeto
Benchmarking



• Referências de Marca
• Referências de Negócio
• Referências de Layout




                           web design
o Projeto
Site Map (fluxograma)




  Site Map:
  uma representação
  hierárquica da estrutura
  de um site, composta
  por páginas web.




                             web design
Agência Digital                    Cliente




            Briefing
                                     Cliente   SIM
                             NÃO
              Benchmarking          Validou?


                 Site Map
  depto.
Comercial
                                   depto.
                                   Criação


                                         web design
o Projeto
Wireframe




Wireframe:
documento que rege a
hierarquização dos
elementos/conteúdos.




                       web design
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
o Projeto
       depto.                    depto.                   depto.
     Comercial                 Criação               Desenvolvimento
1.    Contrato            5. Wireframe               12. Des. de Sistemas

2.    Briefing             Validação (com Cliente)   13. Aplicação dos Sistemas
3.    Benchmarking        6. Layout Estrutura        14. Testes
4.    Site Map
                           Validação (com Cliente)
                                                     15. Validação HTML/CSS
Validação (com Cliente)   7. Layout Conteúdo          Validação (com Cliente)
                           Validação (com Cliente)   16. Publicação
                          8. Codificação Estrutura
                          9. Codificação Conteúdo
                          10. Scripts, Animações
                          11. Validação HTML/CSS
                           Validação (com Cliente)
                                                             web design
o Projeto

Problemas de comunicação
durante o projeto


                      web design
o Projeto
Case: Super Iveco




                    web design
Agora Web Design
                   oO/o/
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
Web Design é o cara!
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

           Design

 Gráfico    Digital   Produto


                        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



 Página de abertura?
   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;


                                                         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
Web Design 1.0
             A Era dos Layouts Miguxos
Web Design 1.0




                 web design
Web Design 2.0
                 Layout mais legais :D
Web Design 2.0
• 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
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




                              web design
Layout Web
             Partindo do 3º nível
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




                                        web design

Mais conteúdo relacionado

Mais procurados

Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
Ítalo Waxman
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
Marcos César
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Rennan Martini
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
Felipe Fernandes
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Rodrigo Simoni
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
Rael Max
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
Gustavo Zimmermann
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Carlos Eduardo Kadu
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
Daniel Brandão
 
I love pixels
I love pixelsI love pixels
I love pixels
Ítalo Waxman
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Gilberto Crespo
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
Cristofer Sousa
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
Fábio Flatschart
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
Régis Eduardo Weizenmann Gregol
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
Davidson Fellipe
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Augusto César Albuquerque
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Victor Melo
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
RC Comunicação
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 

Mais procurados (20)

Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Web Design > Visão geral do Web Design
Web Design > Visão geral do Web DesignWeb Design > Visão geral do Web Design
Web Design > Visão geral do Web Design
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
I love pixels
I love pixelsI love pixels
I love pixels
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
SEO, Semantica e HTML5
SEO, Semantica e HTML5SEO, Semantica e HTML5
SEO, Semantica e HTML5
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 

Semelhante a A 3ª Área do Design: Web Design

Producao para web
Producao para webProducao para web
Producao para web
Alex Sanches
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
HTML5 - William Dias - Davi Reine - XVII SACOMP
HTML5 - William Dias - Davi Reine - XVII SACOMPHTML5 - William Dias - Davi Reine - XVII SACOMP
HTML5 - William Dias - Davi Reine - XVII SACOMP
William Dias
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
Renato Bongiorno Bonfanti
 
Produtividade
ProdutividadeProdutividade
Produtividade
Elcio Ferreira
 
Questionário Empresa Webvix
Questionário Empresa WebvixQuestionário Empresa Webvix
Questionário Empresa Webvix
gueste3d3ab
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Sandro Alencar Fernandes
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
Cristiano Gonçalves
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
felipebzr
 
Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05
vincevader
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
Alexandre R. de Castro
 
Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0
Diego Brito
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
Web Pixel - Agência Criativa
 
Carambola 2012
Carambola 2012Carambola 2012
Carambola 2012
estudiocarambola
 
Designer vs programador
Designer vs programadorDesigner vs programador
Designer vs programador
Leonardo "Hackin" Freire
 
Construindo aplicações ricas com Silverlight
Construindo aplicações ricas com SilverlightConstruindo aplicações ricas com Silverlight
Construindo aplicações ricas com Silverlight
Felipe Pocchini
 
Intro web cms
Intro web cmsIntro web cms
Intro web cms
Wander Costa
 
Apresentação WolFi Tecnologias
Apresentação WolFi TecnologiasApresentação WolFi Tecnologias
Apresentação WolFi Tecnologias
Natanael Osvaldo Wolf
 
Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]
Ana Laura Gomes
 

Semelhante a A 3ª Área do Design: Web Design (20)

Producao para web
Producao para webProducao para web
Producao para web
 
Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
HTML5 - William Dias - Davi Reine - XVII SACOMP
HTML5 - William Dias - Davi Reine - XVII SACOMPHTML5 - William Dias - Davi Reine - XVII SACOMP
HTML5 - William Dias - Davi Reine - XVII SACOMP
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
 
Produtividade
ProdutividadeProdutividade
Produtividade
 
Questionário Empresa Webvix
Questionário Empresa WebvixQuestionário Empresa Webvix
Questionário Empresa Webvix
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
 
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerryDesenvolvimento HTML5 para Smartphones e Tablets BlackBerry
Desenvolvimento HTML5 para Smartphones e Tablets BlackBerry
 
Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0Criação de Sites na era da Web 2.0
Criação de Sites na era da Web 2.0
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Carambola 2012
Carambola 2012Carambola 2012
Carambola 2012
 
Designer vs programador
Designer vs programadorDesigner vs programador
Designer vs programador
 
Construindo aplicações ricas com Silverlight
Construindo aplicações ricas com SilverlightConstruindo aplicações ricas com Silverlight
Construindo aplicações ricas com Silverlight
 
Intro web cms
Intro web cmsIntro web cms
Intro web cms
 
Apresentação WolFi Tecnologias
Apresentação WolFi TecnologiasApresentação WolFi Tecnologias
Apresentação WolFi Tecnologias
 
Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]Mobile: web & aplicativos [dicas práticas]
Mobile: web & aplicativos [dicas práticas]
 

Mais de Gustavo Zimmermann

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
Gustavo Zimmermann
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
Gustavo Zimmermann
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
Gustavo Zimmermann
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
Gustavo Zimmermann
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
Gustavo Zimmermann
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
Gustavo Zimmermann
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
Gustavo Zimmermann
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
Gustavo Zimmermann
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
Gustavo Zimmermann
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
Gustavo Zimmermann
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
Gustavo Zimmermann
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
Gustavo Zimmermann
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
Gustavo Zimmermann
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
Gustavo Zimmermann
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Gustavo Zimmermann
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Gustavo Zimmermann
 

Mais de Gustavo Zimmermann (20)

Aula 13 - Livros Proféticos
Aula 13 - Livros ProféticosAula 13 - Livros Proféticos
Aula 13 - Livros Proféticos
 
Aula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-AvaliaçãoAula 12 - Revisão Pré-Avaliação
Aula 12 - Revisão Pré-Avaliação
 
Aula 11 - Livros Poéticos
Aula 11 - Livros PoéticosAula 11 - Livros Poéticos
Aula 11 - Livros Poéticos
 
Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)Aula 9 - Livros Históricos (part. 2)
Aula 9 - Livros Históricos (part. 2)
 
Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)Aula 10 - Livros Históricos (part. 3)
Aula 10 - Livros Históricos (part. 3)
 
Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)Aula 8 - Livros Históricos (part. 1)
Aula 8 - Livros Históricos (part. 1)
 
Aula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-AvaliaçãoAula 7 - Revisão Pré-Avaliação
Aula 7 - Revisão Pré-Avaliação
 
Aula 6 - Deuteronômio
Aula 6 - DeuteronômioAula 6 - Deuteronômio
Aula 6 - Deuteronômio
 
Aula 5 - Números
Aula 5 - NúmerosAula 5 - Números
Aula 5 - Números
 
Aula 1 - História da Bíblia
Aula 1 - História da BíbliaAula 1 - História da Bíblia
Aula 1 - História da Bíblia
 
Aula 3 - Êxodo
Aula 3 - ÊxodoAula 3 - Êxodo
Aula 3 - Êxodo
 
Aula 4 - Levíticos
Aula 4 - LevíticosAula 4 - Levíticos
Aula 4 - Levíticos
 
Aula 2 - Gênesis
Aula 2 - GênesisAula 2 - Gênesis
Aula 2 - Gênesis
 
Aula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas MetodologiasAula 1 - Apologética e suas Metodologias
Aula 1 - Apologética e suas Metodologias
 
Aula 2 - Teologia Natural
Aula 2 - Teologia NaturalAula 2 - Teologia Natural
Aula 2 - Teologia Natural
 
Conciência Política
Conciência PolíticaConciência Política
Conciência Política
 
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
Introdução ao Web Design: Aula 6 - HTML 5 (part. 2)
 
Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)Introdução ao Web Design: Aula 5 - HTML (part. 1)
Introdução ao Web Design: Aula 5 - HTML (part. 1)
 
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
Introdução ao Web Design: Aula 3 - PhotoShop (part. 1)
 
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
Introdução ao Web Design: Aula 4 - PhotoShop (part. 2)
 

A 3ª Área do Design: Web Design

  • 1. A 3ª Área do Design Web Design Gustavo Zimmermann
  • 2. Quem sou eu? Gustavo Zimmermann??? Twitter: @gust4vo LinkedIn: http://br.linkedin.com/in/gust4vo
  • 3. 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
  • 4. webAlpha Como tudo começa?
  • 5. webAlpha • 1975: 100 sites na Arpanet; • 1982: 315 sites na Internet; • Hoje: mais de 174 milhões de sites, na Internet. web design
  • 6. webAlpha 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 web design
  • 7. webAlpha 56% - Internet Explorer 22,75% - Mozilla Firefox 10,7% - Google Chrome 6,3% - Safari 2,28% - Opera Via: Net Applications http://bit.ly/cLNsfS web design
  • 9. webGerações 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) web design
  • 10. webGerações • 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 web design
  • 11. webGerações • 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 web design
  • 12. webGerações • 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 web design
  • 14. webGerações ...queremos estar com quem amamos! web design
  • 15. webGerações ...falamos com quem amamos! web design
  • 16. webGerações ...a nossa maior atenção é para quem amamos! web design
  • 17. webGerações ...quando não queremos ficar longe de quem amamos! web design
  • 18. web++ evolução do conteúdo na Web
  • 19. web++ apresentação + informação = divulgação 1991 web 1.0 o ontem... web design
  • 20. web++ interação + intuição + feedback = colaboração 2004 web 2.0 o hoje... web design
  • 21. web++ receber + compreender + feedback = web semântica 2016??? web 3.0 o amanhã... web design
  • 22. Agência Digital Como funciona?
  • 23. Agência Digital depto. Criação depto. Cliente Comercial depto. Desenvolvimento web design
  • 24. Agência Digital depto. Comercial • Dir. Comercial • Gerente de Projetos • Consultor Comercial • Conector web design
  • 25. Agência Digital depto. Criação • Dir. Criação • UX Designer • Montion Designer • Web Designer • Codificador web design
  • 26. Agência Digital depto. Desenvolvimento • Dir. Desenvolvimento • Hoster • TI • Web Developer • Flash Developer • Programador web design
  • 27. o Projeto Como lidar com projetos web?
  • 28. o Projeto depto. Comercial: o contrato Vídeo: Designers vs. Clientes (http://youtu.be/CYu1cQs4Y5Y) web design
  • 29. 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
  • 30. o Projeto depto. Comercial: o briefing 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? web design
  • 31. o Projeto depto. Comercial: o briefing 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? web design
  • 32. o Projeto depto. Comercial: o briefing 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? web design
  • 33. o Projeto depto. Comercial: o briefing 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. web design
  • 34. o Projeto depto. Comercial: o briefing Vídeo: Placa de STOP (http://youtu.be/GjXXsUujpLI) web design
  • 35. Briefing pronto? Reunir a galera! Brainstorm já
  • 36. o Projeto Benchmarking • Referências de Marca • Referências de Negócio • Referências de Layout web design
  • 37. o Projeto Site Map (fluxograma) Site Map: uma representação hierárquica da estrutura de um site, composta por páginas web. web design
  • 38. Agência Digital Cliente Briefing Cliente SIM NÃO Benchmarking Validou? Site Map depto. Comercial depto. Criação web design
  • 39. o Projeto Wireframe Wireframe: documento que rege a hierarquização dos elementos/conteúdos. web design
  • 41. 2/7 Wireframe: 5 Anos de Firefox
  • 44. 5/7 Wireframe: Coastal Capital Partners
  • 45. 6/7 Wireframe: Vimeo Página de Profile
  • 47. o Projeto depto. depto. depto. Comercial Criação Desenvolvimento 1. Contrato 5. Wireframe 12. Des. de Sistemas 2. Briefing Validação (com Cliente) 13. Aplicação dos Sistemas 3. Benchmarking 6. Layout Estrutura 14. Testes 4. Site Map Validação (com Cliente) 15. Validação HTML/CSS Validação (com Cliente) 7. Layout Conteúdo Validação (com Cliente) Validação (com Cliente) 16. Publicação 8. Codificação Estrutura 9. Codificação Conteúdo 10. Scripts, Animações 11. Validação HTML/CSS Validação (com Cliente) web design
  • 48. o Projeto Problemas de comunicação durante o projeto web design
  • 49.
  • 50. o Projeto Case: Super Iveco web design
  • 52. Web Design Você pode ser um Web Designer?? web design
  • 53. Web Design O que clientes esperam que web designers saibam? Vídeo: O desabafo de um Web Designer: (http://youtu.be/m711mKI54iI) web design
  • 54. Web Design é o cara!
  • 55. 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
  • 56. Web Design Mas o que o Web Designer FAZZ afinal? ‘-.- web design
  • 57. Web Design Design Gráfico Produto web design
  • 58. Web Design Design Gráfico Digital Produto web design
  • 59. 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
  • 60. Web Design conhecimentos • UX Design/UCD/Ergonomia • Arquitetura de Informação • Usabilidade/Navegabilidade • Acessibilidade Digital • Linguagem de Marcação e Formatação web design
  • 61. 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
  • 62. Web Design Usabilidade/Navegabilidade • Cross-browser • 25 pontos do Dr. Peter Mayers http://bit.ly/akmpT web design
  • 63. 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
  • 64. Web Design Acessibilidade Digital Página de abertura? 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; web design
  • 65. 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
  • 66. Web Design Todo o Super Herói tem “arqui-inimigos” web design
  • 67.
  • 68. Web Design Web Design Vs. Web Developer web design
  • 69. Web Design Web Design Vs. Sobrinho O Sobrinho web design
  • 70. Web Design Layout de Sites produzidos por Web Designers web design
  • 71. Web Design Layout de Site produzidos pelo Sobrinho web design
  • 72. Web Design Layout de Blog produzidos por Web Designers web design
  • 73. Web Design Layout de Blog produzido pelo Sobrinho web design
  • 74. Web Design Layout para YouTube produzidos por Web Designers web design
  • 75. Web Design Layout para YouTube produzido pelo Sobrinho web design
  • 76. Web Design 1.0 A Era dos Layouts Miguxos
  • 77. Web Design 1.0 web design
  • 78. Web Design 2.0 Layout mais legais :D
  • 79. Web Design 2.0 • 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
  • 80. Web Design 2.0 Menus de navegação claros web design
  • 81. Web Design 2.0 Menus de navegação claros web design
  • 82. Web Design 2.0 Mais espaçamentos em branco Pouco Espaçamento Bom Espaçamento web design
  • 83. Web Design 2.0 Bloco de introdução web design
  • 84. Web Design 2.0 Bloco de introdução web design
  • 85. Web Design 2.0 Bloco de Mídia web design
  • 87. Web Design 2.0 Layout multi-colunas web design
  • 88. Web Design 2.0 Layout multi-colunas web design
  • 89. Web Design 2.0 Janelas Modelo web design
  • 91. Web Design 2.0 Evolução de um Web Designer 1. Sobrinho Tabela Telmo Junior http://twitpic.com/nao8p web design
  • 92. Web Design 2.0 Evolução de um Web Designer 2. CTRL + C web design
  • 93. Web Design 2.0 Evolução de um Web Designer 3. CTRL + C e Modifica web design
  • 94. Web Design 2.0 Evolução de um Web Designer 4. Insight web design
  • 95. Web Design 2.0 Evolução de um Web Designer 5. Quee Massa http://www.janploch.de web design
  • 96. Layout Web Partindo do 3º nível
  • 97. 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
  • 98. 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
  • 99. Layout Web Trabalhe usando Grid web design
  • 100. Layout Web Estrutura de um site • Topo • Área de Conteúdo • Área de apoio (sidebar) • Rodapé web design
  • 101. Layout Web Estrutura de um site Topo web design
  • 102. Layout Web Estrutura de um site Topo web design
  • 103. Layout Web Estrutura de um site Conteúdo web design
  • 104. Layout Web Estrutura de um site Área de apoio web design
  • 105. Layout Web Estrutura de um site Rodapé web design
  • 106. Ù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
  • 107. Perguntas Gustavo Zimmermann E-mail: gustavozimer@gmail.com Twitter: @gust4vo LinkedIn: http://br.linkedin.com/in/gust4vo web design