Nos aproximamos al final de año y es un buen mes no solo para hacer balances y ver lo bien o mal (esperemos que no) que te ha ido este año, sino también para mirar de cara al futuro, ponerte al día en tendencias y tecnología e intentar estar a la última en diseño web.

Cada vez el diseño y la tecnología avanzan más rápido. Por eso es tan importante conocer las últimas novedades en cuando a diseño web si quieres que tu negocio o marca esté siempre a la última o incluso se convierta en referente en tu sector por incorporar las últimas novedades web. Nunca se sabe, pero al menos para nosotros conocer de primera mano lo último en diseño web y estar un paso por delante, siempre se puede convertir en un punto a favor.

Por ello y para comenzar el año con buen pie, te adelantamos algunas de las tendencias en diseño web que veremos este próximo 2016.

Material Design: Más allá del Flat Design

Google presentó el Material Design hará cosa de año y pico. Si el Flat Design fue la gran tendencia en 2015, Material Design sin duda se convertirá en la tendencia para 2016. ¿Las novedades? Pues que incorpora efectos de sombras, animaciones y efectos de mayor profundidad. Todo ello con el objetivo de crear diseños que al usuario le parezcan mucho más realistas. Al hacer uso de las sombras disponemos de mayor profundidad en el diseño que con el Flat Design y mejoramos la usabilidad, también conocida como user experience (UX).

Ojo, que Material Design se convierta en tendencia para este 2016 no significa que vaya a “sustituir” al Flat Design. De hecho es seguirá siendo compatible con otras tendencias como responsive design, ghost buttons, etc.

Dos ejemplos de diseño Material Design:

Life Awsome

Nimbus Nine

Cinemagraph integrado en la web

Las fotos animadas, más conocidas como Cinemagraphs no son nada nuevo. De hecho ya hablamos en alguna otra ocasión de ellas en otro de nuestros artículos. Pero en 2015 la mejora del HTML5 Canvas y la inclusión de imágenes animadas en Social Media, han hecho que los Cinemagraphs estén en el punto de mira de los diseñadores web para este 2016.

El acontecimiento principal y más reciente ha sido la llegada de las “fotos en vivo” de los últimos modelos del iPhone 6 y también a las fotos de perfil de Facebook (por ahora sólo disponibles en EEUU a través de la app móvil). Este tipo de fotos le dan un poco de movimiento a una foto estática o consisten en un loop de video. El Cinemagraph ofrece un efecto muy similar. Una vez empiece a propagarse por las plataformas sociales pasará a formar parte también de las páginas web.

Un ejemplo de cinemagraph en página web:

Fixel

Animaciones

Cada vez lo vemos más y en 2016 sucederá exactamente igual. Las animaciones en las páginas web para que la experiencia sea mucho más interactiva y enriquecedora para el usuario. Pero mucho cuidado, no se trata de desarrollar una animación molona e insertarla en el primer sitio donde te plazca. Tienen que tener coherencia e ir acordes al diseño de tu web.

A parte de las animaciones a gran escala para mayor impacto sobre los usuarios como Parallax o los Pop-ups encontramos otras a menor escala:

• Loaders: Usadas para entretener al usuario mientras espera. Muy utilizadas en Flat Design, portfolios o webs one-page. Un ejemplo: Subskill
• Animaciones motion: Ideales para captar la atención del usuario. A los usuarios les encanta el movimiento y las animaciones con movimiento son perfectas para ello. Un ejemplo: Bugaboo
• Animaciones Hover: Perfectas para que la experiencia del usuario sea más intuitiva y el cursor sobre ciertas zonas de información al usuario del contenido web. Un ejemplo: Buffer
• Slideshows: Una manera efectiva de mostrar diversas imágenes sin saturar demasiado a los usuarios. Perfecta para fotógrafos o galerías showcases. Nuestra Home Page
• Scroll: Animaciones basadas en un desplazamiento controlado por el usuario. Él tiene el control y el decide el ritmo en el que quiere que sucedan las cosas en la web. McWhopper

Centrándose en la tipografía

Igual de importantes resultan los colores corporativos para una marca que la tipografía que se utilice. Gracias a Google Fonts, ahora los desarrolladores y diseñadores webs no estarán limitados a la Arial u otras fonts. En 2016 se va a prestar mucha más atención al detalle de la tipografía y tamaños. Es un pequeño pero difícil cambio que puede suponer un gran impacto en la percepción de la web. Ya lo están realizando muchos diseñadores y fotógrafos pero tiene que empezar a expandirse en muchos otros sectores.

Un ejemplo:

McArnolds

Proliferación de patrones UI

La forma en la que consumimos las páginas web ha cambiado. La proliferación de los patrones UI se ha extendido de forma exagerada. El web responsive y el uso extendido de WordPress han tenido parte de la culpa. Pero esto no tiene porque ser algo malo.

Se ha avanzado mucho en cuanto a los patrones UI por lo que tampoco hay que innovar una barbaridad. Mejor limitarse a lo que tienen que hacer, que es guiar al usuario a través de una buena experiencia. Familiarízate con algunos de estos patrones:

• Menú Hamburguesa: Función fácilmente reconocible, lo cual no quita que tenga su ejército de “haters”. Un ejemplo de theme: Port Demo
• Scrolling Largo: Disponer de la información más importante en la parte superior de tu web es importante. Pero con el uso cada vez más extendido del scrolling en dispositivos móviles estamos ya más que acostumbrados a scrollings más largos. Funciona muy bien para aquellos que quieran contar una historia a lo largo del scrolling de sus webs. Un ejemplo: Carlos Medina Top Chef
• Tarjetas Layout: Fue Pinterest quien lo popularizó y ahora son miles de webs quien lo utilizan. Perfecto si quieres comunicar distintos trozos de información y que el usuario navegue sin control aparente. Ideal para sitios móviles. Un ejemplo: Nuestro Portfolio
• Fotones: Fotones si. Así tal cual. Una buena foto a toda pantalla, lo que es un fotón a tamaño XXL siempre ha sido y será la manera más fácil y rápida de captar la atención de cualquier usuario. Y no te preocupes, gracias a los nuevos anchos de banda y la velocidad de internet hoy en día cualquier imagen de calidad carga con mucha facilidad. Un ejemplo: La web de nuestro fotógrafo & Fundador de Blixt™ Christian Perret.

Nuestro consejo final es que no cambies tu web y no sigas estas tendencias simplemente porque estén de moda. Hazlo siempre con coherencia y pensando en qué será mejor para tus clientes y seguidores. Si por ejemplo tu negocio es una ecommerce, pues no funcionará bien un diseño de one-page o de scrolling. Piensa en estas tendencias como distintas herramientas siempre a tu disposición que le facilitarán la usabilidad a tus usuarios. Esperemos que te sean de gran utilidad a lo largo de este nuevo año. Y ya sabes, si conoces otras tendencias estaremos encantados de que nos las cuentes.

Fuente: BLIXT