El diseño web está cambiando y el proceso es muy rápido

Así lo indica Claudio Guglieri, director de arte en Nueva York de la agencia B-carrete, e identifica 10 tendencias clave sobre el diseño de páginas web:

El posicionamiento de los diferentes componentes del diseño web es uno de los primeros retos que un equipo enfrenta en un proyecto. Puede ser una de los más o menos difíciles de las decisiones que habrá realizar.
Estos tres factores no siempre se mueven en la misma dirección: Los contenidos dictan la presentación de la página web, las necesidades de los usuarios en torno a ese contenido, y por supuesto las necesidades de los clientes que encargan el trabajo.
Con el cual son labores imprescindibles para el diseñador UX y el diseñador visual encontrar la armonía entre estos factores.

Siguiendo las tendencias

Además de los aspectos teóricos de la misma, la industria del diseño web como cualquier otro campo creativo pasa a través de las fases, y estas fases están definidas por las tendencias. Estas tendencias pueden ser impulsadas por los nuevos avances tecnológicos, nuevas estéticas o el deseo puro de la búsqueda de formas más eficientes de presentar el contenido al usuario, por citar algunos ejemplos.

Me gustaría creer que las tendencias son siempre lo mejor y empujar a todo el mundo en la industria de dar un paso adelante y hacer aún mejores productos. Por ejemplo, el diseño de páginas web responsives (adaptables) comenzó como una tendencia y en poco tiempo se ha convertido en una parte necesaria del proceso de diseño.

Ejemplos inspiradores

Pensando en las tendencias actuales y cómo se empujan para determinados tipos de diseños, he seleccionado algunos que me parece interesante y destacó algunos ejemplos para ilustrarlos. Tenga en cuenta que las tendencias están presentes en los diferentes ejemplos, por lo que pueden identificar más de una en una referencia específica.

1. Jerarquía de contenido

Un nombre más descriptivo para esta tendencia se podría llamar «muéstrame lo que me importa de cuando me preocupo por ella.»Representa el fin del enfoque obsesivo en «artículos relacionados» y lo innecesario «que podría estar interesado en este …» desorden en el contenido que en realidad importa en ese momento. Eso no quiere decir que el contenido de comisariado es algo malo en sí mismo, por supuesto, todavía tiene espacio en su diseño, siempre y cuando no se interpone en frente de lo que está leyendo. Aquí hay tres grandes ejemplos de esta tendencia.

Ejemplo: El gran descontento

discontent
El descontento ofrece un gran ejemplo de cómo presentar entrevistas en línea

La revista en línea de entrevistas con gente creativa es claro, simple y ordenado, no podría ser más sencillo. En términos de diseño y la interfaz de usuario, el diseño se centra únicamente en su contenido. Se inicia con una grande y hermosa imagen con el entrevistado para captar la atención del usuario. Y cuando el desplazamiento hacia abajo, se convierte en una estructura de tres columnas, en las columnas izquierda y derecha apoyan la historia principal centrada.

02. Imagen a pantalla completa

Cada vez más sitios web se están aprovechando de la creciente popularidad de los monitores de pantalla ancha para mostrar las imágenes al tamaño máximo.

Ejemplo: Guía de viajes Volvo

Nuevo sitio de Volvo cuenta con un conjunto de imágenes a pantalla completa con un cuadro de texto contextual corta

Este sitio creado por North Kingdom para Volvo, cuenta con una Guía de viaje por Escandinavia con un diseño muy sencillo. Después de una primera selección de los elementos numerados, el sitio sólo cuenta con un conjunto de imágenes a pantalla completa con un cuadro de texto contextual corto. Es interesante la forma en que decidieron ir a lo seguro y dibujar un cuadro de envolver el texto para tanto contenido visual y textual y que no chocan dentro del diseño.

03. Centrarse en las pantallas táctiles

Más y más páginas webs, en términos de diseño e interactividad, se sienten como si estuvieran hechas exclusivamente para dispositivos con pantalla táctil. Como las tabletas son más económicas y la adopción se hace más generalizada, esta tendencia sólo puede intensificarse.

Ejemplo: EE.UU. Hoy en día

El sitio de EE.UU. Hoy en día empuja la idea de las tarjetas de deslizamiento para cambiar de una sección principal a otro

Lo que sobresale en este sitio está impulsado por lo que normalmente sería una interacción experimental para ser la metáfora principal detrás de la navegación. La idea de tarjetas de deslizamiento para cambiar de una sección principal a otra realmente permite que el usuario enfoque en el contenido seleccionado en el momento.

04. Volver a la red

El uso de la grilla como una estructura de disposición se remonta al comienzo del diseño web, pero el aumento de diseño de páginas web sensibles ha visto un nuevo énfasis en el uso de las redes.

Ejemplo: W + K Amsterdam

 

Es notable cómo la red de respuesta de flexibilidad W + K es real

Este sitio cuenta con una cuadrícula de pantalla completa de contenido sensible. En términos de diseño es extraordinario cuán flexible es la red. Independientemente de su tamaño, tiene capacidad para un mismo contenido a través de transiciones muy suaves.

