{"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":"que-es-el-diseno-de-tarjetas-de-sitios-web","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/es\/respuestas\/que-es-el-diseno-de-tarjetas-de-sitios-web\/","title":{"rendered":"\u00bfQu\u00e9 es el dise\u00f1o de tarjetas de sitio web?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice de contenidos<\/h2><nav><ul><li><a href=\"#what-is-a-card-in-ui-design\">\u00bfQu\u00e9 es una tarjeta en el dise\u00f1o de UI?<\/a><\/li><li><a href=\"#what-is-the-anatomy-of-a-ui-card\">\u00bfCu\u00e1l es la anatom\u00eda de una tarjeta de UI?\u00a0<\/a><\/li><li><a href=\"#how-does-card-design-work\">\u00bfC\u00f3mo funciona el dise\u00f1o de tarjetas?<\/a><\/li><li><a href=\"#what-are-the-benefits-of-using-card-designs-in-ui\">\u00bfCu\u00e1les son los beneficios de usar dise\u00f1os de tarjetas en UI?<\/a><\/li><li><a href=\"#what-are-some-common-use-cases-for-card-designs\">\u00bfCu\u00e1les son algunos casos de uso comunes para los dise\u00f1os de tarjetas?<\/a><\/li><li><a href=\"#conclusion\">Conclusi\u00f3n<\/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\">\u00bfQu\u00e9 es una tarjeta en el dise\u00f1o de UI?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Las tarjetas en los dise\u00f1os de UI son rect\u00e1ngulos\/cuadrados en un \u00e1rea aut\u00f3noma. El contenido en ellas est\u00e1 separado de otros elementos en la p\u00e1gina, lo que puede afectar la legibilidad.&nbsp;<\/p>\n\n\n\n<p style=\"font-size:18px\">Deber\u00edas usar tarjetas en el dise\u00f1o de UI cuando quieras que los visitantes se centren en aspectos espec\u00edficos de la informaci\u00f3n.&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\">\u00bfCu\u00e1l es la anatom\u00eda de una tarjeta de UI?&nbsp;<\/h2>\n\n\n\n<p style=\"font-size:18px\">Las tarjetas de UI normalmente tienen estas caracter\u00edsticas:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Contenedores:<\/strong> El contenedor es la forma en la que se guarda el contenido.&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>Encabezados: <\/strong>El t\u00edtulo\/encabezado principal; esto no es una necesidad absoluta.&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>Imagen\/Icono:<\/strong> Este es alg\u00fan tipo de contenido visual, como una foto o un logotipo; nuevamente, esto no siempre es necesario.&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>Cuerpo:<\/strong> Donde el texto y otros aspectos van dentro de la tarjeta.&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>Pie de p\u00e1gina:<\/strong> Se usa para metadatos y otras formas de informaci\u00f3n adicional; esto, como los encabezados y las im\u00e1genes\/iconos, es 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\nConsejo profesional:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nPersonaliza la tarjeta seg\u00fan las situaciones individuales y el contexto. Solo algunos elementos son necesidades absolutas, as\u00ed que piensa en c\u00f3mo planeas que tu contenido encaje.\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\">\u00bfC\u00f3mo funciona el dise\u00f1o de tarjetas?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Los dise\u00f1os de tarjetas organizan visualmente la informaci\u00f3n al agrupar aspectos relacionados. Dependiendo del contenido de tu tarjeta, podr\u00edas querer agregar enlaces y otros aspectos interactivos.&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\">\u00bfCu\u00e1les son los beneficios de usar dise\u00f1os de tarjetas en UI?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Algunas de las razones para considerar el uso de tarjetas en el dise\u00f1o de UI son:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Organizaci\u00f3n visual: <\/strong>Usa tarjetas si necesitas que la informaci\u00f3n compleja sea m\u00e1s legible.&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>Escaneo: <\/strong>La informaci\u00f3n debe ser f\u00e1cil de encontrar dentro de las tarjetas de la interfaz de usuario para simplificar la lectura.&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>Adaptabilidad:<\/strong> Usa dise\u00f1os de tarjetas para presentar informaci\u00f3n en diferentes tama\u00f1os de pantalla.&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>Versatilidad: <\/strong>Deber\u00edas usar dise\u00f1os de tarjetas si tienes que presentar diferentes tipos de contenido.&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>Compromiso del usuario: <\/strong>Agrega elementos interactivos, como botones.&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\nConsejo profesional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nUsa tus tarjetas para mostrar a los usuarios d\u00f3nde debe ir su atenci\u00f3n. La jerarqu\u00eda visual es una consideraci\u00f3n esencial. \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\">\u00bfCu\u00e1les son algunos casos de uso comunes para los dise\u00f1os de tarjetas?<\/h2>\n\n\n\n<p style=\"font-size:18px\">Algunos ejemplos en los que ver\u00e1s dise\u00f1os de tarjetas utilizados incluyen:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Listados de Productos:<\/strong> Las tiendas de comercio electr\u00f3nico utilizan dise\u00f1os de tarjetas para resaltar los precios y las descripciones de los productos. Tambi\u00e9n se utilizan t\u00edtulos, im\u00e1genes y otros elementos (por ejemplo, calificaciones con estrellas).&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>Noticias\/Feeds de Art\u00edculos:<\/strong> Las publicaciones, los blogs y otras empresas pueden utilizar dise\u00f1os de tarjetas para resumir art\u00edculos y a\u00f1adir una imagen destacada, y el titular tambi\u00e9n puede aparecer aqu\u00ed.<\/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>Contenido de Redes Sociales:<\/strong> El texto, las fotos y los videos extra\u00eddos de las redes sociales se pueden usar en tarjetas. A veces, ver\u00e1s que esto aparece como una inserci\u00f3n en los art\u00edculos.&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 del Panel de Control: <\/strong>Los res\u00famenes de datos, las estad\u00edsticas y otras m\u00e9tricas pueden incluirse en las tarjetas de widgets del panel de control dentro de diferentes herramientas 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 de la b\u00fasqueda: <\/strong>Los dise\u00f1os de tarjetas a veces se utilizan en los resultados de b\u00fasqueda; aqu\u00ed ver\u00e1 fragmentos de informaci\u00f3n y enlaces. A continuaci\u00f3n, puede hacer clic en un resultado.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Estos son algunos de los casos en los que ver\u00e1 dise\u00f1os de tarjetas utilizados en l\u00ednea. Los dise\u00f1adores y desarrolladores deben considerar c\u00f3mo organizan la informaci\u00f3n y maximizan el atractivo visual, al mismo tiempo que consideran la experiencia del usuario.&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\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>Los dise\u00f1os de sitios web modernos constan de muchos elementos, uno de los cuales son los dise\u00f1os de tarjetas. Aprenda los conceptos b\u00e1sicos del dise\u00f1o de tarjetas para poder crear un sitio web que impulse el tr\u00e1fico e interact\u00fae con su p\u00fablico objetivo.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es una tarjeta en el dise\u00f1o de UI? Las tarjetas en los dise\u00f1os de UI son rect\u00e1ngulos\/cuadrados en un \u00e1rea autocontenida. El contenido en ellas est\u00e1 separado de otros elementos de la p\u00e1gina, lo que puede afectar la legibilidad.&nbsp; Debes usar tarjetas en el dise\u00f1o de UI cuando quieras que los visitantes se centren en aspectos espec\u00edficos de la informaci\u00f3n.&nbsp; \u00bfCu\u00e1l es la anatom\u00eda de una 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":"\u00bfQu\u00e9 es el dise\u00f1o de tarjetas de sitio web?","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\/es\/wp-json\/wp\/v2\/answer\/4144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/media\/4148"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/media?parent=4144"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/es\/wp-json\/wp\/v2\/answers_category?post=4144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}