5 tendencias reales de diseños web para 2016

Cada vez que veo un enlace llamado Tendencias de diseño web para este año, hago clic felizmente solo para decepcionarme en cuestión de minutos. Siempre son, sin falta, tendencias del año pasado, o no tendencias como: ilustraciones. ¿Sabías que las animaciones aparentemente son una gran tendencia? En serio, si escribe una lista de tendencias e incluye un video de fondo a pantalla completa como tendencia para 2016, realmente debería intentar conectarse y mirar sitios web antes de anotar su lista. A nadie le gustan los cebos de clic. De todos modos, sin más preámbulos, aquí hay una lista de cinco tendencias reales para el primer semestre de este año.

1) Pantalla completa y no desplazable

Los sitios no desplazables finalmente están ganando tracción. Cuando los sitios web de una página, que se desplazaban por la eternidad, con un encabezado de enlace de anclaje adhesivo en la parte superior, casi se convirtieron en la forma estándar de hacer páginas de inicio, es bueno ver las páginas donde tiene que hacer clic para navegar. Por mucho que la gente odie el desplazamiento de desplazamiento, en realidad puede ser agradable a veces. La clave al diseñar estos sitios es usar la pantalla para ver las limitaciones. Prototipo en Keynote. La navegación por teclado es común en estos sitios.

Conceptos básicos de privacidad de Facebook

Tres ejemplos de sitios de pantalla completa sin desplazamiento:

  1. Conceptos básicos de privacidad de Facebook: gran sitio, aunque no responde, por Facebook explicando paso a paso cómo funciona la privacidad en su servicio. Grandes ilustraciones!
  2. Fantasy: el nuevo y esperado sitio web de la agencia de diseño Fantasy, lanzado a principios de este año, no decepcionó. Especialmente echa un vistazo a la sección de trabajo, todo permanece en la pantalla.
  3. KLM 50 Travels - Hermoso sitio de campaña para KLM. Te lleva a través de 50 destinos, una pantalla a la vez. Navega con las flechas del teclado y la barra espaciadora.

2. Titular adhesivo a un lado

Para las tendencias más recientes en diseño web, siempre es aconsejable mirar sitios de agencias, o más bien diseñar estudios. Y recientemente ha sido a la moda hacer que los titulares se deslicen al lado del texto. Todos los niños geniales lo están haciendo. Esta es una tendencia de solo escritorio, por lo que leer esto en su teléfono solo tendrá que confiar en mí, sin visitar los enlaces de ejemplo.

Código y teoría

Tres ejemplos de titulares adhesivos a un lado:

  1. Código y teoría: los titulares de la ciudad permanecen en la imagen cuando se desplaza por las posiciones abiertas en este hermoso sitio web.
  2. Desbordamiento de pila: este no se ajusta a la factura al cien por cien, pero no es un sitio de agencia, por lo que le da un pase. Al desplazarse, la subnavegación permanece fija a la derecha. Agradable.
  3. DDB Sthlm - Soy de Suecia, así que también incluyo un ejemplo sueco. Si presiona Trabajar desde en su menú y se desplaza hacia abajo, verá que el título vertical permanece a un lado.

3) El logo es el cargador

Esta es una gran tendencia y se ha convertido casi en sinónimo de sitios web de agencias este año. Todos lo tienen. Y deberían hacerlo, porque se ve muy bien y le da al visitante la sensación de que el sitio web es parte de la marca. Muy inteligente.

Instrumento

Tres ejemplos de uso del logotipo como cargador:

  • Instrumento: este sitio solo muestra su logotipo cuando la página se está cargando y cuando abre el menú de navegación. Eso es nuevo y divertido.
  • Fubiz: este sitio causó un gran revuelo cuando se lanzó y por buenas razones. El sitio tiene un logotipo diferente para cada sección, todos ellos con animaciones muy bonitas.
  • Esto también: gran sitio web de estudio de diseño con muchos directores de arte nunca antes vistos para sitios de agencias. Aunque técnicamente no es el logotipo, el ícono de navegación es el cargador aquí, pero está ubicado donde generalmente se encuentra un logotipo para que encaje.

4) Imágenes de fondo interrumpidas

Tener imágenes de fondo que llenen toda la ventana del navegador no es nada nuevo, probablemente esté en la parte superior de la publicación clásica Actual Web Design Trends 2013, pero esto lo está llevando a un nuevo nivel. Agregue algunos efectos de desplazamiento del mouse sobre su imagen de fondo y listo.

Teoría activa

Tres ejemplos de imágenes de fondo interrumpidas:

  1. Hazme pulsar: mueve el mouse sobre el fondo y observa cómo cobran vida las montañas, muy bien hecho.
  2. Teoría activa: si está creando un sitio web para su agencia, ¿qué mejor manera de demostrar que tiene algunas habilidades web locas que hacer que parezca un experimento de Google? Ninguna.
  3. Detalles: esto requerirá cierto desplazamiento. Esta agencia de diseño suiza aparentemente no cree en los enlaces de anclaje, por lo que si se desplaza hacia abajo hasta la parte inferior de la página 4/4 Nos Experts y coloca el cursor sobre las fotografías, verá una ligera distorsión en ellas. ¡Agradable!

5) Animaciones exageradas

Esto es técnicamente posible ahora, entonces, ¿por qué no? Si se hace bien, esta podría ser una experiencia visualmente agradable y entretenida, si se hace mal, entonces son sitios Flash nuevamente. Palabra del sabio: úselo con cuidado, pero vaya más allá cuando lo use.

Waaark

Tres ejemplos de animaciones exageradas:

  1. Waaark - Lol, este pequeño estudio de diseño ha producido una de las experiencias visuales más impresionantes de este año. Deja que los franceses pasen a la cima cuando se trata de animaciones.
  2. Animocons: estos son algunos ejemplos de iconos con espectaculares animaciones de clics, todo hecho con código web.
  3. Rally Interactive Beta: Rally hace un gran trabajo al no tener la cantidad justa de animaciones en su sitio. Se han vuelto locos en la parte superior, y luego se mantienen suaves cuando haces clic y seleccionas algo.

Bonificación: todavía no es una tendencia, solo la he visto en uno o dos lugares, pero crear sitios web receptivos que se escalen indefinidamente será enorme. Es decir, el sitio se ve exactamente igual en una pantalla de 1280px que en una pantalla Retina 5100+ px de 27 "iMac, es solo más grande. Vea el gran sitio para el operador de telecomunicaciones brasileño Oi por ejemplo.

Mi nombre es Nils y trabajo como director de diseño en Ape, un estudio digital en Estocolmo, Suecia. Vivimos para un gran diseño, tecnología y comunicación. Si desea saber más sobre nosotros, visite nuestro sitio web, que desafortunadamente no tiene ninguna de las tendencias mencionadas anteriormente.

Además, si te ha gustado este artículo, presiona recomendar a continuación. Ayuda mucho.