Qué esperar en diseño web en 2015

Hace doce meses publicamos algunas predicciones sobre lo que veríamos (y no veríamos) en 2014. Tocó un hilo con todos ustedes, así que decidimos hacer lo mismo este año.!

El año pasado, predijimos el aumento continuo del SVG, la disminución del corte de PSD y una sobrecarga del diseño orientado al video, entre muchas otras cosas. Este año que viene, vamos a ver más de lo mismo. Esto es lo que creemos que verá en diseño web en 2015!

Extravagancia de prototipos

La creación de prototipos no es solo una moda, es una parte importante del futuro del diseño web.

A medida que la web se vuelve más y más avanzada y complicada, continuaremos alejándonos de las maquetas estáticas y más hacia experiencias totalmente interactivas que requieren mucho más que una descripción visual. Las herramientas de creación de prototipos permiten a un diseñador mostrar no solo cómo es una experiencia digital en particular, sino también lo que puede hacer. hacer.

Las herramientas de creación de prototipos se utilizan para muchas interacciones específicas diferentes, incluido el diseño simple de animación, las transiciones y las consideraciones de compatibilidad con múltiples dispositivos. Pero los prototipos pueden hacer mucho más que mostrar la estética visual, pueden funcionar como soluciones de armado de alambre de alta resolución. Los diseñadores y los arquitectos de la información comenzarán a entrenar un poco más en el territorio de los demás, a medida que la arquitectura de la aplicación continuará integrándose con el proceso de diseño..

Herramientas que podrías usar para hacer prototipos

  • Framer: herramienta de creación de prototipos integrada en Sketch y Coffeescript creada para la creación de prototipos de interacción de alta resolución. 
  • Origami: construido por la gente de Facebook, Origami trabaja con Quartz Composer para construir prototipos interactivos. 
  • InVision: InVision es una excelente manera de comenzar con la creación de prototipos. Tomando capturas de pantalla estáticas y haciéndolas interactivas a un nivel muy simple, los usuarios pueden vincular las vistas, comentar puntos específicos del diseño y utilizar una vista versionada del prototipo en sí.. 
  • Codepen - Codepen es una herramienta que le permite probar algo en el navegador muy rápidamente. Con unos pocos clics, puede tener un lienzo en blanco con las bibliotecas populares de JavaScript, CSS y HTML. Codepen incluye soporte para cosas como HAML, LESS / SASS y enlaces a archivos externos (como jQuery). La creación de demostraciones en el navegador también tiene la ventaja de ser portátil y de uso inmediato en un proyecto real en vivo.

Lectura adicional, escuchar y mirar:

  • Qué es un prototipo (y no es) 
  • Prototipado: Guía de un practicante (libro) por Todd Zaki Warfel
  • Prototipado (@ Facebook) | Origami | Compositor de cuarzo | Framer 
  • Introducción a la creación de prototipos
  • PrototypingTools.co

Lo que no verá: herramientas para llevar la creación de prototipos directamente a la producción

Las herramientas de creación de prototipos aún no se han perfeccionado lo suficiente como para llevarlas directamente al navegador (a menos que, por supuesto, comiencen en el navegador, como Codepen). Algunos intentarán lograr esto, pero en última instancia, los desarrolladores humanos seguirán logrando la conversión de prototipos a productos digitales codificados listos para la producción. Tener las habilidades para convertir prototipos en código listo para la producción seguirá siendo un conjunto de habilidades altamente valorado para que los diseñadores de lo contrario estrictamente visuales posean.

Más adopción de croquis

Sketch ha aumentado en popularidad desde su lanzamiento por Bohemian Coding. Sketch está específicamente diseñado para crear diseños digitales. Es posible que nunca hayas oído hablar de Sketch, pero creemos que eso cambiará y este año verás que continúa creciendo..

El anterior líder del paquete, Photoshop, nunca fue diseñado para ser utilizado específicamente para el diseño web. Adobe ha continuado lanzando productos como Muse y Edge para abordar algunos de los desafíos de diseño específicos de la web donde Photoshop se queda corto. Sin embargo, Sketch y otras alternativas construidas por compañías de desarrollo más pequeñas están en aumento..

Lo que no verás: La muerte de Adobe

A pesar de que se están adoptando Sketch y herramientas similares, Adobe sigue siendo una fuerza poderosa en la comunidad de diseño. Adobe ha seguido respondiendo públicamente a las voces de los diseñadores. Por ejemplo, Adobe ha creado un sitio para reconocer el tema de Photoshop para diseño. 

Adobe también es una empresa muy grande, lo que les brinda la ventaja de ciclos de lanzamiento más rápidos y más recursos para lanzar funciones a gran escala. Debido a la base de usuarios existente, las características de colaboración se adoptan más fácilmente. La presencia persistente de Adobe en la comunidad de diseño continuará manteniendo su suite de aplicaciones en la lista de elementos esenciales para diseñadores.

Uso excesivo y abuso de “Diseño de materiales”

