{"id":10925,"date":"2013-10-10T10:36:42","date_gmt":"2013-10-10T13:36:42","guid":{"rendered":"https:\/\/www.yogh.com.br\/?p=10925"},"modified":"2025-04-14T11:52:48","modified_gmt":"2025-04-14T14:52:48","slug":"flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro","status":"publish","type":"post","link":"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/","title":{"rendered":"Flat Design: Se conte\u00fado \u00e9 rei, a simplicidade \u00e9 ouro."},"content":{"rendered":"<p>\t\t\t\tTodo mundo conhece aquela m\u00e1xima da web <a href=\"https:\/\/www.yogh.com.br\/blog\/dicas-para-sua-empresa\/o-conteudo-e-rei-mas-o-que-isso-significa-para-os-projetos-web\/\">\u201cConte\u00fado \u00e9 Rei\u201d<\/a>, e n\u00e3o existe complemento maior para a nobreza de um rei do que ouro, do mais alto quilate, e ouro nesse caso \u00e9 um design limpo e simplificado, que d\u00e1 destaque ao conte\u00fado e foge do famigerado padr\u00e3o &#8220;elementos que saltam aos olhos&#8221;, conhecido tamb\u00e9m como Flat UI ou simplesmente Flat Design. Mas dizer que um design \u00e9 simplificado n\u00e3o \u00e9 dizer que ele \u00e9 simples, ou at\u00e9 mesmo pobre ou sem gra\u00e7a, pelo contr\u00e1rio, na maioria das vezes o Flat UI exige um maior planejamento por parte do designer para trabalhar o layout de forma que nenhuma informa\u00e7\u00e3o se perca, e que as informa\u00e7\u00f5es destaque recebam a aten\u00e7\u00e3o necess\u00e1ria.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ta_mas_o_que_e_esse_tal_de_Flat_Design\"><\/span>T\u00e1, mas o que \u00e9 esse tal de Flat Design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Desde o in\u00edcio da populariza\u00e7\u00e3o da web em meados dos anos 90, o design voltado para a web passou por uma s\u00e9rie de modifica\u00e7\u00f5es em seu estilo, e assim como toda \u00e1rea criativa, sofre altera\u00e7\u00f5es constantes em sua est\u00e9tica, e no que \u00e9 considerado aceit\u00e1vel ou n\u00e3o &#8211; estou olhando pra voc\u00ea, site em Comic Sans.<\/p>\n<p>Em 2012 uma nova est\u00e9tica surgiu, fortemente caracterizada por suas linhas simples, cores s\u00f3lidas e uso forte e intr\u00ednseco de uma tipografia bem trabalhada. Um dos percursores deste estilo, o ent\u00e3o designer, hoje CEO da\u00a0<a title=\"Aplicativo LayerVault, um dos primeiros a usar o Flat UI\" href=\"http:\/\/layervault.com\" rel=\"nofollow noopener\" target=\"_blank\">LayerVault<\/a>, Allan Grinshtein foi quem criou o termo Flat Design, que se popularizou em 2013, junto com o pr\u00f3prio estilo em si.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Identificando_uma_UI_Flat\"><\/span>Identificando uma UI Flat<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Aus\u00eancia de degrad\u00eas\u00a0em sua grande maioria<\/li>\n<li>Uso de grandes espa\u00e7os vazios<\/li>\n<li>Sombras s\u00f3lidas em um \u00e2ngulo de 45\u00b0<\/li>\n<li>Cores s\u00f3lidas e vibrantes<\/li>\n<li>Grande uso de iconografia para ilustrar o conte\u00fado<\/li>\n<\/ul>\n<div><\/div>\n<div id=\"attachment_10940\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10940\" class=\"size-full wp-image-10940\" title=\"Tend\u00eancias no Webdesign: Flat Design\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/tendencias-flat-design.jpg\" alt=\"Tend\u00eancias no Webdesign: Flat Design\" width=\"600\" height=\"250\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/tendencias-flat-design.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/tendencias-flat-design-300x125.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><p id=\"caption-attachment-10940\" class=\"wp-caption-text\">Exemplo de elementos usados no Flat Design<\/p><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Como_e_por_que_o_Flat_Design_surgiu\"><\/span>Como e por que o Flat Design surgiu?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div style=\"float: right; clear: none; width: 300px; margin-left: 15px;\">\n<div id=\"attachment_10945\" style=\"width: 310px\" class=\"wp-caption alignleft\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10945\" class=\"size-medium wp-image-10945\" title=\"Flat Design em diversas Plataformas\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/flat-design-responsivo-300x167-1.jpg\" alt=\"Flat Design em diversas Plataformas\" width=\"300\" height=\"167\" \/><p id=\"caption-attachment-10945\" class=\"wp-caption-text\">Fonte: Graphic Design Junction<\/p><\/div>\n<\/div>\n<p>O Flat Design surgiu de uma necessidade sempre presente mas tamb\u00e9m crescente de dar destaque ao conte\u00fado. Na era da Web 3.0 antes das interfaces Flat \u00e9ramos bombardeados com skeumorfismos (n\u00e3o, n\u00e3o \u00e9 rem\u00e9dio, skeumorfismo \u00e9 um estilo de design que busca replicar objetos reais), \u00a0bot\u00f5es repletos de degrad\u00eas que tinham como intuito guiarem os olhos do usu\u00e1rio para onde ele precisa ir, ou , tornando o conte\u00fado coadjuvante. Com o surgimento de tablets e smartphones, e uma necessidade de abranger um leque maior de dispositivos e de tamanhos de telas, simplicidade tornou-se fundamental.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"E_isso_e_so_mais_uma_tendencia_ou_esta_ai_pra_ficar\"><\/span>E isso \u00e9 s\u00f3 mais uma tend\u00eancia ou est\u00e1 a\u00ed pra ficar?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Existe muita conversa nos f\u00f3runs de design sobre se o Flat Design veio para ficar, e eu particularmente acredito que como toda tend\u00eancia do mundo criativo, o Flat Design \u00e9 passageiro, mas assim como outras est\u00e9ticas ele vai deixar o seu legado e abrir as portas para que a pr\u00f3xima tend\u00eancia seja melhor ainda. Desde que tiremos o que tem de melhor de cada est\u00e9tica que surge, pensando sempre em como ela se aplica ao seu cliente e seus usu\u00e1rios, teremos uma evolu\u00e7\u00e3o constante do mundo web.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"E_agora_devo_abandonar_tudo_e_fazer_todos_os_meus_projetos_Flat\"><\/span>E agora, devo abandonar tudo e fazer todos os meus projetos Flat?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Com o lan\u00e7amento do novo sistema operacional da Apple, o iOS7, e o abandono do skeumorfismo por uma empresa que sempre foi famosa por seu uso, para a ado\u00e7\u00e3o de uma abordagem mais limpa e a introdu\u00e7\u00e3o do Flat Design, a compara\u00e7\u00e3o entre as duas est\u00e9ticas se torna inevit\u00e1vel. &#8220;Poxa, mas se at\u00e9 a Apple pegou esse bonde, \u00e9 porque \u00e9 a nova norma n\u00e9?&#8221;, absolutamente n\u00e3o. Cada projeto deve ser abordado de maneira personalizada e a est\u00e9tica utilizada deve refletir uma pesquisa profunda do p\u00fablico alvo, e das plataformas de acesso. O grande risco de seguir uma tend\u00eancia \u00e9 aplic\u00e1-la de maneira errada em seus projetos.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_excelentes_exemplos_de_Flat_Design\"><\/span>5 excelentes exemplos de Flat Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"5_LayerVault\"><\/span>5. LayerVault<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div id=\"attachment_10954\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/layervault.com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10954\" class=\"size-full wp-image-10954\" title=\"LayerVault\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/layervault.jpg\" alt=\"\" width=\"600\" height=\"350\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/layervault.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/layervault-300x175.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-10954\" class=\"wp-caption-text\">www.layervault.com<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"4_Triplagent\"><\/span>4. Triplagent<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div id=\"attachment_10963\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/triplagent.com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10963\" class=\"size-full wp-image-10963\" title=\"Triplagent\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/triplagent.jpg\" alt=\"Triplagent\" width=\"600\" height=\"350\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/triplagent.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/triplagent-300x175.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-10963\" class=\"wp-caption-text\">www.triplagent.com<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"3_Foundation\"><\/span>3. Foundation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div id=\"attachment_10965\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/foundation.zurb.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10965\" class=\"size-full wp-image-10965\" title=\"Foundation by ZURB\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/foundation.jpg\" alt=\"Foundation by ZURB\" width=\"600\" height=\"350\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/foundation.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/foundation-300x175.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-10965\" class=\"wp-caption-text\">foundation.zurb.com<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"2_MapBox\"><\/span>2. MapBox<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div id=\"attachment_10967\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.mapbox.com\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10967\" class=\"size-full wp-image-10967\" title=\"MapBox\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/mapbox.jpg\" alt=\"MapBox\" width=\"600\" height=\"350\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/mapbox.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/mapbox-300x175.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-10967\" class=\"wp-caption-text\">www.mapbox.com<\/p><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_Game_of_Thrones_by_Nigel_Evan_Dennis\"><\/span>1. Game of Thrones by Nigel Evan Dennis<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div id=\"attachment_10973\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/wherehaveallthewildlingsgone.com\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10973\" class=\"size-full wp-image-10973\" title=\"Game of Thrones by Nigerl Evan Dennis\" src=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/gameofthrones.jpg\" alt=\"Game of Thrones by Nigerl Evan Dennis\" width=\"600\" height=\"350\" srcset=\"https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/gameofthrones.jpg 600w, https:\/\/www.yogh.com.br\/blog\/wp-content\/uploads\/2013\/10\/gameofthrones-300x175.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><p id=\"caption-attachment-10973\" class=\"wp-caption-text\">www.wherehaveallthewildlingsgone.com<\/p><\/div>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Leia_mais_sobre_Flat_UI_Design\"><\/span>Leia mais sobre Flat UI Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a title=\"Flat UI Desgin Gallery &amp; Trendz\" href=\"http:\/\/flattrendz.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Flat Trendz<\/a><\/li>\n<li><a title=\"Flat UI Design\" href=\"http:\/\/fltdsgn.com\" rel=\"nofollow noopener\" target=\"_blank\">Flat Design<\/a><\/li>\n<li><a title=\"Flat UI\" href=\"http:\/\/flatui.net\" rel=\"nofollow noopener\" target=\"_blank\">Flat UI<\/a><\/li>\n<li><a title=\"Flat UI Colors\" href=\"http:\/\/flatuicolors.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Flat UI Colors<\/a><\/li>\n<\/ul>\n<p>&nbsp;\t\t<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#Ta_mas_o_que_e_esse_tal_de_Flat_Design\" >T\u00e1, mas o que \u00e9 esse tal de Flat Design?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#Identificando_uma_UI_Flat\" >Identificando uma UI Flat<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#Como_e_por_que_o_Flat_Design_surgiu\" >Como e por que o Flat Design surgiu?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#E_isso_e_so_mais_uma_tendencia_ou_esta_ai_pra_ficar\" >E isso \u00e9 s\u00f3 mais uma tend\u00eancia ou est\u00e1 a\u00ed pra ficar?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#E_agora_devo_abandonar_tudo_e_fazer_todos_os_meus_projetos_Flat\" >E agora, devo abandonar tudo e fazer todos os meus projetos Flat?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#5_excelentes_exemplos_de_Flat_Design\" >5 excelentes exemplos de Flat Design<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#5_LayerVault\" >5. LayerVault<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#4_Triplagent\" >4. Triplagent<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#3_Foundation\" >3. Foundation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#2_MapBox\" >2. MapBox<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#1_Game_of_Thrones_by_Nigel_Evan_Dennis\" >1. Game of Thrones by Nigel Evan Dennis<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.yogh.com.br\/blog\/flat-design-se-conteudo-e-rei-a-simplicidade-e-ouro\/#Leia_mais_sobre_Flat_UI_Design\" >Leia mais sobre Flat UI Design<\/a><\/li><\/ul><\/nav><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Todo mundo conhece aquela m\u00e1xima da web \u201cConte\u00fado \u00e9 Rei\u201d, e n\u00e3o existe complemento maior para a nobreza de um rei do que ouro, do mais alto quilate, e ouro nesse caso \u00e9 um design limpo e simplificado, que d\u00e1 destaque ao conte\u00fado e foge do famigerado padr\u00e3o &#8220;elementos que saltam aos olhos&#8221;, conhecido tamb\u00e9m [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":10930,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"kk_blocks_editor_width":"","_kiokenblocks_attr":"","_kiokenblocks_dimensions":"","footnotes":""},"categories":[19],"tags":[],"class_list":["post-10925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dicas-wordpress"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/10925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/comments?post=10925"}],"version-history":[{"count":1,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/10925\/revisions"}],"predecessor-version":[{"id":38965,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/posts\/10925\/revisions\/38965"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media\/10930"}],"wp:attachment":[{"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/media?parent=10925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/categories?post=10925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yogh.com.br\/blog\/wp-json\/wp\/v2\/tags?post=10925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}