Ejemplos de diseños web únicos

El sitio comienza con una foto que llena toda la pantalla (puntos extra si es una toma cenital del escritorio de un diseñador). Flotando sobre la foto, sobre una suave sombra de texto: un titular, un poco de texto promocional y un botón de llamada a la acción gigante. A eso le siguen tres bloques de texto con iconos de Font Awesome posados sobre ellos, desconcertando a los visitantes con su enigmática relación con el contenido.

Ya conoces el resto de la historia.

Es fácil dejarse llevar por las tendencias

Quizás sea por la popularidad de las publicaciones sobre tendencias de diseño web. Quizás sean las limitaciones que conlleva empezar con una plantilla. O quizás sean los diseñadores trabajando con plazos ajustados y presupuestos mínimos.

Gran parte se debe a que el desplazamiento vertical es un comportamiento tan común e intuitivo que se ha convertido en el estándar natural para la navegación web. Los sitios que siguen esta fórmula parecen más fáciles de vender a clientes y usuarios, ya que resultan cómodos y familiares. Si es popular, debe funcionar, ¿verdad?

Pero de vez en cuando, cuando surge el proyecto adecuado, los diseñadores deberíamos pensar más allá de lo establecido y empezar a ver los conceptos de diseño desde ángulos totalmente nuevos.

Aunque solo sea porque te obligará a reevaluar tus ideas fundamentales sobre la relación entre tu contenido y la pantalla.

Si siempre recurres a la misma fórmula de diseño de siempre, podrías estar perjudicando a tus clientes y a ti mismo. A medida que los diseñadores siguen produciendo variaciones menores sobre los mismos temas, surge una gran oportunidad para destacar simplemente haciendo algo diferente.

Pero, ¿cómo crear un diseño único que no frustre ni confunda a tus lectores?

Para aprender cómo, vamos a analizar tres sitios que ofrecen un diseño hermoso y único sin frustrar a los usuarios.

Estos sitios no solo ofrecen algo nuevo, sino que también hacen que su contenido sea accesible y adaptable. El pensamiento creativo detrás de ellos también brindó a sus diseñadores mucha visibilidad, demostrando que la originalidad realmente puede ayudar a que tu portafolio destaque. Así que, si buscas conseguir más clientes de diseño, tienes una razón más para leer este artículo.

Diseño n.º 1: El rediseño de IMDB centrado en imágenes de JP Texeira

Antes de explorar nuestro primer ejemplo de diseño, echa un vistazo al sitio actual de IMDB.

El diseño actual de IMDB sigue un patrón muy popular entre los sitios con mucho contenido y basados en bases de datos. Las historias con mayor importancia tienen miniaturas más grandes, titulares más llamativos y extractos más detallados. Una barra lateral alberga contenido de menor prioridad que los visitantes aún necesitan tener a mano.

Un enfoque de visión general para el rediseño

Por pura iniciativa propia, el diseñador JP Teixeira creó un impresionante rediseño de la página de inicio de IMDB.

‍El uso de diferentes tamaños de caja, colores, estilos tipográficos y otras señales ayuda a organizar y priorizar el contenido en la página de inicio.

Sin un cliente al que rendir cuentas y sin restricciones de las que preocuparse, JP pudo preguntarse "¿Y si...?" y dejar volar su imaginación.

Los proyectos personales como este son una forma fantástica para que los diseñadores sigamos aprendiendo: ¡es como volver a la escuela de diseño por un rato! Algunos de tus trabajos podrían convertirse en sitios web increíbles para clientes, otros en pruebas de concepto para experimentar en el futuro y, sin duda, otros terminarán directamente en la papelera.

Pero no pasa nada; saber lo que no funciona es tan importante como saber lo que sí. Echemos un vistazo al diseño de JP, que creó desde cero en Webflow.

Por qué funciona este rediseño de IMDB

La reinvención de JP es un ejemplo excelente de cómo un diseñador puede crear algo más que un simple diseño: ha creado un sistema que se puede aplicar a cualquier sitio con contenido que se actualiza constantemente. Esa es la clave: no es solo una novedad estética, sino también una forma innovadora de hacer que el contenido sea accesible.

