{"id":6569,"date":"2016-05-23T10:00:46","date_gmt":"2016-05-23T10:00:46","guid":{"rendered":"https:\/\/redbooth.com\/hub\/es\/?p=6569"},"modified":"2016-06-15T16:30:54","modified_gmt":"2016-06-15T16:30:54","slug":"nuevas-tendencias-de-diseno-web-para-este-ano","status":"publish","type":"post","link":"https:\/\/redbooth.com\/hub\/es\/nuevas-tendencias-de-diseno-web-para-este-ano\/","title":{"rendered":"Nuevas tendencias de dise\u00f1o web para este a\u00f1o"},"content":{"rendered":"

La frontera entre el dise\u00f1o web y el UX Design se va estrechando. No es ninguna novedad que los dispositivos m\u00f3viles est\u00e1n condicionando la manera de interpretar el dise\u00f1o web<\/a> y que \u00e9ste se centra cada vez m\u00e1s en el contenido y la experiencia del usuario. Caminamos hacia un dise\u00f1o simplificado, sin grandes sofisticaciones y donde lo importante es la usabilidad.<\/p>\n

Antes de adentrarnos en un proyecto as\u00ed, tanto si lo realizamos nosotros como si lo encargamos, es importante estar bien documentados sobre las \u00faltimas tendencias de dise\u00f1o web para evitar que nuestra p\u00e1gina quede obsoleta r\u00e1pidamente y obtengamos de esta manera un resultado poco aprovechable. Darnos un paseo por los sites de referencia en la red nos ayudar\u00e1 a entender mejor este fen\u00f3meno, que recogemos a continuaci\u00f3n en estos 5 puntos:<\/p>\n

1. La vanguardia se llama Google<\/h2>\n

Como siempre, Google nos marca las pautas. Es quien determina hoy en d\u00eda lo que es un dise\u00f1o web responsive<\/a> y lo hace con la autoridad que le otorga ser el buscador m\u00e1s potente del mundo. El posicionamiento SEO en Google es tan importante que \u00e9l mismo nos da las claves para mejorarlo. Podemos realizar una prueba de optimizaci\u00f3n para m\u00f3viles introduciendo la URL de nuestra web aqu\u00ed. Si, por ejemplo, introducimos el enlace de una web aparentemente antigua (y por consiguiente sospechosa de no estar optimizada para dispositivos m\u00f3viles) el resultado es el siguiente:<\/p>\n

-El texto es demasiado peque\u00f1o para leerlo
\n-Los enlaces est\u00e1n demasiado juntos
\n-No se ha definido la ventana gr\u00e1fica para dispositivos m\u00f3viles<\/p>\n

As\u00ed pues, ya tenemos unas cuantas pistas de lo que realmente se le exige a una buena p\u00e1gina web: cuerpos de texto grandes, botones visibles y separados y una ventana gr\u00e1fica adaptada a los navegadores de nuestro smartphone o tablet. <\/p>\n

El nuevo dise\u00f1o web debe estar preparado para el movimiento de nuestros dedos desliz\u00e1ndose por una pantalla, ahora m\u00e1s r\u00e1pido y vertical, y a trav\u00e9s del cual se accede al contenido sin necesidad de hacer clic. Esta tendencia es el resultado del comportamiento mecanizado del usuario, que cada vez obtiene con m\u00e1s facilidad la informaci\u00f3n que quiere y denota una creciente p\u00e9rdida de paciencia cuando no lo consigue por la v\u00eda r\u00e1pida y sencilla.<\/p>\n

Si, en cambio, nos fijamos en los requisitos est\u00e9ticos tales como la profundidad, el color, las sombras, las animaciones y las transiciones, Google nos lo indica en este paquete de trucos llamado Material Design<\/a>. Siguiendo este mandato mejoraremos las interacciones de nuestra web o app.<\/p>\n

2. En busca de la verticalidad<\/h2>\n

Lo hemos apuntado anteriormente. La optimizaci\u00f3n para dispositivos m\u00f3viles ha obligado a reinterpretar el dise\u00f1o web prescindiendo de men\u00fas desplegables, pesta\u00f1as, v\u00ednculos y botones en la parte superior de la pantalla. Entramos directamente al contenido y nos desplazamos por \u00e9l, y si lo podemos conseguir en un paso, \u00bfpara qu\u00e9 hacerlo en dos? As\u00ed pues, cada vez vamos a ver menos art\u00edculos como este divididos en dos p\u00e1ginas. De ser as\u00ed y tener que darle al \u201cnext\u201d, probablemente ya no estar\u00edas leyendo esto. Por lo tanto, ya puedes bajar un poco m\u00e1s y no perderte el siguiente punto.<\/p>\n

3. El uso de la imagen<\/h2>\n

Hay varios factores a tener en cuenta en el uso de im\u00e1genes. <\/p>\n

Por un lado, el scroll manual (el desliz r\u00e1pido del que habl\u00e1bamos) nos permite prescindir de men\u00fas y simplificar nuestro dise\u00f1o. Nos posibilita, tambi\u00e9n, contar historias a trav\u00e9s del movimiento por la pantalla y disfrutar de una navegaci\u00f3n sin control. Por ello existe una creciente tendencia a usar im\u00e1genes grandes y atractivas que ocupan gran parte del formato, lo que nos lleva a hablar del ya famoso men\u00fa hamburguesa. As\u00ed se denomina el tipo de navegaci\u00f3n por el cual sus elementos se mantienen ocultos, incrementando el espacio para el contenido. Para usar los elementos de navegaci\u00f3n deberemos interaccionar con dicho contenido, que a menudo viene representado por im\u00e1genes. Un buen ejemplo de ello lo tienes aqu\u00ed<\/a>.<\/p>\n

Ahora bien: por otro lado, para que esto funcione debemos tener en cuenta el factor upload. En gran parte el uso de im\u00e1genes pesadas es un problema t\u00e9cnico y no se resuelve solo con un buen hosting. Si una p\u00e1gina tarda m\u00e1s de 4 segundos en cargarse, una cuarta parte de los usuarios la abandona. Si lo hace en 10 o m\u00e1s, ya estamos hablando del 50%. Por eso no es de extra\u00f1ar que el dise\u00f1o web utilice cada vez m\u00e1s im\u00e1genes vectoriales (lo hemos visto ya en el Material Design de Google) y vaya abandonando el mapa de bits. El dise\u00f1o vectorial pesa mucho menos y es muy af\u00edn a las pantallas de retina, pudiendo aumentar su tama\u00f1o en la pantalla sin perder resoluci\u00f3n.<\/p>\n

Otra buena manera de gestionar im\u00e1genes de todo tipo es el uso de patrones de dise\u00f1o de interacci\u00f3n (patrones UI), precisamente creados con el objetivo de mejorar la velocidad de carga y minimizar el efecto del peso de las im\u00e1genes. Dichos patrones ofrecen adem\u00e1s una experiencia \u00fanica basada en el movimiento sin necesidad de recurrir al ya obsoleto Flash. He aqu\u00ed alg\u00fan ejemplo<\/a>. Otra modalidad de estos patrones es el dise\u00f1o modular que han empleado plataformas populares como Pinterest (lo podemos ver aqu\u00ed<\/a>). Si una imagen vale m\u00e1s que mil palabras, cientos de ellas valen m\u00e1s que un mill\u00f3n.<\/p>\n

4. Vamos, \u00a1an\u00edmate!<\/h2>\n

La constante evoluci\u00f3n de las telecomunicaciones y el ancho de banda hace que se puedan enviar m\u00e1s datos y cada vez es m\u00e1s com\u00fan ver v\u00eddeos y animaciones que mejoran la experiencia del usuario. Son un gran reclamo. Sin embargo, las im\u00e1genes en movimiento pueden suponer un handicap al que hay que contraponerse: debemos usarlas con moderaci\u00f3n, pues pueden desviar la atenci\u00f3n y distraer respecto al contenido que nos interesa mostrar. Las tendencias en los diferentes tipos de animaci\u00f3n vienen en forma de v\u00eddeos de fondo a pantalla completa, animaciones de carga, men\u00fas din\u00e1micos, hovers (im\u00e1genes o textos que cambian al pasarles el rat\u00f3n por encima), slideshows y parallax. Estos \u00faltimos resultan muy interesantes, pues la interacci\u00f3n del usuario genera cierto ritmo que ayuda a potenciar el contenido. Aqu\u00ed una divertida muestra<\/a> de ello.<\/p>\n

5. La tipograf\u00eda como sujeto<\/h2>\n

El universo tipogr\u00e1fico ha dado un salto cualitativo en los \u00faltimos a\u00f1os. Es evidente que est\u00e1 de moda, y no se lo debemos \u00fanicamente al dise\u00f1o web: tambi\u00e9n a la industria gr\u00e1fica. Y no es para menos. Las posibilidades que ofrece la tipograf\u00eda en su uso expresivo dan mucho juego y podemos observar su aplicaci\u00f3n ilustrativa como una de las nuevas tendencias en dise\u00f1o web para este a\u00f1o. Si anteriormente habl\u00e1bamos de la simplicidad y la inmediatez como caracter\u00edsticas esenciales de una p\u00e1gina web moderna, el uso de fuentes como medio de expresi\u00f3n es la prueba fehaciente de que el mensaje es alto, claro y directo. Una letra, una palabra, un nombre o una frase tambi\u00e9n pueden tener voz propia. Aqu\u00ed tienes uno<\/a>, dos<\/a> y tres<\/a> buenos ejemplos.<\/p>\n

\u00bfTe consideras un web trender<\/em> y no te puedes resistir a hacer tu aportaci\u00f3n? \u00a1Hazlo!
\nSi en cambio crees que este art\u00edculo es m\u00e1s tendencioso que otra cosa, habla sin tapujos. Nadie te lo va a impedir.<\/p>\n","protected":false},"excerpt":{"rendered":"

La frontera entre el dise\u00f1o web y el UX Design se va…<\/p>\n","protected":false},"author":135,"featured_media":6571,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[116],"tags":[335,273,336,271,272],"class_list":["post-6569","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-negocios","tag-desarrollo-web","tag-diseno-ux","tag-diseno-web","tag-diseno-web-responsive","tag-facilidad-de-navegacion","option-evergreen-es","option-featured-es"],"_links":{"self":[{"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/posts\/6569","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/users\/135"}],"replies":[{"embeddable":true,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/comments?post=6569"}],"version-history":[{"count":0,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/posts\/6569\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/media\/6571"}],"wp:attachment":[{"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/media?parent=6569"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/categories?post=6569"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redbooth.com\/hub\/es\/wp-json\/wp\/v2\/tags?post=6569"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}