{"id":62687,"date":"2017-08-29T17:07:01","date_gmt":"2017-08-29T20:07:01","guid":{"rendered":"http:\/\/www.tusclicks.cl\/blog\/?p=62687"},"modified":"2017-09-06T09:19:15","modified_gmt":"2017-09-06T12:19:15","slug":"7-elementos-claves-del-diseno-grafico-aplicarlos","status":"publish","type":"post","link":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/","title":{"rendered":"7 elementos claves del dise\u00f1o gr\u00e1fico y c\u00f3mo aplicarlos"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar. El aspecto visual puede proporcionar credibilidad, confianza y una imagen m\u00e1s profesional a tu empresa.<\/span><\/p>\n<h3>7 elementos claves del dise\u00f1o gr\u00e1fico<\/h3>\n<p><span style=\"font-weight: 400;\">Para crear un dise\u00f1o gr\u00e1fico de calidad, debes tener claro el concepto que quieres transmitir, con un mensaje definido y proporcionando una identidad visual a tu empresa. <\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Existen muchos elementos gr\u00e1ficos que son considerados clave: <\/span><\/p>\n<ol>\n<li><span style=\"font-weight: 400;\"> Color<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Combinando adecuadamente los colores primarios (rojo, azul y amarillo) puedes obtener una gama de colores infinita. El <\/span><a href=\"https:\/\/disenograficocies.wordpress.com\/2016\/03\/09\/la-teoria-del-color-explicada-en-video\/\"><span style=\"font-weight: 400;\">circulo crom\u00e1tico<\/span><\/a><span style=\"font-weight: 400;\"> es una de las mejores herramientas de todo dise\u00f1ador gr\u00e1fico, pero debes usarlo con criterio o el resultado puede ser desastroso. Utiliza aquellos colores que est\u00e9n enfrentados o uno al lado del otro en el c\u00edrculo crom\u00e1tico, estos ser\u00e1n los colores que proporcionen mejores combinaciones. No olvides que el color puede ser una buena se\u00f1a de identidad para tu empresa, por lo que es uno de los elementos dise\u00f1o gr\u00e1fico m\u00e1s importantes.<\/span><\/p>\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\"> Formas<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Todos conocemos las<\/span><a href=\"https:\/\/introduccionaldisenofadluzblog.wordpress.com\/2016\/07\/26\/figura-forma\/\"><span style=\"font-weight: 400;\"> formas<\/span><\/a><span style=\"font-weight: 400;\"> geom\u00e9tricas que aprendimos en el colegio, como el c\u00edrculo, el cuadrado o el tri\u00e1ngulo que presentan proporciones perfectas. Pero existen otras muchas otras; por ejemplo, las formas org\u00e1nicas con lineas menos definidas, como una figura ondulada o en espiral. Tambi\u00e9n puedes utilizar elementos gr\u00e1ficos con formas positivas (color negro) y negativas (color blanco) que se encuentran contrapuestas.<\/span><\/p>\n<ol start=\"3\">\n<li><span style=\"font-weight: 400;\"> Escala<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Jugar con la escala de los elementos dise\u00f1o gr\u00e1fico supone un gran impacto para el p\u00fablico. Utilizar diferentes tama\u00f1os en los componentes, pueden ayudarte a destacar \u00e1reas importantes y guiar al espectador creando una jerarqu\u00eda visual.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Aunque puedas pensarlo, tama\u00f1o y escala no son lo mismo: <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">El tama\u00f1o se refiere a una medida absoluta (la l\u00e1mina de madera mide de 14 pulgadas por 12 pulgadas).<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">La escala indica la relaci\u00f3n directa entre los elementos de un dise\u00f1o (el cuadrado es 3 veces m\u00e1s grande que el rect\u00e1ngulo). <\/span><\/li>\n<\/ul>\n<ol start=\"4\">\n<li><span style=\"font-weight: 400;\"> L\u00edneas<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Las l\u00edneas no solo sirven para separar espacios, sino que tambi\u00e9n proporcionan \u00a0movimiento y emociones <\/span><a href=\"http:\/\/www.cbusquets.com\/mood-lines-la-importancia-de-las-lineas-en-diseno\/\"><span style=\"font-weight: 400;\">(por ejemplo las l\u00edneas de \u00e1nimo descritas por Rikard Rodin)<\/span><\/a><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">. Un dise\u00f1ador utiliza l\u00edneas rectas como contorno, divisoras o impl\u00edcitas. La forma, la orientaci\u00f3n y la conexi\u00f3n de las l\u00edneas determinar\u00e1n el significado que quieras darle a tu dise\u00f1o. Las l\u00edneas rectas combinadas con curvas, pueden ayudar a crear texturas y patrones diferentes.<\/span><\/p>\n<ol start=\"5\">\n<li><span style=\"font-weight: 400;\"> Alineaci\u00f3n<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Permite que los elementos del dise\u00f1o gr\u00e1fico se encuentren conectados con el resto de elementos p\u00e1gina web. Puedes considerar la alineaci\u00f3n como un eje que no vemos pero que conecta todos los elementos entre si. Cuando una composici\u00f3n est\u00e1 alineada, percibimos orden, todo parece estar en su sitio y hay una relaci\u00f3n entre los elementos que dan significado a todo el trabajo de dise\u00f1o. <\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Si quieres darle un aspecto diferente a la composici\u00f3n, no utilices una alineaci\u00f3n central, \u00e9sta suele resultar m\u00e1s d\u00e9bil y menos impactante.<\/span><\/p>\n<ol start=\"6\">\n<li><span style=\"font-weight: 400;\"> Contraste<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El uso del contraste se refiere a la yuxtaposici\u00f3n de elementos diferentes entre s\u00ed (grande\/peque\u00f1o, luz\/oscuridad, etc.) para crear un \u00a0efecto visual o atraer la atenci\u00f3n hacia determinados elementos.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Sin contraste, tus dise\u00f1os resultar\u00e1n aburridos y dif\u00edciles de entender. La falta de contraste suele ser lo que diferencia un trabajo de dise\u00f1o b\u00e1sico, de uno con aspecto profesional.<\/span><\/p>\n<ol start=\"7\">\n<li><span style=\"font-weight: 400;\"> Espacio<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El espacio determina las \u00e1reas vac\u00edas entre los elementos de una composici\u00f3n gr\u00e1fica. Tan importantes son los elementos que utilices como la manera en la que los agrupes y ordenes. No es necesario que rellenes cada pulgada de tu dise\u00f1o, ya que eso puede saturar al espectador. Cuando los elementos \u00a0se agrupan a la izquierda, el espacio entre ellos proporciona sensaci\u00f3n de orden; si los agrupas a la derecha este espacio crear\u00e1 la sensaci\u00f3n contraria.<\/span><\/p>\n<p><a href=\"http:\/\/www.tusclicks.cl\/blog\/las-tendencias-diseno-web-2017\/\"><span style=\"font-weight: 400;\">Tendencias dise\u00f1o gr\u00e1fico para 2017<\/span><\/a><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Dise\u00f1os verticales y divididos: \u00a0separa el contenido de manera que no necesites utilizar <\/span><i><span style=\"font-weight: 400;\">sliders<\/span><\/i><span style=\"font-weight: 400;\"> para ver todos los elementos p\u00e1gina web.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Animaciones por desplazamiento: uso de im\u00e1genes animadas y de im\u00e1genes con movimiento repetitivo (cinemagraphs) a lo largo de toda la p\u00e1gina.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Botones de llamados a la acci\u00f3n animados: el movimiento dentro del bot\u00f3n invita al usuario a hacer click sobre \u00e9l, \u00fasalos adecuadamente o pueden resultar molestos.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Colores vivos: utiliza colores vivos que hagan los elementos m\u00e1s atractivos, pero \u00a1ojo! no todos los dise\u00f1os pueden usar una paleta de colores muy intensos.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Tipograf\u00edas llamativas: no s\u00f3lo utilices tipograf\u00edas con \u00e1ngulos rectos. Las tipograf\u00edas que imiten a la caligraf\u00eda manual transmitir\u00e1n un estilo m\u00e1s personal.<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar. El aspecto visual puede proporcionar credibilidad, confianza y una imagen m\u00e1s profesional a tu empresa.<\/p>\n","protected":false},"author":18,"featured_media":62688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[876,877,878],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web<\/title>\n<meta name=\"description\" content=\"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web\" \/>\n<meta property=\"og:description\" content=\"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-29T20:07:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-06T12:19:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2017\/08\/7-elementos-claves-del-diseno-grafico-y-como-aplicarlos.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/\",\"url\":\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/\",\"name\":\"Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web\",\"isPartOf\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/#website\"},\"datePublished\":\"2017-08-29T20:07:01+00:00\",\"dateModified\":\"2017-09-06T12:19:15+00:00\",\"author\":{\"@id\":\"\"},\"description\":\"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.\",\"breadcrumb\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/tusclicks.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 elementos claves del dise\u00f1o gr\u00e1fico y c\u00f3mo aplicarlos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tusclicks.com\/blog\/#website\",\"url\":\"https:\/\/tusclicks.com\/blog\/\",\"name\":\"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.\",\"description\":\"Tusclicks Blog \/ Posicionamiento web \/ Mejoras P\u00e1ginas Web \/ Marketing Internet\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tusclicks.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web","description":"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.","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:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/","og_locale":"es_ES","og_type":"article","og_title":"Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web","og_description":"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.","og_url":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/","og_site_name":"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.","article_published_time":"2017-08-29T20:07:01+00:00","article_modified_time":"2017-09-06T12:19:15+00:00","og_image":[{"width":900,"height":300,"url":"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2017\/08\/7-elementos-claves-del-diseno-grafico-y-como-aplicarlos.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/","url":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/","name":"Elementos dise\u00f1o gr\u00e1fico, elementos gr\u00e1ficos, elementos p\u00e1gina web","isPartOf":{"@id":"https:\/\/tusclicks.com\/blog\/#website"},"datePublished":"2017-08-29T20:07:01+00:00","dateModified":"2017-09-06T12:19:15+00:00","author":{"@id":""},"description":"El dise\u00f1o de los elementos de una p\u00e1gina web tiene que estar \u00edntimamente relacionado con la imagen que quieras proyectar.","breadcrumb":{"@id":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tusclicks.com\/blog\/7-elementos-claves-del-diseno-grafico-aplicarlos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/tusclicks.com\/blog\/"},{"@type":"ListItem","position":2,"name":"7 elementos claves del dise\u00f1o gr\u00e1fico y c\u00f3mo aplicarlos"}]},{"@type":"WebSite","@id":"https:\/\/tusclicks.com\/blog\/#website","url":"https:\/\/tusclicks.com\/blog\/","name":"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.","description":"Tusclicks Blog \/ Posicionamiento web \/ Mejoras P\u00e1ginas Web \/ Marketing Internet","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tusclicks.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"Person","@id":""}]}},"_links":{"self":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts\/62687"}],"collection":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/comments?post=62687"}],"version-history":[{"count":0,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts\/62687\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media\/62688"}],"wp:attachment":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media?parent=62687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/categories?post=62687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/tags?post=62687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}