¿Qué hace que un sitio parezca moderno y qué lo hace parecer anticuado? Cada año, la supervivencia del más fuerte elige qué tendencias funcionan y cuáles no. Con el 2015 llegando a su fin, ahora podemos identificar las tendencias más exitosas de 2015, aquellas que definen el estilo del año y muestran suficiente fuerza para continuar en el nuevo año. Aquí están nuestras diez principales tendencias de diseño expresadas en 2015.
Shadow (http://shadow.is/) destaca la tendencia del desplazamiento largo
Ahora que la navegación móvil supera a la de escritorio, en 2015 el diseño web se adaptó más a pantallas más pequeñas. Como muchas de las tendencias de esta lista, el desplazamiento largo se hizo popular por su utilidad en el diseño responsivo: pantallas más pequeñas significan desplazamientos más largos.
En el pasado, los diseñadores temían colocar contenido en la mitad inferior de la página, pero una nueva investigación demuestra que a los usuarios no les importa desplazarse. Hoy en día, tanto los diseñadores como los usuarios están reconociendo el valor del desplazamiento largo: más libertad creativa, narración mejorada, interacciones más sólidas y navegación simplificada (si el sitio es lo suficientemente pequeño).
Sin embargo, estos beneficios tienen un costo; Efectos SEO negativos y tiempos de carga más largos, entre los peores. El desplazamiento largo funciona mejor para sitios con mucho tráfico móvil o que actualizan contenido con frecuencia, y es menos efectivo para sitios con muchos medios como videos.
Mejores prácticas
Utilice un menú de navegación fijo o una opción de saltar a la sección para mejorar la navegación. Los sitios de desplazamiento largo y de una sola página son susceptibles de desorientar a los usuarios, así que establezca una medida de seguridad. Descubra los aspectos divertidos del desplazamiento largo con efectos como paralaje y animaciones activadas por el desplazamiento. Evite los efectos negativos de SEO siguiendo los consejos de este artículo de Moz. .
02. Diseños de tarjetas
Behance (www.behance.net) es un buen ejemplo de diseño de tarjeta limpio.
Otra tendencia práctica popularizada por el movimiento móvil, los diseños de tarjetas muestran una gran cantidad de contenido de una manera limpia y organizada. Esto los hace más adecuados para explorar contenido diverso y diferente, especialmente enlaces a sitios externos: los usuarios saben intuitivamente que al hacer clic en la tarjeta se les dirige a la publicación relacionada.
Como se explica en la guía Tendencias de diseño web 2015 y 2016 de UXPin, las tarjetas funcionan mejor separando el contenido en dosis digeribles, cada una de las cuales contiene solo los datos que un usuario necesita saber:
TítuloImagen atractivaDescripción (o etiquetas relevantes)Panel de control con opciones como favoritos, comentarios, etc.
Las tarjetas funcionan excepcionalmente bien con el diseño responsivo, porque sus filas y columnas se pueden reorganizar automáticamente para adaptarse a diferentes tamaños de pantalla.
Mejores prácticas
Asegúrese de que se pueda hacer clic en toda la tarjeta, en lugar de solo en la imagen o los enlaces de texto. La ley de Fitts establece que esto facilita la interacción.
Combine cartas con animación, especialmente efectos activados al pasar el mouse. Pequeños extras (cambios de color o de toda la cara de la tarjeta, o incluso efectos giratorios o giratorios) añaden vida al formato fuertemente estructurado, pero las aplicaciones nuevas y creativas pueden diferenciar su sitio de muchos otros que utilizan tarjetas.
El espacio negativo entre las cartas, llamado “canales”, debe estar claramente definido. No hagas que los usuarios adivinen los límites.
03. Diseño plano reinventado
El sitio web de Toyota (www.toyota-insidereams.com/dreamcar-collection/) utiliza el diseño plano de una manera diferente
Hace años, cuando el eskeuomorfismo era (irónicamente) una tendencia moderna, el diseño plano surgió como una alternativa adversa.
Sin embargo, el diseño plano actual está muy lejos de sus orígenes. La nueva versión, más matizada del diseño plano (Ryan Allen lo llama 'Diseño plano 2.0') ofrece más oportunidades para detalles y florituras. El nuevo diseño de pisos que dominó el año 2015 adquirió las características de:
Iluminación deslumbrante y resaltada. Degradados y/o sombras paralelas. Mayores valores para detalles.
Sin embargo, en general, el diseño plano sigue siendo plano en el fondo.
La sencillez general y los mínimos adornos no han desaparecido. Sus gráficos casi caricaturescos, su tipografía que prioriza la legibilidad y sus colores divertidos permanecen sin cambios y mantienen el estilo orientado a una fácil comprensión.
Mejores prácticas
Los botones fantasma, con fondos transparentes enmarcados únicamente por un contorno, surgieron como una tendencia dentro de una tendencia. Afortunadamente, los botones fantasma se pueden usar fuera del diseño plano: estos controles funcionales no restan valor a una imagen de fondo prominente, lo que los convierte en una adición popular a las imágenes principales. La belleza de los gráficos simples del diseño plano es que cargarlos es muy sencillo. Esto funciona perfectamente para el diseño responsivo. El diseño plano combina bien con la tendencia minimalista (ver 10). Ambos se esfuerzan por lograr una mayor comprensión a través de la simplicidad y ambos se adhieren al principio de “menos es más”.
04. Animaciones poderosas
Bugaboo (http://bit.ly/1HjLPyY) presenta algunas animaciones geniales
Las animaciones asumieron más deberes y responsabilidades en 2015, yendo más allá del valor estético para desempeñar funciones más prácticas.
Como el movimiento atrae la atención, la animación puede influir en la jerarquía visual de lo que se ve primero. Los efectos animados pueden promocionar ciertos elementos sobre otros, con el potencial de competir con aspectos más tradicionales como el tamaño o el color.
Las animaciones también tienen el poder de mostrar relaciones. Piense en un efecto animado relacionado con la minimización de una ventana, donde se reduce y luego vuela hacia el menú; esta animación primero confirma el éxito de la acción, pero también muestra al usuario en qué parte del menú puede ver la ventana más tarde.
El menú desplegable, como se muestra a continuación en UXPin con el editor de animaciones sin código, demuestra este principio a la perfección.
Como mínimo, la animación resalta acciones que de otro modo serían aburridas. Una animación al pasar el mouse muestra que se puede hacer clic en un enlace más que un simple cambio de color.
Mejores prácticas
Las animaciones web y de aplicaciones aún pueden hacer uso de las 12 reglas de animación clásicas de Disney. Los formatos de desplazamiento largo dependen en gran medida de la animación para crear la apariencia de un desplazamiento suave. Cuando se hacen bien, las animaciones activadas por el desplazamiento crean un sitio más inmersivo y entretenido. Las animaciones de la pantalla de carga son un elemento básico por una buena razón: brindan a los usuarios una estimación del tiempo y los entretienen mientras esperan. Las animaciones sutiles en una imagen de fondo pueden dinamizar una página. y evitar que quede aburrido… siempre que no sean excesivos. Demasiado movimiento de fondo distrae al usuario del contenido principal, sin mencionar que aumenta los tiempos de carga.
05. Fotografía fascinante
El sitio del fotógrafo de bodas Mario Frigerio (http://www.fotofrigerio.it/en) hace un gran uso de imágenes impresionantes
Con la popularidad de las pantallas HD en 2015, los diseñadores empezaron a prestar más atención a la calidad artística de las fotografías. Cada vez más sitios confían en fotografías impresionantes para su presentación visual en lugar de gráficos digitales.
Entre las tendencias fotográficas del año, la imagen del héroe reina. Al llenar todo el fondo con una sola imagen, los sitios crean experiencias altamente inmersivas que pueden atraer a los usuarios más rápidamente, lo que los hace perfectos para páginas de inicio de sesión y de inicio.
También hay mucha flexibilidad en las imágenes de héroes. El tono y el mensaje se pueden cambiar para cualquier sitio, siempre que la fotografía coincida con los objetivos.
Mejores prácticas
Si bien la fotografía personalizada suele ser más personal, la fotografía de archivo es una opción viable para los diseñadores que intentan ahorrar tiempo o dinero. Para obtener lo mejor de ambos mundos, combínelas de tal manera que las fotos personalizadas hagan que las fotos de archivo también parezcan personalizadas; por ejemplo, temas consistentes tanto en las personalizadas como en las de archivo. Para obtener fotografías de archivo gratuitas, pruebe Unsplash, Pixabay y Pexels. Las superposiciones de colores permiten a los diseñadores manipular cómo se percibe una imagen en función de los atributos del color. Darle a una foto deprimente una superposición amarilla o naranja la hará parecer más optimista y amigable. Los sitios de comercio electrónico han comenzado a reemplazar las imágenes tradicionales de productos con fotografías del producto en su entorno natural. Se ha demostrado que proporcionar contexto sobre cómo es realmente poseer el producto aumenta las ventas.
06. fondos de alta definición
El sitio de R/m Design School (http://school.readymag.com/) tiene un fondo HD espectacular
Junto con las tendencias en fotografía, el uso de fondos HD también ganó popularidad este año. Dado que cada vez más personas poseían dispositivos HD, era solo cuestión de tiempo.
Vemos calidad HD para video, así como las imágenes principales descritas anteriormente. Los navegadores y las velocidades de Internet ahora pueden manejar más videos, y los fondos cinematográficos tienden a ser más efectivos para crear atmósferas y conexiones emocionales que una fotografía estancada.
HD es otra resolución superior a los 200 ppp (ppp), mientras que la definición estándar es de 72 ppp. Esto hace que las imágenes diseñadas teniendo en cuenta SD aparezcan bloqueadas o borrosas en dispositivos HD, pero las imágenes HD aparecen bien en SD. Eso significa que los usuarios con pantallas SD no notarán la diferencia, pero aquellos con pantalla HD sí.
Mejores prácticas
Los gráficos vectoriales escalares (SVG) traducen imágenes utilizando líneas y puntos, no píxel por píxel como formatos rasterizados (.jpg, .png, .gif). Úselos cuando pueda para gráficos nuevos y guarde formatos rasterizados para imágenes y videos de la vida real porque tienen una cantidad fija de píxeles desde el principio; por eso es importante capturar los medios en HD desde el principio.
Los fondos de la mayoría de los dispositivos no se ajustarán a la relación de aspecto habitual de las cámaras de 1:1,5, así que participe activamente en el recorte. De lo contrario, no controlarás lo que se corta y lo que se ve.
No permita que las imágenes superiores del fondo eclipsen los elementos más importantes de la página.
07. Tipografía en negrita
Google Ideas (www.google.com/ideas/) utiliza tipografía en negrita para mostrar que se toma en serio cambiar el mundo
Dado que la representación de fuentes ya no es una preocupación y la disponibilidad de fuentes nuevas y gratuitas, la tipografía ha comenzado a desempeñar un papel más importante en el diseño web.
La tipografía en negrita se refiere a un texto que llama la atención sobre sí mismo, pero que no es necesariamente extravagante o elaborado. De hecho, la tipografía simple es a veces la más atrevida. Junto a las tendencias planas y minimalistas, la tipografía actual también apuesta por la sencillez. Un tipo de letra sans serif con un estilo grueso crea una declaración visual al tiempo que mejora la legibilidad.
Independientemente de la fuente, uno de los usos más comunes de la tipografía este año es el tamaño extremo. Esto puede ser grande o pequeño: la tendencia es simplemente llevar la tipografía a sus extremos.
Mejores prácticas
Para simplificarlo, comience con solo dos fuentes por sitio. Para variar, experimente con más tipos de letra, pero manténgase dentro de la misma familia tipográfica.
Recuerde que el objetivo principal de la tipografía es la legibilidad y la legibilidad. No importa lo impresionante que sea tu tipo de letra si no se entiende.
Con suficiente énfasis en las imágenes, la tipografía en negrita puede asumir el papel de una imagen en la página. El texto también puede ser atractivo para la vista y es común ver páginas con texto hermoso como foco central.
08. Interactividad involucrada
Beatbox Academy (www.beatboxacademy.ca/) es maravillosamente interactiva
Los avances de HTML5, CSS, Javascript y jQuery ahora permiten interacciones más profundas, una herramienta poderosa para todas las empresas. Los usuarios ahora están más involucrados, con más estimulación visual, contenido más potente y controles más atractivos. Este año se produjo un aumento en:
Elementos en los que se puede hacer clic/deslizarPersonalización (especialmente geolocalización)Control sobre contenido reveladorVideo y animaciónNavegación basada en desplazamientoTransiciones y funciones de bucleNotificaciones push
El aumento de interacciones también significa un aumento de microinteracciones.
Como se explica en Web Design Trends 2015 & 2016 por UXPin, las microinteracciones son las minucias de la interactividad: un sonido cuando envías un correo electrónico o una animación para llamar la atención sobre una nueva notificación. El diseño de interacción se volverá cada vez más complejo, lo que lo convertirá en una tendencia…
