{"id":3082,"date":"2015-06-18T11:00:11","date_gmt":"2015-06-18T11:00:11","guid":{"rendered":"http:\/\/blog.penseavanti.com.br\/?p=3082"},"modified":"2015-06-18T11:00:11","modified_gmt":"2015-06-18T11:00:11","slug":"flat-design-em-lojas-online","status":"publish","type":"post","link":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/","title":{"rendered":"Flat Design: Como ele transformou a apar\u00eancia das lojas online"},"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;3082&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: Como ele transformou a apar\\u00eancia das lojas online&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: #58666e; text-align: justify;\">A identidade visual e o primor gr\u00e1fico s\u00e3o muito importantes para o e-commerce. Cada elemento da apar\u00eancia da plataforma deve ser pensado para atrair a aten\u00e7\u00e3o, encantar o cliente, gerar empatia e vender a imagem de uma loja virtual. Isso \u00e9 consenso.<\/p>\n<h2><span style=\"font-size: medium;\">Dentro dessa vis\u00e3o, h\u00e1 uma nova tend\u00eancia no design gr\u00e1fico de interfaces que busca um visual mais simples, minimalista, responsivo e vetorial. Essa tend\u00eancia se chama Flat Design.<\/span><\/h2>\n<p><a title=\"Flat Design - Modernize o layout de sua loja online com a Avanti\" href=\"http:\/\/www.penseavanti.com.br\/design?utm_source=CTA-Blog&amp;utm_medium=CTA-Meio-Design&amp;utm_campaign=CTA-Meio-Design\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-3084 size-full\" src=\"http:\/\/blog.penseavanti.com.br\/wp-content\/uploads\/2015\/06\/banner1-postblog-181.png\" alt=\"Flat Design - Modernize o layout de sua loja online com a Avanti\" width=\"718\" height=\"156\" \/><\/a><\/p>\n<p style=\"font-weight: 500; color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">O que \u00e9 Flat Design?<br \/>\n<\/span>O Flat Design se caracteriza pelo minimalismo, pelas cores chapadas, pela tipografia n\u00edtida e pelos bons contrastes, privilegiando por meio da est\u00e9tica a compreens\u00e3o das mensagens sem interferir nos conte\u00fados. E importante: ele\u00a0contribui\u00a0na filtragem das informa\u00e7\u00f5es por meio de \u00edcones e bot\u00f5es que ajudam o internauta a navegar intuitivamente, de uma forma criativa e agrad\u00e1vel.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">Numa tradu\u00e7\u00e3o livre, Flat Design, quer dizer design plano. Ou seja, sem muitos rebuscamentos, sem altos e baixos relevos. Em outras palavras: acabou a era das bordas chanfradas, das texturas, das sombras e reflexos,\u00a0e chegou \u00e0 era da clareza visual para comunicar melhor.<\/p>\n<p style=\"font-weight: 500; color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">Exemplos de Flat Design<br \/>\n<\/span>Um grande exemplo de Flat Design \u00e9 o Windows 8, que valoriza a tipografia \u00a0e a entrega de informa\u00e7\u00e3o por meio de gr\u00e1ficos que ajudam o usu\u00e1rio a entender que tipo de conte\u00fado est\u00e1 lendo. A iconografia \u00e9 relativamente simples, sem grandes efeitos, colocando toda a import\u00e2ncia na mensagem.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">Ali\u00e1s, o Flat Design tem sido usado com for\u00e7a pela Microsoft. O Windows Phone, outro produto da companhia, tamb\u00e9m aplica o princ\u00edpio, ao mostrar fontes simples, sem serifa, podendo assim, brincar com um leque maior de cores.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">No e-commerce, podemos citar\u00a0<a style=\"color: #363f44;\" title=\"La Mafia - Loja online com design flat\" href=\"http:\/\/www.lamafia.clothing\/?utm_source=Blog%20Avanti&amp;utm_medium=Post%20sobre%20Flat%20Design%20&amp;utm_campaign=Loja%20com%20Design%20Flat\" target=\"_blank\" rel=\"noopener\">La\u2022Maffia Clothing<\/a>, uma loja virtual para\u00a0artigos de moda fitness.\u00a0No site, \u00e9 poss\u00edvel perceber a predomin\u00e2ncia de cores chapadas e neutras, tipografia reta e moderna, imagens ousadas e destacadas. Uma combina\u00e7\u00e3o perfeita!<\/p>\n<p style=\"font-weight: 500; color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">Os benef\u00edcios do flat design para sua loja online<br \/>\n<\/span>A Internet est\u00e1 em movimento, como sempre. E o uso de smartphones cresce anualmente, tanto que, de acordo com a\u00a0<a style=\"color: #363f44;\" href=\"http:\/\/br.idclatin.com\/releases\/news.aspx?id=1801\">consultoria IDC<\/a>, foram vendidos 104 unidades por minuto no Brasil em 2014. Ou seja, oportunidades n\u00e3o faltam para o e-commerce. Confira a seguir os benef\u00edcios do flat design para sua loja online:<\/p>\n<p style=\"color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">Leveza e atratividade em dispositivos m\u00f3veis<br \/>\n<\/span>A explos\u00e3o do acesso \u00e0 internet por meio de aplicativos m\u00f3veis refor\u00e7ou a import\u00e2ncia de algumas considera\u00e7\u00f5es de design. \u00c9 preciso trabalhar, portanto, o carregamento r\u00e1pido das p\u00e1ginas, a usabilidade, o layout responsivo, a criatividade e a modernidade das lojas virtuais.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">Nesse sentido, o Flat Design \u00e9 muito importante para as lojas virtuais, pois evita inclina\u00e7\u00f5es extremas, sombras e chanfros que podem deixar a plataforma lenta. O\u00a0objetivo \u00e9 criar um design sutil que \u00e9 atraente e funcional, sem desperdi\u00e7ar pixels.<\/p>\n<p style=\"color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">Cores s\u00f3lidas que comunicam melhor<br \/>\n<\/span>Usando cores s\u00f3lidas cria-se um contraste entre partes, ou recursos, proporcionando fronteiras visuais, o que ajuda na transmiss\u00e3o das informa\u00e7\u00f5es.<\/p>\n<p style=\"color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\">Tipografia que melhora a legibilidade<br \/>\n<\/span>Em termos de tipografia, o Flat Design, muitas vezes, envolve um maior n\u00famero de fontes em um \u00fanico projeto, bem como tamanhos e pesos variados. A tipografia, cada vez mais, assume o papel de ajudar a comunicar o conte\u00fado e recursos de forma leg\u00edvel, com beleza e sofistica\u00e7\u00e3o.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">Em resumo, o Flat Design ajuda a melhorar o tempo de carregamento do site,\u00a0amplia\u00a0a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean; tamb\u00e9m\u00a0potencializa\u00a0o engajamento \u00e0 medida que o conte\u00fado ganha mais import\u00e2ncia do que o visual rebuscado em si.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">O Flat Design proporciona uma experi\u00eancia agrad\u00e1vel e enriquecedora para o consumidor\/usu\u00e1rio, e o convida a permanecer mais tempo absorvendo o conte\u00fado. A \u00eanfase no espa\u00e7o em branco, nos bot\u00f5es simples e na tipografia clara tem o potencial de permitir que os produtos e servi\u00e7os brilhem &#8211; h\u00e1 menos distra\u00e7\u00f5es para ficar no caminho do cliente.<\/p>\n<p style=\"color: #58666e; text-align: justify;\">Sua loja virtual j\u00e1 utiliza elementos de Flat Design? Comente!<\/p>\n<p style=\"color: #58666e; text-align: justify;\"><span style=\"font-weight: bold;\"><a href=\"http:\/\/avalie-seu-ecommerce.penseavanti.com.br\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-3083 size-full\" title=\"Flat Design - Modernize o layout de sua loja online com a Avanti\" src=\"http:\/\/blog.penseavanti.com.br\/wp-content\/uploads\/2015\/06\/banner2-postblog-17.png\" alt=\"Flat Design - Modernize o layout de sua loja online com a Avanti\" width=\"718\" height=\"106\" \/><\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A identidade visual e o primor gr\u00e1fico s\u00e3o muito importantes para o e-commerce. Cada elemento da apar\u00eancia da plataforma deve ser pensado para atrair a aten\u00e7\u00e3o, encantar o cliente, gerar empatia e vender a imagem de uma loja virtual. Isso \u00e9 consenso. Dentro dessa vis\u00e3o, h\u00e1 uma nova tend\u00eancia no design gr\u00e1fico de interfaces que [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3087,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[16],"tags":[211,125,212,213],"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: Como ele transformou a apar\u00eancia das lojas online<\/title>\n<meta name=\"description\" content=\"O Flat Design ajuda a melhorar o tempo de carregamento do site, amplia a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean.\" \/>\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-em-lojas-online\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flat Design: Como ele transformou a apar\u00eancia das lojas online\" \/>\n<meta property=\"og:description\" content=\"O Flat Design ajuda a melhorar o tempo de carregamento do site, amplia a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/\" \/>\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=\"2015-06-18T11:00:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/penseavanti.com.br\/ecommerce\/wp-content\/uploads\/2015\/06\/Flat-design-para-mobile.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1773\" \/>\n\t<meta property=\"og:image:height\" content=\"1300\" \/>\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: Como ele transformou a apar\u00eancia das lojas online","description":"O Flat Design ajuda a melhorar o tempo de carregamento do site, amplia a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean.","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-em-lojas-online\/","og_locale":"pt_BR","og_type":"article","og_title":"Flat Design: Como ele transformou a apar\u00eancia das lojas online","og_description":"O Flat Design ajuda a melhorar o tempo de carregamento do site, amplia a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean.","og_url":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/","og_site_name":"Avanti | e-commerce e Marketing Digital","article_publisher":"https:\/\/www.facebook.com\/penseavanti\/","article_published_time":"2015-06-18T11:00:11+00:00","og_image":[{"width":1773,"height":1300,"url":"https:\/\/penseavanti.com.br\/ecommerce\/wp-content\/uploads\/2015\/06\/Flat-design-para-mobile.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-em-lojas-online\/#article","isPartOf":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/"},"author":{"name":"Avanti","@id":"https:\/\/penseavanti.com.br\/ecommerce\/#\/schema\/person\/0a098dd4d2cb8e18beef1b3f54f255ff"},"headline":"Flat Design: Como ele transformou a apar\u00eancia das lojas online","datePublished":"2015-06-18T11:00:11+00:00","dateModified":"2015-06-18T11:00:11+00:00","mainEntityOfPage":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/"},"wordCount":702,"commentCount":0,"publisher":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#organization"},"keywords":["design clean","Flat Design","iconografia","layout clean"],"articleSection":["E-commerce"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/","url":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/","name":"Flat Design: Como ele transformou a apar\u00eancia das lojas online","isPartOf":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/#website"},"datePublished":"2015-06-18T11:00:11+00:00","dateModified":"2015-06-18T11:00:11+00:00","description":"O Flat Design ajuda a melhorar o tempo de carregamento do site, amplia a experi\u00eancia do usu\u00e1rio, por meio de iconografia, tipografia e do layout clean.","breadcrumb":{"@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/penseavanti.com.br\/ecommerce\/flat-design-em-lojas-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/penseavanti.com.br\/ecommerce\/"},{"@type":"ListItem","position":2,"name":"Flat Design: Como ele transformou a apar\u00eancia das lojas online"}]},{"@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\/3082"}],"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=3082"}],"version-history":[{"count":0,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/posts\/3082\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/media\/3087"}],"wp:attachment":[{"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/media?parent=3082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/categories?post=3082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/penseavanti.com.br\/ecommerce\/wp-json\/wp\/v2\/tags?post=3082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}