La web ha cambiado mucho en la última década y, al mismo tiempo, no ha cambiado en absoluto. Si miramos hacia atrás 10 años, veremos que la web tiene un patrón de distribución muy común en el trabajo en la mayoría de los sitios. Este patrón de acceso consistía en un encabezado, pie de página, barra lateral y área de contenido. Era el diseño esperado para la web. Al mismo tiempo, tuvimos un aumento de Macromedia Flash que dio paso a una era de diseños alternativos. Diseños que no se ajustaron a esta estricta fórmula. Y, por supuesto, con la implosión de Flash, este enfoque se desvaneció un poco ... Lo digo un poco, porque ha vuelto con una venganza.

Si encuesta en una de las muchas galerías populares que muestran el diseño web actual, sin duda notará que la estructura fundamental de las páginas web es todo menos fija. Se puede flexionar y cambiar a casi todo lo que necesita ser. En mi opinión, este es uno de los mejores efectos secundarios que ha producido el diseño web receptivo. La nueva norma, por así decirlo, es que parece que no hay una fórmula fija en absoluto.

Todo eso dice que podemos observar varias tendencias de alto nivel en el diseño de diseño que representan lo que considero diseños inusuales. Inusual porque no siguen una fórmula estricta o un sistema predefinido. Pero son tendencias en cuanto a que puedo proporcionar docenas, sino cientos de ejemplos que llenen cada una de estas categorías.

Lo que encontrará aquí es una interesante mezcla de tendencias y diseños inusuales que con suerte lo inspirarán a evaluar las estructuras fundamentales que aplica al diseño web. Vamos a sumergirnos y echar un vistazo ...

Pantallas divididas

En esta categoría, encontramos una selección de sitios que todos dividen la pantalla usando una división vertical. Hay quizás muchas razones para hacer esto, y al estudiar muchas muestras de este tipo, he encontrado dos razones principales.

El primero es que a veces un diseño puede tener dos elementos primarios de igual importancia. Un enfoque común para el diseño web es clasificar las cosas en orden de importancia. Esta importancia luego se refleja en la jerarquía y la estructura del diseño. Pero, ¿y si en realidad tienes dos cosas para promocionar? Este enfoque le permite darles importancia a ambos y permitir al usuario seleccionar rápidamente entre ellos.

La segunda razón que he encontrado para este enfoque es que a veces es necesario transmitir una dualidad importante. Considere el sitio web Eight and Four, por ejemplo. Aquí quieren transmitir el hecho de que sus puntos fuertes principales son sus raíces digitales y su personal talentoso. Este emparejamiento es lo que los define. La pantalla dividida es una manera encantadora de presentar esto. Y me encanta especialmente cómo el símbolo une los dos lados.

dieciséis
01
03
07
18

¡Sin cromo!

Uno de los principales elementos utilizados en el diseño web son elementos que contienen: cajas, bordes, formas y contenedores de todos los tipos utilizados para dividir el contenido de una página. Considere un encabezado estereotípico donde los elementos están bien contenidos y separados del contenido. Una tendencia común ahora es eliminar todo este cromo adicional.

Este es un enfoque minimalista, pero va un paso más allá y tiene algunos giros interesantes en el camino.

02

En este ejemplo, han eliminado la noción de encabezado y pie de página todos juntos. Se siente más como un quiosco interactivo en su lugar. La jerarquía de contenido se realiza principalmente a través de una organización de izquierda a derecha, lo que ayuda a que el diseño sea muy intuitivo. Y el cromo para separar la navegación del contenido simplemente no es necesario. En cambio, los hermosos productos brillan a través de ellos.

13

Aquí encontramos que el contenido se enfatiza mucho al eliminar cualquier sensación de encabezado o pie de página. En lugar de leer un encabezado primero, lee el nombre de la empresa y una declaración clara sobre lo que hacen (y dónde lo hacen). Seguido por la navegación principal. Qué gran manera de enfatizar la marca antes de que las personas naveguen. Hace un flujo elegante. Curiosamente a medida que se desplaza la página obtiene un encabezado y un toque de cromo. Un diseño hermoso y eficaz que utiliza el patrón de una manera inspiradora.

15
20
17

Modular o basado en grillas

A continuación, tenemos diseños construidos sobre estructuras modulares o cuadriculadas. En estos diseños, cada módulo está diseñado para flexionarse según el tamaño de la pantalla. Este no es exactamente un nuevo enfoque, pero la introducción del diseño web receptivo lo ha hecho aún más útil. Esto sugiere el tipo de diseños adaptables que uno puede crear con complementos como Masonry.

04

Este ejemplo demuestra perfectamente la idea. El diseño es completamente receptivo. A medida que el tamaño de la pantalla cambia, cada módulo se adapta y se adapta al espacio. Al dividir el espacio de manera uniforme, es más fácil adaptar el diseño. Y obtienen puntos de bonificación por la introducción de un elemento (en tamaños de pantalla más grandes) que rompe las barreras rígidas entre los módulos.

19

Este ejemplo es una versión bastante intensa del patrón. Por supuesto, adopta el enfoque modular, que les permite cambiar fácilmente el contenido dentro y fuera según sea necesario. Pero aquí hay un elemento de diseño importante que no tenía el ejemplo anterior. El tamaño de los módulos varía para reflejar el orden de importancia y su lugar en la jerarquía. El riesgo de este enfoque modular es hacer que todo sea del mismo tamaño, lo que significa que no está realmente enfatizando nada. Por el contrario, este ejemplo da claramente importancia al elemento primario.

08
05
06

Llenar una sola pantalla

Finalmente tenemos sitios que usan un enfoque donde el diseño se adapta para llenar completamente la pantalla. Este es un subconjunto del diseño receptivo ya que se adapta al tamaño de la pantalla. Pero en este nicho los diseños se adaptan de tal manera que llenan completamente la pantalla y no producen barras de desplazamiento. Esta falta de desplazamiento significa que el contenido debe estar extremadamente enfocado y la jerarquía de contenido claramente establecida. Encuentro que el enfoque y la claridad de estos sitios son refrescantes.

09
10
11
12
14

Conclusión

Si bien he analizado cada una de estas tendencias aquí aisladamente, la realidad es que representan bloques de construcción. Y estos bloques de construcción se pueden ensamblar de muchas maneras diferentes. De hecho, muchas de las muestras presentadas aquí podrían moverse a muchas de las categorías que hemos discutido. La diversidad de diseños en la web moderna y el hecho de que sean utilizables hace que la web sea un medio emocionante para trabajar.