Tendencias web 2016

Hola a tod@s,
Esta semana toca hablar de las tendencias para diseño web que se esperan para este 2016. ¡Empezamos!.

Patrones UI

¿Ves varias web y todas parecen la misma?… uno de los resultados del diseño responsive ha sido que muchas web sigan una misma “una misma” plantilla, de hecho quizás haya tenido que ver Wordpress más (gracias a sus plantillas). Sin embargo esto no tiene porque ser malo, estos patrones UI guían al usuario al navegar por tu web. Simplemente úsalos de forma adecuada.

El menú hamburguesa, aunque tiene detractores no hay duda de que su uso ya generalizado es una función fácilmente reconocible.

de Silenza

Scroll “infinito”, El pánico al scroll ya es historia. Mucho tenemos que agradecer a los dispositivos móviles y sus scrolls interminables. La técnica funciona especialmente bien para los sitios que quieren atraer a los usuarios a través de la narración de cuentos, y todavía se puede imitar un sitio de varias páginas al romper el libro en secciones claras.

Interfaz de tarjetas, Iniciado por Pinterest, el diseño con tarjetas está por todas partes en la web debido a que presentan la información en trozos tamaño  perfecto para la exploración. Cada carta representa un concepto unificado. Ya que actúan como "recipientes de contenido", su forma rectangular hace más fáciles los re-arreglos para diferentes puntos de corte del dispositivo.

de The next web

Hero images, Desde que la visión es el sentido humano más fuerte, imágenes HD son una de las maneras más rápidas para captar la atención del usuario. Gracias a los avances en el ancho de banda y compresión de datos, los usuarios no sufrirá  los tiempos de carga. Un diseño común que encontrará es una imagen HD sobre el desplazamiento, seguido por cualquiera de las secciones zigzagueantes de un acuerdo de tarjetas basadas.

de Maaemo

Animaciones

Las animaciones se están utilizando cada vez más para mejorar la narración de un sitio, haciendo la experiencia más interactiva y entretenida.
Sin embargo, no se puede simplemente meter la animación en cualquier lugar. Considere cuidadosamente si se suma a elementos de la historia de su sitio y la personalidad. Las animaciones pueden ser pensados en términos de dos grupos:

Animaciones a gran escala

Estos se utilizan como una herramienta de interacción primaria tienen más impacto en los usuarios, e incluyen efectos como scroll parallax y notificaciones emergentes.

Animaciones pequeña escala

Estos incluyen los hilanderos, herramientas libración y barras de carga, y no requieren ninguna intervención del usuario.


Vamos a describir 7 de las técnicas de animación más populares:

Animaciones de carga

Estos se utilizan para entretener a los usuarios y usuarios Delight durante una experiencia de lo contrario tediosa. Carga de animaciones tiende a ser popular para el flat design, el minimalismo, las carteras y los sitios de una página.

Navegación y menús (no desplazamiento)

Menús de navegación ocultos,se han vuelto cada vez más popular, especialmente en los que se pueden utilizar para ahorrar espacio en pantalla. Como se puede ver en este  ejemplo  creado en la herramienta de prototipado colaborativo UXPin, estas animaciones se usan para revelar un menú al hacer clic en un botón específico y evitar una transición discordante (como un cajón de navegación oculta detrás de un icono de la hamburguesa).

Hover

Los efectos Hover dan una sensación más intuitiva a un sitio como usuarios del ratón sobre el contenido. Los usuarios no están seguros acerca de una función característica tienden a flotar sobre ellos de forma automática para la retroalimentación visual instantánea.

Parallax

Requiere interacción por parte del usuario, genera ritmo (o lo rompe) ayuda a contar historias y, en consecuencia, potencia el contenido.

de Le-Mugs

Slideshow

Una forma efectiva de presentar varias imágenes o vídeos sin sobrecargar tu diseño.

de Camper

Tipografía

Otra de las tendencias en diseño web que veremos cada vez más frecuentemente es el uso expresivo de la tipografía. Se utilizará como forma y no como medio para comunicar, o dicho de otra forma, se ilustrará con letras.
Tus conocimientos tipográficos serán imprescindibles para obtener un buen resultado, si sois principiantes os recomiendo sitios como Don Serifa, donde encontraréis multitud de info para "redescubrir" la tiografía y usarla en vuestro próximo proyecto

de Vintage Hope

Nuevo diseño flat

El año pasado, Google lanzó su nuevo lenguaje de estilo, material design. Utiliza efectos de sombra y los conceptos de movimiento y profundidad con el fin de crear diseños que parecen más realistas para el usuario.

El objetivo del material design es crear diseño limpio y modernista que se centran en UX. Si bien el diseño estético de Google tiene detractores, ha sido elogiado sobre todo como un cambio de juego.

Con su aspecto minimalista, material design tiene mucho en común con otra tendencia creciente :  flat design. Material design, sin embargo, hace uso de la profundidad y de la sombra, que permite una mayor profundidad que diseño plano puro.

El flat design ha existido durante un tiempo y es compatible con otras tendencias como el minimalismo, diseño web sensible y Diseño de Materiales. Y esto no cambiará a corto plazo.

De cara al futuro, es probable que veamos las siguientes nuevas tendencias en diseño plano vienen a la vanguardia.

• Largas sombras. Estos traer más profundidad a los diseños planos.
• Combinaciones de colores vibrantes. Marcos IU populares y plantillas han llevado a muchos a comenzar a usar colores más vibrantes en sus diseños.
• Tipografía simple. Tipografías simples ayudan a asegurar que el texto sigue siendo legible y de fácil lectura en diseño plano.
• Botones fantasma. Estos permiten la funcionalidad sin distraer de la UX y, a menudo se representan como esbozados, hacer clic en enlaces que cambian cuando el usuario se desplaza sobre ellos.
• Minimalismo. Parece para reducir el número de elementos con el fin de crear una interfaz de usuario desordenado fresco.

Indicaciones adicionales para el Web Tendencias Diseño

No seguir las tendencias sólo porque son  "hip" que hacer en este momento. Las Tendencias representan técnicas populares por una buena razón, pero aseguraos de que es mejor para sus usuarios. Por ejemplo, un sitio de comercio electrónico desde luego no quedaría bien como una sola página web de desplazamiento infinito.

Las Tendencias no son más que herramientas adicionales en su caja de herramientas de diseño. Siempre hay que elegir lass más adecuados para el trabajo.

Para obtener más consejos sobre las 10 tendencias más importantes de diseño web, echar un vistazo a el libro electrónico gratuito de Diseño Web Trends 2015 y 2016. Aprenderéis lo mejor con el análisis de 166 ejemplos de compañías como Google, Apple, Reebok, BMW, Intercom , Adidas, Dropbox, y muchos más.