{"id":5684,"date":"2024-09-27T09:53:40","date_gmt":"2024-09-27T15:53:40","guid":{"rendered":"https:\/\/oliverpuente.com\/?p=5684"},"modified":"2024-09-27T09:53:46","modified_gmt":"2024-09-27T15:53:46","slug":"introduccion-al-diseno-web-mas-que-un-simple-grafico","status":"publish","type":"post","link":"https:\/\/oliverpuente.com\/en\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/","title":{"rendered":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Dise\u00f1o Web: La combinaci\u00f3n de est\u00e9tica y funcionalidad<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">El dise\u00f1o web no es solo cuesti\u00f3n de crear algo visualmente atractivo; es una combinaci\u00f3n de est\u00e9tica y funcionalidad que deriva en la <a href=\"https:\/\/oliverpuente.com\/en\/ui-ux\/ux-tutorial-para-principiantes\/\">experiencia de usuario (UX).<\/a> <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">En un entorno digital donde la competencia es feroz, un sitio web debe reflejar la identidad de la marca y su propuesta de valor mientras garantiza que los usuarios encuentren lo que buscan r\u00e1pidamente. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Tener un buen dise\u00f1o web es crucial para captar la atenci\u00f3n, generar confianza y, lo m\u00e1s importante, cumplir con los objetivos del negocio, ya sea vender productos, captar leads, <a href=\"https:\/\/oliverpuente.com\/en\/ui-ux\/how-to-increase-your-conversion-rate-without-spending-on-advertising\/\">generar conversiones<\/a> o informar.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Lineamientos de marca en un sitio web: TUTORIAL C\u00f3mo definir lineamientos de marca de tu sitio web\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/C9al53SqNpY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">La Importancia de los Lineamientos de Marca en el Dise\u00f1o Web<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Uno de los elementos clave del dise\u00f1o web es la alineaci\u00f3n con los lineamientos de marca. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Definir estos aspectos desde el principio asegura coherencia visual en todo el sitio web y ayuda a que los visitantes identifiquen y conecten con la marca desde la primera visita. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Lo m\u00e1s importante del dise\u00f1o web es que logren recordar e identificar a la marca en posteriores visitas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo lograr recordaci\u00f3n en el dise\u00f1o web a trav\u00e9s de colores<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Cuando dise\u00f1\u00e9 sitios web para mis clientes, siempre empiezo asegurando que los colores de marca y tipograf\u00edas reflejen la identidad de la empresa. Por ejemplo, al crear el manual de marca para un cliente, utilic\u00e9 la regla del 60-30-10. Este enfoque distribuye los colores de forma que el color principal domina el 60% del dise\u00f1o, el secundario el 30%, y el terciario el 10%, logrando una armon\u00eda visual efectiva.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Tener claros estos lineamientos permite una experiencia coherente, asegurando que cualquier elemento visual, desde botones hasta encabezados, respete la identidad de la marca. Esto es esencial si el objetivo es generar ventas o completar formularios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colores y Jerarqu\u00eda Visual: El Rol del 60-30-10<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">El uso adecuado del color en un sitio web puede marcar la diferencia entre una experiencia atractiva y una abrumadora. Como mencion\u00e9 anteriormente, siempre aplico la regla del 60-30-10 en mis proyectos, tanto en el dise\u00f1o web como en otras disciplinas. Este sistema asegura que haya un color dominante que gu\u00ede la atenci\u00f3n del usuario, seguido de colores complementarios que destaquen detalles clave.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Adem\u00e1s, es crucial seleccionar colores que cumplan con los estados de informaci\u00f3n, \u00e9xito, advertencia y error. Por ejemplo, para los formularios de contacto o carritos de compra, utilizo colores de estado que refuercen el mensaje. El verde indica \u00e9xito, el rojo error, y los colores intermedios como el naranja advierten de posibles problemas. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Estos detalles ayudan a guiar al usuario sin ser intrusivos, mejorando la navegaci\u00f3n y las conversiones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tipograf\u00edas y Legibilidad: C\u00f3mo Definir la Estructura del Texto<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">La tipograf\u00eda es otro pilar fundamental en el dise\u00f1o web, y la selecci\u00f3n adecuada puede mejorar tanto la est\u00e9tica como la usabilidad de un sitio. En mis proyectos, me aseguro de definir un sistema tipogr\u00e1fico que diferencie los t\u00edtulos, subt\u00edtulos y el cuerpo del texto de manera clara y efectiva.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Normalmente, prefiero evitar el uso de negro puro para los textos largos, ya que puede resultar agotador para los ojos. En su lugar, opto por tonos de gris oscuro, que aportan contraste sin generar fatiga visual. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Tambi\u00e9n es esencial establecer una jerarqu\u00eda visual clara mediante etiquetas de encabezado, como H1 para los t\u00edtulos principales y H2 o H3 para subt\u00edtulos. Esto no solo organiza la informaci\u00f3n, sino que tambi\u00e9n mejora el SEO, ayudando a los motores de b\u00fasqueda a indexar el contenido de manera m\u00e1s eficiente.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">En un proyecto reciente, utilic\u00e9 la regla del n\u00famero \u00e1ureo (1.618) para ajustar el tama\u00f1o de las fuentes, logrando una relaci\u00f3n armoniosa entre t\u00edtulos, subt\u00edtulos y cuerpo de texto. Esta t\u00e9cnica asegura que el texto sea legible en cualquier dispositivo y que la jerarqu\u00eda visual est\u00e9 bien definida, lo que gu\u00eda al usuario a trav\u00e9s del contenido de manera intuitiva.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dise\u00f1o de Botones y Links: Mejorando la Experiencia de Usuario<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\"><a href=\"https:\/\/oliverpuente.com\/en\/ui-ux\/diseno-de-botones-ux\/\">El dise\u00f1ar botones y links en un sitio web<\/a> que le faciliten al usuario realizar todas las acciones que la marca quiere es un papel vital en la experiencia de usuario. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Estos elementos no solo gu\u00edan al usuario, sino que tambi\u00e9n deben tener un aspecto visual coherente con el resto del dise\u00f1o. Una de las t\u00e9cnicas m\u00e1s \u00fatiles que he aplicado es diferenciar claramente entre el estado normal y el estado hover de los botones. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Por ejemplo, cuando un usuario coloca el cursor sobre un bot\u00f3n, este cambia de color, indicando que se puede interactuar con \u00e9l. Este simple cambio mejora significativamente la usabilidad.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">En t\u00e9rminos de estructura, divido los botones en primarios, secundarios y terciarios, seg\u00fan su importancia en la conversi\u00f3n. Un bot\u00f3n primario puede ser uno de \u201cCont\u00e1ctanos\u201d, mientras que un bot\u00f3n terciario podr\u00eda estar vinculado a &#8220;Leer M\u00e1s&#8221; informaci\u00f3n adicional o ir a una secci\u00f3n de preguntas frecuentes. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Esta categorizaci\u00f3n asegura que los elementos m\u00e1s importantes sean los que reciban m\u00e1s atenci\u00f3n visual.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Tambi\u00e9n es relevante que cuides mucho los links. En mi experiencia puedes definir la estructura de links con colores en estado normal, visitado y hover, asegurando que no distraigan, pero que al mismo tiempo sean f\u00e1ciles de identificar cuando sea necesario.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">La Ret\u00edcula y el Dise\u00f1o Responsive: Adaptando tu Sitio a M\u00faltiples Dispositivos<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Un sitio web debe verse bien en todos los dispositivos, desde un monitor grande hasta un tel\u00e9fono m\u00f3vil. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Para lograrlo, es fundamental trabajar con una ret\u00edcula flexible. En todos mis proyectos utilizo una ret\u00edcula basada en columnas, donde defino un n\u00famero est\u00e1ndar de columnas (generalmente 8 o 12) que se adapta seg\u00fan el dispositivo.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">En proyectos recientes, adopt\u00e9 el enfoque mobile-first, que prioriza el dise\u00f1o para dispositivos m\u00f3viles antes de escalarlo a pantallas m\u00e1s grandes. Esto no solo simplifica la jerarqu\u00eda del contenido, sino que tambi\u00e9n asegura que la experiencia sea fluida y eficiente en cualquier plataforma. El dise\u00f1o responsive optimiza la experiencia del usuario, aumentando el tiempo de permanencia en la p\u00e1gina y mejorando las conversiones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo optimizar im\u00e1genes para un sitio web<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Es muy importante el rol del dise\u00f1ador web a la hora de optimizar im\u00e1genes destinadas a un sitio web. El motivo es porque entre m\u00e1s tarda en cargar las im\u00e1genes y contenido de una p\u00e1gina m\u00e1s propenso somos a perder usuarios que simplemente deciden rebotar porque el tiempo de espera es demasiado. Te enlisto una serie de recomendaciones para optimizar im\u00e1genes en tu dise\u00f1o web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Evite exportar directamente como PNG desde Adobe Illustrator u otro programa en su lugar haga el proceso de postproducci\u00f3n desde Adobe Photoshop<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Siempre trabaje a 72ppp m\u00e1ximo a 140ppp (PPI) nunca trabaje con resoluciones de 300ppp para im\u00e1genes que se van a desplegar en la web.<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Sea consciente del tama\u00f1o real que la imagen tendr\u00e1 en el m\u00f3dulo<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Apunte a im\u00e1genes con menos de 300kb<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Para ilustraciones y gr\u00e1fico vectoriales no use .PNG en su lugar trabaje con .SVG<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Utilice el formato de imagen adecuado.<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Busque expresar, no impresionar con im\u00e1genes de alta resoluci\u00f3n<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Experimente con la compresi\u00f3n de la imagen y que tanto puede desenfocarla<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Revise el peso en kilobyte (KB) antes y despu\u00e9s.<\/li>\n\n\n\n<li style=\"line-height:1.8\" class=\"has-medium-font-size\">Exporte con un nombre razonable e identificable<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">La Clave del \u00c9xito en el Dise\u00f1o Web<\/h2>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">El dise\u00f1o web efectivo es una mezcla de est\u00e9tica, funcionalidad y estrategia. Los lineamientos de marca garantizan coherencia, los colores y la tipograf\u00eda mejoran la legibilidad, y una estructura s\u00f3lida, como el uso de botones bien dise\u00f1ados y una ret\u00edcula adaptable, asegura una experiencia fluida en todos los dispositivos.<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">La combinaci\u00f3n de estos elementos, basada en principios como la regla del 60-30-10 y la correcta jerarqu\u00eda tipogr\u00e1fica, no solo mejora la experiencia del usuario, sino que tambi\u00e9n contribuye al \u00e9xito del sitio web en t\u00e9rminos de SEO y conversi\u00f3n. <\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1.8\">Al final, lo que buscamos en el dise\u00f1o web es crear un espacio que sea est\u00e9ticamente agradable, pero que tambi\u00e9n cumpla con los objetivos comerciales, y eso se logra con un enfoque claro, planificado y estrat\u00e9gico.<\/p>","protected":false},"excerpt":{"rendered":"<p>Dise\u00f1o Web: La combinaci\u00f3n de est\u00e9tica y funcionalidad El dise\u00f1o web no es solo cuesti\u00f3n de crear algo visualmente atractivo; [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[35,11],"tags":[23,78],"class_list":["post-5684","post","type-post","status-publish","format-standard","hentry","category-diseno-grafico","category-ui-ux","tag-diseno-grafico","tag-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.11 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico<\/title>\n<meta name=\"description\" content=\"Qu\u00e9 es el dise\u00f1o web \/ Introducci\u00f3n al Dise\u00f1o Web - Aprende colores y tipograf\u00edas, creaci\u00f3n de botones y ret\u00edculas responsive.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/oliverpuente.com\/en\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico\" \/>\n<meta property=\"og:description\" content=\"Dise\u00f1o Gr\u00e1fico\" \/>\n<meta property=\"og:url\" content=\"https:\/\/oliverpuente.com\/en\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/\" \/>\n<meta property=\"og:site_name\" content=\"oliverpuente\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/oliver.branding\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-27T15:53:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-27T15:53:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/ilustracion-y-patronesRecurso-26@2x.png\" \/>\n\t<meta property=\"og:image:width\" content=\"738\" \/>\n\t<meta property=\"og:image:height\" content=\"562\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Oliver Puente\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Oliver Puente\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/\"},\"author\":{\"name\":\"Oliver Puente\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"headline\":\"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico\",\"datePublished\":\"2024-09-27T15:53:40+00:00\",\"dateModified\":\"2024-09-27T15:53:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/\"},\"wordCount\":1465,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"keywords\":[\"dise\u00f1o gr\u00e1fico\",\"dise\u00f1o web\"],\"articleSection\":[\"Dise\u00f1o Gr\u00e1fico\",\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/\",\"name\":\"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\"},\"datePublished\":\"2024-09-27T15:53:40+00:00\",\"dateModified\":\"2024-09-27T15:53:46+00:00\",\"description\":\"Qu\u00e9 es el dise\u00f1o web \\\/ Introducci\u00f3n al Dise\u00f1o Web - Aprende colores y tipograf\u00edas, creaci\u00f3n de botones y ret\u00edculas responsive.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/diseno-grafico\\\/introduccion-al-diseno-web-mas-que-un-simple-grafico\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/oliverpuente.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#website\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/\",\"name\":\"oliverpuente\",\"description\":\"Identidad de marca - Dise\u00f1ador de identidad de marca\",\"publisher\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\"},\"alternateName\":\"Oliver Puente\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/oliverpuente.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/#\\\/schema\\\/person\\\/84c34fc032a089970dd7d3a9cf7899c7\",\"name\":\"Oliver Puente\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"contentUrl\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\",\"width\":609,\"height\":186,\"caption\":\"Oliver Puente\"},\"logo\":{\"@id\":\"https:\\\/\\\/oliverpuente.com\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg\"},\"description\":\"Dise\u00f1ador freelance de identidad de marca y UI\\\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.\",\"sameAs\":[\"http:\\\/\\\/www.oliverpuente.com\",\"https:\\\/\\\/www.facebook.com\\\/oliver.branding\",\"https:\\\/\\\/www.instagram.com\\\/oliver.branding\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/oliver-puente-branding\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/oliverpuente916\\\/\",\"https:\\\/\\\/www.youtube.com\\\/c\\\/Dizalo\\\/featured\"],\"knowsAbout\":[\"Branding\",\"UI\",\"UX\",\"Dise\u00f1o Web\"],\"knowsLanguage\":[\"espa\u00f1ol\",\"ingl\u00e9s\"],\"jobTitle\":\"Dise\u00f1ador de marcas\",\"worksFor\":\"Dizalo\",\"url\":\"https:\\\/\\\/oliverpuente.com\\\/en\\\/author\\\/puentegutierrezzzoliversho\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico","description":"Qu\u00e9 es el dise\u00f1o web \/ Introducci\u00f3n al Dise\u00f1o Web - Aprende colores y tipograf\u00edas, creaci\u00f3n de botones y ret\u00edculas responsive.","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:\/\/oliverpuente.com\/en\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/","og_locale":"en_US","og_type":"article","og_title":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico","og_description":"Dise\u00f1o Gr\u00e1fico","og_url":"https:\/\/oliverpuente.com\/en\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/","og_site_name":"oliverpuente","article_publisher":"https:\/\/www.facebook.com\/oliver.branding","article_author":"https:\/\/www.facebook.com\/oliver.branding","article_published_time":"2024-09-27T15:53:40+00:00","article_modified_time":"2024-09-27T15:53:46+00:00","og_image":[{"width":738,"height":562,"url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/ilustracion-y-patronesRecurso-26@2x.png","type":"image\/png"}],"author":"Oliver Puente","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Oliver Puente","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/#article","isPartOf":{"@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/"},"author":{"name":"Oliver Puente","@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"headline":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico","datePublished":"2024-09-27T15:53:40+00:00","dateModified":"2024-09-27T15:53:46+00:00","mainEntityOfPage":{"@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/"},"wordCount":1465,"commentCount":0,"publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"keywords":["dise\u00f1o gr\u00e1fico","dise\u00f1o web"],"articleSection":["Dise\u00f1o Gr\u00e1fico","UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/","url":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/","name":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico","isPartOf":{"@id":"https:\/\/oliverpuente.com\/#website"},"datePublished":"2024-09-27T15:53:40+00:00","dateModified":"2024-09-27T15:53:46+00:00","description":"Qu\u00e9 es el dise\u00f1o web \/ Introducci\u00f3n al Dise\u00f1o Web - Aprende colores y tipograf\u00edas, creaci\u00f3n de botones y ret\u00edculas responsive.","breadcrumb":{"@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/oliverpuente.com\/diseno-grafico\/introduccion-al-diseno-web-mas-que-un-simple-grafico\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/oliverpuente.com\/"},{"@type":"ListItem","position":2,"name":"Introducci\u00f3n al Dise\u00f1o Web: M\u00e1s que un simple gr\u00e1fico"}]},{"@type":"WebSite","@id":"https:\/\/oliverpuente.com\/#website","url":"https:\/\/oliverpuente.com\/","name":"oliverpuente","description":"Identidad de marca - Dise\u00f1ador de identidad de marca","publisher":{"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7"},"alternateName":"Oliver Puente","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/oliverpuente.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/oliverpuente.com\/#\/schema\/person\/84c34fc032a089970dd7d3a9cf7899c7","name":"Oliver Puente","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","url":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","contentUrl":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg","width":609,"height":186,"caption":"Oliver Puente"},"logo":{"@id":"https:\/\/oliverpuente.com\/wp-content\/uploads\/2023\/10\/oliver-puente-logo-imagotipo-principal-full-color-rgb.svg"},"description":"Dise\u00f1ador freelance de identidad de marca y UI\/UX con sede en Guatemala. Oliver Puente ayuda a las empresas a modernizar sus marcas.","sameAs":["http:\/\/www.oliverpuente.com","https:\/\/www.facebook.com\/oliver.branding","https:\/\/www.instagram.com\/oliver.branding\/","https:\/\/www.linkedin.com\/in\/oliver-puente-branding\/","https:\/\/www.pinterest.com\/oliverpuente916\/","https:\/\/www.youtube.com\/c\/Dizalo\/featured"],"knowsAbout":["Branding","UI","UX","Dise\u00f1o Web"],"knowsLanguage":["espa\u00f1ol","ingl\u00e9s"],"jobTitle":"Dise\u00f1ador de marcas","worksFor":"Dizalo","url":"https:\/\/oliverpuente.com\/en\/author\/puentegutierrezzzoliversho\/"}]}},"_links":{"self":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/comments?post=5684"}],"version-history":[{"count":1,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5684\/revisions"}],"predecessor-version":[{"id":5685,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/posts\/5684\/revisions\/5685"}],"wp:attachment":[{"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/media?parent=5684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/categories?post=5684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oliverpuente.com\/en\/wp-json\/wp\/v2\/tags?post=5684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}