Al dar un paso atrás y observar el panorama general, Texeira se dio cuenta de que el principal desafío de IMDB es la enorme cantidad de noticias y contenido multimedia sobre cine que se actualiza a diario.

JP utiliza la escala para resaltar los artículos destacados con imágenes grandes y visualmente impactantes. El contraste entre estas imágenes ricas y el amplio espacio en blanco del cuadro de tweets permite que ambos elementos destaquen por igual. Estos elementos no se mezclan entre sí: cada tipo de contenido tiene un estilo visual único diseñado para que sea reconocible al instante en el flujo de contenido de la página de inicio.

Sí, hay muchas cosas pasando a la vez, pero el propósito de cada elemento queda claro de inmediato. El equilibrio asimétrico es otra técnica de diseño efectiva que se utiliza aquí: si este diseño fuera una sucesión de cajas con imágenes del mismo tamaño, te cansarías rápidamente de hacer scroll buscando algo nuevo. Al variar el ancho, la escala y el color de cada pieza de contenido y mostrarlo de forma asimétrica pero equilibrada, el diseñador invita al lector a mantenerse atento: ¡siempre puede haber algo nuevo y emocionante a la vuelta de la esquina!

Qué puedes aprender de este rediseño de IMDB

La asimetría puede aumentar el interés, pero también puede resultar confusa. Asegúrate de que no comprometa la accesibilidad.

Cuando hay muchos elementos juntos, utiliza el espacio en blanco para dirigir la atención hacia las partes menos importantes de la página.

En diseños más complejos, es cada vez más importante reducir el desorden. Debes eliminar agresivamente cualquier confusión o ruido visual.

Diseño n.º 2: Contenido editorial de formato largo en Geospace

Cada vez más sitios publican historias complejas y extensas apoyadas por fotografías de alta calidad, citas destacadas que invitan a la reflexión, vídeos atractivos y visualizaciones de datos complejas.

No es de extrañar que incluso esta forma relativamente "nueva" de contar historias en pantalla ya haya desarrollado una fórmula de diseño estándar. ¡Hasta las ideas nuevas pueden quedarse obsoletas rápidamente!

Un diseño estándar "estilo revista" utilizado por muchos sitios de narrativa de formato largo.

Un enfoque novedoso inspirado en el diseño de revistas

Geospace lleva el concepto de "diseño estilo revista" a un nivel completamente nuevo.

Tanto la navegación del sitio como su contenido editorial toman prestadas libremente técnicas utilizadas en el diseño de libros y revistas. Al combinar las interacciones de Webflow (que pronto se rediseñarán con las interacciones 2.0) y un estilo tipográfico avanzado, el diseñador de este diseño logró recrear el aspecto de una publicación táctil y brillante, añadiendo a la vez una interactividad cautivadora.

En lugar de tratar el sitio como una página vertical única, el diseñador (¡de nuevo J.P. Texeira!) decidió tratar el área de visualización horizontal como una doble página.

Geospace presenta una solución elegante no solo porque es singularmente hermosa, sino también porque resulta íntimamente familiar. Aunque el diseño no funciona de la manera que el usuario podría esperar de forma instintiva, el sitio funciona como uno siente que debería funcionar: el sello distintivo de cualquier experiencia de usuario excelente. Por eso, se vuelve totalmente utilizable muy rápidamente.

Al adoptar un diseño orientado a pliegos, la navegación cobra protagonismo, con fotos impactantes que atraen a los lectores hacia la historia antes incluso de leer una sola palabra.

Solo el panel de navegación seleccionado permanece en su lugar; los demás se deslizan fuera de la pantalla, revelando el contenido.

Aunque presenta un diseño único, funciones como el desplazamiento funcionan exactamente como cabría esperar.

Puedes ver más influencias editoriales en el complejo sistema tipográfico que el diseñador creó aquí: titulares grandes y pesados contrastan con las finas serifas del cuerpo de texto. Existe una jerarquía visual clara de la información. Los párrafos iniciales están compuestos en un tamaño mayor, mientras que los márgenes consistentes y el amplio espacio en blanco permiten que la vista "respire" entre los elementos. El resultado es una historia que no solo es legible, sino que da gusto leer. Es el uso del espacio en blanco hecho a la perfección.

