SlideShare ist ein Scribd-Unternehmen logo
1 von 98
Design Adaptável - Palestra ux dia INFNET
“O controle que os designers têm da mídia impressa, e frequentemente
desejam na Web, é simplesmente em função das limitações da página
   impressa. Nós devemos aceitar o fato de que a Web não tem os
          mesmos limites, e projetar para esta flexibilidade.
   Contudo, primeiro devemos aceitar o fluxo e refluxo das coisas.”


     A Dao of Web Design por John Allsopp, 10 de abril de 2000




                            http://goo.gl/wf6I
Como temos
 feito sites
 até agora
Como temos
 feito sites
 até agora
      Briefing


    Pesquisa e
   Conceituação


   Arquitetura da
    Informação


    Wireframes




            L a you t
Mancha gráfica
Web site em um monitor “convencional”
Web site em um monitor grande
Web site no smartphone
Design Gráfico

            Conceito

Projeto#1   Projeto#2   Projeto#3
Web Design

            Conceito

            Projeto#1


17"   24"               TV   game
Alguns
exemplos
Desktop 17"
Desktop 22"
Smartphone Xperia x10
Desktop 17"




w i dg e t
Desktop 22"
Smartphone Xperia x10
1
1, 2
1, 2, 3
1, 2, 3, 4
1, 2, 3, 4, 5
1, 2, 3, 4, 5, 6
1, 2, 3, 4, 5, 6, 7, ...
Qual é o
 problema
desta abor-
  dagem?
Nós temos que supor qual é a resolução do usuário.


                                                                                             Smart Phone
                                                                                                 240 x 320
                                                                                                        4:3
                                                                                          Palm Treo
24’’            21’’               19’’          17’’         14’’                        320 x 320
1920 x 1200     1600 x 1200        1280 x 1024   1152 x 864   800 x 600                          1:1
                                                                                   iPhone
5:3             4:3                5:4           4:3          4:3                320 x 480
                                                                                        3:2
                                                                        Xperia X10
                                                                         480 x 854
                                                                              16:9




                              Desktops                                             Smartphones
Em resoluções de 1024 x 768 (17”)



 Sistema Operacional                                     Navegador           Área útil (px)
 Mac OS X                                                Safari              909 x 519
 Mac OS X                                                Firefox             909 x 507
 Windows Vista (7)                                       Internet Explorer   849 x 621
 Windows Vista (7)                                       Firefox             849 x 608
 Windows XP                                              Internet Explorer   998 x 615
 Windows XP                                              Firefox             998 x 622
 Em todos os sistemas e navegadores                                          849 x 507

                                                                                         et
                                                                                wi d g


Fonte: http://www.designerstoolbox.com/designresources/safearea/compare
Segundo o The Mobile Internet Report
produzido pelo MORGAN STANLEY RESEARCH em 2009,
        o acesso a Web via dispositivos móveis
         irá superar o de desktops em 5 anos.
Teste de usabilidade promovido pela Mozilla Labs

            9.667 usuários em 5 dias




                               http://goo.gl/KMLK
TV tablets
celular GPS
  vídeo games
TV tablets
celular GPS
  vídeo games
TV tablets
celular GPS
  vídeo games




escolhas difíceis
       >




   projetistas
TV tablets
celular GPS
  vídeo games

              Experiência
              do usuário
escolhas difíceis      Acessibilidade.
       >




   projetistas        % é melhor que PX
Layout
Fluido ou Líquido
  % ao invés de px

       Proporção != Exatidão

            Pouco controle do layout
Proporção perfeita   ao invés de     Pixel perfeito

               Regra dos terços

      33.33%         33.33%                 33.33%
                                   33.33%    33.33%            33.33%


                                                      33.33%     33.33%   33.33%
Proporção perfeita   ao invés de   Pixel perfeito

    Proporção áurea =~ 1,618033989

            61.8%                      38.2%
                                   61.8%       38.2%
Proporção perfeita   ao invés de   Pixel perfeito

      Só a prática leva a perfeição

            50%




                               50%



                                            #IEfail
Design Adaptável - Palestra ux dia INFNET
1680px
1280px
1024px
800px
800px
480px
Design Adaptável - Palestra ux dia INFNET
até 800px
3º Design Adaptável
2º Responsive Web Design     http://goo.gl/aVHo


1º Responsive Architecture   http://goo.gl/bvUF
Design Adaptável
              CSS3

     width                 color
     height                color-index
     device-width          monochrome
     device-height         resolution
     orientation           scan
     aspect-ratio          grid
     device-aspect-ratio


                                         http://goo.gl/oKIB
Design Adaptável
                       CSS3

@media query

   > @media (min-width: 800px)
     Esta janela tem no mínimo 800px de largura?


   > @media screen and (max-device-width: 240px)
     Este dispositivo é uma tela e essa tela tem no máximo 240px de largura?


   > @media handheld and (orientation: landscape)
     Este é um dispositivo portátil e está no sentido horizontal?
Design Adaptável
                      Suporte em desktops

 > Navegadores com suporte a @media queries

   Safari 3+              Opera 7+
   Chrome                 IE9
   Firefox 3.5+


 > E o Internet Explorer 6-8?
  http://code.google.com/p/css3-mediaqueries-js
Design Adaptável
                   Suporte em smartphones

                    sim                               não
