{"id":4144,"date":"2024-09-19T23:03:31","date_gmt":"2024-09-19T23:03:31","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4144"},"modified":"2026-03-09T17:34:12","modified_gmt":"2026-03-09T17:34:12","slug":"o-que-e-design-de-cartao-de-website","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-design-de-cartao-de-website\/","title":{"rendered":"O que \u00e9 design de cart\u00e3o para sites?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#what-is-a-card-in-ui-design\">O que \u00e9 um card em design de UI?<\/a><\/li><li><a href=\"#what-is-the-anatomy-of-a-ui-card\">Qual \u00e9 a anatomia de um card de UI?\u00a0<\/a><\/li><li><a href=\"#how-does-card-design-work\">Como funciona o design de cards?<\/a><\/li><li><a href=\"#what-are-the-benefits-of-using-card-designs-in-ui\">Quais s\u00e3o os benef\u00edcios de usar designs de cards em UI?<\/a><\/li><li><a href=\"#what-are-some-common-use-cases-for-card-designs\">Quais s\u00e3o alguns casos de uso comuns para designs de cards?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-a-card-in-ui-design\" style=\"font-size:32px\">O que \u00e9 um card em design de UI?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Em designs de UI, os Cards s\u00e3o ret\u00e2ngulos\/quadrados em uma \u00e1rea independente. O conte\u00fado neles est\u00e1 separado de outros elementos na p\u00e1gina, o que pode impactar a legibilidade.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Voc\u00ea deve usar Cards em design de UI quando quiser que os visitantes se concentrem em aspectos espec\u00edficos da informa\u00e7\u00e3o.&nbsp;<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-the-anatomy-of-a-ui-card\" style=\"font-size:32px\">Qual \u00e9 a anatomia de um card de UI?&nbsp;<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os Cards de UI normalmente t\u00eam estas caracter\u00edsticas:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Contentores:<\/strong> O contentor \u00e9 a forma que cont\u00e9m o conte\u00fado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Cabe\u00e7alhos: <\/strong>O t\u00edtulo\/cabe\u00e7alho principal; isto n\u00e3o \u00e9 absolutamente necess\u00e1rio.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Imagem\/\u00cdcone:<\/strong> Trata-se de algum tipo de conte\u00fado visual, como uma foto ou logotipo; novamente, isso nem sempre \u00e9 obrigat\u00f3rio.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Corpo:<\/strong> Onde o texto e outros aspectos ficam dentro do Card.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Rodap\u00e9:<\/strong> Usado para metadados e outras formas de informa\u00e7\u00e3o extra; tal como os cabe\u00e7alhos e imagens\/\u00edcones, \u00e9 opcional.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nPersonalize o Card com base em situa\u00e7\u00f5es e contextos individuais. Apenas alguns elementos s\u00e3o absolutamente necess\u00e1rios, por isso pense em como pretende que o seu conte\u00fado se encaixe.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-does-card-design-work\" style=\"font-size:32px\">Como funciona o design de cards?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Os designs de cards organizam visualmente as informa\u00e7\u00f5es agrupando aspectos relacionados. Dependendo do conte\u00fado do seu card, voc\u00ea pode querer adicionar links e outros aspectos interativos.&nbsp;<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-benefits-of-using-card-designs-in-ui\" style=\"font-size:32px\">Quais s\u00e3o os benef\u00edcios de usar designs de cards em UI?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Algumas das raz\u00f5es para considerar o uso de design de Cards de UI s\u00e3o:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Organiza\u00e7\u00e3o visual: <\/strong>Use cards se precisar tornar informa\u00e7\u00f5es complexas mais leg\u00edveis.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Leitura din\u00e2mica: <\/strong>As informa\u00e7\u00f5es devem ser facilmente encontradas nos cards da interface do usu\u00e1rio para uma leitura simplificada.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Adaptabilidade:<\/strong> Use designs de cards para apresentar informa\u00e7\u00f5es em diferentes tamanhos de tela.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Versatilidade: <\/strong>Voc\u00ea deve usar designs de cards se precisar apresentar diferentes tipos de conte\u00fado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Engajamento do Usu\u00e1rio: <\/strong>Adicione elementos interativos, como bot\u00f5es.&nbsp;<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nUse seus cards para mostrar aos usu\u00e1rios onde sua aten\u00e7\u00e3o deve se concentrar. A hierarquia visual \u00e9 uma considera\u00e7\u00e3o essencial. \n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-some-common-use-cases-for-card-designs\" style=\"font-size:32px\">Quais s\u00e3o alguns casos de uso comuns para designs de cards?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Exemplos em que voc\u00ea ver\u00e1 designs de cards sendo usados incluem:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Listagens de Produtos:<\/strong> Lojas de com\u00e9rcio eletr\u00f4nico usam designs de cards para destacar pre\u00e7os e descri\u00e7\u00f5es de produtos. T\u00edtulos, imagens e outros elementos (por exemplo, classifica\u00e7\u00f5es por estrelas) tamb\u00e9m s\u00e3o usados.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Feeds de Not\u00edcias\/Artigos:<\/strong> Publica\u00e7\u00f5es, blogs e outras empresas podem usar designs de cards para resumir artigos e adicionar uma imagem em destaque, e o t\u00edtulo tamb\u00e9m pode aparecer aqui.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Conte\u00fado de M\u00eddias Sociais:<\/strong> Textos, fotos e v\u00eddeos extra\u00eddos das m\u00eddias sociais podem ser usados em cards. \u00c0s vezes, voc\u00ea ver\u00e1 isso aparecer como um embed em artigos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Widgets do Painel: <\/strong>Resumos de dados, estat\u00edsticas e outras m\u00e9tricas podem ser inclu\u00eddos em cart\u00f5es de widgets do painel em diferentes ferramentas de software.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Resultados da Pesquisa: <\/strong>Designs de cart\u00e3o s\u00e3o algumas vezes usados em resultados de pesquisa; aqui, voc\u00ea ver\u00e1 trechos de informa\u00e7\u00f5es e links. Voc\u00ea pode ent\u00e3o clicar em um resultado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Estes s\u00e3o alguns dos exemplos em que voc\u00ea ver\u00e1 designs de cart\u00e3o usados online. Designers e desenvolvedores devem considerar como organizam as informa\u00e7\u00f5es e maximizam o apelo visual, considerando tamb\u00e9m a experi\u00eancia do usu\u00e1rio.&nbsp;<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\">Conclus\u00e3o<\/h2>\n\n\n\n<p>Designs de sites modernos consistem em muitos elementos, um dos quais s\u00e3o os designs de cart\u00e3o. Aprenda os fundamentos do design de cart\u00e3o para poder criar um site que gere tr\u00e1fego e envolva seu p\u00fablico-alvo.<\/p>","protected":false},"excerpt":{"rendered":"<p>What is a card in UI design? Cards in UI designs are rectangles\/squares in a self-contained area. The content in them is separate from other on-page elements, which can impact readability.&nbsp; You should use cards in UI design when you want visitors to focus on specific information aspects.&nbsp; What is the anatomy of a UI [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4148,"template":"","answers_category":[28],"class_list":["post-4144","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":8090,"card_image":4148,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 design de cart\u00e3o para sites?","descriptions":"Website card design refers to the most common way of presenting information on the website that is similar to digital index cards.\r\n<p data-textblock-id=\"W-1-TB-1\" data-pm-slice=\"1 1 []\">The <span id=\"mmti8k\" class=\"synonyms-available\">related<\/span> <span id=\"mipn70\" class=\"synonyms-available\">content<\/span> in website card design is <span id=\"mgt4ad\" class=\"synonyms-available\">grouped<\/span> together so visitors can quickly <span id=\"mpf2dt\" class=\"synonyms-available\">scan<\/span> and <span id=\"m6af1q\" class=\"synonyms-available\">digest<\/span> information.<\/p>","tip_label":"","tip":"","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Card designs are used to visually organize information","body":""},{"label":"Card creation requires various aspects, such as responsiveness, hierarchy, and accessibility","body":""},{"label":"","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4148"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4144"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}