Lo que puedes aprender de este diseño de estilo editorial

Si rompes con la tradición en un aspecto de la experiencia, mantente fiel a ella en otro. No todo tiene que ser completamente único. Los usuarios necesitan pistas sobre cómo usar tu interfaz sin complicaciones, y los enfoques tradicionales proporcionan esas señales, reduciendo la carga cognitiva.

El diseño de movimiento puede ayudar a proporcionar "affordance" —indicaciones sutiles del comportamiento previsto— para reafirmar cómo funciona la interfaz.

Por muy creativo que te pongas, recuerda que el contenido es el rey. El propósito principal del sitio sigue siendo la publicación de contenido editorial fácil de digerir. No permitas que el diseño reduzca la legibilidad.

Diseño n.º 3: La navegación como arte en el sitio personal Species in Pieces

Nuestro diseño final, Species in Pieces, ofrece una experiencia rica, repleta de animaciones CSS y patrones de interfaz inusuales, a la vez que crea conciencia sobre las especies en peligro de extinción.

Al ser un proyecto personal, el diseñador tuvo la libertad de construir una experiencia inmersiva y emocional, no impulsada por la necesidad de conversión. Es un lujo poco común, y uno que el diseñador y desarrollador Bryan James aprovechó al máximo.

Sin embargo, seguir este camino exploratorio puede significar arriesgarse a que los usuarios se frustren y se pierdan. Es una decisión creativa que no puedes tomar a la ligera.

Céntrate en "una sola cosa" en cada página

El diseño del sitio destaca por su simplicidad relajante. Todo el contenido está contenido en un visor estático y horizontal.

La transición hipnótica, reforzada por el movimiento, de una especie a la siguiente se convierte en el foco central de cada interacción en pantalla. Por lo tanto, la información secundaria se oculta tras las opciones de navegación. Esto permite que las ilustraciones brillen de verdad, capturando toda tu atención.

La experiencia total atrae al usuario con simplicidad y luego lo anima a explorar niveles de mayor complejidad.

Por qué funciona este patrón de navegación

La innovadora navegación de este sitio funciona porque respeta el hecho de que las personas se desplazan instintivamente para navegar por una página web: cuando un usuario se desplaza hacia arriba, se activa la animación de transición anterior. Cuando se desplaza hacia abajo, se activa la siguiente animación.

En otras palabras, el sitio se adhiere a las expectativas básicas de navegación web en lugar de subvertirlas. Sí, este diseño es único, pero eso no significa que vaya a dar problemas cuando intentes interactuar con él de la forma en que ya estás acostumbrado. En resumen, los patrones de comportamiento comunes se ven recompensados con un resultado único.

Lo que puedes aprender de este sitio web experimental

Cuanto menos te sientas obligado a vender un producto o servicio, más puedes experimentar. Considera crear un concepto o sitio artístico para romper moldes y ganar notoriedad.

Las migas de pan cobran fuerza cuando el sistema de navegación se sale de lo tradicional. Así que deja bien claro dónde está el usuario en todo momento para que no se pierda.

Por muy experimental que seas, no debes perder de vista los patrones tradicionales; al fin y al cabo, estás creando un sitio web, no un juego ni una aplicación. Al alterar el comportamiento esperado de forma predecible, el experimento resulta mucho más exitoso.

Diseño adicional: la espiral áurea como cuadrícula y modelo de interacción

Otra pieza de arte navegacional que surgió a mediados de 2017 es el portafolio de Nick Jones. Al igual que Species in Pieces, el diseño de Nick hace un uso brillante de animaciones CSS experimentales y patrones de interfaz poco convencionales.

Jones describe su inspiración para este sitio como «lo que habría hecho [Karl] Gerstner si hubiera tenido CSS», y personalmente creo que dio en el clavo. Se nota que su trabajo de diseño gráfico y tipográfico también tiene un estilo al estilo Gerstner.

Aunque los diseños experimentales son fantásticos para mantener la creatividad personal, por lo general es mejor emplearlos en aplicaciones no comerciales. Dicho esto, como diseñador es increíblemente importante experimentar siempre en áreas en las que no te sientas cómodo; ayuda a mantener una perspectiva creativa al crear sitios más «funcionales» para productos y servicios.