Opera Mobile   iPhone       Firefox           IE Mobile
Opera Mini     Android      MicroB            BlackBerry old
               Dolfin                         NetFront
               BlackBerry                     Obigo
               Phantom
               Bolt
               Symbian *
               S40 *


   Presto        WebKit        Gecko
                                 fonte: www.quirksmode.org/mobile
Design Adaptável
        Exemplo 1
Design Adaptável
        Exemplo 2

                    http://goo.gl/CBR5
1680px
1280px
1024px
800px
480px
320px
240px
Design Adaptável
        Exemplo 3

                    http://goo.gl/giz7
1680px
1280px
800px
480px
Design Adaptável
        Exemplo 4

                    http://goo.gl/KAl4
1680px
1280px
1024px
800px
-800px
Design Adaptável
        Exemplo 5

                    http://goo.gl/oZaO
1680px
1024px
800px
-800px
Design Adaptável
                Arquitetura da Informação



 > Selecionando os itens mais e menos importantes

 > Alterando os nomes de links e botões

 > Alterando o posicionamento das partes do site
Design Adaptável
                    Wireframes... muitos!


 > Variações das principais páginas


        >                                >

240px       800px      1024px   1280px       1680px
            640px               1440px
            480px
            320px
1680px
1440px   1280px   1024px
800px   640px   480px   320px   240px
Design Adaptável
      Áreas de arraste

                         > Toque rápido

                         > Toque prolongado

                         > Toque prolongado com arraste

                         > Dois toques rápidos
Exemplo A    Exemplo B

Resumo não é link <   > Resumo é link
Design Adaptável
                   Palheta de cor

   > Título e texto corrido



   > Títulos de seções e textos de apoio que não são conteúdo do post



   > Título da seção de posts em destaque



   > Links e botões
1680px
1440px
1280px
1024px
800px




640px




480px




320px




240px
1680px
1440px
1280px
1024px
800px




640px




480px




320px




240px
Design Adaptável
        iPod screenshot
Design Adaptável
        iPod screenshot
Design Adaptável - Palestra ux dia INFNET
Design Adaptável
         Obrigado! :-)



        > @bruno_barros

        > bruno@brunobarros.com

        > www.designadaptavel.com.br

Weitere ähnliche Inhalte

Ähnlich wie Design Adaptável - Palestra ux dia INFNET

Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...INdT
 
[TDC2013] Windows Phone 8 e Windows 8 Better together
[TDC2013] Windows Phone 8 e Windows 8 Better together[TDC2013] Windows Phone 8 e Windows 8 Better together
[TDC2013] Windows Phone 8 e Windows 8 Better togetherOsvaldo Daibert
 
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web appsRaymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web appsINdT
 
Be Water My Friend - Layout Fluido com Columnal
Be Water My Friend - Layout Fluido com ColumnalBe Water My Friend - Layout Fluido com Columnal
Be Water My Friend - Layout Fluido com ColumnalNícolas Iensen
 
Do impresso para o tablet
Do impresso para o tabletDo impresso para o tablet
Do impresso para o tabletdualpixel
 
Desenvolvimento Mobile Web & Software Livre - Flisol cg
Desenvolvimento Mobile Web & Software Livre - Flisol cgDesenvolvimento Mobile Web & Software Livre - Flisol cg
Desenvolvimento Mobile Web & Software Livre - Flisol cgBruno Fernandes "PorKaria"
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformadorHenrique Melo
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformadorjfigueiredo17
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformadorfpifsma
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformadorrita_1987
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive DesignEdu Agni
 

Ähnlich wie Design Adaptável - Palestra ux dia INFNET (20)

Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...Raymundo ferreira   desenvolvendo apps com html e java script no windows phon...
Raymundo ferreira desenvolvendo apps com html e java script no windows phon...
 
[TDC2013] Windows Phone 8 e Windows 8 Better together
[TDC2013] Windows Phone 8 e Windows 8 Better together[TDC2013] Windows Phone 8 e Windows 8 Better together
[TDC2013] Windows Phone 8 e Windows 8 Better together
 
Phonegap
PhonegapPhonegap
Phonegap
 
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web appsRaymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
Raymundo Ferreira - Desenvolvimento de aplicativos S40 com Web apps
 
Be Water My Friend - Layout Fluido com Columnal
Be Water My Friend - Layout Fluido com ColumnalBe Water My Friend - Layout Fluido com Columnal
Be Water My Friend - Layout Fluido com Columnal
 
Do impresso para o tablet
Do impresso para o tabletDo impresso para o tablet
Do impresso para o tablet
 
Desenvolvimento Mobile Web & Software Livre - Flisol cg
Desenvolvimento Mobile Web & Software Livre - Flisol cgDesenvolvimento Mobile Web & Software Livre - Flisol cg
Desenvolvimento Mobile Web & Software Livre - Flisol cg
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
Ferramentas eformador
Ferramentas eformadorFerramentas eformador
Ferramentas eformador
 
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEB
 
Foc tecnologia 09
Foc tecnologia 09Foc tecnologia 09
Foc tecnologia 09
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Browser Mobile - Firefox
Browser Mobile - FirefoxBrowser Mobile - Firefox
Browser Mobile - Firefox
 

Design Adaptável - Palestra ux dia INFNET