Categorias

Newsletter

  • Mobile UX/UI Design

    Como projetar um site responsivo? Padrões responsivos de layout

    Desde o aparecimento dos smartphones, estamos experimentando um boom em Design Mobile, e como acontece com o desenvolvimento de novos aparelhos e tecnologias, algumas […]


    Desde o aparecimento dos smartphones, estamos experimentando um boom em Design Mobile, e como acontece com o desenvolvimento de novos aparelhos e tecnologias, algumas tendências e padrões já estão sendo estabelecidos.

    Padrões de design responsivo são importantes diretrizes para guiar estratégias de planejamento em um projeto mobile. No livro The Mobile Book, da Smashing Magazine, temos os padrões responsivos que mais se destacam na hora de escolher a melhor estratégia mobile na construção de sites ágeis.

    Mostly Fluid

    O modelo mais comum possui esse nome porque sua estrutura de layout se mantém a mesma até ser visto em telas bem menores, onde sofre mudanças maiores. Ele empilha o conteúdo em colunas verticais e é projetado em cima de grids fluídos que se adaptam a uma variedade de tamanho de telas. De acordo com Brad Frost, esse padrão se baseia em um grid fluído e se mantém o mesmo para largas e médias telas, mudando dramaticamente apenas em telas menores. Sua popularidade se dá por ele ser um padrão que requer apenas dois pontos de vistas diferentes, ao contrário de padrões mais complexos como o Column Drop e o Shifter Layout.

    Captura de Tela 2013-07-19 às 21.18.53

    mostly fluid responsive patterns padroes responsivos I mostly fluid responsive patterns padroes responsivos II mostly fluid responsive patterns padroes responsivos III

    Column Drop

    Esse padrão é popular para modelos de design em três colunas. Se a tela for pequena demais para exibir as três colunas lado a lado, uma das colunas secundárias cai para embaixo das outras colunas. O layout que começa com várias colunas termina com uma coluna única. Ao contrário do Mostly Fluid o tamanho dos elementos tende a permanecer consistente. Esse padrão pode ser efetivo se o conteúdo das colunas não estiverem relacionados, sendo assim, seguir uma hierarquia de conteúdo pode ser algo difícil se o conteúdo de uma coluna depender do conteúdo da outra.

    Captura de Tela 2013-07-19 às 21.19.27

    colum drop responsive patterns padroes responsivos III colum drop responsive patterns padroes responsivos II colum drop responsive patterns padroes responsivos I colum drop responsive patterns padroes responsivos colum drop responsive patterns padroes responsivos IIII

    Layout Shifter

    Este padrão garante o máximo aproveitamento do dispositivo de tela sendo usado, podendo ser encontrado em sites mais inovadores. A complexidade desse padrão envolve a criação de layouts distintos para cara breakpoint, diferentes layouts são usados em telas grandes, médias e pequenas, e por dar mais trabalho que outros padrões, não é tão comum quanto os anteriores. Como o nome já diz, a mudança de layouts acontece em breakpoints pré-definidos.

    Segundo Frost, uma vez que você introduz grandes mudanças em cada breakpoint você está basicamente criando estados diferentes para o seu layout, que precisarão ser indexados separadamente, e isso poderá aumentar a complexidade do seu projeto. Lembre-se sempre que o objetivo do layout responsivo é criar experiências legíveis, bonitas e funcionais no máximo de ambientes possíveis. As vezes isso significa 200 media queries, as vezes apenas 2.

    Captura de Tela 2013-07-19 às 21.16.54

    tiny tweaks responsive patterns padroes responsivos IIV tiny tweaks responsive patterns padroes responsivos IIII tiny tweaks responsive patterns padroes responsivos III tiny tweaks responsive patterns padroes responsivos II tiny tweaks responsive patterns padroes responsivos I

    Tiny Tweaks

    Com uma pegada mais minimalista, esse padrão é mais utilizado em páginas simples de uma única coluna e com pouco elementos dentro. Ele mantém a mesma estrutura básica apenas ajustando tamanhos de fontes, imagens e outros componentes.

    Captura de Tela 2013-07-19 às 21.17.27

    Off Canvas

    large-screen-default

    medium-screen-right

    medium-screen-default

    small-screen-right

    small-screen-left

    small-screen-center

    md-patterns8

    md-patterns6

    Enquanto a maioria dos padrões tendem a empilhar verticalmente todo o conteúdo em telas pequenas, resultando em longas páginas cheias de componentes diferentes, o padrão Off Canvas limita nossa ação apenas para o que é visível no momento.

    Nesse padrão é aproveitado o espaço de fora da tela para manter a navegação ou o conteúdo escondido até que um tamanho maior da tela permita que ele seja visível ou o usuário entre em ação para mostrá-lo. Esse conteúdo ainda estará acessível, mas o usuário terá que solicitar o conteúdo provavelmente através de algum menu ou link. Após a solicitação o conteúdo vai deslizar da esquerda para a direita ou vice-versa revelando o conteúdo que estava visível fora da tela.

    A versão mobile do Facebook utiliza o espaço à esquerda da janela visível para esconder opções de navegação até que alguém toque no link, fazendo com que ele deslize para a tela. Em algumas aplicações ambos os lados direitos e esquerdos são utilizados para revelar opções de navegação. Uma das vantagens desse padrão é que ele não força o usuário a percorrer longas páginas de conteúdo e navegação.

    Seja qual for o padrão que você optar por seguir, é importante manter quatro aspectos em mente:

    • Tenha certeza que o conteúdo irá fluir logicamente
    • Trate o layout como um aprimoramento, o construindo em mobile first
    • Deixe o conteúdo, e não as dimensões do dispositivo, determinar os seus breakpoints
    • Não exagere, mas faça o que for preciso para criar um layout legível e prazeroso de se interagir

    Conheça essa biblioteca de padrões responsivos:

    Responsive Patterns

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • David Corbetta

      Quem se interessar mais, no site da CasadoCodigo tem um livro ótimo, já li e recomendo. Quem for fazer layouts responsivos procure começar primeiro de mobile, e depois ir “aumentando”, no livro que citei tem muitas dicas, e exemplos.

    • artigos sobre rwd são sempre bem vindos Andrea. Obrigado por compartilhar conosco.

    • hellomidia

      nice

    • Carla Ribeiro

      Oi Andrea, ótimo post.
      Vou continuar te seguindo por aqui 😉
      E vou comprar o Livro da Casa do Código também.
      Beijao e sucesso para ti.

      Vc vai longe. Sem dúvida alguma.

    • Patricia Cátia de Paula

      pronto, agora só falta a própria equipe do Choco ler e refazer o proprio site 🙂

    • luisfelipelino

      Eu sei que isso levaria a navegação para fora do site, mas as imagens que foram colocadas como referência poderiam ter links para os sites em questão.

      Ótimo post.

      =]