¡Hola!
A continuación, pegaré algunos extractos de un artículo de ~ 3.000 palabras que escribí sobre este tema. Nuestras mejores conjeturas para 2017 son las siguientes:
Duotonos
Según Wiki, es “una reproducción de medios tonos de una imagen utilizando la superposición de un medio tono de color contrastante sobre otro”. La mayoría de las veces, simplemente significa que un diseñador está utilizando un par de colores para crear una imagen vibrante.
La tendencia se origina en el diseño de impresión y también se usa ampliamente en fotografía. No es algo que se introdujo en 2016. Los duotonos eran populares incluso a principios del siglo XX. Winold Reiss, un artista estadounidense nacido en Alemania, trabajó con duotonos con frecuencia en sus litografías. La que ves a continuación es una de sus obras más famosas.
Y creó esto en 1915.
Winold Reiss, “Dibujo en dos colores”. También publicado bajo el título “Interpretación de Harlem Jazz I”. Imprimir en papel japonés, litografía offset y medios tonos en dos colores. Publicado bajo dominio público.
Por ahora, volvamos a 2016, donde los duotonos se encuentran entre los estilos de color más populares en diseño web. La tendencia probablemente continuará durante los próximos 12 meses. Spotify hizo cosas divertidas con él para su revisión anual (tanto en 2015 como en 2016).
Ejemplos de duotono de diseño web de Spotify, MailChimp, Tumblr y Adidas
Otras marcas importantes, como Adidas, Tumblr o MailChimp, también han usado duotonos para algunos de sus proyectos. Sin embargo, como con todas las tendencias, solo el tiempo dirá si el duotono sobrevivirá en el diseño web a gran escala.
Flexbox es bastante útil ahora
Larga historia corta: Flexbox (diseño de caja flexible) es bueno para ir ahora. Hasta hace poco, el módulo no era realmente compatible con los navegadores. Desde su lanzamiento original en 2009, ha recorrido un largo camino e incluso ha sido reconocido por el poderoso Internet Explorer. Por desgracia, todavía existe el problema de compatibilidad con versiones anteriores, pero … Bueno. Algunos datos todavía se almacenan en disquetes, ¿no?
El soporte actual del navegador para Flexbox está disponible aquí.
Propina
Analice su tráfico con Google Analytics para determinar qué navegadores utilizan la mayoría de sus visitantes. La consideración de implementar Flexbox debe comenzar con estas estadísticas.
Flexbox puede considerarse difícil de aprender, pero la ventaja de implementarlo es sustancial. Esta herramienta de diseño de próxima generación ayuda a crear diseños CSS que consisten en una cuadrícula de elementos multimedia. Con eso en mente, podemos alinear, centrar, justificar, escalar y reordenar elementos de un sitio web sin esfuerzo . Para diseños de varias columnas, Flexbox reemplaza una gran cantidad de soluciones diferentes, como flotadores, hacks de clearfix o diseños de visualización de tablas. A continuación, verá un ejemplo útil de cómo funciona Flexbox para la alineación. Encontrarás más muestras en el blog de Treehouse.
Un ejemplo de cómo funciona Flexbox. La propiedad justify-content a lo largo de la línea inicial y final.
Los contenedores flexibles también son perfectos para pantallas móviles y contenido receptivo. Además, las aplicaciones web HTML5 pueden beneficiarse de este modelo.
¿Paralaje? Impresionante, pero solo en algunos casos seleccionados
En In’saneLab, amamos el paralaje. Aquí está la cosa, sin embargo: no es universalmente práctico. Extiende los tiempos de carga de un sitio web. Si se implementa de manera incorrecta, incluso puede confundir al usuario. Sigue siendo una tendencia popular y no hay nada de malo en aprovecharla, siempre y cuando no la uses en exceso y sepas cuándo aplicarla.
Hay algunos hermosos ejemplos de desplazamiento de paralaje. Lo primero que viene a la mente es Firewatch. Seis capas separadas proporcionan un efecto inmersivo como si estuvieras mirando el paisaje desde un helicóptero.
Otro ejemplo sería una novela gráfica de Peugeot. Es un proyecto popular que utilizó paralaje para su mecanismo de narración de historias. Costa Coffee fue con un concepto similar para su proyecto Experience. Luego está esta gran cosa que The New York Times hizo hace dos años.
Claramente, el paralaje se puede aplicar razonablemente . Puede mejorar el contenido y crear una oportunidad para un compromiso profundo. Sin embargo, como todas las cosas que tendemos a hacer demasiado, puede destruir la experiencia con la misma facilidad.
Deshacerse de las imágenes de stock que todos odiamos
Todos en secreto (o abiertamente) detestamos las fotos de archivo. Seamos honestos aquí: no hay forma de hacer algo grandioso con la mayoría de las imágenes disponibles. Términos como “personas en la oficina sonriendo”, o “joven profesional en un centro de atención telefónica”, o “un médico amigable” podrían haber funcionado hace 10-15 años.
Suficiente.
En 2013, se lanzó un servicio llamado Death to the Stock Photo. Dos fotógrafos estaban realmente hartos del mal gusto y el uso abrumador de las mismas imágenes en todas partes.
En seis meses, más de 20,000 creativos se unieron al “movimiento” recién formado. Varios otros sitios similares surgieron y comenzaron a ofrecer fotografías de alta calidad y elegantes que están libres de restricciones de derechos de autor o simplemente bajo licencia de dominio público CC. Los ejemplos serían:
- LibreStock
- StockSnap.io
- Unsplash
- Picografía
- FoodiesFeed
Y, ¡oh, son excelentes! Especialmente teniendo en cuenta que todos son gratuitos. Vea algunos de los ejemplos de Unsplash a continuación:
Y aquí hay algunas fotos más. Esta vez de Muerte a Stock, el conjunto táctil :
PWA en lugar de aplicaciones?
No es realmente una cuestión de PWA versus una aplicación. La pregunta es cuándo crear PWA en lugar de una aplicación convencional.
Aplicaciones web progresivas son, por algunos – considerados el futuro. Puede que no traigan la paz mundial, pero ofrecen una experiencia de usuario similar a una aplicación dentro del navegador . Eso es enorme, ya que el usuario no tiene que instalar un programa separado. Es suficiente simplemente ingresar una URL deseada y continuar con ella.
Los PWA han existido por casi dos años. Finalmente, estamos llegando al punto en que el acceso de hardware que ofrece Progressive Web Apps es enorme. En What Web Can Do Today, un autor puede determinar si puede confiar en las funciones del navegador para crear una aplicación.
Por ejemplo, un navegador móvil puede admitir geolocalización, vibración del dispositivo, orientación de la pantalla, estado de la batería, agregar un icono a la pantalla de inicio, acceso al portapapeles y más. Tanto en Android como en iOS, los PWA se están convirtiendo en importantes puntos de interés. Service Worker aún no está disponible en Safari, sin embargo, puede tomar PWA para un paseo con Chrome.
Además, crear una aplicación web progresiva es más barato que la alternativa.
SVG
Alerta de spoiler: esto no es nuevo. Los SVG han existido por algún tiempo ahora. En 2017, es imprescindible.
En comparación con JPG, BMP o PNG, los SVG (gráficos vectoriales escalables) son totalmente diferentes. Este formato de archivo garantiza dos características importantes:
- No tiene pérdida.
- Es un formato de archivo vectorial.
Las imágenes SVG se componen de líneas y curvas, no píxeles. Esta es una solución perfecta para logotipos, íconos y, básicamente, cualquier otra cosa que desee mantener nítida en todas las resoluciones. Ya sea un teléfono inteligente, una computadora de escritorio o una Retina MacBook Pro, se verá genial.
Otra ventaja de utilizar SVG es que son livianos, incluso si parecen grandes visualmente.
Cuidado con los SVG complicados. Requieren más potencia informática en el lado del usuario debido a los complejos cálculos matemáticos. Asegúrese de encontrar un punto óptimo y no presente algo demasiado complicado.
La parte divertida es que los SVG están escritos en XML. Literalmente puede modificarlos con un editor de texto . Sin embargo, no tienes que hacer eso. Illustrator, Inkscape (este es gratis) o Sketch también son opciones viables.
No tiene que preocuparse por la compatibilidad del navegador para SVG. Actualmente, cada navegador web extendido puede leer y mostrar el código, incluidos Internet Explorer y Edge.
Gradientes 2.0
Mientras los gradientes no tengan nada que ver con el esceptomorfismo, eres dorado. Durante los últimos años, los gradientes han regresado. Todo comenzó con iOS 7.0 y el nuevo lenguaje de diseño. Ahora está en todas partes, asegurando un fondo rico en colores, simplicidad y minimalismo.
La animación será enorme (r)
¡Inmenso, inmersivo, audaz y atractivo! En pocas palabras, la animación en diseño web es un peso pesado. De hecho, estamos trabajando en una animación para uno de nuestros clientes en este momento. Tomará más tiempo de lo habitual, pero los resultados valdrán la pena. Y no olvidaremos compartir el proyecto con usted una vez que esté hecho.
El contenido de las animaciones puede variar, pero la mayoría de las veces la idea es presentar al usuario un entorno de interacción natural . En un mundo lleno de menús de hamburguesas y diseños minimalistas, es agradable ver algo diferente cada cierto tiempo. Incluso si estamos hablando solo de cinemagraphs.
Diseños que no verá en ningún otro lugar
¿Escuchaste sobre The Outline ? Es una nueva revista en línea de Joshua Topolsky, anteriormente asociada con Bloomberg y The Verge. Lo que él y su equipo hicieron con The Outline es bastante interesante. El diseño es realmente poco convencional , especialmente para un medio de noticias y opiniones.
Como puede ver, el diseño es poderoso. Absurdamente distinguible. Inconformista. Sería completamente inútil cuando se aplica a un portal horizontal, pero para este tipo de publicación especializada, es una excelente opción en todos los sentidos. Sirve como mecanismo de consumo y comercialización. Cuando se lanzó The Outline , la gente no solo hablaba de los artículos. También estaban discutiendo este diseño audaz.
Optimización para Inbound Marketing
¡Finalmente! Estamos viendo que más y más compañías están cambiando sus presupuestos hacia la metodología de entrada . Las empresas están produciendo contenido, estableciendo su presencia en las redes sociales y optimizando los viajes de los clientes a lo largo de su experiencia web.
Pero la entrada solo funciona si su sitio web está diseñado con atención meticulosa a los detalles . Debe crear un sitio web optimizado para SEO, con tiempos de carga óptimos y que sea receptivo y compatible con los principales navegadores. Lo más probable es que necesite soluciones personalizadas y un “ajuste a medida” digital.
Si no está seguro de si su sitio web está en condiciones óptimas, puede usar una de las herramientas automáticas que se describen aquí (o dirigirse directamente allí eligiendo entre GTmetrix, Pingdom o PageSpeed Insights).
El menú de hamburguesas debería desaparecer, pero no
Spotify se mencionó anteriormente, pero no en el contexto de UI / UX. Como una de las aplicaciones más utilizadas y orientadas al consumidor en el mundo, Spotify eliminó el menú de hamburguesas en mayo de 2016. Facebook se deshizo de esta solución incluso antes, cambiando a una barra de pestañas.
Los resultados de las pruebas de Spotify fueron notables, lo que resultó en un aumento del 30% al hacer clic en los elementos del menú real . Lo gracioso? La hamburguesa desapareció solo de iOS, permaneciendo en Android tal como estaba. De ninguna manera es esto un descuido. Como nos recuerda TechCrunch , la interfaz de usuario de cada plataforma debe simpatizar con las pautas del sistema operativo.
De acuerdo, pero ¿qué pasa con el menú de hamburguesas en su navegador? ¿Por qué lo tenemos en nuestro propio sitio web si es tan malo?
No tiene ningún sentido en las computadoras de escritorio. Además, no tiene ningún sentido para un público mayor. Ok, honestamente? No tiene sentido en ninguna parte, con la excepción de los dispositivos móviles (en algunos casos) y los objetivos que tienen conocimientos tecnológicos.
Como puede ver, a Wojtek realmente no le gustan los menús de hamburguesas. Es el jefe de nuestro equipo de diseño. “ Para las personas normales, un menú de hamburguesas no significa nada . Puedes colocar el menú debajo del ícono, pero debería ser indudablemente más intuitivo ”, dice Wojtek. “En términos de UX, una idea mucho mejor sería insertar toda la barra de navegación en la parte inferior de la pantalla”.
¿Recuerdas la aplicación de música en el primer iPhone? Incluso después de 10 años, los principios básicos de la interfaz (especialmente la barra de navegación inferior) siguen vigentes en la actualidad. “Spotify hizo exactamente eso con su aplicación iOS”, enfatiza Wojtek.
Para ser sincero, también nos preguntamos si deberíamos introducir un menú de hamburguesas en el sitio web móvil de In’saneLab. Teniendo en cuenta nuestro público objetivo y la facilidad de implementación, decidimos hacerlo.
Sin embargo, no creo que lo conservemos.
Letras grandes
Gritti Rollo es una empresa italiana de arquitectura y diseño.
Polargold es una agencia de marketing alemana.
En AWWWARDS, verá una colección de sitios web de primera clase creada con grandes fuentes. Como dice el editor de la organización: no importa qué tipo de fuente esté usando. El tamaño es la prioridad.
Para un negocio adecuado, las letras grandes son una excelente opción . Las empresas de diseño de interiores, o cualquier empresa de diseño, pueden beneficiarse enormemente de utilizar este tipo de formulario para mostrar lo que tienen para ofrecer. Atraen visitantes a través del minimalismo y la atención al detalle.
Tipografía personalizada
¿Cómo distinguirse en el mundo de hoy? Una forma de hacerlo es crear un diseño personalizado o un diseño que no se haya aplicado en ninguna parte.
El otro: para crear una tipografía personalizada y reconocible . Su propia fuente que utilizará en toda su comunicación, en su sitio web, dentro de su logotipo. En todos lados.
Tomará una gran cantidad de tiempo, pero qué diablos, ¡vale la pena!
Diseño web VR
¡Esto va a ser divertido! La realidad virtual ha estado ganando terreno recientemente, y no hay nada que le impida dominar las tendencias de diseño web. Más y más dispositivos compatibles con VR están disponibles en el mercado a precios asequibles. Si bien las ofertas pueden estar dirigidas a los jugadores, en su mayor parte, diferentes tipos de consumidores también se beneficiarán de ello . Imagine televisión, películas o incluso publicidad en un espacio de realidad virtual.
La realidad virtual definitivamente está llegando. Demonios, ya está aquí. Y probablemente sea solo cuestión de tiempo hasta que se haga cargo de la industria del comercio electrónico.
Video con sonido
Este tipo de sitios web no resonará con todos. Es posible que las personas se estén acostumbrando a mirar videos, pero lo hacen a su debido tiempo. Es por eso que siempre debes dejar que tus visitantes jueguen la película si lo desean . La ejecución automática debería estar totalmente prohibida en este caso. Ah, y también, una opción para silenciar el sonido. Esto es crucial Es mejor producir contenido sorprendente que los usuarios no puedan imaginar ver sin sonido, pero no lo impongan.
Durante dos o tres años, hemos visto un aumento continuo en la popularidad de los videos de Internet . Y tenemos estadísticas para respaldarlo:
- El video en un correo electrónico conduce a un aumento del 200-300% en la tasa de clics.
- El 64% de los usuarios tienen más probabilidades de comprar un producto en línea después de ver un video.
- YouTube informa que el consumo de video móvil aumenta un 100% cada año.
Esto es ENORME y será aún más significativo a medida que avancemos.
Si lograste superar todo esto, ¡felicidades!
¿Larga historia corta? Estas son las conclusiones más importantes para las tendencias de diseño web en 2017
- Los duotonos podrían seguir siendo enormes.
- Flexbox es totalmente utilizable ahora.
- Parallax es hermoso, pero su practicidad es discutible.
- Reconsidere las imágenes de stock que está utilizando.
- Considere las aplicaciones web progresivas.
- Considere las aplicaciones nativas (Xamarin es una gran opción) cuando los PWA no son suficientes.
- SVG (Gráficos vectoriales escalables) son imprescindibles en 2017.
- Los gradientes aún están calientes.
- Este será un gran año para la animación web.
- Los diseños personalizados para fines específicos son una buena idea.
- Optimizar su sitio web para el inbound marketing es una idea aún mejor.
- El menú de hamburguesas probablemente no se volverá obsoleto.
- GRANDES LETRAS están haciendo olas en el diseño web.
- La tipografía personalizada es una excelente manera de distinguir su negocio.
- El diseño web de realidad virtual podría convertirse en una práctica fascinante.
- Lo mismo ocurre con el video con sonido en las páginas de destino.
Por cierto, si está buscando más contenido en diseño web, estaré más que feliz si visita nuestro blog. Comenzamos recientemente, pero produciremos más y más artículos en el futuro.
Aquí hay una hoja de trucos si desea una:
¡Espero que lo encuentres satisfactorio!