{"id":121,"date":"2016-01-08T13:08:06","date_gmt":"2016-01-08T19:08:06","guid":{"rendered":"http:\/\/bigelephant.mx\/blog\/?p=121"},"modified":"2025-10-17T10:57:15","modified_gmt":"2025-10-17T16:57:15","slug":"tendencias-en-diseno-web-2016-con-ejemplos","status":"publish","type":"post","link":"https:\/\/bigelephant.mx\/blog\/tendencias-en-diseno-web-2016-con-ejemplos","title":{"rendered":"Tendencias en dise\u00f1o web 2016 (con ejemplos)"},"content":{"rendered":"

\"tendencias
\n 
\nMirar hacia el futuro est\u00e1 de moda y nosotros no \u00edbamos a ser menos.
\nOs contamos c\u00f3mo van a ser las tendencias en dise\u00f1o web del 2016

 <\/p>\n

\n

Ni somos Martin McFly ni tenemos un Delorean y tampoco una t\u00eda tarotista.
\nPero te contamos cu\u00e1les van a ser las tendencias en dise\u00f1o web en 2016.<\/p>\n

 <\/p>\n

Tendencias en dise\u00f1o web\u00a0para este a\u00f1o<\/span><\/h2>\n

Nuevo Dise\u00f1o Flat<\/h3>\n

\"Tendencias<\/p>\n

 
\nGoogle nos lo present\u00f3 hace ya (casi) un par de a\u00f1os,
\nla digievoluci\u00f3n de lo que ya era una realidad.
\nLo llam\u00f3 Material design<\/a>.
\nDicen que para su creaci\u00f3n se inspiraron en la tinta y el papel.<\/p>\n

 
\nNo sabemos si esta historia es m\u00e1s un cuento que un hecho real.
\nLo que est\u00e1 claro es que se incorporaron efectos de profundidad,
\nsombras, animaciones y transiciones<\/strong> que mejoraron sustancialmente
\nlas interacciones dentro de sus aplicaciones.
\n\u00a1Adopta (si no lo has hecho) ya esta tendencia!<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nMaterial Interaction<\/a>
\nCanaltp<\/a><\/p>\n

Tipograf\u00eda<\/h3>\n

\"Tipograf\u00eda<\/p>\n

 
\nOtra de las tendencias en dise\u00f1o web que veremos cada vez m\u00e1s frecuentemente
\nes el uso expresivo de la tipograf\u00eda<\/strong>. Se utilizar\u00e1 como forma
\ny no como medio para comunicar, o dicho de otra forma, se ilustrar\u00e1 con letras.<\/p>\n

 
\nTus conocimientos tipogr\u00e1ficos ser\u00e1n fundamentales para conseguir un buen resultado,
\nsi eres principiante sudar\u00e1s con esta t\u00e9cnica. En este sitio<\/a>
\ndesde los m\u00e1s expertos hasta los m\u00e1s novatos podr\u00e1n cultivarse en la dif\u00edcil,
\nmaravillosa y apasionante disciplina tipogr\u00e1fica.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nWhite Frontier Brewery<\/a>
\nVintage hope<\/a><\/p>\n

Animaciones<\/h3>\n

\"Tendencias<\/p>\n

 
\nNo es ning\u00fan secreto que las animaciones bien utilizadas enriquecen notablemente
\nla experiencia dentro de cualquier web, sea cual sea su prop\u00f3sito. Utiliz\u00e1ndolas
\nconseguir\u00e1s generar una experiencia m\u00e1s rica y memorable<\/strong>.
\nEstas son algunas de las t\u00e9cnicas m\u00e1s populares:<\/p>\n

 
\nParallax<\/strong>:\u00a0requiere interacci\u00f3n por parte del usuario, genera ritmo
\n(o lo rompe) ayuda a contar historias y, en consecuencia, potencia el contenido.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nLe Mugs<\/a>
\nFor better coffee<\/a><\/p>\n

 
\nLoaders:\u00a0<\/strong>no requieren interacci\u00f3n. Calman ansiedades, entretienen
\ny si me apuras hipnotizan (en el mejor de los casos).<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nNJ(L.A.)<\/a>
\nSocialmood<\/a><\/p>\n

 
\nHover:\u00a0<\/strong>ayuda a que la experiencia sea m\u00e1s intuitiva y da una
\nrespuesta inmediata a cualquier movimiento del rat\u00f3n sobre el contenido.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nCuriousspace<\/a>
\nKraftwerk<\/a><\/p>\n

 
\nSlideshow:<\/strong>\u00a0una forma efectiva de presentar varias im\u00e1genes
\no v\u00eddeos sin sobrecargar tu dise\u00f1o.<\/p>\n

 
\nEjemplos:<\/span><\/strong>
\nCamper<\/a>
\nBartaile<\/a><\/p>\n

Patrones UI<\/h3>\n

\"Tendencias<\/p>\n

 
\n\u00a1Ay los patrones UI y sus efectos secundarios! No s\u00e9 a ti, pero yo m\u00e1s de una vez
\nhe sentido un \u201cd\u00e9j\u00e0 vu\u201d mientras navegaba por una web. Patrones que a golpe de
\nrepetici\u00f3n se han grabado a fuego en nuestras retinas y a\u00fan as\u00ed nos gustan
\n(siempre con medida).\u00a0Estos patrones gu\u00edan al usuario mientras navega
\npor tu web<\/strong>.
\nTe solucionar\u00e1n m\u00e1s de una papeleta. \u00dasalos, funcionan.<\/p>\n

 
\nEl\u00a0men\u00fa hamburguesa<\/a>,<\/strong> aunque tiene detractores no hay duda de que su uso
\nya generalizado es una funci\u00f3n f\u00e1cilmente reconocible.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nCollection ETQ \u00c1msterdam<\/a>
\nVisualizer<\/a><\/p>\n

 
\nEl p\u00e1nico al scroll<\/strong> ya es historia. Mucho tenemos que agradecer
\na los dispositivos m\u00f3viles y sus scrolls interminables. Tampoco es ya ning\u00fan
\nsecreto que el uso del scroll para contar historias<\/strong> dentro
\nde una web es una f\u00f3rmula que funciona (y muy bien) y es otra de esas
\ntendencias en dise\u00f1o web imprescindibles desde el a\u00f1o pasado.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nApple<\/a>
\nVaalentin<\/a><\/p>\n

 
\nGrid Pinteresiano:<\/strong>\u00a0Pinterest lo populariz\u00f3 y ahora son muchos
\nlos que han adoptado esta tendencia. Es ideal para mezclar\u00a0en un mismo sitio
\ndistintos pedazos de informaci\u00f3n, que invitan a navegar sin
\ncontrol<\/strong> a trav\u00e9s de los diferentes\u00a0contenidos.
\nFunciona fet\u00e9n en sitios m\u00f3viles.<\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nDesigne Interaction<\/a>
\nBig Active<\/a><\/p>\n

 
\nFotones:\u00a0<\/strong>ll\u00e1malo HD o ll\u00e1malo Pepe, el impacto que
\nconseguimos con im\u00e1genes\/v\u00eddeos a toda pantalla no es ning\u00fan secreto.
\nSi te entran los siete males solo de pensarlo,
\nte damos la medicina aqu\u00ed.<\/a><\/p>\n

 
\nEjemplos:<\/strong><\/span>
\nFlipboard<\/a>
\nSpotlight<\/a><\/p>\n

 
\nAviso a navegantes:<\/strong>
\nLas tendencias est\u00e1n muy bien, pero debemos estar seguros de que son la
\nmejor opci\u00f3n para nuestro dise\u00f1o. No hay dejarse llevar por las modas,
\nes importante, igual que vienen se van.\u00a0\u00dasalas con sentido com\u00fan.<\/p>\n<\/div>\n

 <\/p>\n

\n

 <\/p>\n

Fuente:<\/strong> www.40defiebre.com<\/a>