{"id":1119,"date":"2017-03-30T23:59:13","date_gmt":"2017-03-30T23:59:13","guid":{"rendered":"http:\/\/juliancastiblanco.com\/web\/?p=1119"},"modified":"2017-03-30T23:59:13","modified_gmt":"2017-03-30T23:59:13","slug":"13-tendencias-diseno-web-marcaran-ano-2017","status":"publish","type":"post","link":"https:\/\/juliancastiblanco.com\/web\/13-tendencias-diseno-web-marcaran-ano-2017\/","title":{"rendered":"13 Tendencias de dise\u00f1o web que marcar\u00e1n el a\u00f1o 2017"},"content":{"rendered":"<p>El mundo del dise\u00f1o web est\u00e1 en constante evoluci\u00f3n.<\/p>\n<p>Lo que ayer parec\u00eda moderno e innovador de repente puede parecer obsoleto, e igualmente las tendencias que parec\u00edan haber desaparecido para siempre pueden volver a estar de moda contra todo pron\u00f3stico.<\/p>\n<p>Queremos que est\u00e9s preparado para lo que depare el mundo del dise\u00f1o web en 2017. Es por eso que hemos recopilado una lista de 13\u00a0tendencias que no debemos perder de vista durante este a\u00f1o. \u00c9chales un vistazo e insp\u00edrate para llevar a cabo tus proyectos de dise\u00f1o web de este a\u00f1o con mucho estilo.<\/p>\n<h2>13\u00a0tendencias de dise\u00f1o web que marcar\u00e1n el a\u00f1o 2017<\/h2>\n<h3>1) Tipograf\u00eda audaz<\/h3>\n<p>Cada vez son m\u00e1s las empresas que utilizan una tipograf\u00eda grande y llamativa para presentar sus p\u00e1ginas principales. Este estilo funciona mejor cuando el resto de la p\u00e1gina tiene una apariencia minimalista e inmaculada, como en el siguiente ejemplo de la agencia francesa <a href=\"https:\/\/www.bigyouth.fr\/en\/\" target=\"_blank\">Big\u00a0Youth<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/big-youth.png?t=1490914304717&amp;width=669&amp;name=big-youth.png\" width=\"669\" height=\"493\" \/><\/p>\n<h3>2) Cinemagraf\u00edas<\/h3>\n<p>Las cinemagraf\u00edas son videos o GIFS de alta calidad que se reproducen de manera continua y fluida. Han ganado popularidad como una manera de agregar movimiento y atractivo visual a p\u00e1ginas est\u00e1ticas.\u00a0La visualizaci\u00f3n continua en pantalla completa, como la que vemos en este excepcional ejemplo de la agencia danesa <a href=\"http:\/\/www.cpbcopenhagen.dk\/\" target=\"_blank\">CP+B\u00a0Copenhagen<\/a>, logran captar la atenci\u00f3n de los visitantes durante m\u00e1s tiempo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/fcinq-2-1.gif?t=1490914304717&amp;width=644&amp;name=fcinq-2-1.gif\" width=\"644\" height=\"467\" \/><\/p>\n<h3>3) Composiciones experimentales<\/h3>\n<p>Con el objetivo de destacar en un oc\u00e9ano de meticulosos dise\u00f1os demasiado perfectos, algunos dise\u00f1adores est\u00e1n optando por estructuras m\u00e1s ecl\u00e9cticas. El director de dise\u00f1o <a href=\"http:\/\/isaidicanshout.com\/\" target=\"_blank\">Will\u00a0Geddes<\/a> nos muestra ejemplos de su trabajo con este innovador collage de im\u00e1genes superpuestas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/Screen%20Shot%202017-02-06%20at%202.10.52%20PM.png?t=1490914304717&amp;width=712&amp;name=Screen%20Shot%202017-02-06%20at%202.10.52%20PM.png\" width=\"779\" height=\"500\" \/><\/p>\n<h3>4) Degradados de colores vivos<\/h3>\n<p>El efecto de degradado caleidosc\u00f3pico ha vuelto pisando fuerte. La agencia <a href=\"https:\/\/y7k.com\/\" target=\"_blank\">Y7K<\/a>, ubicada en Z\u00farich, nos brinda un ejemplo perfecto de c\u00f3mo lograr que este efecto de <em>degrad\u00e9<\/em> con dos tonalidades que abarca toda la pantalla de su p\u00e1gina principal otorgue una apariencia moderna e innovadora.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/gradient-agency.png?t=1490914304717&amp;width=669&amp;name=gradient-agency.png\" width=\"669\" height=\"442\" \/><\/p>\n<h3>5) Capas de colores vivos<\/h3>\n<p>Las capas de color apiladas y escalonadas a\u00f1aden profundidad y textura a un dise\u00f1o gr\u00e1fico de sitio web simple, tal como se observa en este moderno ejemplo del equipo de <a href=\"http:\/\/meiofio.cc\/\" target=\"_blank\">Melissa\u00a0Meio-Fio<\/a>, original de\u00a0S\u00e3o Paulo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/vivid-layers.png?t=1490914304717&amp;width=669&amp;name=vivid-layers.png\" width=\"669\" height=\"442\" \/><\/p>\n<h3>6) Texto simple y directo<\/h3>\n<p>Algunos sitios web han optado por sacar las im\u00e1genes y secciones de navegaci\u00f3n destacadas, y las han reemplazado con apenas unas l\u00edneas de texto directo que contienen informaci\u00f3n sobre la empresa para sus visitantes.<\/p>\n<p>La agencia danesa <a href=\"http:\/\/b14.dk\/\" target=\"_blank\">B14<\/a> usa su propia p\u00e1gina principal para describir en pocas palabras la misi\u00f3n de la empresa e incluir enlaces a muestras de su trabajo. Se trata de un enfoque moderno y ligero para presentar la informaci\u00f3n.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/text-layout.png?t=1490914304717&amp;width=669&amp;name=text-layout.png\" width=\"669\" height=\"477\" \/><\/p>\n<h3>7) Ilustraciones<\/h3>\n<p>Cada vez m\u00e1s empresas contratan ilustradores y dise\u00f1adores gr\u00e1ficos para crear ilustraciones personalizadas para sus sitios web. Tras a\u00f1os de dise\u00f1os planos y minimalistas, a\u00f1adir toques con ilustraciones a tu sitio es una excelente manera de dotarlo de un poco de personalidad, tal como vemos en este encantador ejemplo de <a href=\"http:\/\/newacton.com.au\/\" target=\"_blank\">NewActon<\/a> (dise\u00f1ado por la agencia digital australiana <a href=\"https:\/\/www.ed.com.au\/\" target=\"_blank\">ED<\/a>).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/illustration-layout.png?t=1490914304717&amp;width=669&amp;name=illustration-layout.png\" width=\"669\" height=\"467\" \/><\/p>\n<h3>8) Ultraminimalismo<\/h3>\n<p>Algunos dise\u00f1adores llevan el minimalismo a su m\u00e1xima expresi\u00f3n y desaf\u00edan las convenciones sobre la apariencia que debe tener un sitio web optando por mostrar solo lo estrictamente necesario. El sitio del dise\u00f1ador <a href=\"http:\/\/www.mathieuboulet.com\/\" target=\"_blank\">Mathieu\u00a0Boulet<\/a> se basa en un par de opciones con enlaces que conducen a sus perfiles y su informaci\u00f3n en las redes sociales.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/Screen%20Shot%202017-02-06%20at%202.21.57%20PM.png?t=1490914304717&amp;width=712&amp;name=Screen%20Shot%202017-02-06%20at%202.21.57%20PM.png\" width=\"800\" height=\"485\" \/><\/p>\n<h3>9) Bitonalidad<\/h3>\n<p>Estos esquemas despojados de dos colores se muestran atractivos y contempor\u00e1neos, como en el ejemplo de <a href=\"https:\/\/ausdesignradio.com\/\" target=\"_blank\">Australian\u00a0Design\u00a0Radio<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/duotone-layout.png?t=1490914304717&amp;width=669&amp;name=duotone-layout.png\" width=\"669\" height=\"468\" \/><\/p>\n<h3>10) Mezcla de texto horizontal y vertical<\/h3>\n<p>Abandonar las convenciones y colocar texto de manera vertical en lugar de horizontal en una p\u00e1gina le a\u00f1ade originalidad. Observa este ejemplo del director <a href=\"https:\/\/takewhatyoucancarry.com\/\" target=\"_blank\">Matt\u00a0Porterfield<\/a>, donde se mezclan alineaciones horizontales y verticales en una p\u00e1gina que, de otro modo, nos parecer\u00eda demasiado simple.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/vertical-text.png?t=1490914304717&amp;width=669&amp;name=vertical-text.png\" width=\"669\" height=\"449\" \/><\/p>\n<h3>1) Formas y patrones geom\u00e9tricos<\/h3>\n<p>Las formas y los patrones extravagantes est\u00e1n cada vez m\u00e1s presentes en los sitios web, y dotan de un cierto atractivo a un entorno dominado por dise\u00f1os planos y <a href=\"https:\/\/www.materialpalette.com\/\" target=\"_blank\">materiales<\/a>. En su p\u00e1gina principal, el estudio de dise\u00f1o canadiense <a href=\"http:\/\/msds-studio.ca\/\" target=\"_blank\">MSDS<\/a> hace uso de letras atrevidas conformadas por patrones.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/geometic-patterns.png?t=1490914304717&amp;width=669&amp;name=geometic-patterns.png\" width=\"669\" height=\"458\" \/><\/p>\n<h3>12) Dise\u00f1o modular<\/h3>\n<p>El dise\u00f1o modular sin duda seguir\u00e1 presente en 2017. Es una f\u00f3rmula infalible para crear sitios web organizados y accesibles que mantienen el inter\u00e9s de los visitantes. Este ejemplo del estudio de dise\u00f1o <a href=\"http:\/\/waaark.com\/\" target=\"_blank\">Waaark<\/a> le a\u00f1ade un toque extra al dise\u00f1o modular: cuando <a href=\"http:\/\/waaark.com\/\" target=\"_blank\">colocas el cursor del rat\u00f3n<\/a> sobre los bordes que dividen los m\u00f3dulos, notar\u00e1s un efecto de ondulaciones totalmente inesperado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/Screen%20Shot%202017-02-06%20at%202.58.06%20PM.png?t=1490914304717&amp;width=669&amp;name=Screen%20Shot%202017-02-06%20at%202.58.06%20PM.png\" width=\"669\" height=\"417\" \/><\/p>\n<h3>13) Texto e im\u00e1genes superpuestas<\/h3>\n<p>El efecto de texto que se superpone ligeramente con las im\u00e1genes ha ganado popularidad en los blogs y los portafolios.\u00a0El director art\u00edstico independiente y desarrollador de interfaces <a href=\"https:\/\/www.thibaultpailloux.com\/\" target=\"_blank\">Thibault\u00a0Pailloux<\/a> destaca el texto superpuesto con un subrayado colorido.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full aligncenter\" src=\"https:\/\/blog.hubspot.es\/hs-fs\/hubfs\/%5BAgency_Post%5D\/overlapping.png?t=1490914304717&amp;width=669&amp;name=overlapping.png\" width=\"669\" height=\"604\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Tomado de:<\/strong> hubspot.es<\/p>\n<p><strong>Fuente: <\/strong><a href=\"https:\/\/blog.hubspot.es\/marketing\/tendencias-diseno-web?utm_campaign=%23HubSpotEspanol&amp;utm_source=hs_email&amp;utm_medium=email&amp;utm_content=45205180\">https:\/\/blog.hubspot.es\/marketing\/tendencias-diseno-web?utm_campaign=%23HubSpotEspanol&amp;utm_source=hs_email&amp;utm_medium=email&amp;utm_content=45205180<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>El mundo del dise\u00f1o web est\u00e1 en constante evoluci\u00f3n. Lo que ayer parec\u00eda moderno e innovador de repente puede parecer obsoleto, e igualmente las tendencias que parec\u00edan haber desaparecido para [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,15],"tags":[],"class_list":["post-1119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","category-innovacion"],"_links":{"self":[{"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/posts\/1119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/comments?post=1119"}],"version-history":[{"count":1,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/posts\/1119\/revisions"}],"predecessor-version":[{"id":1121,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/posts\/1119\/revisions\/1121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/media\/1120"}],"wp:attachment":[{"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/media?parent=1119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/categories?post=1119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/juliancastiblanco.com\/web\/wp-json\/wp\/v2\/tags?post=1119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}