05. Contenido mínimo

La tendencia para mostrar el contenido mínimo en una página no es sobre el valor estético del minimalismo (aunque esto puede desempeñar un papel). Se trata más de un enfoque que se centra alrededor del usuario y que permite tomar las cosas un paso a la vez.

Ejemplo: Domani Studios

 

Domani Studios mantener el contenido al mínimo, pero su sitio nunca es aburrido para mirar

El sitio de la sede en Nueva York Domani Studios reduce básicamente el diseño de la mínima cantidad de contenido que el usuario necesita en cada escenario. Esta tendencia puede ser demasiado extrema cuando se toma demasiado lejos, pero, en general, la reducción de la cantidad de llamadas a las acciones en el diseño ayuda a comunicar un mensaje claro.

06. Parallax de desplazamiento

La tendencia scroll parallax ha estado vigente desde hace bastante tiempo.

Ejemplo: Sony Tablet

 

sony-tablet
Este sitio de Sony Tablet es una página de largo rollo con bloques distribuidos verticalmente de contenido

Este sitio web salió en el medio de la «fiebre de paralax» y comenzó una tendencia más reciente dentro de este grupo ya saturado. Básicamente se contó con un dispositivo único en el centro de la composición que fue animado como el usuario desplazarse hacia abajo por el contenido alrededor de ella. Desde el punto de vista de diseño, está estructurada como una página larga de desplazamiento de bloques de contenido distribuidos verticalmente.

07. Animación con Parallax

Es un subconjunto de desplazamiento de Parallax, aunque cuando uno empieza y termina otro puede argumentar un bucle sin fin…
Lla animación de con parallax tiene una utilidad obvia para sitios de películas, y así se puede ver en el siguiente ejemplo.

Paranorman the Movie

 

panoraman
El sitio Paranorman te lleva sin problemas a través del universo de la película

El sitio web creado para la película de la comedia zombie Paranorman es, con mucho, uno de los ejemplos más justificadas de animación parallax en un sitio web. Este sitio te lleva a través del universo de la película sin problemas, cargando nuevas escenas como usted se mueve a través de la web. Los elementos de interfaz de usuario en el diseño se han reducido al mínimo como la lógica de desplazamiento que lleva a través del sitio sin problemas. Como un tesoro escondido, el sitio tiene un menú activado por clic que se hace cargo de toda la pantalla.

08. Marcos de pantalla completa

Una buena imagen puede hablar más que mil palabras, y esta opción puede haber llegado como un soplo de aire fresco en muchos sitios de noticias y blogs.

Ejemplo: FastCoDesign

 

Cada nuevo mensaje en el sitio de FastCoDesign da forma a la apariencia de la página de inicio

Diseño Blog FastCoDesign combina una zona de la parte superior que se ajusta su altura al tamaño de su pantalla, pero siempre se hace alusión al principio del post promovido en la parte inferior. Al hacerlo, se muestra de inmediato que el sitio se ha actualizado con nuevos contenidos rápidamente, ya que cada nuevo post conforma completamente el aspecto de lo que el usuario podrá ver por primera vez en su página web.

09. Centrarse en la narración

Si desea transmitir un mensaje de la marca, una de las mejores maneras de hacerlo es contar una historia, y los diseñadores web están subiendo con más y más formas de crear narrativas innovadoras y atractivas.

Ejemplo: Cadillac ATS contra el mundo

 

cadillacs-contra-el-mundo
El sitio web de Cadillac ATS permite explorar cuatro historias a través de una estructura de desplazamiento / línea de tiempo

Este sitio web te hace olvidar la tecnología y permite que el usuario se enfoque en la historia. Desde una perspectiva de diseño se inicia con una selección de cuatro pisos, y permite explorar mediante el uso de una estructura de desplazamiento / línea de tiempo largo, donde los usuarios pueden obtener más información, haciendo clic en las salidas de llamadas que ampliarán y apoderarse de la pantalla. Se hace un gran uso de consejos contextuales a lo largo del camino para que los usuarios o bien pueden desplazarse o haga clic a través del contenido de ajustar el tamaño de la disposición de la pantalla.

10. Influencia Editorial

Diseño web y diseño editorial se están constantemente buscando el uno al otro y cada vez más cerca en términos de estética y el diseño.

Semana del Diseño de Portland

 

El área de marquesina se hace cargo de su tamaño de la pantalla a la transición en dobles columnas simples

Como un ejemplo un poco diferente de influencia editorial, tomar el sitio web creado para la reciente Semana del Diseño en Portland. Su sencillez, colores lisos y grandes tipografía negritas están claramente inspirados en los medios impresos.

¿Conoces otras tendencias sobre diseño web?

Compártela con nosotros dejando un comentario.
Si necesitas asesoramiento para la creación de tu página web, no dudes en contactar con nosotros.

Entradas recomendadas

Aún no hay comentarios, ¡añada su voz abajo!


Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.