{"id":93938,"date":"2022-10-16T14:28:49","date_gmt":"2022-10-16T12:28:49","guid":{"rendered":"https:\/\/rmarketingdigital.com\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/"},"modified":"2020-11-23T10:16:28","modified_gmt":"2020-11-23T13:16:28","slug":"10-tendencias-en-diseno-web-para-2016-ejemplos","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/","title":{"rendered":"10 Trends in Web Design for 2016 + Examples"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#Tendencias-en-Diseno-Web-en-2016\" >Tendencias en Dise\u00f1o Web en 2016<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#1-Be-responsive-my-friend\" >1.- Be responsive my friend<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#2-Patrones-UI\" >2.- Patrones UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#3-Animaciones\" >3.- Animaciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#4-Elementos-multimedia\" >4.- Elementos multimedia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#5-Diseno-modular\" >5.- Dise\u00f1o modular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#6-Diseno-Flat-vs-Material-Design\" >6.- Dise\u00f1o Flat vs Material Design<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#7-Uso-de-tipografias-personalizadas\" >7.- Uso de tipograf\u00edas personalizadas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#8-Volvemos-a-lo-retro\" >8.- Volvemos a lo retro<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#9-Apps-inspiran-los-nuevos-disenos-web\" >9.- Apps inspiran los nuevos dise\u00f1os web<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#10-Usabilidad\" >10.- Usabilidad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#%C2%BFCuales-son-las-tendencias-en-diseno-web-que-mas-te-han-llamado-la-atencion\" >\u00bfCu\u00e1les son las tendencias en dise\u00f1o web que m\u00e1s te han llamado la atenci\u00f3n?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#%C2%BFConsideras-importante-hacer-un-buen-diseno-web-para-mejorar-la-usabilidad-y-la-experiencia-de-usuario\" >\u00bfConsideras importante hacer un buen dise\u00f1o web para mejorar la usabilidad y la experiencia de usuario?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#%C2%BFTe-gusto-este-post-Valoralo\" >\u00bfTe gust\u00f3 este post? Val\u00f3ralo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendencias-en-diseno-web-para-2016-ejemplos\/#Puede-que-esto-te-interese%E2%80%A6\" >Puede que esto te interese&#8230;<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<div>\n<div class=\"post_info\">\n\t\t\t\t\t\t\t<span class=\"time\">01\/02\/2016<\/span><br \/>\n\t\t\t\t\t\t\t<span class=\"post_author\"><br \/>\n\t\t\t\t\t\t\t\tR Marketing Digital<br \/>\n\t\t\t\t\t\t\t<\/span><\/p><\/div>\n<p>Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las <strong>tendencias en Dise\u00f1o Web del 2016 o del que viene<\/strong>.<\/p>\n<p>\u00bfPor qu\u00e9?<\/p>\n<p>Muy simple. No queremos que el tiempo y el dinero invertido vayan a la basura.<\/p>\n<p>Por ejemplo:<\/p>\n<p>\u00bfQu\u00e9 pasar\u00eda si no hacemos una web que funcione a la perfecci\u00f3n tanto en dispositivos m\u00f3viles como en ordenadores?<\/p>\n<p>Que la usabilidad y por tanto la experiencia del usuario al usar nuestra p\u00e1gina web se ver\u00eda resentida. Lo que nos da como resultado que el porcentaje de rebote aumente y que la tasa de usuarios recurrentes baje.<\/p>\n<p>\u00bfC\u00f3mo lo solucionamos?<\/p>\n<p>Haciendo un <strong>dise\u00f1o web responsive<\/strong> para que se adapte autom\u00e1ticamente a todos los tama\u00f1os de pantalla.<\/p>\n<p>Este es s\u00f3lo un ejemplo de lo que puede pasar si no vamos a la par de la evoluci\u00f3n del dise\u00f1o web y sus tendencias.<\/p>\n<p><strong>Es muy importante investigar y documentarse antes de adentrarse en un proyecto web<\/strong>.<\/p>\n<p>Da igual si eres t\u00fa el que va a realizar el proyecto o si contratas una agencia de dise\u00f1o web para que haga el trabajo por ti.<\/p>\n<p>Debes buscar toda la informaci\u00f3n necesaria para no quedarte obsoleto enseguida, o para comprobar que la agencia que contrates est\u00e9 a la \u00faltima en dise\u00f1o web \u00a0y no acabes con un producto mal acabado.<\/p>\n<p>Miguel me ha dado la oportunidad de escribir en su blog para contarte las <strong>nuevas tendencias en Dise\u00f1o Web en 2016.<\/strong><\/p>\n<p>Esto no es una gu\u00eda de dise\u00f1o web que tienes que seguir a rajatabla. Cada proyecto tiene unas caracter\u00edsticas y necesidades del dise\u00f1o web diferentes.<\/p>\n<p>Depende de cada uno buscar lo que quiere transmitir para alcanzar un buen dise\u00f1o web.<strong>\u00a0<\/strong><\/p>\n<p><strong>Tambi\u00e9n te podr\u00eda interesar:<\/strong><\/p>\n<p>20 Mejores Bancos de Im\u00e1genes Gratis de Alta Resoluci\u00f3n<\/p>\n<p>S\u00faper Gu\u00eda para crear y optimizar im\u00e1genes y fotos para un Blog o P\u00e1gina Web [Incluye 5 v\u00eddeo tutoriales+PDF]\n<p>20 P\u00e1ginas para subir im\u00e1genes gratis a Internet<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tendencias-en-Diseno-Web-en-2016\"><\/span>Tendencias en Dise\u00f1o Web en 2016<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1-Be-responsive-my-friend\"><\/span>1.- Be responsive my friend<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>S\u00ed o s\u00ed tienes que tener una web responsive.<\/p>\n<p>A parte de una tendencia es una necesidad.<\/p>\n<p>Cada vez aumentan m\u00e1s las visitas a nuestras p\u00e1ginas web desde dispositivos m\u00f3viles.<\/p>\n<p>Tenemos un mont\u00f3n de tama\u00f1os diferentes de pantallas. Queremos comunicar bien en todas ellas y que nuestra p\u00e1gina web se vea perfecta en todo tipo de dispositivos (mobile-friendly).<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4795759..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9013 aligncenter\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web responsive\" width=\"505\" height=\"474\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4795759..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9013 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4795759..png\" alt=\"dise\u00f1o web responsive\" width=\"505\" height=\"474\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/googlewebmastercentral.blogspot.com.es\/2015\/04\/rolling-out-mobile-friendly-update.html\">Google Webmaster Central<\/a><\/p>\n<p>Adem\u00e1s el <strong>dise\u00f1o web responsive es un factor SEO<\/strong> que tiene Google a la hora de posicionar nuestra web en los buscadores<\/p>\n<p>Puedes comprobar si tu web est\u00e1 optimizada para dispositivos m\u00f3viles desde este enlace:<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\">https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly<\/a><\/p>\n<p>Como ves el nuevo dise\u00f1o web de esta web est\u00e1 optimizado para dispositivos m\u00f3viles.<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-8589976..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9014\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web responsive del blog Marketing and Web\" width=\"800\" height=\"447\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-8589976..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9014\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-8589976..png\" alt=\"dise\u00f1o web responsive del blog Marketing and Web\" width=\"800\" height=\"447\"><\/noscript><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Patrones-UI\"><\/span>2.- Patrones UI<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Los patrones de dise\u00f1o \u00a0de interacci\u00f3n para mejorar la experiencia del usuario est\u00e1n a la orden del d\u00eda. Siempre han estado ah\u00ed pero est\u00e1n en continua evoluci\u00f3n.<\/p>\n<p>Cuando tenemos un problema com\u00fan tenemos que encontrar una soluci\u00f3n efectiva para solucionarlo.<\/p>\n<p>Esto enfocado al dise\u00f1o web o al dise\u00f1o de interfaces se traduce a que una soluci\u00f3n a un problema com\u00fan dentro del mundo del dise\u00f1o se hace est\u00e1ndar.<\/p>\n<p>Lo entender\u00e1s mejor con ejemplos de dise\u00f1o web:<\/p>\n<ul>\n<li><strong>Men\u00fa hamburguesa.<\/strong> Seguro que la primera vez que viste estas l\u00edneas no las entendiste. Pero ahora mismo es lo primero que buscas a la hora de navegar por una web en nuestros dispositivos m\u00f3vil. Fue una soluci\u00f3n ingeniosa para mostrar los men\u00fas de nuestras webs en pantallas m\u00e1s peque\u00f1as. Como ya te he dicho anteriormente el dise\u00f1o web del 2016 est\u00e1 muy influenciado por los dispositivos m\u00f3viles. Ahora se est\u00e1 empezando a implementar para que se vean tambi\u00e9n en pantallas grandes y as\u00ed tener el men\u00fa de navegaci\u00f3n oculto para tener una vista m\u00e1s limpia de la web.<\/li>\n<\/ul>\n<p>Ejemplo de dise\u00f1o web con men\u00fa hamburguesa:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-6192535..jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9015\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web men\u00fa hamburguesa\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-6192535..jpg\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9015\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-6192535..jpg\" alt=\"dise\u00f1o web men\u00fa hamburguesa\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/silenza.it\/\">http:\/\/silenza.it\/<\/a><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li><strong>Largos Scrolls verticales.<\/strong> Si antes te dec\u00edan que cuanto menos scroll vertical mejor porque los usuarios se suelen cansar ahora son m\u00e1s f\u00e1ciles de encontrar estos scrolls. Tenemos de dos tipos, <strong>scrolls infinitos<\/strong> que a medida que vas bajando van a pareciendo nuevos elementos y <strong>scrolls verticales bien estructurados<\/strong> que a medida que bajas vas pasando por las diferentes secciones de una web, me he llegado a encontrar webs hechas con una \u00fanica p\u00e1gina, sin men\u00fas y todo el contenido va apareciendo con el scroll..<\/li>\n<\/ul>\n<p>Ejemplo de dise\u00f1o web con scroll infinito:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9846261..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9016\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web scroll infinito\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9846261..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9016\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9846261..png\" alt=\"dise\u00f1o web scroll infinito\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/creativecruise.nl\/\">http:\/\/creativecruise.nl\/<\/a><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li><strong>Registro de cuentas.<\/strong> Ante la proliferaci\u00f3n de redes sociales el n\u00famero de cuentas, de usuarios y de claves para identificarte se ha multiplicado. \u00bfQu\u00e9 soluci\u00f3n encontraron para solucionar este problema? Seguro que te suena, empezaron a dejar logearse a los usuarios con sus cuentas sociales. Por ejemplo, hootsuite, no hace falta que crees una cuenta nueva, simplemente loge\u00e1ndote con uno de tus perfiles sociales ya puedes empezar a usar su aplicaci\u00f3n. De esta forma te ahorras aprenderte un usuario y su clave correspondiente m\u00e1s.<\/li>\n<\/ul>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9594953..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9017 aligncenter\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencias de dise\u00f1o web hootsuite\" width=\"273\" height=\"500\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9594953..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9017 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-9594953..png\" alt=\"tendencias de dise\u00f1o web hootsuite\" width=\"273\" height=\"500\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/hootsuite.com\/login?redirect=%2Fauth%2Fauthorize%3Fclient_id%3DNJ583PzkwibvhraAZGyz%26redirect_uri%3Dhttps%253A%252F%252Fhootsuite.com%252Flogin%252Foauth2complete%26state%3D3867cf6bc92c27df44ff062eb7e62e79%26scope%3D%26response_type%3Dcode%26approval_prompt%3Dauto%26startExternalMethod%3D&amp;oauth2Authorize=1&amp;method=\">hootsuite<\/a><\/p>\n<p>\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Animaciones\"><\/span>3.- Animaciones<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Gracias a las mejoras en las comunicaciones, los anchos de banda ahora permiten aumentar los datos a enviar por la red. Es por eso que el uso de animaciones en dise\u00f1o web es cada vez m\u00e1s com\u00fan.<\/p>\n<p>Cada vez es m\u00e1s com\u00fan ver videos, peque\u00f1as animaciones para destacar zonas de la web o, grandes animaciones que necesitas de la interacci\u00f3n del usuario para que vayan mostrando una historia.<\/p>\n<p><strong>\u00bfQu\u00e9 veremos este 2016?<\/strong><\/p>\n<ul>\n<li><strong>Videos de fondo a pantalla completa<\/strong>. Todo lo que puedas contar con una imagen ser\u00e1 m\u00e1s f\u00e1cil de recordar que con texto. Con estos videos tan grandes consigues atraer al lector. Problema que veo, que si usas im\u00e1genes o videos demasiado recargados puedes llegar a distraer al usuario. As\u00ed que si lo usas, con moderaci\u00f3n.<\/li>\n<\/ul>\n<p>Ejemplo de video a pantalla completa en dise\u00f1o web:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5267048..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9018\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencias dise\u00f1o web v\u00eddeo\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5267048..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9018\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5267048..png\" alt=\"tendencias dise\u00f1o web v\u00eddeo\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.dunckelfeld.de\/en\/\">http:\/\/www.dunckelfeld.de\/en\/<\/a><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>Uso de animaciones de carga<\/strong>. Tienen dos cometidos. Por un lado cumple con uno de los principios b\u00e1sicos de Usabilidad Web: mostrar en todo momento el estado del sistema.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1731665..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9019 aligncenter\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"estado carga web design\" width=\"271\" height=\"271\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1731665..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9019 aligncenter\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1731665..png\" alt=\"estado carga web design\" width=\"271\" height=\"271\"><\/noscript><\/a><\/p>\n<ul>\n<li><strong>Animaciones en los men\u00fas<\/strong>, para hacer transiciones m\u00e1s suaves. Por ejemplo, cuando nos encontramos con un men\u00fa hamburguesa y cuando pinchamos en \u00e9l aparece el men\u00fa al completo.<\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<p>Ejemplo de dise\u00f1o web con animaci\u00f3n en el men\u00fa:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-3292122..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9020\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencia dise\u00f1o web animaci\u00f3n men\u00fa\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-3292122..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9020\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-3292122..png\" alt=\"tendencia dise\u00f1o web animaci\u00f3n men\u00fa\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: http:\/\/www.etq-amsterdam.com\/collection<\/p>\n<ul>\n<li><strong>Hover no s\u00f3lo en botones<\/strong>. Hover es cuando situamos el rat\u00f3n encima de un elemento. Por ejemplo, cuando entramos en un bot\u00f3n, este cambia de color. Tambi\u00e9n se usa en im\u00e1genes para mostrar textos ocultos, o para cambiar la imagen, etc. Cuando un usuario entra en una web y ve que si interact\u00faa con una imagen esta reacciona, instintivamente va a ir pasando de imagen en imagen para ver que hace cada una de ellas. Conseguimos as\u00ed retener al usuario.<\/li>\n<\/ul>\n<p>Ejemplo de dise\u00f1o web con hover:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1975183..jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9021\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web hover\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1975183..jpg\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9021\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1975183..jpg\" alt=\"dise\u00f1o web hover\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/humaan.com\/\">http:\/\/humaan.com\/<\/a><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li><strong>Parallax<\/strong>. Es una animaci\u00f3n que requiere de la interacci\u00f3n con el usuario. Suelen hacerse con el scroll vertical.<\/li>\n<\/ul>\n<p>A medida que el usuario va bajando por la p\u00e1gina, \u00e9sta va mostrando animaciones que ayudan a contar una historia o para mostrar contenido de una manera m\u00e1s amigable.<\/p>\n<p><noscript><iframe loading=\"lazy\" title=\"Parallax on the Web (Part 1) - Parallax Examples\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/STwoa-9jxi0?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><\/noscript><\/p>\n<p>Ejemplo de dise\u00f1o web con parallax:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2347630..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9029\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencia dise\u00f1o web parallax\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2347630..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9029\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2347630..png\" alt=\"tendencia dise\u00f1o web parallax\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/vnstar.com.ua\/en\/\">http:\/\/vnstar.com.ua\/en\/<\/a><\/p>\n<p>\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4-Elementos-multimedia\"><\/span>4.- Elementos multimedia<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No es en s\u00ed una tendencia. Pero la proliferaci\u00f3n de su uso en las webs, hacen que tenga que mencionarlo.<\/p>\n<p>Tenemos que diferenciarnos del resto, y conseguir que los porcentajes de rebote de nuestros sites sean aceptables. Para conseguir eso necesitamos implementar el uso de elementos multimedia dentro de nuestros dise\u00f1os web.<\/p>\n<p><strong>El uso de <\/strong>infograf\u00edas es cada vez m\u00e1s una obligaci\u00f3n que una sugerencia. Ayudan a viralizar tu contenido ya que se comparten muy bien por las redes sociales.<\/p>\n<p>Si quieres saber m\u00e1s sobre las infograf\u00edas te invito a ver el siguiente v\u00eddeo creado por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/claudioinacio.com\/\">Claudio Inacio<\/a>.<\/p>\n<p><noscript><iframe loading=\"lazy\" title=\"Tutorial de Piktochart -  C\u00f3mo crear una infograf\u00eda\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/wHP-KGGr5og?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><\/noscript><\/p>\n<p>En cuanto a las im\u00e1genes que uses en tus dise\u00f1os webs, una recomendaci\u00f3n: <strong>al\u00e9jate de las fotos de stock siempre que puedas.<\/strong>.<\/p>\n<p>Yo no digo que no las uses, pero con tanto blog o web los sitios de im\u00e1genes online gratis est\u00e1n a la orden del d\u00eda. Y por tanto, tienes muchas posibilidades que uses la misma imagen gratuita que tu competencia.<\/p>\n<p>Intenta diferenciarte, si bajas un recurso gr\u00e1fico de este tipo de webs, intenta personalizarlo para que no sea igual.<\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5-Diseno-modular\"><\/span>5.- Dise\u00f1o modular<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Conoces Pinterest, \u00bfverdad?<\/p>\n<p>Es el mejor ejemplo de dise\u00f1o modular. Muchos son los que han copiado este sistema de mostrar informaci\u00f3n. Es perfecto para mostrar fragmentos peque\u00f1os de informaci\u00f3n y que sean escaneados por el lector hasta que d\u00e9 con el que m\u00e1s le llame la atenci\u00f3n. Adem\u00e1s se adaptan a la perfecci\u00f3n si quieres una web responsive.<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4603883..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9023\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web modular\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4603883..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9023\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-4603883..png\" alt=\"dise\u00f1o web modular\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"6-Diseno-Flat-vs-Material-Design\"><\/span>6.- Dise\u00f1o Flat vs Material Design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00a0<\/p>\n<p>Vemos que todo conduce al minimalismo, es una tendencia dentro de cualquier tipo de dise\u00f1o gr\u00e1fico.<\/p>\n<p>De ah\u00ed surgi\u00f3 el flat design, un dise\u00f1o basado en colores planos e im\u00e1genes sencillas.\u00a0 Una tendencia en dise\u00f1o que sigue muy viva y que creo que durar\u00e1 todav\u00eda unos cuantos a\u00f1os.<\/p>\n<p>Sobre todo porque es f\u00e1cil de implementar dentro del dise\u00f1o web y el uso de este tipo de im\u00e1genes planas generan archivos poco pesados. Con lo que mejoramos los tiempos de carga de nuestras p\u00e1ginas webs.<\/p>\n<p>Ejemplo de dise\u00f1o web flat:<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5821806..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9024\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web flat\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5821806..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9024\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5821806..png\" alt=\"dise\u00f1o web flat\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<p>Imagen: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/flatomedia.com\">http:\/\/flatomedia.com<\/a><\/p>\n<p>Pero dentro del intento de mejora de cualquier tipo de dise\u00f1o web se empiezan a <strong>a\u00f1adir peque\u00f1as sombras y degradados a los dise\u00f1os. As\u00ed nace el Material Design<\/strong>.<\/p>\n<p>Cada vez es m\u00e1s frecuente ver estos peque\u00f1os detalles dentro de los dise\u00f1os web m\u00e1s simples para destacar las diferentes zonas que lo componen.<\/p>\n<p>Ejemplo de material design:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9025 size-full\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencia dise\u00f1o web material design\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2915172..png\"><\/p>\n<p><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9025 size-full\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2915172..png\" alt=\"tendencia dise\u00f1o web material design\" width=\"800\" height=\"434\"><\/noscript><\/p>\n<p>Adem\u00e1s el tipo de paletas de colores usados en estas dos formas de dise\u00f1o son muy reconocibles. Si no quieres volverte loco buscando una paleta de colores, puedes usar <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.materialpalette.com\/\">esta web<\/a> para hacer pruebas.<\/p>\n<p>\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7-Uso-de-tipografias-personalizadas\"><\/span>7.- Uso de tipograf\u00edas personalizadas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A\u00a0veces no se da el suficiente reconocimiento a este recurso gr\u00e1fico para mejorar y potenciar el mensaje que queremos dar con\u00a0 nuestro dise\u00f1o web.<\/p>\n<p>Fuentes enormes, may\u00fasculas, versalitas, cursivas negritas, tienes un buen pu\u00f1ado de posibilidades para destacar tus textos.<\/p>\n<p>Ahora, gracias a Google Fonts, tenemos m\u00e1s posibilidades de encontrar la tipograf\u00eda que mejor va con nuestro dise\u00f1o.<\/p>\n<p>Creo que con este ejemplo ver\u00e1s mejor el uso de las tipograf\u00edas en el dise\u00f1o web: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/onirim.com\/\">http:\/\/onirim.com\/<\/a><\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5173811..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9027\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"dise\u00f1o web tipograf\u00eda\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5173811..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9027\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-5173811..png\" alt=\"dise\u00f1o web tipograf\u00eda\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"8-Volvemos-a-lo-retro\"><\/span>8.- Volvemos a lo retro<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Muchas de los cambios en tendencias de dise\u00f1o gr\u00e1fico tienen su origen en tendencias pasadas. Hace unos a\u00f1os pasamos a la moda vintage en cuanto a dise\u00f1o web. La inspiraci\u00f3n\u00a0 se buscaba en carteler\u00eda antigua y dise\u00f1os desde los a\u00f1os 20 hasta los 50-60.<\/p>\n<p>Ahora la inspiraci\u00f3n del \u201cretro moderno\u201d hace que nos fijemos en la \u00e9poca ochentera, bueno m\u00e1s bien entre los 70-90.<\/p>\n<p>Yo creo que volvemos a esa \u00e9poca porque muchos de los dise\u00f1adores actuales, crecieron en esa \u00e9poca, y eso marca J.<\/p>\n<p>Yo, mientras no vuelvan las hombreras me quedo con esta tendencia.<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1071490..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9028\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencia dise\u00f1o web retro moderno\" width=\"800\" height=\"434\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1071490..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9028\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-1071490..png\" alt=\"tendencia dise\u00f1o web retro moderno\" width=\"800\" height=\"434\"><\/noscript><\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"9-Apps-inspiran-los-nuevos-disenos-web\"><\/span>9.- Apps inspiran los nuevos dise\u00f1os web<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si has llegado hasta aqu\u00ed, te habr\u00e1s dado cuenta que muchas tendencias actuales vienen condicionadas por el uso de los dispositivos m\u00f3viles.<\/p>\n<p>Y dentro de estos dispositivos, est\u00e1n influenciados por la forma en que se dise\u00f1an las apps.<\/p>\n<p>Cada vez veremos dise\u00f1os web m\u00e1s sencillos, sin distracciones, con men\u00fas ocultos,\u00a0 contenido modular, etc.<\/p>\n<p>Estoy convencido que incluso se empezar\u00e1n a implementar acciones gestuales en las webs como si fueran una aplicaci\u00f3n m\u00e1s de tu m\u00f3vil.<\/p>\n<p>\u00a0<\/p>\n<h3><span class=\"ez-toc-section\" id=\"10-Usabilidad\"><\/span>10.- Usabilidad<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Cada vez m\u00e1s tenemos en cuenta al usuario dentro del dise\u00f1o web.<\/p>\n<p>Se busca que la experiencia con nuestro site sea lo m\u00e1s agradable posible.<\/p>\n<p>B\u00fascamos interfaces transparentes o lo que es lo mismo, que el usuario no tenga ning\u00fan problema para poder moverse por nuestra web.<\/p>\n<p>Este es el fin, de la usabilidad. Y es por eso que cada vez tiene m\u00e1s peso dentro del dise\u00f1o.<\/p>\n<p>Nadie volver\u00e1 a tu web por muy bonita que sea, si no tiene usabilidad.<\/p>\n<p><a rel=\"prettyPhoto[gallery-ZnWc]\" target=\"_blank\" href=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2579236..png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9031\" src=\"data:image\/svg+xml,%3Csvg%20xmlns=\" http:=\"\" alt=\"tendencias del dise\u00f1o web en 2016 infograf\u00eda\" width=\"800\" height=\"1385\" data-lazy-src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2579236..png\"><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9031\" src=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/10-Tendencias-en-Diseno-Web-para-2016-Ejemplos-2579236..png\" alt=\"tendencias del dise\u00f1o web en 2016 infograf\u00eda\" width=\"800\" height=\"1385\"><\/noscript><\/a><\/p>\n<p>\u00a0<\/p>\n<p>Empezamos la lista de las <strong>tendencias en dise\u00f1o web en 2016<\/strong> con el <strong>Dise\u00f1o responsive <\/strong>y hemos acabado con la <strong>Usabilidad web<\/strong> para mejorar la Experiencia del usuario (UX User Experience).<\/p>\n<p><strong>\u00bfPor qu\u00e9?<\/strong><\/p>\n<p>Son los dos ejes principales dentro del dise\u00f1o web. Muchos a lo mejor pens\u00e1is que son m\u00e1s que tendencias, buenas pautas dentro del dise\u00f1o.<\/p>\n<p>Puede ser, pero pienso que tienen cada vez m\u00e1s peso, y por eso no podemos dejar de nombrarlas.<\/p>\n<p>Como he dicho antes, puedes tener un dise\u00f1o web impecable, el mejor dise\u00f1o web en cuanto a est\u00e9tica. Pero como falle la usabilidad y que no sea responsive, tu dise\u00f1o no llegar\u00e1 a ning\u00fan lado.<\/p>\n<p>Tienes que pensar m\u00e1s all\u00e1, piensa que te gustar\u00eda que tuviera una web para no salir de ella.<\/p>\n<p>Mejor a\u00fan, recuerda las veces que has salido de una web sin ni tan siquiera leerla porque no se ve bien un tu dispositivo m\u00f3vil o porque tarda mucho en cargar.<\/p>\n<p>Por eso considero que son los dos pilares b\u00e1sicos sobre los que tienes que forjar tu proyecto web. El resto de tendencias son eso, tendencias.<\/p>\n<p>Espero que te haya parecido interesante este <strong>art\u00edculo sobre las tendencias actuales en dise\u00f1o web<\/strong>. Si es as\u00ed ay\u00fadanos a Miguel y a m\u00ed a difundirlo por las redes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCuales-son-las-tendencias-en-diseno-web-que-mas-te-han-llamado-la-atencion\"><\/span>\u00bfCu\u00e1les son las tendencias en dise\u00f1o web que m\u00e1s te han llamado la atenci\u00f3n?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFConsideras-importante-hacer-un-buen-diseno-web-para-mejorar-la-usabilidad-y-la-experiencia-de-usuario\"><\/span>\u00bfConsideras importante hacer un buen dise\u00f1o web para mejorar la usabilidad y la experiencia de usuario?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Gracias a Shutterstock por ceder la imagen <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.shutterstock.com\/es\/pic-350726585\/stock-vector-one-page-web-design-template-with-thin-line-icons-of-internet-of-things-data-technology-network.html\">Bloomua<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFTe-gusto-este-post-Valoralo\"><\/span>\u00bfTe gust\u00f3 este post? Val\u00f3ralo<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h3 style=\"magin-top:20px;\"><span class=\"ez-toc-section\" id=\"Puede-que-esto-te-interese%E2%80%A6\"><\/span>Puede que esto te interese&#8230;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>01\/02\/2016 R Marketing Digital Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Dise\u00f1o Web del 2016 o del que viene. \u00bfPor qu\u00e9? Muy simple. No&#8230;<\/p>","protected":false},"author":1,"featured_media":93910,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1365],"tags":[],"class_list":["post-93938","post","type-post","status-publish","format-standard","has-post-thumbnail","category-ecommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"01\/02\/2016 R Marketing Digital Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Dise\u00f1o Web del 2016 o del que viene.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos\" \/>\n<meta property=\"og:description\" content=\"01\/02\/2016 R Marketing Digital Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Dise\u00f1o Web del 2016 o del que viene.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-16T12:28:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"320\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos\",\"datePublished\":\"2022-10-16T12:28:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/\"},\"wordCount\":2472,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tendencias-diseno-web-2016-5222092.png\",\"articleSection\":[\"Ecommerce\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/\",\"name\":\"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tendencias-diseno-web-2016-5222092.png\",\"datePublished\":\"2022-10-16T12:28:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"01\\\/02\\\/2016 R Marketing Digital Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Dise\u00f1o Web del 2016 o del que viene.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/ecommerce\\\/10-tendances-de-conception-de-sites-pour-2016-exemples\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tendencias-diseno-web-2016-5222092.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/tendencias-diseno-web-2016-5222092.png\",\"width\":640,\"height\":320,\"caption\":\"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Trends in Web Design for 2016 + Examples - R Marketing Digital","description":"02\/01\/2016 R Marketing Digital When we start a new online project we have to look at the trends in Web Design of 2016 or the next.","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:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/","og_locale":"en_US","og_type":"article","og_title":"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos","og_description":"01\/02\/2016 R Marketing Digital Cuando comenzamos un nuevo proyecto online tenemos que fijarnos en las tendencias en Dise\u00f1o Web del 2016 o del que viene.","og_url":"https:\/\/rmarketingdigital.com\/en\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-16T12:28:49+00:00","og_image":[{"width":640,"height":320,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos","datePublished":"2022-10-16T12:28:49+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/"},"wordCount":2472,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png","articleSection":["Ecommerce"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/","url":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/","name":"10 Trends in Web Design for 2016 + Examples - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png","datePublished":"2022-10-16T12:28:49+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"02\/01\/2016 R Marketing Digital When we start a new online project we have to look at the trends in Web Design of 2016 or the next.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/fr\/ecommerce\/10-tendances-de-conception-de-sites-pour-2016-exemples\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/11\/tendencias-diseno-web-2016-5222092.png","width":640,"height":320,"caption":"10 Tendencias en Dise\u00f1o Web para 2016 + Ejemplos"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=93938"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/93938\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/93910"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=93938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=93938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=93938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}