Clicky

responsivo-adaptativo-gifs

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

Alguns GIFs parecem valer mais do que muitas palavras

13.nov.2014

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

Comente