Las 20 tendencias más importantes que darán forma al diseño web en 2016
A medida que el tiempo avanza con cada año que pasa, muchas nuevas tendencias de diseño se avecinan en el horizonte. El campo del diseño web siempre está cambiando con nuevas herramientas, flujos de trabajo y mejores prácticas para construir diseños utilizables.
Es difícil predecir qué tendencias exactas atraerán la mayor atención. Sin embargo, la historia reciente muestra un patrón de tendencias que han estado creciendo como un incendio forestal. He organizado 20 tendencias únicas que han ganado fuerza en 2015 y es probable que continúen hasta bien entrado 2016.
1. Aplicación de croquis para diseño de interfaz de usuario
Sketch está reemplazando rápidamente Photoshop para todas las tareas de diseño de IU que van desde wireframes de baja fidelidad a maquetas de alta fidelidad y diseño de iconos.
Sketch App es una aplicación solo para Mac diseñada específicamente para diseñadores web y móviles. Ofrece un entorno de trabajo más suave para crear elementos vectoriales para cualquier interfaz, pero también conserva muchas características que se esperan de Photoshop, como los efectos de texto y los estilos de capa..
Si bien no hay pruebas de que Sketch sea lanzado para Windows, aún así se ha convertido en una opción valiosa para los usuarios de OS X. El flujo de trabajo simplificado y la etiqueta de precio más barata le están dando a Adobe una carrera por su dinero. Si Sketch continúa brindando la mejor experiencia de diseño de UI, seguramente seguirá creciendo hasta 2016 y más allá.
2. IDE basados en navegador
Las IDE de escritorio han existido durante décadas con opciones que van desde Notepad ++ a Xcode y Visual Studio. Un IDE facilita la escritura de código con sugerencias y resaltado de sintaxis (entre otras características).
Pero tradicionalmente los IDE se han lanzado como aplicaciones de escritorio. En los últimos años, hemos visto un aumento espectacular en los IDE de nube basados en navegador. Estos no requieren ningún software que no sea un navegador web, que permite a los desarrolladores escribir código desde cualquier computadora con acceso a Internet.
Los IDE de la nube funcionan más como aplicaciones web en las que puede guardar fragmentos de código en su cuenta para compartir o almacenarlos personalmente. CodePen es uno de los IDE más populares con soporte para HTML / CSS / JS junto con preprocesamiento personalizado como Jade / Haml y LESS / SCSS.
Mozilla Thimble es otro IDE para desarrolladores principiantes que desean aprender a medida que codifican. Además, Codeply es ideal para probar marcos de respuesta específicos como Bootstrap o Zurb's Foundation sin necesidad de descargar ningún archivo..
3. Free Sass / SCSS Mixins
Los preprocesadores han estado a la moda durante años, pero solo recientemente se han convertido en lo suficientemente convencionales para sentirse ubicuos en todo el campo del diseño / desarrollo web. Hoy en día parece extraño escribir CSS de vainilla cuando Sass / SCSS puede proporcionar mucho más..
Un beneficio es la creciente oferta de bibliotecas de mezcla Sass. Los mixins simples son como fragmentos de código o funciones básicas para generar código repetible en CSS. Si bien siempre puedes escribir el tuyo propio, muchos desarrolladores han tenido la amabilidad de lanzar mixins gratuitos en línea.
Algunos mixins vienen en bibliotecas como Bourbon, mientras que otros pueden ser elementos independientes. Intenta hacer una búsqueda en GitHub para los mixins de Sass / SCSS para ver lo que puedes encontrar.
4. Diseños de tarjetas
Los diseños de tarjetas de sitios web se popularizaron por primera vez en Pinterest hace unos años y desde entonces se han convertido en una tendencia para páginas web con gran contenido. Se pueden utilizar complementos gratuitos como jQuery Masonry para imitar este estilo de diseño con tarjetas animadas para varias alturas y anchos.
El diseño de una tarjeta se utiliza mejor en páginas con muchos datos que deben ser escaneables. La página de destino de Google Now utiliza un diseño de tarjeta para anunciar tarjetas opcionales para la aplicación Google Now.
Puede pensar en los diseños de tarjetas como cuadrículas más dinámicas con un enfoque en minimizar el contenido a lo esencial para enumerar más elementos juntos. Revistas en línea como UGSMAG y The Next Web son ejemplos perfectos de diseños de tarjetas que se utilizan para mostrar contenido reciente de publicaciones..
5. Explainer videos personalizados
Tanto las empresas grandes como las pequeñas han adoptado la tendencia de los videos explicativos personalizados. Estos a menudo se crean con animación como el ejemplo de Crazy Egg. Pero otros videos se basan en imágenes de la vida real como Instagram Direct..
El propósito de un video explicativo es demostrar cómo funciona un producto o servicio. Los visitantes pueden hojear una lista de características y aún no tener idea de cómo funciona el producto. Los videos aclaran todo visualmente y cubren las cosas importantes en solo unos minutos..
Si quieres probar a hacer un video explicativo personalizado, visita este curso de Udemy. Es un estudio en profundidad que se centra en los videos para el diseño de la página de destino..
6. Avances de productos en vivo
El diseño de la página de destino ha experimentado un crecimiento increíble derivado de las mayores velocidades de Internet y las capacidades del navegador. Una de las principales tendencias que he notado es la adición de vistas previas de productos en vivo en páginas de inicio o páginas de destino personalizadas.
Tomemos por ejemplo la página de productos de Slack. Cuenta con un video y gráficos vectoriales que cubren la interfaz de Slack. Estas vistas previas del producto están destinadas a dar a los usuarios potenciales una visión de cómo funciona el producto..
Webydo es otro ejemplo brillante con una animación en vivo en la página de inicio. Esto permite que los visitantes vean a Webydo en acción sin tener que hacer una demostración manual del producto. Pero no siempre es necesario confiar en las animaciones para las vistas previas del producto. Iconjar utiliza una captura de pantalla PNG simple para mostrar qué es el producto y cómo funciona.
7. Corredores de tareas automatizados
El mundo del desarrollo frontend ha cambiado mucho con un puñado de nuevas prácticas recomendadas para la creación de sitios web. Los corredores de tareas / sistemas de compilación como Gulp y Grunt se utilizan con mucha más frecuencia para una serie de tareas que anteriormente requerían esfuerzo manual.
La automatización es el elemento vital de un rápido cambio y la producción de códigos de calidad. Las máquinas no cometen errores, por lo que cuanto más pueda automatizar con confianza, menos problemas tendrá (en teoría).
Para obtener más información, consulte esta publicación de Reddit que explica cómo operan los corredores de tareas. Estas herramientas básicamente ejecutan código JS que automatizará partes de su flujo de trabajo, ya sea JS personalizado o scripts escritos por otros.
8. Aplicaciones móviles nativas de JS
Soy un gran defensor del uso de las herramientas adecuadas para el trabajo. En el caso del desarrollo de aplicaciones móviles, esto significa Java para Android, Objective-C / Swift para iOS.
Pero no todos quieren aprender un nuevo idioma solo para crear una aplicación móvil. Afortunadamente, cada vez es más fácil crear y compilar aplicaciones nativas con bibliotecas alternativas como NativeScript o React Native.
La brecha para convertirse en un programador de aplicaciones móviles se está acortando con la capacidad de crear aplicaciones móviles a través de JavaScript. PhoneGap es otra opción basada en el código HTML / CSS / JS.
Si bien el proceso de creación varía mucho, JS se está convirtiendo rápidamente en una solución para los programadores que desean crear aplicaciones móviles sin aprender un nuevo idioma..
9. Herramientas de colaboración para el diseño.
La mensajería instantánea y el chat grupal han existido durante más de una década. Sin embargo, estos recursos tradicionalmente se han basado en texto plano con alguna capacidad para adjuntar archivos.
Una nueva tendencia emergente es la capacidad de compartir documentos de diseño en vivo dentro de las aplicaciones de chat. Notable es un ejemplo en el que las anotaciones y los comentarios se pueden colocar en capas sobre un documento. Esto les da a los diseñadores una forma limpia de compartir el trabajo directamente con todos en un equipo.
Slack es la aplicación de chat más popular en este momento que admite muchas características similares. La creciente base de usuarios de Slack ha sido firme en la creación de extensiones que mejoran enormemente las capacidades de Slack y se vinculan con otros productos como Hangouts, MailChimp e incluso WordPress..
10. Marcos Frontend responsivos
Los marcos frontales como Bootstrap han existido durante años y continúan siendo útiles en proyectos tanto personales como profesionales. El diseño responsivo se ha abierto camino en los marcos y ha creado una demanda de código de frontend en lugar de solo backend (Django, Laravel, etc.).
Pasando a 2016, creo que leeremos mucho más sobre los marcos de frontend receptivos y su valor en proyectos web. Muchos desarrolladores esperan con impaciencia el lanzamiento de Foundation 6 y el lanzamiento público v1 de Bootstrap 4.
Otros marcos menos conocidos que puedes consultar incluyen Gumby y Pure CSS.
11. Mayor enfoque en el diseño de UX
El campo del diseño de la experiencia del usuario continuará creciendo rápidamente con más diseñadores y desarrolladores tomando nota. El diseño de la interfaz de usuario es parte del diseño de UX, pero no es el objetivo final. La interfaz de usuario es un medio para un fin, con el fin de ser una experiencia fantástica para el usuario..
Hace apenas 5 años apenas estaba familiarizado con UX o cómo se aplicaba al diseño de interfaz. Ahora tenemos recursos como UX Stack Exchange y libros electrónicos gratuitos de UX. Si no sabe mucho sobre la experiencia del usuario, este es el mejor momento para estudiar y aprender cómo se pueden aplicar los principios de UX a todas las formas de interfaces digitales..
12. Gestores de paquetes
Los administradores de paquetes digitales se han incrementado tan rápidamente que prácticamente son un requisito para el desarrollo web moderno. Soluciones como Bower y NPM pueden ahorrar mucho tiempo al comenzar nuevos proyectos.
Dominar cualquier nueva tecnología llevará tiempo y viene con una curva de aprendizaje. Pero si hay una cosa que todo desarrollador de frontend (o backend) debería saber, es un administrador de paquetes. Requieren algún conocimiento de los comandos de la terminal, pero una vez que te acostumbras al proceso, nunca querrás volver..
13. animaciones avanzadas de interfaz de usuario
Las transiciones CSS3 fueron solo el comienzo de una tendencia de animación a largo plazo en la web. Ahora tenemos docenas de bibliotecas CSS y JavaScript dedicadas a la animación. Las cosas que nunca soñé posibles ahora se construyen y están disponibles de forma gratuita si sabes dónde buscarlas..
La animación no es un requisito para un buen diseño. Pero puede convertir un buen diseño en un gran diseño cuando se usa correctamente.
Mantenga un ojo en las tendencias animadas para interfaces y vea lo que puede quitar de varios sitios web. Recuerda que la animación web no es una película de Disney y debe ser tratada con respeto. Use la animación con suavidad para que mejore una interfaz sin convertirse en un elemento molesto o que distraiga del diseño..
14. Diseñadores que aprenden a codificar
Un tema candente este año ha sido el caso de los diseñadores que aprenden a codificar. Algunos diseñadores creen que no es su trabajo escribir el código, mientras que otros creen que se está convirtiendo en la norma y deberían ser aceptados.
He leído discusiones acaloradas y publicaciones fascinantes sobre este tema que solo parecen generar respuestas emocionales. Un buen diseño es solo una bonita imagen sin código. Sin embargo, centrarse en ambos requiere que un diseñador dedique menos tiempo a practicar el oficio.
Entonces, ¿hay una respuesta definitiva? Algunos dirían que la viabilidad del trabajo aumenta para los diseñadores que conocen la codificación de frontend. Sin embargo, ¿qué pasa si alguien no quiere escribir código? ¿Vale la pena aprender solo para competir??
Siento que la respuesta más clara es hacer lo que quieras. Pero parece que este tema aún está sobre la mesa para muchos diseñadores que probablemente continuarán la discusión hasta el 2016.
15. Herramientas online gratuitas y aplicaciones web
Solía ser que todos los programas se ejecutaban desde el escritorio sin importar lo que tuvieras que hacer. Pero hoy en día estoy constantemente sorprendido con la cantidad de aplicaciones web disponibles de forma gratuita en línea..
Encontrará todo, desde codificación / decodificación de URL hasta un editor de Markdown completamente gratuito. Incluso Google Drive ha llevado productos de Microsoft Office al navegador (de nuevo, completamente gratis).
El nivel actual de potencia de cómputo y los estándares homogéneos de los navegadores web ofrecen una cantidad aparentemente ilimitada de oportunidades. Las tareas complejas como la creación de currículum vitae para la compresión de imágenes se pueden manejar directamente desde la ventana del navegador.
16. El crecimiento de los componentes web
Los componentes web están tratando de resolver problemas de complejidad para los desarrolladores. El sitio web de WebComponents tiene excelentes recursos y materiales para que los desarrolladores puedan comenzar con este tema..
Si no está seguro de cómo entender los componentes web modulares, consulte esta publicación para obtener más información..
Si bien los componentes no se han expandido particularmente al estado general, están siendo discutidos por desarrolladores profesionales de todo el mundo. Google ha lanzado Polymer, que es un marco utilizado para agregar componentes web a través de JS y HTML.
Esto puede no ser práctico de usar en los principales proyectos de clientes todavía. Sin embargo, la tecnología está disponible y con un poco de práctica puede dominar los conceptos con facilidad. Para obtener más información y ver algunos ejemplos de código, puede leer esta publicación de CSS-Tricks en componentes web modulares.
17. Recursos de aprendizaje en línea
Todos sabemos que ahora es el momento más fácil para aprender cualquier habilidad desde la comodidad de su computadora. Parece que el mercado de aprendizaje en línea está creciendo exponencialmente con nuevos cursos y sitios web que aparecen cada año.
Me siento más seguro que nunca de que veremos un aumento del aprendizaje en línea. Sitios conocidos como Treehouse y CodeSchool ofrecen cursos increíbles junto con sitios más nuevos como Bitfountain y Learn-Verified.
Si hay un tema que desea aprender, es probable que haya un curso en línea, especialmente si desea aprender técnicas digitales como el diseño de IU o el desarrollo de aplicaciones..
18. JavaScript del lado del servidor
Si bien ha habido opciones anteriores para JS del lado del servidor, ninguna ha permeado tan rápido como Node.js. Los desarrolladores de JavaScript se han enamorado de esta biblioteca y la han visto competir directamente con otros lenguajes de fondo como Python o PHP..
Node permite a los desarrolladores crear sitios web utilizando un solo idioma para el código de frontend + backend. Y recursos como Node Package Manager le dan aún más valor a Node.js.
Por lo que puedo decir, Node sigue en alza y continúa ganando terreno entre los entusiastas de la industria. Ya sea que planee aprender Node o no, no hay duda de que seguirá creciendo como una tendencia importante en 2016.
19. Características del sitio web compatibles con el tacto
Los navegadores de teléfonos inteligentes siempre han admitido las funciones táctiles de todos los sitios web para mantener la compatibilidad con versiones anteriores. Sin embargo, recientemente he notado más complementos y funciones personalizadas agregadas a los sitios web con el objetivo específico de manejar eventos táctiles.
Los complementos como Photoswipe y Dragend.js están diseñados para manejar deslizar y tocar en las pantallas táctiles. Parece que los desarrolladores web no solo están construyendo sitios web sensibles, sino también sitios web táctiles..
Si busca, encontrará algunas características realmente impresionantes diseñadas para la web que se basan únicamente en eventos táctiles..
20. Diseño de materiales en la web.
El lanzamiento de material de diseño de Google fue un éxito enorme para los diseñadores de Android. El diseño de material se considera un lenguaje de diseño destinado a simplificar el proceso de creación de interfaces de usuario para teléfonos inteligentes Android.
Con el tiempo, los diseñadores web han tomado esto en serio y han creado sitios web completos basados en el nuevo lenguaje de diseño de Google. Parece que la tendencia de diseño de material se ha movido más allá de las aplicaciones móviles al mundo del diseño web.
Las personas que quieren crear sitios web de material ni siquiera tienen que reinventar la rueda. Las bibliotecas gratuitas como Material UI y Materialise ofrecen códigos personalizados para estructurar un nuevo diseño sobre la base del diseño de materiales.
Clausura
Al observar estas tendencias, debe quedar claro que estamos viendo un verdadero esfuerzo concertado de la comunidad web para facilitar el proceso de creación de sitios web. Todos queremos ahorrar tiempo en nuestro flujo de trabajo diario..
Desde el inicio de la web, hemos visto crecer muchas tecnologías, solo para ser reemplazadas por mejores alternativas. Estas tendencias de 2016 están impulsando un conjunto más uniforme de técnicas de diseño que harán que la creación de sitios web sea más fácil y mucho menos compleja..
