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

  • jcvasc

    FODA!

  • Willian Mota

    Genial!

  • Muito bom!

  • ótimo post!!

  • Humberto Siciliano

    Bem explicado, mas, mesmo assim seu cliente continuará mandando a marca em jpeg ao invés de vetor :P

    • Gabriel Gardini

      quando não eles mandam em word

      • Luana Fogaça

        Ou Power Point. Acreditem.

        • Fernando

          Ou um JPEG dentro do Corel.

          • Guest

            Ou em GIF sendo o logo o terceiro frame

          • Guest

            ou uma foto da logo pintada na parede

          • Rafael Milewski

            Ou em GIF sendo o logo o terceiro frame… haha

          • Barba O Paulo

            ou uma foto da logo pintada na parede.

          • Rica

            Putz essa é realmente brochante e sempre quando temos que finalizar o arquivo

        • Jorge

          Ou a foto de um bordado de lã.

        • É um inception de arquivos você vai se surpreendendo e se arrependendo de ter escolhido esse profissão ao mesmo tempo.

      • Acabei de receber uma assim, agora.

      • Fábio Santana

        Ou uma foto da fachada

      • Ou um cartão de visita antigo, e ainda o único que tem

    • Gudang

      Então procure outros clientes, pois o caminho não é esse
      []s

      • Humberto Siciliano

        Não sei exatamente se você está falando sério, mas caso esteja, a solução mais correta seria educar o seu cliente a enviar o arquivo certo, pois nós temos o dever de auxiliar e educar nossos clientes. Não sei você, mas não gosto de dispensar clientes.

        • renata

          nunca vi uma resposta mais sensata e educativa! adorei! ;)

          • Humberto Siciliano

            Valeu :)

        • Ai ta a diferença de uma Consultoria!! =) o que muitos ainda não praticam.. buscam somente vender um “sitezinho”!

          • Humberto Siciliano

            Pois é, não podemos cobrar um conhecimento específico de alguém que, na maioria das vezes, não o possui!

        • Kelmer Teixeira

          foi o que eu pensei depois que vi o comentário. inclusive o seu falando do cliente mandar a logo em imagem. cabe a nós educar mesmo, porque ele não tem obrigação de saber a diferença.

          • Humberto Siciliano

            Meu primeiro comentário foi uma brincadeira de uma situação corriqueira. É só reparar a utilização do emoticon :P pra deixar o clima leve :)

          • Kelmer Teixeira

            exatamente, estou concordando contigo.

        • Guest

          Educar o cliente? Qualquer cliente quer uma solução.. Você deveria resolver o problema do cliente, só isso.. Kkkkkk

    • Há um site que explica isso tudo para o cliente: http://nojpeg.org

    • Luã Melo

      E o pior, o designer vai fazer o layout com 50 fonts diferentes.

      • danilotudisco

        se fizer não é designer

      • sem organizar os layers. hahaha

      • Se ele fez assim ele á errado, ele é o design o que ele fez foi o designer, pode perguntar pra ele.

        • Luã Melo

          Na verdade ele seria o designer e faz o design.

          • Mesmo errando o comentário tu não manjou da ironia.

    • Guest

      Ou em GIF sendo o logo o terceiro frame..

    • Wesley

      o mais foda que ja recebi até hoje foi Jpeg dentro do corel, e o jpeg era uma foto que ele tirou do celular, e a imagem estava bordada na camisa de uma funcionaria, ¬¬ . kkkkk, sério.

    • Ju

      hahahahahaha!!! ótima

    • Carolina Luz

      Ou um cartão de visita pra você “copiar” a imagem… =(

    • Filipe Marotti

      Um cliente me enviou a logo via sinal de fumaça. :p

  • Muito bom e útil demais. Valeu!

  • JerryAlmeidaFoxx

    Conceitos perfeitos! :)

  • Alfredo

    perfeito!

  • Lucas Carvalho

    alguém sabe onde esses gifs são feitos?? After Effects?

    • Hígor M. Gonçalves

      quando os faço uso photoshop .-.

    • Saulo Ottoni

      flash

      sqn

    • Rafael Milewski

      Probably yes.. i don’t see a easier way to do it without AE

  • Bem explicado. Mas já é bem difundido o uso de “Mobile First” também para design responsivo. As vantagens são enormes.

    • Marcelo

      O ‘problema’ se dá que necessita de um estudo muito maior antes da produção, o que em muuitos casos não acontece. Cliente não aprova layout mobile antes de um layout desktop.

      Pro cliente tem que entregar primeiro o layout desktop, e pro dev tem que entregar primeiro o mobile, algum dos dois vai ter que ficar esperando primeiro.

  • Guylherme Tabosa

    Muito massa, autoexplicativo. show.

  • André Feliciano Vascontim

    Muito bom!

  • Lauro

    Alguém pode me explicar a diferença do desktop first e do mobile first? Além do que o próprio nome já diz, claro, me refiro se há alguma diferença no resultado ou no desenvolvimento que não seja a ordem em que foram feitos.

  • Giovanni Vicentin

    Muito bom, faltou o widget do G+ para compartilhar só. :)

  • ps

    mas infelizmente tem componentes bugados que não nos deixam trabalhar com essa padronização

  • Evandro Eisinger

    Acho que houve alguma confusão na elaboração do material, pois existem alguns erros. A definição de “responsivo” está referenciando um comportamento “fluido”, a definição de “adaptativo” está representando um comportamento “responsivo”. Acho que seria válido uma revisão ou uma discussão mais conceitual dos criadores e editores do material.

  • Rica

    Eu gostaria de montar uma workgroup / empresa só de designers graficos e publicitarios para resultar em uma agencia , alguem disponivel e afim?

  • Muito bom