Design Responsivo na prática: do rascunho ao digital

responsivo_web_mediaVocê já convenceu o seu chefe ou cliente que Design Responsivo é a última bolacha de chocolate do pacote, já sabe como trabalhar com media queries e como desenvolver códigos semânticos. Mas a dúvida ainda persiste – por onde começar? Você não está sozinho. Esta é uma dúvida bem frequente. Por isto esse artigo está direcionado com dicas de prototipagem para design responsivo coletando algumas ferramentas úteis.

Neste artigo vamos criar juntos um layout do wireframe ao design final. Assim você poderá acompanhar um processo passo-a-passo e adapta-lo para o seu fluxo de trabalho pessoal. Não tenho a pretensão de criar um guia definitivo, nem comentar técnicas de desenvolvimento mais avançadas. Mas tenho certeza que estas dicas vão ser um bom ponto de partida para você iniciar o seu projeto. Vamos a elas!

O conteúdo é o rei

O primeiro passo para projetar – não apenas um site responsivo, mas qualquer layout para a internet – é o inventório de conteúdo. É ele que vai ditar qual é a melhor estrutura para o layout. Raramente o seu cliente vai possuir os textos, videos e imagens finais prontinhos para você diagramar. Mas o ideal é sempre ter ao menos uma noção de qual é o tipo de conteúdo que você pretende utilizar. Para isto é importante montar um briefing – sim, mesmo se o site for para você mesmo. Isto pode variar bastante de complexidade, mas o ideal é saber a resposta de algumas perguntas básicas sobre o tipo de conteúdo que você pretende apresentar para o mundo. O que você pretende exibir na página inicial? Notícias? Serviços? Produtos? Imagens? Qual o tamanho médio dos textos? Existirá um espaço destinado a anúncios publicitários? Qual é o formato do logotipo? Com estas respostas em mãos esta na hora de organizar todos estes elementos em uma estrutura lógica.

Vamos então projetar um layout de uma página inicial de uma empresa fictícia que deve conter as seguintes informações:

-Logotipo
-Navegação
-Banner apresentando produtos e serviços
-Blocos com imagens e textos curtos
-Créditos

Por onde começar o layout?

A resposta é bem simples. Pelo papel. Não importa se você vai usar um bloco de notas velho, o verso de um guardanapo, um template impresso da internet ou um caderno especialmente projetado para este fim, comece por um rascunho de wireframe no papel. Eu costumo desenhar basicamente duas coisas. Uma teia de navegação (“Que-link-leva-para-onde”) e o esqueleto básico do site. Não precisa ficar bonito. Minha habilidade para desenho se resume em bonecos de palito. Ainda assim é fácil criar um wireframe. Use quadrados para imagens e linhas para texto. O importante é você – e o resto da sua equipe se for o caso – terem um ponto de partida. O ideal é criar ao menos três versões principais: desktops, tablets e smartphones. Estas categorias são meio utópicas já que existem centenas de dispositivos que ficam no meio termo, mas você precisa ter um ponto de partida, certo? Escolher por qual dos três esqueletos começar é uma questão bem pessoal. Alguns advogam firmemente o mobile first, mas aqui por uma questão de didática vamos começar pelo desktop.

Grids são seus amigos

Design responsivo é basicamente como montar um quebra cabeça onde você pode esticar, encolher, quebrar e dobrar estruturas. Realizar esta tarefa será muito mais fácil se você construir um layout sustentado por um grid.
Não é absolutamente necessário utilizar um grid em seu CSS (embora seja uma prática recomendável), mas se o seu wireframe básico estiver organizado neste formato ajuda bastante na hora de projetar o design de maneira mais fluida, simétrica e organizada. Isto por que você pode simplesmente re-arranjar os blocos e colunas do seu layout de maneira mais lógica e matemática, o que vai refletir em uma maior coesão do design final.

