5 tendencias del diseño web actual

El diseño web en sus orígenes se inspiró en plataformas como Mac.

El diseño web ha estado muy ligado en su evolución gráfica al desarrollo tecnológico. Hasta que no mejoraron tanto el acceso a Internet como los navegadores (¡bye, bye, Internet Explorer!), poner imágenes en las páginas era poco habitual.

Las páginas web se limitaban a “copiar” el mismo diseño de los interfaces gráficos de usuario de plataformas como Windows y OS X. Así, en esta primera fase, la simulación de interfaces físicos que usaban, y abusaban, del uso de luces, relieves, sombras y texturas realistas inundaron la Red.

Afortunadamente, ese tiempo ya pasó, y se ha empezado a ver un grado de madurez en el diseño web.

Por un lado, el diseñador gráfico ha asumido su papel, lo que le ha llevado a aprender código para poder aportar sus conocimientos de primera mano al diseño de las interfaces web (y que esta faceta no dependa de programadores con escasos, o nulos, conocimientos de diseño).

Asimismo, las limitaciones técnicas, como la necesidad del responsive, han propiciado soluciones más funcionales y efectivas para el usuario. El problema se convierte en solución.

Vamos a repasar 5 tendencias del diseño web resultado de este proceso:

1. Cabecera fija y reducida

La cabecera es la zona de la página que permanece más tiempo sin cambios durante nuestra navegación en una web. Así que en esta opción, para tenerla más accesible se fija a la ventana del navegador y cuando hacemos scroll sigue ahí.

Además, para evitar que reste altura al contenido principal, se escala para dejar una versión reducida. Es el ejemplo de Vasava:

Vasava: ejemplo de cabecera fija y reducida
ejemplo de cabecera fija y reducida

2. Fullscreen y menú hamburguesa

Nuestros hábitos de navegación han cambiado: ahora usamos el móviles, tablets y ordenadores con monitores de alta resolución para navegar. Muchos diseñadores aprovechan esta situación para crear una interfaz capaz de crecer tanto como el tamaño de la pantalla. Este concepto de web suele ir acompañado de un menú hamburguesa, que al estar ya plegado no resta espacio al contenido.

Podemos ver un claro ejemplo en la web de Bad Assembly:

badassembly

3. Vídeo en la home

La home de una web es su carta de presentación. Durante mucho tiempo el pase de fotografías (slide) ha ocupado la primera parte del inicio de las webs.

El aumento de la velocidad de acceso y el acuerdo entre todos los navegadores para aceptar el formato mp4 como el codec de vídeo para Internet, han posibilitado que ahora sea el vídeo el que ocupe gran parte de las páginas de inicio.

El estudio malagueño Doctor Jekyll es una buena muestra de lo comentado:

jekyll

4. Paletas monocromáticas y legibilidad

A medida que más diseñadores tomaron las riendas del desarrollo web, la influencia de disciplinas como el diseño editorial ha aportado claridad y jerarquía en el contenido de las páginas.

Otro aporte sería la utilización de paletas de color monocromáticas que no “contaminen” visualmente el contenido. Igualmente, otro influjo importante ha sido la mejora en el uso de las fuentes para aumentar la legibilidad.

En el caso de la web de David Arias las fotografías se tiñen de negro para mostrar su color sólo al pasar el ratón por encima.

arias

5. Imágenes vectoriales

El diseño web ha sido tradicionalmente territorio de imágenes en mapa de bits. Esto ha conllevado una serie de limitaciones en la creación de las interfaces.

Actualmente, el formato vectorial optimizado para web SVG ha conseguido dar un giro al antiguo estatus. El diseñador se ha hecho más fuerte. El formato SVG le ha permitido crear cualquier infografía, icono o ilustración sin pérdida de calidad, con un peso mínimo y permitiendo su animación.

La web del estudio italiano Fixate es un buen ejemplo de lo indicado:

Cabecera vectorial: fixate

En la práctica, también nos podremos encontrar con modelos mixtos, que mezclen un poco de uno u otro. Esperamos que estas cinco referencias os guíen a la hora de plantear el diseño de vuestra próxima interfaz web.

3 comentarios en “5 tendencias del diseño web actual”

  • Al ser cada vez mayor el uso de la web en todos los ámbitos de nuestra vida, muchas empresas dependen de esta ventana al público para vender sus productos o promocionar su marca. Este cambio de foco ha propiciado un mayor esfuerzo por crear webs más vistosas y con un diseño más cuidado. Alentado en gran medida por la evolución de la tecnología como se comenta en esta entrada.

    La pregunta que yo añadiría es ¿qué fue primero la idea del diseñador o la tecnología que lo hace posible?

  • juanlu dice:

    En mi opinión ha sido la mayor parte de las veces las que el diseñador ha exprimido el lenguaje para poder sacarle partido y construir las webs. El progreso en HTML y CSS ha venido siempre a rastras de los métodos de los propios desarrolladores.

  • Victor Raul Samudio dice:

    No hay mejor pagina, q la creada x gran diseñador gracias a las herramientas q tiene hoy en dia, y saber utilizarlos. Gauss tiene los mejores formadores a la hora del diseño. Os recomiendo

Dinos lo que piensas

Tu email no se mostrará ;)