Lembra dos velhos tempos? Você sabe de que dias eu estou falando; os dias não muito tempo atrás, quando costumávamos projetar sites para larguras fixas. Olhando para trás agora eles parecem um tempo tão simples; um momento mais feliz; uma época em que eu podia recitar todas as fontes que estavam disponíveis para usar online sem pensar duas vezes. A verdade é que o Responsive Web Design mudou tudo. O mundo era plano e agora é redondo, eu era cego e agora vejo, a web era pixels e agora são porcentagens.
Com a introdução do RWD, é vital que nós, designers, desenvolvamos nosso fluxo de trabalho para melhor atender às demandas da nova web. Muitos de nós expressaram nossas frustrações sobre como a abordagem de pixels fixos do Photoshop é inadequada para projetar os layouts de fluidos necessários para um site responsivo, mas nenhuma alternativa útil foi oferecida. O mundo do web design está desesperado por um software personalizado construído a partir do zero com o RWD em mente. Produtos como o Adobe Reflow são um ótimo começo, pois mostram que a Adobe está, pelo menos, trabalhando em uma solução, mas depois de passar algumas horas com ela no fim de semana, vejo que ainda tem um longo caminho a percorrer antes de se tornar um adição útil ao meu fluxo de trabalho. Com a gente estando no limbo entre um software pré-histórico e a promessa do que está por vir amanhã, temos que criar fluxos de trabalho alternativos para acomodar as deficiências do nosso atual 'software de design', introduzindo outras ferramentas e procedimentos que ajudarão a preencher a lacuna entre pixel fixo e capacidade de resposta a fluidos.
O que se segue não é de forma alguma uma lista de como os projetos de RWD devem ser abordados, mas sim como eu adaptei o meu fluxo de trabalho para se adequar ao novo cenário.
Eu estive na fronteira entre o fosso Photoshop / Fireworks / Illustrator, pois cada um lutou pela supremacia e testemunhou pessoas inocentes serem pegos em um fogo cruzado de pixels. Designers tendem a ter o seu favorito e preferem morrer uma morte lenta e dolorosa do que admitir que outro software tem um recurso que eles podem realmente querer. Minha opinião é que você deve projetar em qualquer software que permita que você trabalhe da forma mais eficiente e explore suas idéias rapidamente, seja Photoshop, Powerpoint ou Paint.
É quase irrelevante escolher, já que deve ser apenas um ponto de partida para experimentar rapidamente diferentes layouts. Pessoalmente, eu prefiro o Fireworks, pois ele atende mais das caixas do que eu quero em um software. Eu tento não ficar muito preso aos detalhes neste estágio e realmente tentar apenas tomar algumas decisões preliminares sobre o layout e a estrutura, como alguns wireframes elegantes.
Tudo o que precisa ser dito sobre o uso de Lorem Ipsum em sites de mock-ups foi dito, por favor, apenas confie em mim e, se possível, use conteúdo real para projetar. Quando não for possível, use o conteúdo do ano passado, escreva seu próprio conteúdo ou use a letra de 'Candle in the wind', mas não use Lorem ipsum. Se você não usar o conteúdo real, será difícil ver em quais pontos de quebra determinados elementos precisam ser ajustados.
Esta é apenas a largura que eu gosto de começar, pois é perto de uma pequena experiência de desktop, que é fácil de escalar para telas maiores e para baixo para experiências tablet / mobile. Algumas pessoas preferem começar mais, enquanto outras preferem projetar mobile-first, isso se resume ao que funciona para você.
O RWD tem tudo a ver com contêineres fluidos que crescem e encolhem para preencher a área disponível do navegador, portanto, projetar em porcentagens em vez de pixels garantirá que seus projetos fluam proporcionalmente ao navegador e exijam menos pontos de interrupção do que o design baseado em pixels equivalentes.
Eu costumo ter o In-Design aberto em segundo plano para que eu possa facilmente e rapidamente descobrir um tamanho percentual de um elemento baseado em pixels. O InDesign é ótimo para lidar com esse tipo de cálculo e você pode facilmente descobrir que tamanho um elemento de 428 pixels x 333 pixels terá 46% de sua largura original, mantendo suas proporções ou talvez descobrir 27% de uma largura de navegador de 889px em segundos. Os resultados ainda são fornecidos em pixels para que você possa voltar ao software em que está criando e criar esse contêiner em pixels, sabendo que será relativo à porcentagem do espaço de trabalho que você definiu.
Se você acha que eu gosto de usar conteúdo real dentro de seus projetos, você deve me ouvir falar sobre projetar estilos de tipografia no Photoshop (ou equivalente). A tipografia parecerá muito diferente no navegador do que parece nos pacotes habituais da Adobe, o que significará mais trabalho para você aprimorar o design depois de compilado.
Salve-se da dor de cabeça e use aplicativos como typecast.com experimentar e criar seus estilos de fonte com. Quando estiver satisfeito com o layout e o estilo de sua tipografia, você poderá exportar todo o seu espaço de trabalho como um PNG transparente para inserir em seus mock-ups de design. Você não precisará ter nenhuma das fontes escolhidas instaladas no sistema, pois elas serão apenas uma imagem, mas você também não poderá editá-las sem voltar ao typecast.
Até agora você deve ter seu design com largura de até 1000px (ou a largura escolhida no início) concluída com as larguras dos contêineres que contêm seus diversos conteúdos traduzidos em porcentagens. Eu começaria agora a criar uma grade sob medida que imita as larguras do contêiner que eu uso dentro do meu design. Portanto, se eu tiver uma barra lateral com 30% de largura e uma área de conteúdo com 55% do meu navegador com 5% de preenchimento de cada lado, minha grade pode ter algo como 5%, 30%, 5%, 55%, 5%.
Você pode usar aplicativos como Gridset para construir sua grade personalizada, mas, novamente, prefiro usar o InDesign, pois você pode agrupar elementos e redimensioná-los proporcionalmente uns aos outros.
Agora, pego minha grade que criei usando o InDesign e colei-a em um documento de 1600 pixels de largura (ou a largura máxima que você deseja que seu site seja). Eu então começo a redimensionar minha grade mais e mais estreitamente por incrementos de 100px até 300px de largura. Em cada incremento, verifico a largura de cada contêiner de conteúdo e me certifico de que ainda é grande o suficiente para abrigar seu conteúdo. Quando eu chego a uma largura que eu acho que faz um container muito pequeno, eu simplesmente edito a grade para caber. Então, se a 800px de largura a barra lateral que eu criei a 30% da largura do navegador se tornar muito estreita, eu poderia adicionar 10% extra a ela, agora com 40% da largura do meu navegador e sendo ampla o suficiente para abrigar o conteúdo pretendido .
A principal coisa a ser lembrada é que, se você aumentar o tamanho de um contêiner, precisará reduzir a quantidade de outro contêiner na mesma quantidade para manter a largura total de 100%. Esta é a melhor maneira que eu encontrei para definir pontos de quebra (o ponto no qual seu layout irá mudar), pois você só adiciona outro ponto de interrupção quando o conteúdo quebra e não para a largura de um novo dispositivo. Esse procedimento pode ser demorado, já que você terá 14 visualizações diferentes da sua grade à medida que aumenta de 300px a 1600px, mas é a melhor maneira que encontrei para verificar como o seu design vai olhar para diferentes larguras de tela antes de entrar desenvolvimento.
Outra opção é usar uma ferramenta como Adobe Reflow Isso também permite adicionar conteúdo a contêineres e, em seguida, arrastar sua área de trabalho e ver a escala dos elementos. Você também pode determinar seus pontos de quebra redimensionando seu espaço de trabalho até que o conteúdo seja interrompido e simplesmente adicione uma consulta de mídia. O refluxo ainda está em beta público e pode ser baixado Aqui .
Tendo redimensionado seus designs em incrementos de 100px, você identificaria algumas larguras nas quais o conteúdo seria quebrado e corrigido adicionando um ponto de interrupção. Agora você pode voltar para o software no qual criou os designs originais e alterar o layout do seu projeto nas larguras que identificou como pontos de quebra. Isso significa que você acaba criando apenas 2, 3 ou 4 layouts diferentes (dependendo da complexidade da sua grade e de quantos pontos de interrupção você precisa) que cobrirão de 300 a 1600 pixels.
Se você seguiu esse processo, agora você deve ter um conjunto de layouts que correspondam aos seus pontos de quebra, um documento que mostra como sua grade é composta de porcentagens da largura do navegador e como ela é recolhida em telas menores e em todos os seus estilos de tipografia já criados e testados no navegador. Este deve ser um ponto muito forte para que um desenvolvedor comece a criar seus projetos com precisão e sem ter que lidar com o conteúdo que quebra em certas larguras mais tarde.
Este processo pode parecer muito longo, mas sem uma ferramenta específica construída inteiramente para o RWD, é a melhor maneira que eu encontrei para testar facilmente o meu layout responsivo usando software não responsivo e comunicar claramente minhas idéias para um desenvolvedor. Esta não é a única maneira de abordar um projeto RWD, mas é o melhor que encontrei.
O que o design responsivo mudou em seu fluxo de trabalho? Quais dicas você compartilharia? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de fluxo via Shutterstock.