El enfoque artístico del diseño

El debate sobre la relación entre el arte y el diseño parece no tener fin —y dejaré que ustedes lo continúen en los comentarios—, pero definitivamente considero que esto es una obra de arte.

Como este sitio es un portafolio, Jones podría haber logrado sus objetivos de muchas otras formas más convencionales, pero creó algo que mucha gente nunca había visto antes y que parece ser una verdadera expresión de sí mismo. Y creo que cuando creas algo para expresarte sin sacrificar nada por objetivos (o clientes), es arte.

Por qué funciona este diseño de portafolio

Aunque Nick ha creado una verdadera pieza de arte digital, no conectará con todos los clientes potenciales. Dicho esto, es un ejemplo estelar de un diseñador que muestra a futuros clientes o empleadores el tipo de trabajo que quiere hacer. Lo cual, si aún no lo has aprendido, puede ser una de las cosas más importantes que puede hacer tu portafolio. El tipo de clientes a los que no les guste este sitio probablemente tampoco sean personas con las que él disfrutaría trabajar.

Lo que puedes aprender de este portafolio experimental

Aunque los diseños experimentales no sean la mejor opción para clientes o empleadores, es importante realizarlos en tu tiempo libre para mantener la creatividad fresca.

Usa tu portafolio público y tus diseños para mostrar a los clientes potenciales qué tipos de trabajo quieres realizar.

Diviértete siempre al diseñar. Todavía estamos en la era pionera de la creación de arte para un nuevo mundo digital. ¡Explora y disfruta!

Recapitulemos: cinco consejos para crear tu propio diseño único

Incluye pistas de navegación

Si vas a experimentar con un diseño web único, tu interfaz de usuario debe dejar claro cómo interactuar con ella. Esas pequeñas animaciones del tipo «Oye, ¿es esto lo que buscas?» proporcionan pistas visuales que guían a los usuarios a través de experiencias poco familiares. Con una sencilla animación de rotación o desvanecimiento, puedes aumentar la confianza del usuario aportando claridad.

Transformicons utiliza animaciones sencillas para mostrar el estado de un icono de menú.

Nunca pongas en riesgo la adaptabilidad

Un diseño único no sirve de mucho si no se puede disfrutar en todas partes. Como cada vez más usuarios acceden a los sitios web desde sus móviles, piensa en cómo se verá tu diseño en cualquier pantalla, desde un escritorio panorámico hasta un iPhone. (Además, no querrás que te penalicen por crear algo genial que no sea adaptable).

Los diseños únicos nacen de una inspiración única

Todos buscamos inspiración en la web. Es donde pasamos 8 horas o más cada día. Webflow Showcase y Awwwards son mis favoritos. Pero si quieres ser realmente original, tienes que buscar inspiración en todas partes.

Inspírate en el patinaje sobre ruedas, en paquetes de semillas antiguos o en el arte de Barbara Kruger. En serio. Nadie más tiene tus mismas influencias ni experiencias, así que aprovéchalas.

Falla a menudo. Falla rápido. Falla mejor.

Al ver el portafolio de un gran diseñador, es fácil desanimarse. Al fin y al cabo, solo ves la animación de interfaz final y elegante.

No ves la carpeta de archivos descartados llena de ideas increíbles rechazadas por el cliente y decenas de experimentos a medio terminar. Por algo se llama proceso de diseño.

Personalmente, mi primera idea rara vez es la mejor. A veces, ni siquiera la quinta. Sin embargo, cada idea me acerca un poco más a una solución novedosa. Y te diré algo con total sinceridad: algunas de las ideas con las que me he topado en caminos que parecían callejones sin salida han terminado definiendo mi carrera.

No confundas a la gente

La originalidad es clave para un diseño impactante, pero recuerda que, en general, no estás creando una obra de arte contemporáneo. Estás creando un sitio web. El objetivo no es confundir ni desafiar a los usuarios, sino ofrecerles contenido de una forma interesante.

¿Cuál es el sitio más loco que has visto?

Nos encantaría ver tus diseños favoritos. Cuéntanos por qué te gustan y presume de tus propias creaciones en los comentarios.