El diseño de materiales es el marco conceptual de Google que se debe desde hace mucho tiempo sobre cómo se deben diseñar y racionalizar los productos digitales. Como parte del diseño de materiales, Google ha publicado guías prácticas sobre cómo implementar sus conceptos..

El diseño de los materiales está ciertamente inspirado en gran medida por la estética del diseño "plano". Debido a que la estética de Google sigue esta tendencia, la adopción masiva ya ha comenzado. El diseño de materiales se está integrando en temas de Wordpress y widgets reutilizables / bibliotecas descargables, complementos e incluso Polymer, una potente biblioteca de componentes web que incorpora no solo la funcionalidad plug-and-play, sino también el estilo específico de cada componente..

Si bien el Diseño de materiales de Google definitivamente proporciona una gran línea de base y dirección para la web, también podemos esperar que la tendencia siga en detrimento de los productos que se crean. La estética del diseño de materiales no es una solución de "talla única" para la web en general. Al igual que estamos viendo grandes y horribles implementaciones de fondos de video y efectos de paralaje en la web, también veremos grandes (e increíblemente terribles) implementaciones de Material Design..

Lo que no verás: menos paradigmas de diseño

Cuando la web estaba en su infancia, el diseño web era relativamente similar en una selección aleatoria dada de sitios. Ni la tecnología ni la cultura habían empujado al medio a ser una avenida de expresión..

Esto ha sido cierto para la mayoría de los medios de comunicación. Por ejemplo, muchos de los primeros libros probablemente eran muy similares, tenían diseños similares y dependían principalmente del contenido para las diferencias expresivas..

A medida que la tecnología avanzaba, la velocidad de Internet aumentaba y se adoptaba CSS, se introducían nuevas estéticas en la web. Este avance tampoco fue pequeño; Las técnicas estéticas en la web explotaron. Sin embargo, incluso a principios de la década del 2000, muchos sitios web exhibieron estilos similares..

Avance rápido hacia la proverbial muerte de Flash y la introducción de teléfonos inteligentes y aplicaciones móviles. Este fue un período en el que el diseño maduró en la web. Los nuevos y poderosos avances nos llevaron más allá de la era "Web 2.0" impulsada por los negocios, y en una era donde la web se convirtió en un lienzo en blanco. Hoy en día, cualquier selección aleatoria de sitios web puede verse muy diferente, y esto no va a cambiar.

La potencia y la versatilidad del navegador y la variedad de dispositivos que acceden a Internet solo continuarán fomentando soluciones de diseño nuevas y diferentes para problemas nuevos y diferentes. El diseño material no es una señal de una convergencia, sino más bien una señal de un reconocimiento colectivo de la importancia de un diseño cuidadoso.

Patrón de crecimiento: las colecciones como una interacción compartible

Por supuesto, Internet ha proporcionado a cualquier persona acceso a un escenario para crear contenido. Una parte importante de la población mundial accede regularmente a Facebook y, en un día determinado, la raza humana genera más de 2.500 millones de gigabytes de datos..

Por supuesto, el tipo de cosas que creamos cambia a medida que pasa el tiempo y se abren nuevas vías para la creación. Por ejemplo, hace cinco años es posible que solo hayamos creado publicaciones de Facebook en las paredes y subido fotos, pero ahora creamos tiendas de marca en Etsy y vendemos artículos hechos a mano y digitales en línea con facilidad..

En 2015, es probable que veamos una tendencia continua hacia elaboración del gusto Como forma de expresión. Los creadores de tendencias son personas que curan y publican elementos o una colección de elementos para que otros los vean y puedan adoptar como parte de sus propios gustos. Este patrón ha existido durante más tiempo con la creación de listas de reproducción de música; Nos expresamos a través de la curación de canciones, y luego compartimos esas listas de reproducción a través de Spotify (o, en los años 80 y 90, mixtapes).

Pero va más allá de la música..

Hoy compartimos tableros de Pinterest, listas de Amazon, listas de reproducción de YouTube e infinitamente más colecciones. Las oportunidades en este espacio no han disminuido, sino que continúan creciendo. Apreciamos este tipo de interacciones porque son humanas y mucho más personales que las "sugerencias" proporcionadas por un algoritmo..

Una gran explicación de por qué esto es tan poderoso se puede encontrar en ASongADay.co:

“No hay algoritmos sofisticados (todavía), no hay automatización (todavía). Personalmente, le enviaré una canción que creo que le gustará cada día, totalmente determinada por sus preferencias musicales indicadas a continuación y mi propia opinión musical. No soy un experto, solo escucho mucha música y la gente parece confiar en mí. Cada canción será una sorpresa, probablemente no a la misma hora todos los días. Porque soy humano, no soy un robot (todavía) ".

El servicio de Shannon es tan solicitado que tuvo que comenzar a pedir voluntarios para ayudarla a simplemente enviar una canción personalizada seleccionada en función de los gustos musicales de esa persona..

Podemos esperar cosas como las curaciones de películas (como las listas de reproducción / colecciones de Netflix, podemos esperar, ¿no?), La curación de productos de celebridades e incluso las preferencias y configuraciones de aplicaciones que se comparten.

