{"id":1752,"date":"2014-09-26T08:00:17","date_gmt":"2014-09-26T08:00:17","guid":{"rendered":"https:\/\/blog.penseavanti.com.br\/?p=1752"},"modified":"2014-09-26T08:00:17","modified_gmt":"2014-09-26T08:00:17","slug":"flat-design-o-que-e-e-suas-tendencias","status":"publish","type":"post","link":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/","title":{"rendered":"Flat Design: o que \u00e9 e suas tend\u00eancias"},"content":{"rendered":"\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-top\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1752&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;0&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;0&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;4&quot;,&quot;greet&quot;:&quot;Avalie esta p\\u00e1gina&quot;,&quot;legend&quot;:&quot;0\\\/5 - (0 votes)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Flat Design: o que \\u00e9 e suas tend\\u00eancias&quot;,&quot;width&quot;:&quot;0&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 0px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 4px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            <span class=\"kksr-muted\">Avalie esta p\u00e1gina<\/span>\n    <\/div>\n    <\/div>\n<p style=\"color: #595959;\">Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia. S\u00e3o as extremidades sombreadas, os\u00a0chanfros, relevos, fontes e formas elaboradas. Uma linguagem visual que foi transferida das folhas de papel para as telas\u00a0na\u00a0tentativa de tornar os objetos mais &#8220;reais&#8221;, mas que, na verdade, j\u00e1 n\u00e3o \u00e9 l\u00e1 muito necess\u00e1ria.<\/p>\n<p style=\"color: #595959;\">\u00c9 na contram\u00e3o dessas formas rebuscadas que surge o Flat Design, o design plano. Melhor adaptado aos nossos novos canais digitais de comunica\u00e7\u00e3o, ele \u00e9 constru\u00eddo com formas e fontes simples, cores s\u00f3lidas, layout clean. Uma combina\u00e7\u00e3o que resulta em interfaces mais claras, f\u00e1ceis de visualizar, de ler e de interagir,\u00a0e que se adapta perfeitamente \u00e0s telas\u00a0com as quais nos relacionamos hoje.<\/p>\n<p style=\"color: #595959;\">Basta imaginar um site complexo, repleto de efeitos e bot\u00f5es, sendo visualizado em uma tela de smartphone &#8211; complicado, n\u00e3o \u00e9? Em telas reduzidas, com touchscreen, a simplicidade n\u00e3o significa apenas beleza, mas tamb\u00e9m usabilidade. E \u00e9 nessa finalidade que se baseiam as principais caracter\u00edsticas do Flat Design.<\/p>\n<h2 style=\"color: #595959;\"><strong>Efeitos<\/strong><\/h2>\n<p style=\"color: #595959;\">N\u00e3o h\u00e1 mais a preocupa\u00e7\u00e3o com a &#8220;realidade&#8221;. Pelo contr\u00e1rio. Hoje, as telas j\u00e1 s\u00e3o suficientemente &#8220;reais&#8221;, parte do nosso dia a dia. Estamos habituados a elas.<\/p>\n<p style=\"color: #595959;\">Por isso, a preocupa\u00e7\u00e3o com os efeitos \u00e9 deixada de lado no Flat Design. Os bot\u00f5es na tela n\u00e3o precisam mais parecer bot\u00f5es da vida real &#8211; v\u00e3o-se as sombras, reflexos, texturas. Para essa nova linguagem, as formas planas s\u00e3o o suficiente.<\/p>\n<h2 style=\"color: #595959;\"><strong>Elementos geom\u00e9tricos<\/strong><\/h2>\n<p style=\"color: #595959;\">O Flat Design \u00e9 feito de elementos, em sua maioria, quadrados, retangulares, redondos. Formas simples, mas que n\u00e3o significam que esse tipo de design seja f\u00e1cil.<\/p>\n<p style=\"color: #595959;\">Para um resultado pr\u00e1tico e visualmente agrad\u00e1vel, os profissionais que j\u00e1 se dedicam a essa nova tend\u00eancia precisam conhecer a fundo a din\u00e2mica de cores e formas. \u00c9 preciso comunicar mais com menos. Construir formas clean, mas significativas, que facilitem o entendimento e a utiliza\u00e7\u00e3o das interfaces.<\/p>\n<h2 style=\"color: #595959;\"><strong>Cores<\/strong><\/h2>\n<p style=\"color: #595959;\">Com a quantidade de efeitos minimizada, as cores mais s\u00f3lidas predominam no Flat Design. Os tons utilizados s\u00e3o, geralmente, mais vivos, alegres e as combina\u00e7\u00f5es costumam ser mais coloridas.<\/p>\n<p style=\"color: #595959;\">Tanto cores prim\u00e1rias e secund\u00e1rias quanto cores diferenciadas s\u00e3o utilizadas, sempre de acordo com suas caracter\u00edsticas marcantes &#8211; \u00e9 sempre importante lembrar que as cores tamb\u00e9m transmitem sentimentos e sensa\u00e7\u00f5es que interferem na imagem da marca que os usu\u00e1rios formar\u00e3o.<\/p>\n<h2 style=\"color: #595959;\"><strong>Tipografia<\/strong><\/h2>\n<p style=\"color: #595959;\">As fontes desempenham um papel de destaque nesse novo design. Geralmente, as fontes mais &#8220;limpas&#8221;, sem rebuscamento, s\u00e3o as preferidas para esses projetos, por estarem alinhadas com os demais elementos. Fontes com serifa, com o efeito escrito \u00e0 m\u00e3o, entre outras mais elaboradas, podem ser utilizadas, mas geralmente o s\u00e3o com cautela e em projetos espec\u00edficos.<\/p>\n<p style=\"color: #595959;\">A regra geral \u00e9 um texto limpo, f\u00e1cil de ler at\u00e9 nas menores telas.<\/p>\n<h2 style=\"color: #595959;\"><strong>Simplicidade<\/strong><\/h2>\n<p style=\"color: #595959;\">O Flat Design \u00e9 minimalista, um estilo que se consolidou nos \u00faltimos anos tamb\u00e9m em rela\u00e7\u00e3o \u00e0 identidade visual das marcas. Voc\u00ea talvez j\u00e1 tenha reparado na evolu\u00e7\u00e3o das logos de empresas tradicionais ao longo dos anos. Com raras exce\u00e7\u00f5es, elas costumam partir de desenhos rebuscados e elaborados para se tornar pura simplicidade. Pense na logo da Apple, Nike, Microsoft. Muitas das empresas mais jovens j\u00e1 nascem dentro dessa l\u00f3gica tamb\u00e9m.<\/p>\n<p style=\"color: #595959;\">No Flat Design, as telas carregam a menor quantidade de elementos poss\u00edvel. Apenas o suficiente para expor o conte\u00fado e funcionalidades necess\u00e1rios. N\u00e3o \u00e9 raro se deparar com telas quase &#8220;vazias&#8221;.<\/p>\n<h2 style=\"color: #595959;\"><strong>Vantagens<\/strong><\/h2>\n<p style=\"color: #595959;\">O\u00a0digital exige uma nova linguagem. Nosso comportamento mudou com ele: hoje, somos apressados, n\u00e3o gostamos de garimpar informa\u00e7\u00f5es, ter um trabalho imenso para encontrar o que precisamos. Nossa leitura mudou, tornou-se mais r\u00e1pida e din\u00e2mica,\u00a0n\u00f3s exigimos\u00a0praticidade. E o Flat Design, muito mais do que surprir essas necessidades, representa muito bem o que nos tornamos.<\/p>\n<p style=\"color: #595959;\"><strong>Fique de olho nessa tend\u00eancia! Reflita sobre como sua empresa pode adotar o Flat Design, um novo estilo de linguagem. Compartilhe sua opini\u00e3o sobre esse assunto nos coment\u00e1rios!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia. S\u00e3o as extremidades sombreadas, os\u00a0chanfros, relevos, fontes e formas elaboradas. Uma linguagem visual que foi transferida das folhas de papel para as telas\u00a0na\u00a0tentativa de tornar os objetos mais &#8220;reais&#8221;, mas que, na verdade, j\u00e1 n\u00e3o \u00e9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[125,29],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flat Design: o que \u00e9 e suas tend\u00eancias<\/title>\n<meta name=\"description\" content=\"Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flat Design: o que \u00e9 e suas tend\u00eancias\" \/>\n<meta property=\"og:description\" content=\"Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/\" \/>\n<meta property=\"og:site_name\" content=\"Avanti | e-commerce e Marketing Digital\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/penseavanti\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-26T08:00:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/penseavanti.com.br\/ecommerce\/wp-content\/uploads\/2014\/09\/monimalismo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"580\" \/>\n\t<meta property=\"og:image:height\" content=\"364\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Avanti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flat Design: o que \u00e9 e suas tend\u00eancias","description":"Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia...","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:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/","og_locale":"pt_BR","og_type":"article","og_title":"Flat Design: o que \u00e9 e suas tend\u00eancias","og_description":"Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia...","og_url":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/","og_site_name":"Avanti | e-commerce e Marketing Digital","article_publisher":"https:\/\/www.facebook.com\/penseavanti\/","article_published_time":"2014-09-26T08:00:17+00:00","og_image":[{"width":580,"height":364,"url":"https:\/\/penseavanti.com.br\/ecommerce\/wp-content\/uploads\/2014\/09\/monimalismo.jpg","type":"image\/jpeg"}],"author":"Avanti","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/#article","isPartOf":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/"},"author":{"name":"Avanti","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/person\/0a098dd4d2cb8e18beef1b3f54f255ff"},"headline":"Flat Design: o que \u00e9 e suas tend\u00eancias","datePublished":"2014-09-26T08:00:17+00:00","dateModified":"2014-09-26T08:00:17+00:00","mainEntityOfPage":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/"},"wordCount":710,"commentCount":0,"publisher":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#organization"},"keywords":["Flat Design","marketing digital"],"articleSection":["E-commerce"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/","url":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/","name":"Flat Design: o que \u00e9 e suas tend\u00eancias","isPartOf":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#website"},"datePublished":"2014-09-26T08:00:17+00:00","dateModified":"2014-09-26T08:00:17+00:00","description":"Voc\u00ea j\u00e1 deve ter percebido como alguns sites e aplicativos, apesar de digitais, imitam meios anal\u00f3gicos em sua apar\u00eancia...","breadcrumb":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-o-que-e-e-suas-tendencias\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/penseavanti.com.br\/ecommerce\/"},{"@type":"ListItem","position":2,"name":"Flat Design: o que \u00e9 e suas tend\u00eancias"}]},{"@type":"WebSite","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#website","url":"https:\/\/penseavanti.com.br\/ecommerce\/","name":"Avanti | e-commerce e Marketing Digital","description":"Acelerando GRANDES MARCAS no Com\u00e9rcio Digital. Como uma das maiores empresas de solu\u00e7\u00f5es para e-commerce do Brasil, a Avanti \u00e9 pioneira e especialista em usar o poder da tecnologia para acelerar o Com\u00e9rcio Digital do varejo, ind\u00fastria e servi\u00e7os","publisher":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/penseavanti.com.br\/ecommerce\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#organization","name":"Avanti E-commerce e Marketing Digital","url":"https:\/\/penseavanti.com.br\/ecommerce\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/logo\/image\/","url":"http:\/\/penseavanti.com.br\/wp-content\/uploads\/2021\/03\/Logo_A.png","contentUrl":"http:\/\/penseavanti.com.br\/wp-content\/uploads\/2021\/03\/Logo_A.png","width":200,"height":200,"caption":"Avanti E-commerce e Marketing Digital"},"image":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/penseavanti\/","https:\/\/www.instagram.com\/penseavanti\/","https:\/\/www.linkedin.com\/company\/penseavanti\/","https:\/\/youtube.com\/user\/penseavanti\/"]},{"@type":"Person","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/person\/0a098dd4d2cb8e18beef1b3f54f255ff","name":"Avanti","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40cd04c3e05c376e7c141d6a37a37431?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40cd04c3e05c376e7c141d6a37a37431?s=96&d=mm&r=g","caption":"Avanti"},"url":"https:\/\/penseavanti.com.br\/ecommerce\/author\/su-avanti\/"}]}},"_links":{"self":[{"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/posts\/1752"}],"collection":[{"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/comments?post=1752"}],"version-history":[{"count":0,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/posts\/1752\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/media\/1787"}],"wp:attachment":[{"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/media?parent=1752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/categories?post=1752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/tags?post=1752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}