Click here to load reader

Manual de Web Design Responsivo - tatum.com.br · PDF fileArt Direction..... 31 Use mockups para apresentar para o cliente ..... 32 Design

  • View
    216

  • Download
    0

Embed Size (px)

Text of Manual de Web Design Responsivo - tatum.com.br · PDF fileArt Direction..... 31 Use mockups...

  • 1www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.br

  • 2www.chiefofdesign.com.br

    Sumrio

    Apresentao ....................................................................................................................................3

    Como surgiu o Design Responsivo (RWD)? ...........................................................................7

    Elementos do Design Responsivo .............................................................................................9

    Resolues Comuns .................................................................................................................... 12

    Contedo First ............................................................................................................................ 13

    Wireframe para comear ........................................................................................................... 14

    Grids para organizar e adaptar ................................................................................................ 16

    Prefira cones, CSS e fontes a imagens .................................................................................. 26

    Otimize as suas imagens ........................................................................................................... 27

    Dispositivos com Tela de Retina .............................................................................................. 28

    Use medidas relativas ao invs de absolutas ..................................................................... 29

    Utilize somente o necessrio ................................................................................................... 30

    Art Direction ................................................................................................................................... 31

    Use mockups para apresentar para o cliente ..................................................................... 32

    Design Responsivo x Design Fluido....................................................................................... 33

    Design Responsivo (RWD) ou Design Adaptativo (AWD) ............................................. 34

    Consideraes Finais ................................................................................................................... 37

    Referncias ...................................................................................................................................... 38

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.br

  • 3www.chiefofdesign.com.br

    Me lembro que comecei a desenvolver as minhas primeiras pginas web por volta de 2008/2009. Eu peguei uma poca boa, pois os padres web estavam se fortificando cada vez mais e os sites feitos com tabelas, um jeito de se estruturar sites atravs de tabelas html, j estavam em decadncia.

    Nessa poca j se comeava a se pensar sobre web design responsivo (apesar que ainda tive que lidar com as horrveis tabelas), mas ainda era muito pouco e esse termo ainda nem existia. Normalmente os web designers criavam no Photoshop, no mximo, uma verso desktop e outra para mobile (por vezes eles eram at bem diferentes.) E quando isso ia para o cdigo a mesma coisa acontecia: criava-se um site para desktop e outro para mobile e no raro essa verso mobile era em tabelas.

    Apesar de naquela poca no se levar to a srio o conceito que temos hoje de design responsivo a preocupao de se criar layouts que funcionassem bem e com mesma qualidade em vrios dispositivos j era um tanto real e crescia rapidamente, praticamente na mesma medida em que se crescia o acesso das pessoas aos smartphones e tablets.

    Hoje em dia impossvel ao se criar uma interface web no se pensar na responsividade, ou seja, na adaptao do site para vrias resolues, qui todas que se pode alcanar.

    Este e-book vem para te ajudar nessa questo fundamental na criao de sites que se chama Design Responsivo ou de forma abreviada RWD.

    O que voc encontrar neste e-book?

    A ideia deste e-book te ajudar a projetar um site responsivo mesmo antes de implement-lo no cdigo. Os cdigos HTML, CSS e Javascripts so essenciais

    Apresentao

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.br

  • 4www.chiefofdesign.com.br

    para o funcionamento do Design Responsivo, entretanto neste e-book no iremos a fundo nessa questo, pois ns do Chief j temos um e-book Fluncia em HTML e CSS (voc pode adquiri-lo aqui) onde introduzimos o assunto.E tambm porque este e-book ficaria muito longo e fugiria do principal objetivo dele: ajudar voc web designer (ou criativo que trablalha com web) a pensar e projetar um site responsivo independente do seu grau de conhecimento em cdigos. Ento a ideia te ajudar a comear a criar e projetar um design responsivo j na parte da elaborao do Design.

    Muitos web designers criam um site desktop e depois ajeitam o site para ser responsivo. Ns no queremos isso. Queremos que pense no funcionamento, na usabilidade, na experincia do usurio desde a criao do site no Photoshop (ou no seu software favorito).

    Quando comecei a criar para web crivamos um layout para 800x600, depois para 1024x768...

    No momento atual no devemos pensar em qual resoluo e sim na melhor experincia que podemos proporcionar aos usurios independentemente do tamanho da tela e que o design seja capaz de atender as caractersticas do dispositivo ao qual est sendo aplicado.

    Design se trata somente daqulio que se v, mas tambm como funciona como um todo.

    Ento venha comigo e preste ateno nas orientaes, dicas e macetes deste e-book. Bele?

    Siga-me os bons! :D

    Esta obra est licenciada com uma Licena Creative Commons Atribuio-NoComercial-CompartilhaIgual 4.0 Internacional.

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.brhttp://www.ebookhtmlcss.com

  • 5www.chiefofdesign.com.br

    Sobre o Autor

    David Arty o fundador do Blog Chief of Design.

    natural de So Paulo, Brasil.

    Graduado em Design Grfico e for-mado em Tcnico em Multimdia.

    Trabalha como Web Designer des-de 2009.

    Autodidata por natureza, trabalhou em agncias, empresas de TI, stdios, entre outros. Atua tambm como freelancer e em algumas temporadas ministra treinamentos de Web Design.

    Ama comunicao e criao. En-controu no Design e no Desenvolvi-mento Front-End formas de unir e atuar com essas duas coisas.

    Por isso um entusiasta por tudo que envolve design e web, e tenta transformar ideias loucas e com-plexas em peas simples, atrativas, bonitas e funcionais.

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.br

  • 6www.chiefofdesign.com.br

    O Chief of Design um blog que fala sobre Web Design, Front-End, Design Grfico, entre outras coisas.

    O intuito do blog contribuir, prin-cipalmente, com quem est inician-do na rea e que est buscando por aprendizado e respostas para suas dvidas em relao as essas reas.

    O blog segue uma linha instrucion-al, ou seja, o objetivo compartilhar conhecimento e servir de refern-cia para ajudar profissionais, princi-palmente os iniciantes, da rea cri-ativa a produzirem, criarem, e quem sabe, por que no, e se tornarem Chief nesse segmento.

    Para saber mais acesse: www.chiefofdesign.com.br

    Sobre o Blog

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.br

  • 7www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    A internet surgiu em 1990 com o cientista Tim Berners-Lee, inventor da web e fundador do W3C (organizao sem fins lucrativos que tem a misso de orientar os desenvolvedores para o uso de boas prticas para que a web seja acessvel para todos de forma igual). Naquela poca os sites eram todos mui-tos simples em termos visuais e tambm ainda no tnhamos internet mvel, smartphones, tablets e etc. Tudo mudou muito rpido. A partir dos anos 2000, com a chegada dos dif-erentes dispositivos e das diferentes possibilidades de acesso a internet, a necessidade de se criar sites que ga-rantissem uma boa experincia, inde-pendente da resoluo, foi crescendo e a soluo ideal (pelo menos at ag-ora) surgiu no dia 25 de maio de 2010 com o desenvolvedor Ethan Marcotte.

    Ethan escreveu um artigo no famoso site Alispart (veja aqui) que mudaria completamente a forma de desenvolvimento de layouts para a web. O artigo abordava a mudana na forma de uso da web com o crescimento, que s au-mentava, de usurios mobile e como isso afetava (em 2010) as empresas que necessitavam que seus sites tivessem uma boa performance e experincia tambm nos novos dispositivos.

    A grande sacada do artigo foi a comparao com um movimento da arquite-tura ps-moderno, tendo com um dos principais nomes o arquiteto Nicholas Negroponte, que trabalhava para criar ambientes adaptveis e sustentveis as condies j existentes.

    Como surgiu o Design Responsivo (RWD)?

    http://www.chiefofdesign.com.brhttp://www.chiefofdesign.com.brhttp://alistapart.com/article/responsive-web-design

  • 8www.chiefofdesign.com.br

    Manual de Web Design Responsivo

    Com isso Ethan mostrou que era preciso criar um layout adaptvel, inteligente e que funcionasse independente das resolues e mdias usadas.

    Esse artigo mudou a forma de pensar no desenvolvimento de sites em todas as camadas: desde a criao a at o desenvolvimento.

    Hoje em dia o RWD uma realidade e criar uma interface para web sem se pensar na responsividade cometer um erro crasso.

    Mais do que criar um layout responsivo o RWD trouxe a importncia de se pensar no visitante garantindo que seu site seja acessvel ao maior nmero de dispositivos e com uma navegao agradvel tambm nos dispositivos menores.

Search related