Esta parte do fluxo de trabalho é bem parecida com criar um layout para design “normal”. O primeiro passo portanto é criar o tal do grid, basicamente um conjunto de linhas “invisiveis” que vão sustentar o seu design. Pense que você vai ter que quebrar esta estrutura em pedaços menores e, para manter a simetria o ideal é escolher um número par que possa ser divisível por 2, 3 e/ou 4… Por isto grids de 12, 16, 18 ou 24 colunas são bem comuns. (Você pode escolher o número que quiser. Não se esqueça do espaço das margens entre as colunas.

O wireframe

Se você precisar reescrever completamente todos os elementos do CSS você está fazendo design adaptativo, o que tem seus métodos mas não é responsivo.

Design responsivo é focado na economia. Economia de tempo, economia de peso de arquivos, economia de código. Pense em escrever estruturas que, embora sofram adaptações, possam ser re-aproveitadas.

Desktops

Este é o exemplo de wireframe que vamos criar passo-a-passo para o nosso exemplo. A estrutura é bem simples: um logotipo no canto superior esquerdo, um menu no topo a direita, um banner, 4 destaques com texto e foto e um rodapé.

Este é o meu rascunho inicial:

wireframe

E agora o mesmo modelo recriado no Photoshop:

wireframe-digital

Tablets

A técnica para adaptar esta estrutura para as outras versões é simples. Diminua o número de colunas no grid. Se inicialmente tinhamos 16 colunas no desktop, teremos 10 no tablet e 4 no smartphone, por exemplo. O conteúdo deve se re-arranjar para caber nesta estrutura menor. Então no tablet ao invés de 4 destaques lado-a-lado temos 2 fileiras com 2 destaques cada. Para adequar-se a estas mudanças as imagens ficaram maiores. Outra modificação foi um ajuste no tamanho do texto do menu.

wireframe-tablet

Smartphones

Como a tela dos smartphones é ainda menor, é necessário re-arranjar as estruturas novamente e fazer alguns outros ajustes. Isto não significa necessariamente diminuir os elementos de tamanho. Lembre-se que a maior parte dos dispositivos móveis utilizam touch screens. Você deve adaptar os elementos considerando esta área de toque. Links muito pequenos e juntinhos são difíceis selecionar. O ideal é que o usuário possa navegar no site sem precisar dar zoom. Por isto optei por colapsar os elementos em um menu drop-down. Os destaques agora ocupam o espaço total do wrap. Optei por juntar os 4 destaques em uma navegação estilo slider (navegáveis através de seletores em forma de “bolinhas”). Outra mudança estetica significativa foi o banner. Como pretendo incluir texto em HTML com os serviços principais da empresa optei por deixa-lo em uma caixa preta abaixo da foto. Desta maneira as imagens ficam mais visíveis e o formato não prejudica a leitura do texto.

wireframe-smartphone

Resoluções

Existem dezenas de resoluções diferentes e, embora este seja o objetivo final, é bem difícil ter um layout que vai ficar perfeito a cada ponto de quebra (difícil, não impossível). O ideal, portanto, é ter em mente quais são os formatos mais comuns e focalizar para que ao menos nestes estágios o design esteja funcionando perfeitamente. Considere portanto estas resoluções básicas:

-1200 pixels – Desktops com monitores widescreen.
-960 pixels – Tablets em formato paisagem e monitores antigos.
-768 pixels – Tablets em formato retrato.
-480 pixels – Smartphones em formato paisagem.
-320 pixels – Smartphones em formato retrato.

Apresentação

Essas etapas são importantes para o bom desenvolvimento de um website responsivo. Desenvolver o wireframe e o layout para serem aprovados pelos clientes antes de partirmos para etapa de desenvolvimento do HTML/CSS. Mesmo sem ter nenhum conteúdo fornecido previamente pelo cliente, fazer um esforcinho a mais e utilizar imagens e textos parecidas com as finais para ajudar na aprovação do seu layout junto ao cliente. Isto acontece por que, ao contrário de nós designers e desenvolvedores, as pessoas “normais” possuem naturalmente uma certa dificuldade de abstrair que aqueles quadrados e caixinhas são um site. Adicionar imagens e textos a um tema pode dar mais trabalho, mas é acrescentar contexto e propósito ao seu design, o que por sua vez causa muito mais empatia e identificação, conforme exemplo abaixo de uma empresa fictícia:

wifreframe

Mesmo com um conteúdo fictício aplicado ainda é difícil de imaginar como o produto final vai se comportar online, principalmente no caso de dispositivos móveis. Para que o cliente possa visualizar como o layout vai se comportar é interessante criar os layouts dos demais dispositivos, conforme abaixo:

mockup-ipad

mockup-smartphone

Conclusão

Bem, agora você já sabe como criar um protótipo de design responsivo. Com o layout aprovado entra a segunda etapa: colocar ele para funcionar, através do HTML.

Boa Sorte!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *