Essa ótima série de GIFs explica conceitos do design responsivo • B9

Comentários

Sua voz importa aqui no B9! Convidamos você a compartilhar suas opiniões e experiências na seção de comentários abaixo. Antes de mergulhar na conversa, por favor, dê uma olhada nas nossas Regras de Conduta para garantir que nosso espaço continue sendo acolhedor e respeitoso para todos.

Essa ótima série de GIFs explica conceitos do design responsivo

Alguns GIFs parecem valer mais do que muitas palavras

por Jacqueline Lafloufa

Conversar com especialistas às vezes pode ser enervante. Você até sabe o que está querendo fazer, mas não sabe dar nome aos bois e acaba chamando as coisas pelos nomes errados, ou não compreende completamente o conceito que querem lhe passar.

Também é assim na conversa com designers. Você quer um design que fique bem no smartphone, mas que também não fique esquisito no mobile. Como explicar isso?

E se, de repente, bem no meio do projeto você reparou que as imagens estão ficando pixeladas demais, ou que estão ficando esticadas quando você abre o site em determinada plataforma, como solicitar uma correção?

Para minimizar esse problema de comunicação com designers, a Froont, uma empresa especializada em ferramentas que ajudam a criar sites responsivos, criou essa ótima série de GIFs animados que explicam alguns conceitos de design de sites, como a diferença entre responsivo e adaptativo, uso de breakpoints, elementos agrupados, configurações de largura máxima e até a vantagem do uso de vetores em relação a imagens.

3038367-inline-i-1-9-gifs-that-explain-responsive-design-brilliantly-01responsive-vs-adaptive-copy 3038367-inline-i-2-9-gifs-that-explain-responsive-design-brilliantly-02relative-units-vs-static-units-1-copy 3038367-inline-i-4-9-gifs-that-explain-responsive-design-brilliantly-04flow-vs-static-2-copy 3038367-inline-i-3-9-gifs-that-explain-responsive-design-brilliantly-03with-breakpoints-vs-without-breakpoints-1-co

Para quem entende pouco do assunto, vale conferir para compreender um mínimo. Para os especialistas, vale salvar alguns desses GIFs para usar como explicação quando algum cliente ou colega estiver mais confuso. A explicação detalhada de cada um dos conceitos pode ser conferida no site da Froont.

3038367-inline-i-5-9-gifs-that-explain-responsive-design-brilliantly-05nested-vs-not-nested-1-copy 3038367-inline-i-7-9-gifs-that-explain-responsive-design-brilliantly-07max-width-vx-no-max-width-1-copy 3038367-inline-i-8-9-gifs-that-explain-responsive-design-brilliantly-08desktop-first-vs-mobile-first-3-copy 3038367-inline-i-9-9-gifs-that-explain-responsive-design-brilliantly-09vectors-vs-images-1-copy 06_System-fonts-vs-Webfonts-1

transforme
sua marca
em conversa
com o B9

Para conhecer nossos cases e tudo o que o
B9 pode fazer pela sua empresa acesse:

negocios.b9.com.br
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro
  • Logo de parceiro

🟡  Continue lendo com uma assinatura do B9

Desbloqueie acesso prioritário, uma experiência com menos anúncios e participe da comunidade B9 no WhatsApp. A partir de R$ 14/mês.

ASSINAR AGORA
Privacy Overview

A gente usa cookies e alguns dados pessoais para deixar sua experiência melhor e ajudar a manter o conteúdo do nosso site.