{"id":260998,"date":"2023-09-12T11:10:00","date_gmt":"2023-09-12T08:10:00","guid":{"rendered":"https:\/\/inform.click\/o-que-a-bauhaus-pode-nos-ensinar-sobre-design-infografico\/"},"modified":"2023-09-12T11:57:00","modified_gmt":"2023-09-12T08:57:00","slug":"o-que-a-bauhaus-pode-nos-ensinar-sobre-design-infografico","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/o-que-a-bauhaus-pode-nos-ensinar-sobre-design-infografico\/","title":{"rendered":"O que a Bauhaus pode nos ensinar sobre design infogr\u00e1fico"},"content":{"rendered":"

\n Comparado \u00e0s artes pl\u00e1sticas, o design sempre foi percebido como menos inspirador por causa de sua natureza pr\u00e1tica. S\u00f3 percebemos o incr\u00edvel poder do design desde o s\u00e9culo passado devido a alguns movimentos de design que mudaram o paradigma.\n<\/p>\n

\n A Bauhaus<\/a> foi um desses movimentos que deu ao design<\/strong> um lugar \u00fanico na humanidade: uma disciplina \u00fanica que fundia arte e artesanato com uma abordagem filos\u00f3fica.\n<\/p>\n

\n ‘Bauhaus” – um termo que significa literalmente “casa de constru\u00e7\u00e3o” em alem\u00e3o – foi uma escola de arte fundada pelo arquiteto Walter Gropius<\/a> em 1919. Quando a escola Bauhaus existia, ela tinha suas ra\u00edzes em tr\u00eas cidades – Dessau (1925-1932), Weimar (1919-1925) e Berlim (1932-1933) Embora de curta dura\u00e7\u00e3o e eventualmente fechada por causa do partido pol\u00edtico nazista, a Bauhaus como movimento teve uma enorme influ\u00eancia na arte, design e arquitetura que continua at\u00e9 os dias atuais. Alguns dos artistas e designers mais conhecidos da Bauhaus incluem Paul Klee, Johannes Itten, Mies Van der Rohe, Wassily Kandinsky e L\u00e1szl\u00f3 Moholy-Nagy.\n<\/p>\n

\n Em vez de focar no ideal elitista das belas artes, a Bauhaus era radical o suficiente na \u00e9poca para integrar princ\u00edpios de arte e design, como teoria da cor, composi\u00e7\u00e3o com uma busca incans\u00e1vel pela funcionalidade proposital. H\u00e1 muito a ser aprendido com os princ\u00edpios revolucion\u00e1rios da Bauhaus para o design de infogr\u00e1ficos. Aqui passamos por suas li\u00e7\u00f5es para refrescar seu pensamento sobre o design da informa\u00e7\u00e3o com uma curiosa mistura de talento art\u00edstico e racionalidade modernista.\n<\/p>\n

\n O legado da Bauhaus
\n<\/h5>\n

\n Existem os seis princ\u00edpios fundamentais da Bauhaus. Eles s\u00e3o baseados em uma abordagem minimalista, definida por cores simples e design limpo. A Bauhaus como movimento, al\u00e9m de ser uma escola de arte, manteve certas cren\u00e7as que moldaram sua abordagem \u00e0 arte e ao design:\n<\/p>\n

    \n
  1. Os produtos podem ser produzidos em massa, mas tamb\u00e9m honrar o esp\u00edrito art\u00edstico da individualidade e atender \u00e0 maioria da popula\u00e7\u00e3o. Embora uma ideia semelhante j\u00e1 existisse na Alemanha, ela ganhou destaque ap\u00f3s a Bauhaus.\n <\/li>\n
  2. A escola de arte Bauhaus tamb\u00e9m acreditava que os alunos precisam estar bem equipados em termos art\u00edsticos, sociais, econ\u00f4micos, t\u00e9cnicos e espirituais. Isso traria o melhor deles e os tornaria participantes vitais na sociedade.\n <\/li>\n
  3. A Bauhaus School of Arts preferia membros do corpo docente com vis\u00e3o de futuro a estudiosos academicamente qualificados. A criatividade art\u00edstica foi incentivada por eles.\n <\/li>\n
  4. Outro de seus princ\u00edpios inclu\u00eda uma fus\u00e3o de artes aplicadas e belas.\n <\/li>\n
  5. Os seguidores da Bauhaus acreditavam que um designer precisa ter uma experi\u00eancia completa com os materiais.\n <\/li>\n
  6. Eles acreditavam firmemente no design racional e foram cativados por um senso moderno de beleza.\n <\/li>\n<\/ol>\n

    \n Li\u00e7\u00f5es Bauhaus para Design Infogr\u00e1fico\n<\/p>\n

    \n Designers gr\u00e1ficos podem aprender muito sobre design moderno que captura uma combina\u00e7\u00e3o de arte, acessibilidade e utilidade. Vejamos as li\u00e7\u00f5es que podemos aplicar ao design de infogr\u00e1fico hoje.\n<\/p>\n

    \n 1 A Forma Segue a Fun\u00e7\u00e3o
    \n<\/h5>\n

    \n O design de informa\u00e7\u00e3o eficaz considera a comunica\u00e7\u00e3o como sua principal prioridade. De vez em quando, vemos um infogr\u00e1fico com um estilo bonito que falha em transmitir uma mensagem memor\u00e1vel. O objetivo principal de um infogr\u00e1fico \u00e9 comunicar informa\u00e7\u00f5es \u2013 a forma e o estilo devem funcionar para cumprir esse objetivo e n\u00e3o o contr\u00e1rio.\n<\/p>\n

    \n
    \n As famosas mesas de nidifica\u00e7\u00e3o de Josef Albert s\u00e3o um jogo de formas minimalistas e combina\u00e7\u00f5es de cores.\n<\/p>\n

    \n A escola Bauhaus ensinou os alunos a remover decora\u00e7\u00f5es desnecess\u00e1rias que n\u00e3o serviam a um prop\u00f3sito funcional. A frase “a forma segue a fun\u00e7\u00e3o”, cunhada pelo arquiteto americano Louis Sullivan, captura perfeitamente o zeitgeist da Bauhaus. Seguindo essa regra, um bom infogr\u00e1fico deve priorizar a legibilidade e reduzir a confus\u00e3o visual para criar um foco visual claro. Em outras palavras, devemos anunciar a morte aos detalhes ornamentais excessivos.\n<\/p>\n

    \n Abaixo est\u00e1 um infogr\u00e1fico que segue essa regra. Usando cores m\u00ednimas e formas geom\u00e9tricas b\u00e1sicas, ele comunica informa\u00e7\u00f5es complexas com um design muito limpo e organizado.\n<\/p>\n

    \"\"<\/a> As rotinas di\u00e1rias de pessoas criativas famosas<\/p>\n

    \n 2 A hierarquia visual \u00e9 rei
    \n<\/h5>\n

    \n A escola Bauhaus prestou aten\u00e7\u00e3o especial \u00e0s rela\u00e7\u00f5es formadas entre dois opostos. Por exemplo, explicava a conex\u00e3o entre escurid\u00e3o e luz, esquerda e direita ou grande e pequeno. E essa rela\u00e7\u00e3o entre os elementos cria uma hierarquia visual.\n<\/p>\n

    \n Veja as pinturas de composi\u00e7\u00e3o ic\u00f4nicas de Kandinsky (Mondrian?), Por exemplo. O tamanho e a posi\u00e7\u00e3o do ret\u00e2ngulo vermelho criam um ponto focal visual, formando uma rela\u00e7\u00e3o com cores e formas contrastantes adjacentes que \u00e9 muito f\u00e1cil para nossos olhos seguirem.\n<\/p>\n

    \"\"<\/a> A pintura “Branco-branco” de Kandinsky demonstra uma clara hierarquia visual.<\/p>\n

    \n A li\u00e7\u00e3o aqui \u00e9 criar um foco visual claro no design de infogr\u00e1fico usando contraste, formas e posicionamento espacial. No exemplo de infogr\u00e1fico abaixo, usar as cores vermelho e verde forma um forte contraste que destaca a diferen\u00e7a quantitativa, enquanto as formas sobrepostas no centro criam um ponto focal visual claro.\n<\/p>\n

    \"\"<\/a> Um ano de Food in NYC infogr\u00e1fico.<\/p>\n

    \n 3 cores como meio
    \n<\/h5>\n

    \n Um aluno brilhante da escola de artes Bauhaus, chamado Josef Albers<\/a>, expandiu o assunto em seu livro ic\u00f4nico, ‘Interaction of Color'. Josef nos ensinou que as cores s\u00e3o relativas e raramente vistas como suas propriedades f\u00edsicas reais. Como meio, as cores podem ser “enganosas” e “provocativas”. Portanto, entender como as cores interagem entre si pode determinar muito a sua mensagem.\n<\/p>\n

    \n No exemplo que ilustra a relatividade da cor abaixo, os quadrados da mesma cor de marrom s\u00e3o percebidos como tendo tons diferentes devido ao contexto em que est\u00e3o inseridos. Compreender as propriedades intr\u00ednsecas de uma paleta de cores \u00e9 o primeiro passo. Para transmitir a mensagem certa, \u00e9 preciso tamb\u00e9m considerar a intera\u00e7\u00e3o entre as cores ao escolher um esquema de cores.\n<\/p>\n

    \"\"<\/a> Josef Albers sobre a relatividade da cor.<\/p>\n

    \n Atualmente, os designers escolhem as melhores paletas para tornar os sites coloridos e combinar as propriedades intr\u00ednsecas das tonalidades.\n<\/p>\n

    \n A li\u00e7\u00e3o de que as cores mant\u00eam conex\u00f5es mais profundas \u00e9 o que os designers modernos empregam. Ent\u00e3o, eles escolhem com cuidado a melhor combina\u00e7\u00e3o de cores e trazem o significado completamente.\n<\/p>\n

    \n Outros artistas da Bauhaus contribu\u00edram para a teoria das cores al\u00e9m de Josef Albers, como Johannes Itten<\/a> e sua esfera de cores. A categoriza\u00e7\u00e3o da cor em cores prim\u00e1rias, secund\u00e1rias e terci\u00e1rias<\/strong> hoje ainda \u00e9 amplamente utilizada para design gr\u00e1fico. A teoria das cores de Itten pode orientar o designer de infogr\u00e1ficos a escolher o melhor esquema de cores para seus designs.\n<\/p>\n

    \"\"<\/a> C\u00edrculo de cores de 12 matizes de Johannes Itten.<\/p>\n

    \n Com essa teoria das cores em mente, fica muito mais f\u00e1cil escolher o melhor esquema de cores para o seu infogr\u00e1fico com base nos princ\u00edpios de consist\u00eancia<\/strong> e simplicidade<\/strong>. Um bom infogr\u00e1fico usa uma paleta de cores consistente, mantendo a combina\u00e7\u00e3o de cores simples. Voc\u00ea deseja que suas cores apoiem a comunica\u00e7\u00e3o de informa\u00e7\u00f5es em vez de obstruir ou distrair o leitor da mensagem principal.\n<\/p>\n

    \n Por exemplo, se voc\u00ea for criar um infogr\u00e1fico sobre como fazer caf\u00e9, \u00e9 melhor usar o marrom como cor dominante, pois \u00e9 a cor associada aos gr\u00e3os de caf\u00e9, mantendo toda a paleta de cores simples. Neste infogr\u00e1fico<\/a> da Nespresso, o design transmite o tema usando a cor marrom.\n<\/p>\n

    \n Para usar cores de forma consistente e simples em seu design de infogr\u00e1fico, existem 3 esquemas de cores que voc\u00ea pode considerar: monocrom\u00e1tico, tri\u00e1dico e complementar<\/strong>. Um esquema de cores monocrom\u00e1tico usa cores do mesmo tom, mas de satura\u00e7\u00f5es diferentes, portanto, tenha cuidado para definir suas cores de uma maneira que n\u00e3o pare\u00e7a muito opaca. Para iniciantes, \u00e9 mais f\u00e1cil come\u00e7ar com um esquema de cores tri\u00e1dico, em que as cores t\u00eam a mesma dist\u00e2ncia na roda de cores. As cores complementares est\u00e3o nas extremidades opostas da roda de cores e s\u00e3o \u00f3timas para criar contraste.\n<\/p>\n

    \"\"<\/a> 3 Tipos de esquemas de cores para infogr\u00e1fico.<\/p>\n

    \n Por fim, sempre considere o contexto do seu infogr\u00e1fico para escolher cores que evoquem as associa\u00e7\u00f5es certas. Por exemplo, se voc\u00ea estiver criando um infogr\u00e1fico para a \u00e9poca de Natal, \u00e9 melhor usar o esquema de cores vermelho e verde.\n<\/p>\n

    \n 4 quest\u00f5es de tipografia, muito
    \n<\/h5>\n

    \n Um dos maiores legados da escola de arte Bauhaus \u00e9 a tipografia. Os l\u00edderes da Bauhaus acreditavam que a tipografia \u00e9 parte integrante dos gr\u00e1ficos e que as palavras deveriam ser colocadas em \u00e2ngulos agudos. No entanto, o significado de uma palavra tinha maior prioridade do que seu design.\n<\/p>\n

    \n Essa cren\u00e7a ensinou aos designers contempor\u00e2neos uma grande li\u00e7\u00e3o. Isso os encorajou a serem criativos com estilos de fonte, mas tamb\u00e9m os alertou para n\u00e3o se desviarem da mensagem real que desejam expressar. De acordo com a Bauhaus, a fun\u00e7\u00e3o prim\u00e1ria da tipografia \u00e9 comunicar, e a comunica\u00e7\u00e3o deve aparecer na “forma mais curta, simples e penetrante”.\n<\/p>\n

    \"\"<\/a> Os melhores tipos de letra da Bauhaus primam pela lucidez e simplicidade.<\/p>\n

    \n Para o design de infogr\u00e1ficos, como regra geral, devemos usar fontes leg\u00edveis e simples para comunicar com clareza. Fontes excessivamente decorativas para texto de c\u00f3pia dificultar\u00e3o a leitura e distrair\u00e3o a vista, pois os textos raramente s\u00e3o o ponto focal do design.\n<\/p>\n

    \n 5 O layout da grade
    \n<\/h5>\n

    \n Um bom alinhamento faz toda a diferen\u00e7a no design gr\u00e1fico. Os pioneiros da Bauhaus acreditavam em uma abordagem minimalista para a organiza\u00e7\u00e3o visual, onde tudo \u00e9 espremido em ret\u00e2ngulos e quadrados. A grade faz todo o sentido para os designers pr\u00e1ticos da Bauhaus. Muitos dos elementos de design da Bauhaus est\u00e3o em conformidade com uma grade estrita, como a capa do livro e o tabuleiro de xadrez abaixo.\n<\/p>\n

    \"\"<\/a> Projetando para a grade.<\/p>\n

    \n Atualmente, o sistema de grade \u00e9 um sistema de alinhamento comumente usado por designers gr\u00e1ficos e web designers para layouts de p\u00e1gina. Continua sendo um sistema eficaz para manter a hierarquia visual em toda a se\u00e7\u00e3o de conte\u00fado. Para o design de infogr\u00e1ficos, seguir o sistema de grade \u00e9 obrigat\u00f3rio porque v\u00e1rios elementos precisam ser arranjados, organizados e estruturados para criar uma hierarquia visual clara.\n<\/p>\n

    \"\"<\/a> Como o sistema de grade \u00e9 usado no design gr\u00e1fico.<\/p>\n

    \n Usando um sistema de grade baseado em coluna<\/strong> como a grade de 6 colunas acima, voc\u00ea pode definir uma diretriz de como seus elementos de design interagem uns com os outros. Isso define a base para relacionamentos visuais fortes em seu design. Al\u00e9m disso, sistemas de grade podem ser usados \u200b\u200bpara criar ritmo e movimento. No design colorido da revista Bauhaus acima, a grade de posi\u00e7\u00e3o diagonal cria uma sensa\u00e7\u00e3o de movimento, enquanto os elementos densamente povoados no centro da grade produzem uma sensa\u00e7\u00e3o de gravidade.\n<\/p>\n

    \n Se o sistema de grade baseado em colunas \u00e9 a cola que mant\u00e9m seu conte\u00fado unido, o uso de margens<\/strong> ajuda a organizar sua exibi\u00e7\u00e3o densa de informa\u00e7\u00f5es. Voc\u00ea provavelmente notou como o uso generoso de espa\u00e7o em branco e margens amplas nos designs da Bauhaus cria uma apar\u00eancia limpa e organizada.\n<\/p>\n

    \n Por fim, ter um sistema de grade ajuda a quebrar a grade. Seu design se torna imediatamente impactante quando voc\u00ea quebra as regras propositalmente. Isso tornar\u00e1 seu infogr\u00e1fico instantaneamente mais memor\u00e1vel entre os muitos layouts de infogr\u00e1fico padr\u00e3o. Tome o infogr\u00e1fico abaixo como exemplo, a quebra da grade do ret\u00e2ngulo na parte superior cria um impacto visual impressionante, enquanto o resto da grade da p\u00e1gina foi mantida intacta para manter a harmonia visual do design geral.\n<\/p>\n

    \"\"<\/a> Bom exemplo de quebrar a grade.<\/p>\n

    \n Sua vez
    \n<\/h4>\n

    \n Aqui est\u00e3o as cinco li\u00e7\u00f5es essenciais da Bauhaus que voc\u00ea pode usar em seu pr\u00f3ximo design de infogr\u00e1fico. Voc\u00ea os acha f\u00e1ceis de entender e pr\u00e1ticos de seguir? Voc\u00ea descobriu outros princ\u00edpios da Bauhaus adequados para designs de infogr\u00e1ficos?\n<\/p>\n

    \n E se voc\u00ea estiver pronto para dar o salto, experimente esses princ\u00edpios de design com um criador de infogr\u00e1ficos como o Visme, que vem com modelos, para que voc\u00ea possa se concentrar em escolher a fonte, a cor e o layout visual corretos.\n<\/p>\n<\/p>\n

    \n Fonte de grava\u00e7\u00e3o: instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Comparado \u00e0s artes pl\u00e1sticas, o design sempre foi percebido como menos inspirador por causa de sua natureza pr\u00e1tica. S\u00f3 percebemos o incr\u00edvel poder do design desde o s\u00e9culo passado devido a alguns movimentos de design que mudaram o paradigma. A Bauhaus foi um desses movimentos que deu ao design um lugar \u00fanico na humanidade: uma disciplina \u00fanica que fundia arte e artesanato com uma abordagem filos\u00f3fica. ‘Bauhaus\u201d \u2013 um termo que significa literalmente \u201ccasa de constru\u00e7\u00e3o\u201d em alem\u00e3o \u2013 foi uma escola de arte fundada pelo arquiteto Walter Gropius em 1919. Quando a escola Bauhaus existia, ela tinha suas ra\u00edzes em tr\u00eas cidades \u2013 \u2026<\/p>\n","protected":false},"author":1,"featured_media":191028,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[202,358,397,605,527,59,657],"tags":[],"class_list":["post-260998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-entretenimento","category-projeto","category-tecnologia-e-muito-mais","category-raznoe-pt-pt","category-web-e-wordpress-2","category-web-sites"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260998"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260998\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/191028"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}