{"id":62700,"date":"2017-09-05T08:00:43","date_gmt":"2017-09-05T11:00:43","guid":{"rendered":"http:\/\/www.tusclicks.cl\/blog\/?p=62700"},"modified":"2017-09-22T18:06:29","modified_gmt":"2017-09-22T21:06:29","slug":"uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo","status":"publish","type":"post","link":"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/","title":{"rendered":"El uso de colores en dise\u00f1o web: lo bueno, lo malo y lo feo"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir. Estas plantillas son editables, permitiendo introducir im\u00e1genes, cambiar el tipo de letra e incluso el color en general.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El problema surge cuando en el <\/span><a href=\"http:\/\/www.tusclicks.cl\/blog\/4-conceptos-diseno-web-tienes-saber\/\"><span style=\"font-weight: 400;\">dise\u00f1o color p\u00e1gina web<\/span><\/a><span style=\"font-weight: 400;\"> no se toma en cuenta que existe toda una teor\u00eda y reglas para elegir y combinar colores. Si se hace una selecci\u00f3n al azar el resultado puede ser contraproducente, porque no va de acuerdo con la marca, no luce bien o dificulta la lectura. Esto solo provocar\u00e1 que los usuarios no permanezcan por mucho tiempo en tu sitio.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Pero \u00bfpor qu\u00e9 es tan importante una correcta elecci\u00f3n de colores? Seg\u00fan Kissmetrics, <\/span><a href=\"https:\/\/blog.kissmetrics.com\/color-psychology\/\"><span style=\"font-weight: 400;\">el 85% de los compradores<\/span><\/a><span style=\"font-weight: 400;\"> colocan al color como la raz\u00f3n primaria para elegir un producto. Para hacer una correcta elecci\u00f3n de color dise\u00f1o web es importante comprender algunos principios b\u00e1sicos:<\/span><\/p>\n<h3><b>Psicolog\u00eda del color<\/b><\/h3>\n<p style=\"text-align: justify;\"><a href=\"http:\/\/neuromarketing.la\/2017\/05\/psicologia-del-color-colores-y-marcas\/\"><span style=\"font-weight: 400;\">Cada color tiene un significado<\/span><\/a><span style=\"font-weight: 400;\"> y pueden emplearse para transmitir diferentes mensajes y emociones. Por ejemplo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Rojo: Es un color que denota intensidad, pasi\u00f3n y se utiliza al igual que el naranja para estimular el apetito, por ello son tan empleados en las cadenas de comida r\u00e1pida.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Amarillo: Jovialidad, optimismo y juventud.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Azul: Tranquilidad, profesionalismo.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Verde: Naturaleza, dinero y salud.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Negro: Elegancia y formalidad.<\/span><\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Es importante emplear cada color dentro del contexto adecuado. Nunca utilizaremos un rojo o negro como color dise\u00f1o web de un hospital o un amarillo para un despacho de abogados que busca lucir serio y profesional.<\/span><\/p>\n<h3><b>Gamas de colores y combinaciones<\/b><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Las combinaciones complementarias se forman con aquellos colores que se encuentran situados en el extremo contrario del <\/span><a href=\"https:\/\/www.silocreativo.com\/infografia-crea-paleta-colores-circulo-cromatico\/\"><span style=\"font-weight: 400;\">circulo crom\u00e1tico<\/span><\/a><span style=\"font-weight: 400;\">, por ejemplo el naranja y azul, el rojo y verde o el amarillo y morado.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Los colores complementarios crean un efecto visual m\u00e1s vibrante e intenso cuando se colocan cerca uno de otro, sobre todo en un monitor o dispositivo que emite luz, por ello su uso debe ser limitado para alguna zona donde desees llamar la atenci\u00f3n. Puedes utilizar distintas intensidades de dos complementarios para crear una gama de colores vibrante.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Las combinaciones an\u00e1logas se producen con los colores que se sit\u00faan a un lado en el c\u00edrculo crom\u00e1tico, por ejemplo el amarillo con el naranja o el morado con el azul.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Una combinaci\u00f3n monocrom\u00e1tica es aquella en la que se eligen diferentes intensidades de un mismo color. Estos tonos se encuentran en la misma l\u00ednea del c\u00edrculo crom\u00e1tico.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Si a\u00fan tienes dudas, a continuaci\u00f3n te damos algunos ejemplos sobre lo que es funcional y est\u00e9tico y lo que definitivamente no lo es en un dise\u00f1o color p\u00e1gina web. <\/span><\/p>\n<h4><b>1. En bloques de texto<\/b><\/h4>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo bueno<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Utilizar colores neutros y que contrasten con el fondo, que de preferencia debe ser blanco o muy claro.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo malo<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Texto y fondo con colores que hagan poco contraste dificultando la lectura. El color de los links en tono similar al resto del texto o que no resalten del color de fondo.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo feo<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Texto con colores brillantes. Colores complementarios entre texto y fondo.<\/span><\/p>\n<ol start=\"2\">\n<li><span style=\"font-weight: 400;\"> En el fondo<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo bueno<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El infalible blanco o colores claros tomando en cuenta los principios de la piscolog\u00eda del color<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo malo<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Fondos de colores brillantes u obscuros. Si deseas emplear un color oscuro para el fondo procura que la tipograf\u00eda sea lo suficientemente gruesa y en un color claro.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lo feo<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Fondos con textura, que adem\u00e1s de lucir muy poco profesionales producen fatiga visual. Fondos con una fotograf\u00eda y, peor a\u00fan, una fotograf\u00eda que se repite formando un patr\u00f3n.<\/span><\/p>\n<ol start=\"3\">\n<li><span style=\"font-weight: 400;\"> En la cabecera<\/span><\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">La parte superior del sitio web por lo general se coloca el logotipo de la empresa con alg\u00fan slogan y el men\u00fa de navegaci\u00f3n<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo bueno<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">El color detr\u00e1s del logo \u00a0en una gama similar o que haga un contraste agradable con el fondo. <\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo malo<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Logotipo y fondo en colores poco contrastantes. Men\u00fas en colores poco atractivos. Color de logo que no vaya de acuerdo a la identidad corporativa. <\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Lo feo<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Llenar la cabecera de elementos, fondo con texturas, demasiados colores.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Un \u00faltimo consejo: cada monitor var\u00eda un poco las tonalidades, as\u00ed que, despu\u00e9s de elegir la paleta de colores que utilizar\u00e1s, procura observar c\u00f3mo lucen en distintos dispositivos y hacer las correcciones necesarias para que se vea bien en cualquier parte.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400;\">Un buen dise\u00f1o se caracteriza por expresar, con la menor cantidad de elementos, sin ruido visual, de forma arm\u00f3nica y simple, la <\/span><a href=\"http:\/\/www.tusclicks.cl\/blog\/disenos-web-potencian-esfuerzo-marketing\/\"><span style=\"font-weight: 400;\">imagen corporativa de la empresa<\/span><\/a><span style=\"font-weight: 400;\">. Los colores de p\u00e1gina web no son la excepci\u00f3n, estos deben ser lo m\u00e1s ad-hoc al perfil de la marca, favorecer la lectura y evitar la fatiga ocular.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.<\/p>\n","protected":false},"author":18,"featured_media":62701,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[886,887,888],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web<\/title>\n<meta name=\"description\" content=\"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.\" \/>\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\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web\" \/>\n<meta property=\"og:description\" content=\"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/\" \/>\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-09-05T11:00:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-22T21:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2017\/08\/El-uso-de-colores-en-diseno-web-lo-bueno-lo-malo-y-lo-feo.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\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/\",\"url\":\"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/\",\"name\":\"Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web\",\"isPartOf\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/#website\"},\"datePublished\":\"2017-09-05T11:00:43+00:00\",\"dateModified\":\"2017-09-22T21:06:29+00:00\",\"author\":{\"@id\":\"\"},\"description\":\"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.\",\"breadcrumb\":{\"@id\":\"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/tusclicks.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"El uso de colores en dise\u00f1o web: lo bueno, lo malo y lo feo\"}]},{\"@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":"Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web","description":"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.","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\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/","og_locale":"es_ES","og_type":"article","og_title":"Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web","og_description":"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.","og_url":"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/","og_site_name":"Blog TusClicks: Posicionamiento web en Google, AdWords y publicidad en Internet.","article_published_time":"2017-09-05T11:00:43+00:00","article_modified_time":"2017-09-22T21:06:29+00:00","og_image":[{"width":900,"height":300,"url":"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/2017\/08\/El-uso-de-colores-en-diseno-web-lo-bueno-lo-malo-y-lo-feo.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\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/","url":"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/","name":"Color dise\u00f1o web, colores de p\u00e1gina web, dise\u00f1o color p\u00e1gina web","isPartOf":{"@id":"https:\/\/tusclicks.com\/blog\/#website"},"datePublished":"2017-09-05T11:00:43+00:00","dateModified":"2017-09-22T21:06:29+00:00","author":{"@id":""},"description":"Atr\u00e1s quedaron los 90 con sus feos dise\u00f1os y combinaci\u00f3n de colores de p\u00e1gina web. Hoy en d\u00eda, las plataformas para desarrollo de sitios son bastante amigables y con cientos de dise\u00f1os preestablecidos para elegir.","breadcrumb":{"@id":"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tusclicks.com\/blog\/uso-colores-diseno-web-lo-bueno-lo-malo-lo-feo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/tusclicks.com\/blog\/"},{"@type":"ListItem","position":2,"name":"El uso de colores en dise\u00f1o web: lo bueno, lo malo y lo feo"}]},{"@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\/62700"}],"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=62700"}],"version-history":[{"count":0,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/posts\/62700\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media\/62701"}],"wp:attachment":[{"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/media?parent=62700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/categories?post=62700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tusclicks.com\/blog\/wp-json\/wp\/v2\/tags?post=62700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}