{"id":125031,"date":"2022-04-07T10:53:57","date_gmt":"2022-04-07T10:53:57","guid":{"rendered":"https:\/\/elementor.com\/blog\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/"},"modified":"2025-12-01T21:32:49","modified_gmt":"2025-12-01T19:32:49","slug":"o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/","title":{"rendered":"O que \u00c9 o Brutalismo no Design Web? e Como Utiliz\u00e1-lo + 7 Excelentes Exemplos"},"content":{"rendered":"\n<p>O brutalismo \u00e9 uma daquelas tend\u00eancias que parece ir e vir no design web. N\u00e3o \u00e9 porque n\u00e3o haja muito valor no design brutalista. \u00c9 mais porque nem sempre se adequa ao estilo e ao tom dos tempos. <\/p>\n\n<p>Isso \u00e9 parte do que torna o brutalismo t\u00e3o intrigante, no entanto. Quando a maioria dos websites tende a se alinhar e adotar as mesmas tend\u00eancias b\u00e1sicas ano ap\u00f3s ano, um website que n\u00e3o segue as regras pode facilmente roubar os holofotes. <\/p>\n\n<p>Voc\u00ea apenas precisa saber se esse \u00e9 o tipo certo de luz que deseja lan\u00e7ar sobre a marca. O brutalismo \u00e0s vezes pode parecer frio e sombrio. Se n\u00e3o for executado adequadamente ou n\u00e3o for utilizado para o tipo certo de marca, pode enviar sinais errados aos visitantes do website. <\/p>\n\n<p>Neste guia sobre brutalismo no design web, discutiremos o que \u00e9 e como difere das tend\u00eancias minimalistas e antidesign. Al\u00e9m disso, detalharemos os princ\u00edpios que orientam o brutalismo, mostraremos alguns exemplos de websites brutalistas e ofereceremos sugest\u00f5es sobre quando e quando n\u00e3o utiliz\u00e1-lo.<\/p>\n\n<p class=\"read-more-link\"><a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">20 Princ\u00edpios de Design de Websites Que Todo Profissional da Web Deve Conhecer<\/a><\/p>\n\n<div class=\"wp-block-group article-toc is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"wp-block-heading\">\u00cdndice<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#whatis\">O que \u00c9 o Design Web Brutalista?<\/a><\/li><li><a href=\"#history\">Uma Breve Hist\u00f3ria do Brutalismo<\/a><\/li><li><a href=\"#brutalistvsminimalist\">Design Web Brutalista vs. Minimalista<\/a><\/li><li><a href=\"#4principles\">4 Princ\u00edpios do Brutalismo no Design Web<\/a><\/li><li><a href=\"#7examples\">7 Exemplos de Design Web Brutalista<\/a><\/li><li><a href=\"#shouldyouuse\">Deve-se Utilizar o Brutalismo em Websites?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul>\n<\/div>\n\n<h2 class=\"wp-block-heading\" id=\"whatis\">O que \u00c9 o Design Web Brutalista?<\/h2>\n\n<p>O brutalismo no design web \u00e9 um estilo cru, simples e transparente que prioriza a funcionalidade sobre a forma e a efic\u00e1cia sobre a est\u00e9tica. \u00c9 caracterizado por sua apar\u00eancia bruta e abordagem extremamente simplista e minimalista.<\/p>\n\n<p>O brutalismo \u00e9 um estilo de design que se originou no campo da arquitetura na d\u00e9cada de 1950. A palavra &#8220;brutalismo&#8221; vem do franc\u00eas <em>brut<\/em>, que se traduz como &#8220;cru&#8221;. <\/p>\n\n<p>O <a rel=\"noreferrer noopener\" href=\"https:\/\/www.nycurbanism.com\/brutalnyc\/metbreuer\" target=\"_blank\">Met Breuer,<\/a> anteriormente o edif\u00edcio do Whitney Museum of American Art, \u00e9 um bom exemplo de como o design brutalista na arquitetura prioriza a fun\u00e7\u00e3o sobre a forma:<\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=840,h=840\/blog\/wp-content\/uploads\/2022\/04\/1024px-MET_Breuer_48377070386.jpg\" alt=\"\" class=\"wp-image-83441\" width=\"840\" height=\"840\"\/><figcaption>Edif\u00edcio Met Breuer (anteriormente o Whitney Museum of American Art). Cr\u00e9dito: <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/deed.en\" target=\"_blank\" rel=\"noreferrer noopener\">Ajay Suresh<\/a><\/figcaption><\/figure>\n\n<p>\u00c9 uma estrutura massiva com caracter\u00edsticas marcantes, constru\u00edda a partir de materiais brutos. O website do Whitney Museum \u00e9 uma representa\u00e7\u00e3o igualmente precisa do que o brutalismo no design web se parece:<\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2-whitney-museum-brutalism-web-design.mp4\"><\/video><\/figure>\n\n<p>Embora os websites brutalistas possam n\u00e3o ter as presen\u00e7as megal\u00edticas e severas que os edif\u00edcios brutalistas t\u00eam, eles s\u00e3o constru\u00eddos de maneira similar usando os materiais brutos da web. Isso significa uma maior depend\u00eancia de HTML em vez de <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\" title=\"CSS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"4489\">CSS<\/a> e JavaScript. <\/p>\n\n<p>Estas s\u00e3o algumas das caracter\u00edsticas identific\u00e1veis desta t\u00e9cnica de design web: <\/p>\n\n<ul class=\"wp-block-list\"><li>Texto bruto<\/li><li>Fontes do sistema<\/li><li>Hiperlinks sublinhados<\/li><li>Cores seguras para web<\/li><li>Monocromatismo<\/li><li>Fundos de cor s\u00f3lida com pouca ou nenhuma decora\u00e7\u00e3o (portanto, sem gradientes)<\/li><li>Componentes geom\u00e9tricos e bordas acentuadas<\/li><li>Fotografias n\u00e3o tratadas \u2014 isto \u00e9, sem bordas, sombreamento, arredondamento, etc.<\/li><li>Navega\u00e7\u00e3o aberta (em oposi\u00e7\u00e3o a menus suspensos ou do tipo hamburger)<\/li><li>Linhas divis\u00f3rias entre se\u00e7\u00f5es<\/li><li>Conte\u00fado contido em tabelas<\/li><li>Bot\u00f5es delineados<\/li><\/ul>\n\n<p>Embora muitos websites brutalistas compartilhem essas caracter\u00edsticas, os designs nem sempre s\u00e3o executados da mesma maneira \u2014 especialmente quando os web designers infundem o brutalismo em t\u00e9cnicas de design modernas. Por exemplo, o website do Museu Whitney cont\u00e9m uma estrutura previs\u00edvel pelos padr\u00f5es atuais de web design, ao mesmo tempo em que utiliza muitas imagens. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"history\">Uma Breve Hist\u00f3ria do Brutalismo<\/h2>\n\n<p>O brutalismo surgiu na Europa na d\u00e9cada de 1950, quando os pa\u00edses buscavam se reconstruir ap\u00f3s a Segunda Guerra Mundial. Uma das principais raz\u00f5es pelas quais esse estilo de design minimalista foi adotado foi devido \u00e0 sua efici\u00eancia em termos de custo e recursos. Embora fachadas de concreto e tijolo expostos e paletas monocrom\u00e1ticas possam n\u00e3o ter levado aos edif\u00edcios mais atraentes, eles eram mais f\u00e1ceis e baratos de construir. <\/p>\n\n<p>Pa\u00edses como o Reino Unido (onde o brutalismo se originou) adotaram o brutalismo porque era uma forma pr\u00e1tica e de baixo custo para construir habita\u00e7\u00f5es funcionais, institui\u00e7\u00f5es educacionais e edif\u00edcios governamentais. A Uni\u00e3o Sovi\u00e9tica foi outro pa\u00eds que adotou o brutalismo ap\u00f3s a Segunda Guerra Mundial. Isso foi feito para lidar com sua crise habitacional. Tamb\u00e9m foi uma forma de rejeitar a polidez e a extravag\u00e2ncia da burguesia.<\/p>\n\n<p>O movimento brutalista eventualmente declinou na d\u00e9cada de 1970. Embora os materiais brutos e baratos que os arquitetos usaram para construir edif\u00edcios brutalistas permitissem uma reconstru\u00e7\u00e3o e crescimento r\u00e1pidos, as formas imponentes e \u00e1speras ganharam uma reputa\u00e7\u00e3o negativa por sua aparente frieza, aspereza e associa\u00e7\u00e3o com o Comunismo. <\/p>\n\n<p>Dito isso, o brutalismo n\u00e3o desapareceu completamente. Websites constru\u00eddos nos prim\u00f3rdios da Internet eram brutalistas. <\/p>\n\n<p>De fato, alguns dos websites dos anos 90 que existem hoje mant\u00eam esse estilo. Fundado em 1995, o <a href=\"https:\/\/craigslist.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Craigslist<\/a> \u00e9 um dos exemplos mais populares da <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\">tend\u00eancia de design web<\/a> brutalista. Eis como ele se apresentava em 2000:<\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=841,h=676\/blog\/wp-content\/uploads\/2022\/04\/3-craigslist-sfbay-2000-screenshot.png\" alt=\"\" class=\"wp-image-83273\" width=\"841\" height=\"676\"\/><\/figure>\n\n<p>N\u00e3o h\u00e1 imagens \u2014 apenas coluna ap\u00f3s coluna de links azuis contra fundos brancos. Eis como o website se apresenta em 2022: <\/p>\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=834,h=426\/blog\/wp-content\/uploads\/2022\/04\/4-craigslist-sfbay-2022-screenshot.png\" alt=\"\" class=\"wp-image-83274\" width=\"834\" height=\"426\"\/><\/figure>\n\n<p>Embora o site tenha uma apar\u00eancia mais refinada, a estrutura original e a abordagem crua do design permanecem as mesmas. O Craigslist prescinde das imagens e do espa\u00e7o em branco que voc\u00ea encontraria em um website moderno convencionalmente atraente. Em vez disso, utiliza cabe\u00e7alhos de coluna e hiperlinks azuis para construir suas p\u00e1ginas principais.<\/p>\n\n<p>H\u00e1 muitas dire\u00e7\u00f5es que os web designers podem tomar com o brutalismo. Dito isso, \u00e9 importante n\u00e3o confundi-lo com o antidesign. Esta tend\u00eancia de design \u00e9 uma que emergiu na <a href=\"https:\/\/www.widewalls.ch\/magazine\/anti-design-italian-movement\" target=\"_blank\" rel=\"noreferrer noopener\">arquitetura italiana dos anos 1960<\/a>, bem como no <a href=\"https:\/\/www.nngroup.com\/articles\/brutalism-antidesign\" target=\"_blank\" rel=\"noreferrer noopener\">design web dos anos 1990<\/a> \u2014 caracterizava-se por interfaces berrantes, exageradas e desorientadoras. <\/p>\n\n<p>O prop\u00f3sito original do brutalismo era reduzir o design e a constru\u00e7\u00e3o ao b\u00e1sico e torn\u00e1-los mais pr\u00e1ticos. Designs feios eram, infelizmente, \u00e0s vezes o subproduto, mas n\u00e3o a inten\u00e7\u00e3o original como era com o antidesign. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"brutalistvsminimalist\">Design Web Brutalista vs. Minimalista<\/h2>\n\n<p>Embora voc\u00ea possa n\u00e3o olhar para um design brutalista e confundi-lo com um <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">design minimalista<\/a>, eles t\u00eam uma coisa em comum. Ambas as tend\u00eancias de design giram em torno da ideia de que menos \u00e9 mais. E que cada elemento deve servir a um prop\u00f3sito claro. <\/p>\n\n<h3 class=\"wp-block-heading\">Simplicidade<\/h3>\n\n<p>O brutalismo tende a levar esse conceito ao extremo, reduzindo um website \u00e0 sua estrutura esquel\u00e9tica. A fun\u00e7\u00e3o importa muito mais do que a forma. <\/p>\n\n<p>O minimalismo, no entanto, visa equilibrar simplicidade com beleza, ent\u00e3o os detalhes ainda importam. Configura\u00e7\u00f5es padr\u00e3o de <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/cms\/\" title=\"CMS\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"3000\">CMS<\/a>, fontes do sistema e paletas de cores superutilizadas raramente t\u00eam lugar no minimalismo. Em vez disso, <a href=\"https:\/\/elementor.com\/blog\/tips-for-minimalist-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">os web designers planejam cuidadosamente cada detalhe relacionado ao espa\u00e7amento, hierarquia, simetria e mais<\/a>.<\/p>\n\n<h3 class=\"wp-block-heading\">Est\u00e9tica<\/h3>\n\n<p>Os designers brutalistas tendem a n\u00e3o se preocupar muito com o gosto. O objetivo \u00e9 pegar os recursos que t\u00eam e implement\u00e1-los de uma maneira que transmita efetivamente a mensagem. O brutalismo \u00e9 verdadeiramente uma abordagem que prioriza o conte\u00fado para o design de websites. <\/p>\n\n<p>Os designers minimalistas, por outro lado, s\u00e3o mais intencionais. Embora o conte\u00fado seja o componente mais importante do site, os designers utilizam mais elementos de interface do usu\u00e1rio e n\u00e3o se esquivam de estiliza\u00e7\u00e3o ou anima\u00e7\u00e3o a fim de direcionar a aten\u00e7\u00e3o para \u00e1reas-chave da p\u00e1gina.<\/p>\n\n<h3 class=\"wp-block-heading\">Relev\u00e2ncia<\/h3>\n\n<p>Outra grande maneira pela qual essas tend\u00eancias de design diferem \u00e9 em qu\u00e3o pr\u00e1ticas elas s\u00e3o de se utilizar. O minimalismo tem sido uma tend\u00eancia de longa data no design web. Isso ocorre porque \u00e9 uma abordagem perene para o design \u2014 interfaces simples, atrativas e utiliz\u00e1veis sempre ser\u00e3o abra\u00e7adas pelos consumidores. <\/p>\n\n<p>O brutalismo tende a ter uma vida \u00fatil muito mais curta quando n\u00e3o emerge entre as tend\u00eancias de design do ano. Tamb\u00e9m n\u00e3o possui tantos casos de uso relevantes. Geralmente \u00e9 uma tend\u00eancia adotada por criativos cujos trabalhos s\u00e3o igualmente brutalistas ou vanguardistas.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4principles\">4 Princ\u00edpios do Brutalismo no Design Web<\/h2>\n\n<p>O brutalismo nem sempre segue os <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">princ\u00edpios do design web<\/a>. Isso n\u00e3o significa que as interfaces de usu\u00e1rio brutalistas sejam inutiliz\u00e1veis, no entanto. Elas apenas seguem um conjunto diferente de regras: <\/p>\n\n<h3 class=\"wp-block-heading\">1. Realize o Necess\u00e1rio com o M\u00ednimo Indispens\u00e1vel<\/h3>\n\n<p>O design brutalista n\u00e3o permite desperd\u00edcio. Utiliza-se apenas o necess\u00e1rio para criar um website eficaz. Isso geralmente significa trabalhar com HTML n\u00e3o estilizado e usar configura\u00e7\u00f5es padr\u00e3o para fontes, cores, formas e assim por diante. <\/p>\n\n<p>A funcionalidade tamb\u00e9m deve ser direta e simplificada. Os visitantes n\u00e3o devem ser sobrecarregados com conte\u00fado excessivo, recursos distrativos ou p\u00e1ginas de carregamento lento. <\/p>\n\n<h3 class=\"wp-block-heading\">2. Projete For\u00e7a e Estabilidade Atrav\u00e9s da Estrutura<\/h3>\n\n<p>Um website brutalista pode parecer primitivo \u00e0 primeira vista, mas \u00e9 poss\u00edvel projetar muita for\u00e7a e estabilidade atrav\u00e9s deste estilo de design. Mesmo que suas p\u00e1ginas web n\u00e3o sejam dominadas por <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\" title=\"tipografia\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"5430\">tipografia<\/a> superdimensionada e imponente, a estrutura exposta da interface do usu\u00e1rio \u2014 como as linhas separadoras, tabelas e navega\u00e7\u00e3o aberta \u2014 pode conferir ao site uma sensa\u00e7\u00e3o robusta. <\/p>\n\n<p>A utiliza\u00e7\u00e3o de cores b\u00e1sicas como preto, branco e cores naturais como cinza, bege e cobre tamb\u00e9m <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\" title=\"criar um site\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"402\">far\u00e1 com que um website<\/a> pare\u00e7a mais s\u00f3lido \u2014 como as estruturas f\u00edsicas nas quais se inspiram. Interfaces de usu\u00e1rio \u00e1speras e imperfeitas com bordas duras tamb\u00e9m contribuem para um website com aspecto mais industrial.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Um Design Eficaz N\u00e3o Precisa Ser Atrativo<\/h3>\n\n<p>Embora possa n\u00e3o haver nada de bonito em uma interface despojada, isso pode n\u00e3o importar muito para os usu\u00e1rios que desejam uma maneira r\u00e1pida e f\u00e1cil de interagir com o site e converter. <\/p>\n\n<p>Dito isso, o design web brutalista n\u00e3o precisa necessariamente ser feio. Existem muitos exemplos de arquitetura, mobili\u00e1rio e websites brutalistas contempor\u00e2neos e modernos que s\u00e3o intrincadamente projetados sem serem desperdi\u00e7adores ou extravagantes. <\/p>\n\n<h3 class=\"wp-block-heading\">4. Transmita Transpar\u00eancia Atrav\u00e9s da Simplicidade<\/h3>\n\n<p>Quando o brutalismo surgiu pela primeira vez, era uma maneira pr\u00e1tica e eficiente de construir edif\u00edcios. Tamb\u00e9m desafiava a artificialidade e a leveza que se via em todos os outros lugares. <\/p>\n\n<p>Como tal, o brutalismo de hoje n\u00e3o \u00e9 \u00fatil apenas para transmitir for\u00e7a. Suas interfaces robustas e imperfeitas tamb\u00e9m podem transmitir certas verdades sobre uma marca que as palavras sozinhas \u00e0s vezes n\u00e3o conseguem. O brutalismo no design web permite que as marcas se apresentem de forma aut\u00eantica, e de uma maneira que muitas marcas e pessoas n\u00e3o teriam confian\u00e7a suficiente para faz\u00ea-lo. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7examples\">7 Exemplos de Design Web Brutalista<\/h2>\n\n<p>Vamos examinar alguns exemplos de websites brutalistas que demonstram as diferentes maneiras pelas quais essa tend\u00eancia de design est\u00e1 sendo utilizada atualmente: <\/p>\n\n<h3 class=\"wp-block-heading\">1. 56 Digital<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/5-56digital-portfolio-website-brutalism.mp4\"><\/video><\/figure>\n\n<p>A <a href=\"https:\/\/56.digital\/\" target=\"_blank\" rel=\"noreferrer noopener\">56 Digital<\/a> \u00e9 um est\u00fadio digital sediado em Toronto. O que voc\u00ea v\u00ea acima \u00e9 o website de portf\u00f3lio da ag\u00eancia. Embora os clientes em potencial encontrem gr\u00e1ficos de portf\u00f3lio escondidos sob a lista retr\u00e1til de projetos na parte inferior, n\u00e3o h\u00e1 muito para se observar. <\/p>\n\n<p>N\u00e3o h\u00e1 navega\u00e7\u00e3o propriamente dita \u2014 apenas algumas informa\u00e7\u00f5es b\u00e1sicas sobre a empresa e links para suas redes sociais. H\u00e1 tamb\u00e9m uma lista em texto simples dos servi\u00e7os criativos da ag\u00eancia. Abaixo disso, h\u00e1 uma tabela contendo nomes de projetos e anos. Somente quando o visitante passar o mouse sobre as linhas do projeto \u00e9 que poder\u00e1 revelar a imagem associada e uma descri\u00e7\u00e3o de uma \u00fanica linha. <\/p>\n\n<h3 class=\"wp-block-heading\">2. A2-TYPE<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/6-a2type-fonts-page-brutalism.mp4\"><\/video><\/figure>\n\n<p>A <a href=\"https:\/\/www.a2-type.co.uk\/\" target=\"_blank\" rel=\"noreferrer noopener\">A2-TYPE<\/a> \u00e9 uma fundi\u00e7\u00e3o tipogr\u00e1fica independente. O GIF acima prov\u00e9m da p\u00e1gina de Fontes da empresa. N\u00e3o obstante, a maior parte deste s\u00edtio eletr\u00f4nico poderia ser classificada como brutalista em seu design \u2014 isso se aplica \u00e0 navega\u00e7\u00e3o aberta no topo do s\u00edtio que exibe todas as p\u00e1ginas sem a necessidade de intera\u00e7\u00e3o.<\/p>\n\n<p>O plano de fundo desta p\u00e1gina \u00e9 de uma cor magenta s\u00f3lida. As fontes s\u00e3o exibidas no mesmo tamanho, ao longo da mesma coluna, e est\u00e3o uniformemente espa\u00e7adas dentro de suas categorias. N\u00e3o h\u00e1 imagens para mencionar, mas isso ocorre porque as fontes incorporadas s\u00e3o tudo o que os visitantes desejam ver de qualquer forma.<\/p>\n\n<h3 class=\"wp-block-heading\">3. Alicia Keys<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/7-aliciakeys-brutalist-web-design.mp4\"><\/video><\/figure>\n\n<p>Nos \u00faltimos anos, a cantora, compositora e atriz <a href=\"https:\/\/www.aliciakeys.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Alicia Keys<\/a> fez quest\u00e3o de reduzir sua apar\u00eancia f\u00edsica, frequentemente aparecendo sem maquiagem em eventos de alto perfil. Portanto, n\u00e3o nos surpreendemos ao ver seu s\u00edtio eletr\u00f4nico imbu\u00eddo dessa mesma qualidade crua e aut\u00eantica. <\/p>\n\n<p>A maioria das imagens na p\u00e1gina inicial n\u00e3o s\u00e3o tratadas. Em outras palavras, elas aparecem na p\u00e1gina em seu tamanho, forma e cont\u00eainer originais. Al\u00e9m disso, s\u00e3o acompanhadas por pouqu\u00edssimas palavras, estilizadas usando uma tipografia sans serif b\u00e1sica.<\/p>\n\n<h3 class=\"wp-block-heading\">4. Apelido  Apelido<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"789\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Apelido-Apelido-Brutslist-Design.png\" alt=\"\" class=\"wp-image-83278\"\/><\/figure>\n\n<p><a href=\"https:\/\/apelido-apelido.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apelido  Apelido<\/a> \u00e9 um est\u00fadio de design digital exc\u00eantrico com um s\u00edtio eletr\u00f4nico igualmente exc\u00eantrico. A captura de tela acima mostra como \u00e9 a se\u00e7\u00e3o principal do s\u00edtio. N\u00e3o h\u00e1 cabe\u00e7alho para mencionar. Apenas caixas contendo texto e um logotipo extravagante. <\/p>\n\n<p>O s\u00edtio eletr\u00f4nico de p\u00e1gina \u00fanica n\u00e3o \u00e9 completamente brutalista, no entanto. Os visitantes encontram anima\u00e7\u00f5es aleat\u00f3rias, um v\u00eddeo interativo e um livro de visitas no lugar de um formul\u00e1rio de contato tradicional. <\/p>\n\n<h3 class=\"wp-block-heading\">5. Balenciaga<\/h3>\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"789\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/Balenciaga-Brutalist-Design-2007.png\" alt=\"\" class=\"wp-image-83279\"\/><\/figure>\n\n<p><a href=\"https:\/\/www.balenciaga.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Balenciaga<\/a> h\u00e1 muito tempo provoca as pessoas com sua moda. H\u00e1 anos, ela tamb\u00e9m levou seu s\u00edtio eletr\u00f4nico ao extremo em termos de estilo. <\/p>\n\n<p>O que voc\u00ea v\u00ea acima \u00e9 uma captura de tela da p\u00e1gina inicial da Balenciaga em 2017. O design do s\u00edtio assemelhava-se mais a um wireframe do que a um s\u00edtio eletr\u00f4nico completo. Somente quando os compradores navegavam pelas categorias \u00e9 que encontravam imagens de produtos e uma interface de usu\u00e1rio mais familiar.<\/p>\n\n<p>Atualmente, o design brutalista n\u00e3o \u00e9 t\u00e3o abrangente quanto era antes. Eis como o s\u00edtio se apresenta em 2022: <\/p>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/8-balenciaga-brutalism-website.mp4\"><\/video><\/figure>\n\n<p>O cabe\u00e7alho, rodap\u00e9, navega\u00e7\u00e3o, widget de chat ao vivo e bot\u00f5es mant\u00eam a apar\u00eancia rudimentar semelhante a um wireframe do s\u00edtio. <\/p>\n\n<h3 class=\"wp-block-heading\">6. Drudge Report<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/9-drudgereport-brutalist-website.mp4\"><\/video><\/figure>\n\n<p><a href=\"https:\/\/www.drudgereport.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Drudge Report<\/a> \u00e9 um s\u00edtio eletr\u00f4nico de agrega\u00e7\u00e3o de not\u00edcias que existe h\u00e1 quase tanto tempo quanto o Craigslist. Assim como o Craigslist, o Drudge Report manteve seu estilo brutalista at\u00e9 os dias atuais. <\/p>\n\n<p>Embora os leitores encontrem ocasionalmente uma imagem ou banner publicit\u00e1rio de terceiros na p\u00e1gina, a maior parte da interface do usu\u00e1rio consiste em links de texto simples para artigos e fontes de not\u00edcias. Eles s\u00e3o representados em um estilo b\u00e1sico preto e sublinhado. Os links tamb\u00e9m est\u00e3o organizados de forma aleat\u00f3ria na p\u00e1gina e cada se\u00e7\u00e3o \u00e9 dividida por linhas pretas finas.<\/p>\n\n<h3 class=\"wp-block-heading\">7. Seth&#8217;s Blog<\/h3>\n\n<figure class=\"wp-block-video\"><video autoplay=\"\" loop=\"\" muted=\"\" src=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/10-seths-blog-brutalist-website.mp4\"><\/video><\/figure>\n\n<p>Seth Godin \u00e9 um empreendedor e autor que mant\u00e9m um blog de estilo brutalista chamado <a href=\"https:\/\/seths.blog\/\">Seth&#8217;s Blog<\/a>. N\u00e3o h\u00e1 imagens na p\u00e1gina de rolagem longa. A navega\u00e7\u00e3o \u00e9 vis\u00edvel integralmente e o tempo todo \u00e0 esquerda. Al\u00e9m disso, quaisquer hiperlinks que aparecem dentro da postagem s\u00e3o exibidos como links de texto azul sublinhado. <\/p>\n\n<p>Apesar deste blog exclusivamente textual ser estilizado \u00e0 moda do brutalismo, ele possui um design atraente. Isso ocorre porque segue muitos dos princ\u00edpios de experi\u00eancia do usu\u00e1rio que informam como os designers devem espa\u00e7ar, agrupar e organizar p\u00e1ginas com base na psicologia humana e nas prefer\u00eancias dos usu\u00e1rios. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"shouldyouuse\">Voc\u00ea Deve Utilizar o Brutalismo em S\u00edtios Eletr\u00f4nicos?<\/h2>\n\n<p>O brutalismo pode ser uma abordagem inovadora para o design de s\u00edtios eletr\u00f4nicos. Contudo, \u00e9 uma tend\u00eancia de design dif\u00edcil de dominar \u2014 n\u00e3o apenas em termos de t\u00e9cnica, mas tamb\u00e9m em termos de quando e onde aplic\u00e1-la. <\/p>\n\n<p>Se voc\u00ea est\u00e1 intrigado pelo brutalismo e se pergunta como pode faz\u00ea-lo funcionar na web, aqui est\u00e3o alguns pr\u00f3s e contras a considerar: <\/p>\n\n<h3 class=\"wp-block-heading\">Os Pr\u00f3s do Design Web Brutalista<\/h3>\n\n<ul class=\"wp-block-list\"><li><strong>Destaque-se da multid\u00e3o: <\/strong>Um s\u00edtio eletr\u00f4nico brutalista ter\u00e1 uma apar\u00eancia diferente de tudo o que a concorr\u00eancia est\u00e1 fazendo, o que automaticamente far\u00e1 a marca se destacar. Isso \u00e9 especialmente \u00fatil para tipos art\u00edsticos que desejam causar uma impress\u00e3o impactante em potenciais clientes, usu\u00e1rios ou compradores. <\/li><li><strong>Efic\u00e1cia m\u00e1xima:<\/strong> No brutalismo, n\u00e3o importa se um website \u00e9 atraente, desde que seja eficaz. Se voc\u00ea possuir uma compreens\u00e3o s\u00f3lida dos princ\u00edpios de design web e psicologia humana, poder\u00e1 criar interfaces de usu\u00e1rio livres de distra\u00e7\u00f5es e utiliz\u00e1veis que s\u00e3o altamente bem-sucedidas na convers\u00e3o de usu\u00e1rios. <\/li><li><strong>Minimiza\u00e7\u00e3o de custos e recursos:<\/strong> O brutalismo \u00e9 uma forma eficiente em termos de custos e recursos de projetar websites. Se voc\u00ea estiver trabalhando com um cliente que deseja um site de alta convers\u00e3o sem todos os elementos sup\u00e9rfluos, o brutalismo pode ser uma excelente maneira de atender a essa solicita\u00e7\u00e3o.<\/li><li><strong>Tempos de carregamento mais r\u00e1pidos:<\/strong> Como os designs brutalistas s\u00e3o primariamente criados utilizando HTML e s\u00e3o econ\u00f4micos em imagens, voc\u00ea e seus clientes se beneficiar\u00e3o do subproduto da velocidade. Sem todo aquele CSS e JavaScript para desacelerar as coisas, os websites brutalistas podem carregar muito rapidamente \u2014 o que \u00e9 ben\u00e9fico para a experi\u00eancia do usu\u00e1rio e para a otimiza\u00e7\u00e3o de mecanismos de busca.<\/li><\/ul>\n\n<h3 class=\"wp-block-heading\">As Desvantagens do Design Web Brutalista<\/h3>\n\n<ul class=\"wp-block-list\"><li><strong>Visualmente desagrad\u00e1vel:<\/strong> Os designs brutalistas nem sempre s\u00e3o os mais agrad\u00e1veis visualmente. Embora a est\u00e9tica n\u00e3o seja uma prioridade no brutalismo, uma interface desagrad\u00e1vel pode afastar os visitantes de acordo com o <a href=\"https:\/\/lawsofux.com\/aesthetic-usability-effect\/\" target=\"_blank\" rel=\"noreferrer noopener\">Efeito Est\u00e9tico-Usabilidade<\/a>. <\/li><li><strong>Associa\u00e7\u00f5es negativas:<\/strong> O brutalismo n\u00e3o possui a melhor das reputa\u00e7\u00f5es, com muitos vendo esses designs como frios, sombrios, \u00e1speros, imponentes, p\u00f3s-apocal\u00edpticos e uma s\u00e9rie de outros descritores negativos. Seja cauteloso com o qu\u00e3o cru voc\u00ea deixa seus designs, caso contr\u00e1rio, a marca tamb\u00e9m pode ser associada a esses adjetivos. <\/li><li><strong>N\u00e3o dur\u00e1vel:<\/strong> Diferentemente do minimalismo, que sempre parecer\u00e1 moderno e atual, o design web brutalista n\u00e3o \u00e9 a mais dur\u00e1vel das tend\u00eancias. Se voc\u00ea o utilizar em um website, provavelmente ter\u00e1 que monitorar seu desempenho de perto e implementar um redesign quando o engajamento e as convers\u00f5es diminu\u00edrem. <\/li><li><strong>Menos leg\u00edvel:<\/strong> Os websites brutalistas n\u00e3o s\u00e3o necessariamente os mais f\u00e1ceis de olhar por longos per\u00edodos. Portanto, voc\u00ea ter\u00e1 que estar atento a isso ao decidir quando utilizar esse estilo. Voc\u00ea pode ter que &#8220;quebrar&#8221; algumas das regras do brutalismo para trazer equil\u00edbrio, espa\u00e7o e outros elementos \u00e0 interface do usu\u00e1rio para torn\u00e1-la menos dif\u00edcil de ler.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclus\u00e3o <\/h2>\n\n<p>O brutalismo pode ter tido suas ra\u00edzes na arquitetura europeia dos anos 1950, mas a Internet tem experimentado essa tend\u00eancia de design web h\u00e1 d\u00e9cadas. Dito isso, o design brutalista n\u00e3o \u00e9 como as tend\u00eancias de design moderno, como o minimalismo ou o <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/flat-design\/\" title=\"design flat\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"7489\">flat design<\/a>, que vieram para ficar. <\/p>\n\n<p>O brutalismo \u00e9 uma esp\u00e9cie especial de design web. Funciona bem para marcas e indiv\u00edduos peculiares e criativos. No entanto, esta t\u00e9cnica de design que desafia as regras nem sempre \u00e9 bem recebida, n\u00e3o importa qu\u00e3o de perto voc\u00ea siga seus princ\u00edpios b\u00e1sicos. <\/p>\n\n<p>Embora existam alguns \u00f3timos exemplos de brutalismo na web hoje, muitas dessas marcas misturaram o brutalismo da velha escola com tend\u00eancias de design modernas para garantir sua facilidade de uso. Se voc\u00ea est\u00e1 pensando em utilizar esta tend\u00eancia de design web, isso \u00e9 algo para ter em mente. <\/p>\n\n<p>Os consumidores de hoje se acostumaram com interfaces atraentes. O brutalismo levado ao extremo pode criar uma experi\u00eancia demasiadamente discordante para eles. Portanto, alcan\u00e7ar um bom equil\u00edbrio entre o brutalismo e o minimalismo moderno ser\u00e1 uma maneira segura de experimentar com esta t\u00e9cnica.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela. Leia este guia para descobrir como.<\/p>\n","protected":false},"author":2024221,"featured_media":125032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[308,360],"tags":[],"marketing_persona":[],"marketing_intent":[48],"class_list":["post-125031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration-pt","category-design-pt"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos<\/title>\n<meta name=\"description\" content=\"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos\" \/>\n<meta property=\"og:description\" content=\"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-07T10:53:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-01T19:32:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nofar Shviro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nofar Shviro\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\"},\"author\":{\"name\":\"Nofar Shviro\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b\"},\"headline\":\"O que \u00c9 o Brutalismo no Design Web? e Como Utiliz\u00e1-lo + 7 Excelentes Exemplos\",\"datePublished\":\"2022-04-07T10:53:57+00:00\",\"dateModified\":\"2025-12-01T19:32:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\"},\"wordCount\":3396,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"articleSection\":[\"Inspira\u00e7\u00e3o\",\"Projeto\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\",\"name\":\"Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"datePublished\":\"2022-04-07T10:53:57+00:00\",\"dateModified\":\"2025-12-01T19:32:49+00:00\",\"description\":\"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Projeto\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"O que \u00c9 o Brutalismo no Design Web? e Como Utiliz\u00e1-lo + 7 Excelentes Exemplos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b\",\"name\":\"Nofar Shviro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g\",\"caption\":\"Nofar Shviro\"},\"description\":\"Nofar is a Visual Designer at Elementor, specializing in illustrations and landing pages. She appreciates good typography, print, and magazines and loves all things black. When she is not working, Nofar enjoys binge-watching, sunsets, and online shopping.\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/nofars-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos","description":"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/","og_locale":"pt_BR","og_type":"article","og_title":"Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos","og_description":"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela","og_url":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2022-04-07T10:53:57+00:00","article_modified_time":"2025-12-01T19:32:49+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","type":"image\/jpeg"}],"author":"Nofar Shviro","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Nofar Shviro","Est. tempo de leitura":"17 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/"},"author":{"name":"Nofar Shviro","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b"},"headline":"O que \u00c9 o Brutalismo no Design Web? e Como Utiliz\u00e1-lo + 7 Excelentes Exemplos","datePublished":"2022-04-07T10:53:57+00:00","dateModified":"2025-12-01T19:32:49+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/"},"wordCount":3396,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","articleSection":["Inspira\u00e7\u00e3o","Projeto"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/","url":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/","name":"Design Web Brutalista: O que \u00c9 + 7 Excelentes Exemplos","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","datePublished":"2022-04-07T10:53:57+00:00","dateModified":"2025-12-01T19:32:49+00:00","description":"O brutalismo \u00e9 uma categoria especial de design web, funcionando bem para marcas e indiv\u00edduos criativos e exc\u00eantricos. No entanto, esta t\u00e9cnica de design que desafia as regras deve ser empregada com cautela","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2022\/04\/2022_3_blog_What-Is-Brutalism-in-Web-Design_1200_630.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/o-que-e-o-brutalismo-no-design-web-e-como-utiliza-lo-7-excelentes-exemplos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Projeto","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/design-pt\/"},{"@type":"ListItem","position":3,"name":"O que \u00c9 o Brutalismo no Design Web? e Como Utiliz\u00e1-lo + 7 Excelentes Exemplos"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/31306277ab3ebca01fc9c15f33d61d8b","name":"Nofar Shviro","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/17b934f8fa68aa260345cca7d64531f17eae767be2a566b148149f9b83e24f54?s=96&d=mm&r=g","caption":"Nofar Shviro"},"description":"Nofar is a Visual Designer at Elementor, specializing in illustrations and landing pages. She appreciates good typography, print, and magazines and loves all things black. When she is not working, Nofar enjoys binge-watching, sunsets, and online shopping.","url":"https:\/\/elementor.com\/blog\/pt-br\/author\/nofars-2\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024221"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=125031"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125031\/revisions"}],"predecessor-version":[{"id":125033,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/125031\/revisions\/125033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/125032"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=125031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=125031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=125031"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=125031"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=125031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}