14 febrero, 2017 by Ernesto Olivares
En 2016, publiqué un post que resultó ser increíblemente popular (yo fui de los primeros sorprendidos). Allí destacaba las que creía serían las tendencias más destacadas del diseño gráfico y web del año.
Este año quiero volver a hacerlo. Esto no es un post de “predicciones”. No soy Nostradamus, pero conozco bien la industria en la que trabajo. Los conceptos que voy a compartir ya existen, y la mayoría de ellos se harán mucho más grandes a lo largo de este año.
Mi objetivo es resaltar las 17 tendencias más notables ahora mismo en diseño online. Si trabajas en marketing, eres webmaster o blogger, necesitas conocerlas, antes de que todo el mundo haga lo mismo.
Estas serán las tendencias de diseño clave de 2017:
2016 fue el año del diseño mobile-first (móvil primero). 2017 será el año de sólo móvil.
¿Estoy siendo demasiado radical? En 2015, la navegación móvil representó el 56% de todo el tráfico a los mejores sitios. Este porcentaje sólo ha subido. Aunque todavía no tenemos datos para 2016, los expertos piensan que el tráfico móvil puede superar el 60% del total (el móvil es el único dispositivo que sigue creciendo en tráfico).
Ya los días de diseñar una experiencia web para los usuarios de PC, y luego adaptarlo a las pantallas de tableta y de teléfonos inteligentes, son cosa del pasado. Ahora ya se asume que el diseño móvil sea el que abarque a la mayoría de tus usuarios.
Si hay algo que adaptar, será en la versión de escritorio de tu sitio. El diseño móvil es el nuevo estándar para el diseño web. Esto significa que las funciones móviles, como la hamburguesa/menú oculto o pantalla de ancho completo, pronto serán comunes en los sitios de escritorio también.
Esta tendencia será un elemento común a la mayoría de los elementos de esta lista.
¿Qué es una aplicación web progresiva (PWA)? Es como una aplicación normal (nativa), pero que vive en nuestros navegadores, lo que significa que no necesitas descargar nada en tu dispositivo. Son servidos desde la web, al igual que una página web.
Al igual que las aplicaciones nativas de la tienda de aplicaciones, se pueden iniciar desde el escritorio o la pantalla de inicio del usuario, pero no necesitan de app store o play store para existir.
¿Por qué es esto relevante para el diseño web? Por dos razones:
En primer lugar, como escribí en 2016, el diseño web se estaba pareciendo cada vez más al diseño de aplicaciones. Ahora, esto será cierto, incluso a un nivel de desarrollo. Las experiencias web se parecerán a las aplicaciones, y se desarrollarán como si fueran aplicaciones.
La segunda consecuencia es que cada vez más diseñadores pasarán de diseñar aplicaciones nativas de la tienda de aplicaciones, a PWAs. Al final de 2017, una gran parte de la web tendrá el aspecto de una aplicación. Y la otra parte parecerá…. anticuada.
No quiero decir que las app stores desaparecerán por completo. Al menos no en 2017. Pero este es el año en que “apps” y “app store” se convierten en dos conceptos independientes. Para siempre.
Si quieres saber más sobre los PWA (Aplicaciones Web Progresivas, por sus siglas en inglés), revisa lo que Google tiene que decir sobre ellas, así como esta presentación de slideshare.
El año pasado dije que todo era sobre usabilidad. Esta tendencia sigue vigente.
Los diseños en esqueleto no se refieren a la apariencia de un sitio web o aplicación. Son acerca de la forma en que se cargan. Dile hola a esta última tendencia en la experiencia del usuario (UX).
Las pantallas de carga en esqueleto son un sistema que asegura que tu experiencia en la web o la aplicación sea lo más rápida posible, y esto se logra cargando la página en etapas: desde los elementos más simples hasta los más complejos, pero siempre proporcionando al menos el esqueleto de la pantalla sobre la cual estás navegando.
De esta manera, los usuarios pueden predecir o anticipar lo que estás a punto de cargar (piensa en los marcadores de posición de imagen, siempre presentes), haciendo que el corto tiempo de espera sea más fluido. Esto es lo opuesto a lo que las espantosas barras de estatus o spinners trataron de lograr (sin éxito alguno). Las cargas en esqueleto dominarán la web en 2017, y con toda razón.
Una microinteracción es una pequeña señal visual que se activa cuando un usuario realiza una determinada acción.
Las microinteracciones son los componentes básicos de la interacción del usuario. En cada dispositivo, cada vez que cambias una configuración, estás realizando una microinteracción. Es decir, cuando pasas el cursor sobre un botón, su color cambia. Cada vez que le das ‘like’ o marcas algo como ‘me gusta’, eso es una microinteracción también.
Crear buenas microinteracciones no es fácil. Las buenas microinteracciones separan los productos exitosos de la multitud. El menú de hamburguesa, los botones de ‘Me Gusta’ de Facebook, el Autocomplete de Google se han ganado una reputación como ejemplos clásicos de grandes microinteracciones.
Veremos más y más microinteracciones alrededor de la web, pero no sólo porque son geniales. Bien utilizados, añaden una función al sitio o la aplicación, así como una sección de comentarios para los usuarios. Las microinteracciones le permiten al usuario saber que su acción ha provocado un cambio, y no necesita hacerlo de nuevo.
Para funcionar correctamente, necesitan tener un único propósito, deben ser relevantes y necesarios para tu sitio o aplicación. Si el usuario no obtiene nada de la interacción, su usabilidad sufrirá, en lugar de mejorar.
La microinteracción también puede sustituir fácilmente procesos o interacciones más largos. Pedir la opinión del usuario es un caso así, donde una elección entre tres o cuatro emoticones puede suprimir la necesidad de llenar un aburrido formulario en línea.
2017 será el año en que finalmente tendremos una cuadrícula basada en CSS funcionando en casi todos los navegadores.
Esto significa que la construcción de una cuadrícula impecable y sensible para el diseño de tu sitio web será más fácil que nunca. Irónicamente, muchos diseñadores se han cansado de adaptarse a una cuadrícula geométrica para organizar su contenido. ¡Es hora de salir de la cuadrícula!
Los elementos que rompen los límites de las cuadrículas rectas tradicionales se convertirán en el nuevo estándar. Incluso los sitios corporativos en las industrias más tradicionales comenzarán a adoptarlos, haciendo que los sitios web que aún se adhieren a la vieja cuadrícula luzcan un poco desgastados.
Después de bastantes años donde los módulos horizontales eran la norma, especialmente en las landing pages, la disposición vertical y dividida finalmente ha surgido como una alternativa fuerte.
Funcionan bien tanto en la sección de home como en las landing pages. La razón es que ofrecen dos o más opciones diferentes para el usuario, sin la necesidad de presentar uno como más importante que el otro. A menudo verás este diseño del sitio emparejado con un montón de espacio negativo y tipografía en negrita (ver más abajo).
Incluso puedes utilizar más de dos módulos verticales. Esto divide tu contenido en varias facetas, lo que las hace perfectas para la navegación del sitio, además de ser una solución de escaparate de contenido, mejor que los antiguos controles deslizadores.
Para un concepto bastante similar, revise los grandes menús fotocéntricos, que pronto serán ampliamente adoptados por los sitios de comercio electrónico.
Los archivos del formato de Gráfico de Vector Escalable (Scalable Vector Graphics o SVG) son un formato de imagen vectorial que ha existido desde 1999. Entonces, ¿cómo es que son una tendencia importante en 2017?
Dos grandes razones: la resolución y la velocidad de carga de la página.
Dado que los archivos SVG son escalables, significa que son independientes de la resolución y se verán perfectos en cualquier pantalla, sin importar el dispositivo o el tamaño. Esto soluciona el problema en el que a veces se tenía que preparar dos archivos de imagen diferentes para cada objeto, uno para las pantallas de resolución normal y otro para las pantallas de retina.
Esto es sin duda excelente para los logos y cualquier elemento de marca. Crea tu logo una vez, de la manera que lo desees, y siempre se verá genial, no importa en qué tamaño.
Un ejemplo: el nuevo logotipo de TNW es un archivo SVG, como puedes ver aquí y puedes hacer zoom en tu navegador tanto como quieras – el logotipo no se va a pixelar.
En cuanto a la velocidad de página, los archivos SVG no realizan ninguna solicitud https. Esto se debe a que todo el contenido de un archivo SVG es sólo texto, lo que lo hace muy rápido para que los navegadores lo lean. Y como sabe, en una web cada vez más móvil, la velocidad de la página importa y mucho.
Pero hay aún más razones para su reciente popularidad: pueden ser animados, y son perfectos para crear fondos geométricos (otra gran tendencia, por cierto) sin añadir más tiempo de carga. ¿qué hay de negativo realmente sobre los archivos SVG?
Los elementos que se animan a medida que te desplazas hacia abajo no son exactamente nuevos. Pero en lugar de ser sólo un truco llamativo (¡mírame, soy una animación!), se han convertido en un elemento clave de la narración. Muy bien, cada animación que descubrimos a medida que nos desplazamos hacia abajo de la página debe contar una parte de nuestra historia. Apple lideró el camino con el increíble sitio de Mac Pro.
Si todo esto suena difícil de implementar, sólo revisa Spark – la herramienta de narración visual de Adobe, gratuita y fácil de usar. Con ella puedes construir algunas páginas y gráficos magníficos, al mismo tiempo que estés contando tu historia.
Pero eso no es todo sobre animaciones. Sabes que los GIF también han vuelto a nuestras pantallas, gracias a la locura de los memes. Pero ahora, los GIF vienen en una nueva forma: el cinemagraph o imagen cinética.
Los cinemagraphs o imágenes cinéticas son todavía imágenes donde una pequeña parte tiene un movimiento repetitivo, creando un bucle animado. El ojo humano es inmediatamente arrastrado a la parte de contraste, movimiento, a medida que el fondo se queda quieto.
Debido a su capacidad para destacarse, se vuelven viral muy fácilmente, y pronto será ampliamente utilizado por sitios de comercio electrónico y para publicidad en banners.
Y todavía no hemos terminado con las animaciones. Una vez que hayas probado todo para que tus botones de llamada a la acción (Call to Action o CTA, por sus siglas en inglés) se destaquen (estilos 3d, colores contrastantes …) ¿cuál será el siguiente paso lógico? Animarlos todo lo que puedas!
Esto no es lo mismo que un aviso emergente pop-up o un de subida fly-in. Los botones CTA animados significan que el movimiento está dentro del botón, lo que te atrae a hacer clic en él. Pero ten cuidado; cuando no se hacen bien, los CTA animados resultan molestos.
¿Te gustaría obtener inspiración para animar tus botones? Aquí hay mucha (y todo se hace con CSS).
En lo que respecta a diseño gráfico, 2017 verá dos grandes reapariciones: el gradiente y el duotono.
Los veteranos de Photoshop reconocerán instantáneamente estas dos palabras, ya que aparecen entre los efectos más populares durante años – hasta que el minimalismo y el diseño plano mataron la nota.
Los gradientes (o degradés) y duotonos son de hecho el mismo efecto, que consiste en “imprimir” una imagen en dos tonos del mismo color, o negro y un tinte de color. Por lo general se denomina así cuando se aplica a un fondo plano, siguiendo un patrón establecido (horizontal, circular, etc). Mientras que el duotono se utiliza frecuentemente para describir el efecto de aplicar sólo dos colores a cualquier imagen dada.
La técnica de superposición de dos colores proviene de la industria de la imprenta. Ahora, como parte de una tendencia general en la que todas las cosas no digitales están resurgiendo, es hora de adoptar de nuevo el degradé y las superposiciones de dos colores.
Es justo decir que Spotify fue el actor más grande que lideró el camino para los duotonos, en 2016. El hecho de que Pantone haya elegido un par de colores como el color del año 2016 no dolió tampoco.
Como demuestran las campañas de Spotify, los duotonos son perfectos para proceso de branding y por eso están siendo tan rápidamente aceptados por las marcas y editores de todo el mundo.
(Pero no todo el mundo lo vio de esa manera cuando Instagram rediseñó su logotipo con un degradé de 4 colores, jajaja)
El diseño retro nunca pasará de moda. A medida que nuestra dependencia de herramientas y dispositivos en línea crece, toda una generación anhela cosas con las que sus padres o hermanos mayores jugaron, ya se trate de imágenes Polaroid, vinilos o videojuegos de los años 90.
En este sentido, todo un movimiento llamado Retro Wave ha traído de vuelta el estilo gráfico de los años 80: colores de neón, fondos de palmeras y todo lo que te recuerda a la era de Miami Vice.
Incluso hay una herramienta en línea gratuita para generar efectos de texto y fondos ochentosos, el impresionante Retro Wave Generator.
Los extremistas en esta tendencia de diseño son los Brutalistas: anhelan una web sin ninguna concesión al diseño – igual que el texto y los sitios de principios de los 90’s. Craigslist te suena familiar?
Ve aquí para ver la recopilación más grande de sitios web Brutalistas.
El Diseño Material (Material Design) fue el gran ganador de las tendencias de diseño web de 2016. Pero es la naturaleza de las cosas no permanecer igual durante mucho tiempo. Después de que Google y su forma material de entender el diseño en línea ha tomado el mundo – ¿qué sigue? Lo textil.
La textura y la profundidad eran algo que Material Design puso sobre la mesa, después de haber sido una especie de algo “prohibido” por el Flat Design. Pero el diseño material dejó suelta a una bestia peligrosa.
El diseño textil trae una mezcla de diferentes metáforas de diseño, en su mayoría con características 3D. El objetivo es comunicar cómo se sentirían los objetos si pudiéramos tocarlos en lugar de simplemente verlos.
Es como un puente entre el diseño material y el diseño skeuomórfico (un estilo donde todo luce como su contraparte en el mundo real). Esto podría llevarnos a la forma en que la web lucía hace 15 años. Ahora que lo pienso, a los brutalistas no les gustará eso.
El minimalismo ha reinado durante algunos años en todos los campos del diseño gráfico. Podemos ahora ser testigos de los últimos días de esa supremacía, al menos para el diseño web. Pero hay un uso específico en el que el estilo minimalista no se desvanece, sino que se hace más fuerte: logos y branding.
Entre otras razones, esto puede ser explicado de nuevo por el hecho de que toda la web pronto lucirá como una aplicación. En la interfaz de una aplicación, el logotipo y otros elementos de marca no deberían competir por la atención a expensas de funciones importantes para el usuario. Esta es la razón por la que el minimalismo para las marcas tiene sentido y vas a ver más y más de él en el futuro.
Para una explicación más técnica de por qué a veces “menos es más” en lo que respecta a los logotipos, revisa este estudio sobre la importancia visual (compromiso con el ojo humano) de algunos de los logos de las empresas más grandes de tecnología del mundo.
Esta es otra tendencia que comenzamos a ver en 2016, alimentada por las paletas de color vivas defendidas por Google Material Design. Si bien aún no se adoptan ampliamente, sólo se harán más fuerte en 2017. Espera ver un montón de home y landing pages donde el color audaz y la tipografía sean los elementos principales.
El espacio blanco ya no tiene que ser tan blanco. Todavía se utilizará como una forma de dejar que los elementos brillen y darles espacio para respirar, pero ahora bien puede estar lleno de colores ricos y hermosos.
Sin embargo, un poco de precaución: No todos los diseños pueden o deben usar paletas audaces de colores. De hecho, como sucede con todo lo que se vuelve una corriente principal, habrá una reacción a la tendencia: bastantes rebeldes se mantendrán fieles a los colores suaves y pasteles. Algo que de hecho irá mejor con otras grandes tendencias del año, como la Tipografía a Mano y las Texturas.
No todo pueden ser ángulos rectos y patrones racionales. Tómalo como una reacción necesaria al estilo geométrico del diseño material: las tipografías de caligrafía manual serán más populares que nunca, y vendrán en más formas y tamaños que nunca antes. Esa es la belleza de usar una tipografía similar a la caligrafía manual: es más fácil transmitir un estilo único y personal.
Simplemente no uses los que has visto presentados docenas de veces hasta ahora (Brush Script viene a la mente) y estarás bien.
¿Un diseño web automatizado? Seguro que es una opción para el futuro, ¿pero no es 2017 un poco demasiado pronto para esto?
En realidad no. El diseño web basado en AI ya existe, y no es nada malo – ¡para consternación de unos cuantos freelancers!
The Grid (creado por un ex Googler) es quizás el ejemplo más conocido de una plataforma de diseño web AI, pero hay más (basados en la web, basados en aplicaciones y para todos los presupuestos). Tienes suficientes opciones para que reflexiones durante horas si debes contratar a un diseñador humano o a un bot.
Lo sé, lo sé, las interfaces de gesto y voz no son algo nuevo. Pero están a punto de volverse muy populares. 2017 será el año en que la mayoría de los usuarios dejarán de sentirse “extraños” al hablar con Google, Alexa, Siri o cualquier otra aplicación. Del mismo modo, los gestos para la interacción del usuario se convertirán en menos de una rareza.
Esto es obvio, pero ¿cómo diseñarlo? ¿Dónde debería estar tu icono de voz, o cómo hacerle saber al usuario que puede controlar su aplicación haciendo ciertos gestos – sin abrumarlo con información que puede ser no deseada en ese momento?
Otro reto para los diseñadores y expertos es la usabilidad. En resumen: a partir de este punto, las interfaces gráficas no serán con todo lo que un diseñador UX debe luchar.
Así que ahora, es tu turno. ¿Estás listo para implementar estas tendencias en tu sitio o blog? ¿Crees también que éstas serán las tendencias dominantes en el diseño móvil web en 2017? ¡Esperamos tus comentarios1
Periodista visual y creador de contenido visual estratégico que ayuda a las empresas a transmitir datos e información a sus audiencias a la perfección. Como premiado creador de contenido visual, su enfoque es apoyar el éxito del cliente y los objetivos en cada proyecto.
ULTIMOS POSTS
Calle Leganitos 47 Madrid 28013 España
+(34) 918 371 189
Queremos añadirte a nuestra lista de contactos, así podremos compartirte artículos, casos de éxito y experiencias.
Por favor, déjanos tus datos:
