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

todo tipo
de conversa
para quem quer
sair do raso
Photo by Prince Akachi on Unsplash

transforme sua marca em conversa
conte com o b9

20 anos de pioneirismo digital

Aqui no B9, a gente adora uma conversa. Mais do que uma paixão, elas viraram o nosso negócio. O B9 já produziu milhares de episódios, canais temáticos, eventos, palestras e campanhas que contam histórias, expandem horizontes e criam conexões autênticas com a audiência. Buscando diferentes pontos de vista e com ideias que nos tiram do raso. Através de oportunidades de mídia, conteúdos originais em podcast e projetos multiplataformas, o B9 também coloca marcas e empresas nessas rodas de conversa. Pra conhecer nossos cases e tudo o que o B9 pode fazer pela sua marca acesse o site:

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