La demanda de negocios para móviles se volverá universal

Sabemos que el futuro de la web continuará diversificándose y moviéndose más hacia el espacio móvil. Pero hasta este año, todavía hemos visto la resistencia a las consideraciones móviles completas como un requisito común para cualquier negocio serio.

Una masa crítica de usuarios accederá a Internet principalmente a través de dispositivos móviles este año. Esto requiere una respuesta empresarial, para ir a donde los clientes están gastando su tiempo y su dinero..

Para los diseñadores web, eso significa que hoy es el momento de comenzar a pensar en cómo diseñar para un mundo multidispositivo..

Los clientes solicitarán una experiencia de usuario artesanal premium (aunque es posible que no sepan lo que eso significa)

Debido a la saturación continua de la cultura de diseño de inicio, el lenguaje de una "experiencia de usuario artesanal" ha continuado impregnando las discusiones sobre lo que hace que un gran producto. Puede que no sepan lo que eso significa, pero deberías.

Un gran producto no tiene que ver necesariamente con seguir las tendencias. Las “experiencias de usuario premium hechas a mano” no son fáciles de lograr; requieren experiencias muy intencionales, enfocadas y completas que sean altamente relevantes para el usuario y lo que el usuario está tratando de lograr. "Hecho a mano", específicamente, se refiere al sentido del carácter y al "alma" que puedes encontrar en una mesa hecha a mano o en un par de botas. El sentido de la artesanía y la atención al detalle es cada vez más importante para los clientes. Los desarrolladores web de clase mundial serán los que desarrollarán las habilidades necesarias para agregar ese sentido de artesanía y alma a lo que de otra manera se sentiría como un conjunto de píxeles fríos y sin vida..

Tarjetas, "Micro-Experiencias" y Compostables Portable Insertados

Es posible que vea esta predicción en otros rodeos de fin de año en otra parte, pero es tan prominente que no pudimos evitar estar de acuerdo: diseño de tarjeta portátil Es un componente enorme del presente y futuro del diseño web. Twitter ha estado haciendo esto durante bastante tiempo, pero otros sitios se están poniendo al día. El contenido en línea continúa siendo referenciado en toda la web en una variedad de formas que van más allá de los hipervínculos simples. YouTube y otros sitios para compartir videos han estado haciendo esto básicamente desde su inicio también.

El patrón es simple: cree una interfaz contenible e integrable que proporcione al usuario un conjunto cohesivo de interacciones y muestre contenido relevante para el contenido remoto al que se hace referencia.

Estas tarjetas incrustables no necesariamente tienen que vivir de forma remota desde sus sitios anfitriones, tampoco. Estas tarjetas exhiben otro patrón llamado "micro-experiencias". Un gran ejemplo de una micro experiencia es el botón "Me gusta". Como usuario de Facebook, la acción "Me gusta" es un solo clic que tiene una gran cantidad de significado. Primero, le permite a Facebook continuar recolectando sus preferencias y gustos. También permite que otros usuarios vean estas preferencias y gustos. Este tipo de experiencia micro permite que un usuario interactúe con una marca o sitio determinado sin tener que abandonar su contexto actual. También permite a un usuario interactuar en diferentes niveles de resolución. En otras palabras, el usuario no tiene que seguir una serie de pasos y usar toda la aplicación o experiencia al mismo tiempo; Pueden interactuar en diferentes niveles de requerimientos de entrada..

Hay muchas razones por las que las micro experiencias son importantes, pero la razón principal son las diferentes resoluciones de los diferentes dispositivos. Un usuario determinado que camina por una acera frente a un usuario que está sentado en su sofá con su computadora portátil tiene habilidades y objetivos de interacción muy diferentes. Las micro experiencias permiten un enfoque progresivo de los requisitos de interacción para los usuarios..

Wearables: aún no es un gran problema, pero prepárate de todos modos

El Apple Watch señala el comienzo de la revolución portátil, pero no esperes que se dispare demasiado rápido. Para Apple, otras grandes compañías de dispositivos y desarrolladores de aplicaciones, cultivar tuberías de aplicaciones para dispositivos portátiles llevará algún tiempo. Como desarrolladores web, debemos prepararnos para esta expansión en una nueva clase de dispositivos, pero no sucederá de inmediato. La apuesta más segura es poner su dinero en dispositivos móviles con pantallas táctiles, especialmente "phablets" (teléfonos grandes y tabletas más pequeñas).

De http://sketchresources.com/elements/apple-watch

Conclusión

Hay un tema común en muchas de las predicciones para 2015. Si 2014 fue un año para móviles, 2015 es el año de más del mismo tipo de cambio. El mundo continuará avanzando hacia la movilidad y un paisaje multidispositivo. La estética web continuará diversificándose, y los diseñadores web deberán cambiar su enfoque hacia el diseño de "página" y hacia un diseño digital adaptable, flexible y hecho a mano que se base en habilidades sólidas de creación de prototipos y un conocimiento de la interacción en una variedad de entornos..

¿Qué ves que suceda dentro del próximo año? Háganos saber en los comentarios.!