Lanzar sitio web
Manon es un tema de portafolio contemporáneo con una sensibilidad fuerte y altamente reconocible. Intensa, contrastante y atrevida, la estética de Manon se basa en tres pilares conceptuales: tipografía fuerte, minimalismo y dinamismo.
Premios:
Mejor innovación - CSSDA
Mejor diseño de interfaz de usuario: CSSDA
Mejor Diseño UX - CSSDA
Felicitaciones especiales - CSSDA
El enfoque
En qode Interactive, cuando se trata de diseño de temas, tendemos a no conformarnos. La experimentación visual es muy importante para nosotros, por lo que siempre intentamos ir más allá, investigar y probar diferentes enfoques. Manon no fue la excepción. Con este tema, queríamos crear un tema de portafolio sólido e impulsado por la tipografía. Este tema, por supuesto, tendría que ser lo suficientemente espacioso y aireado para permitir que las obras respiren, lo cual es una tarea bastante desafiante.
La inspiración para la solución llegó en forma de círculo, una forma geométrica dinámica que trajo el espacio necesario para respirar. La yuxtaposición de la delicada sensibilidad del círculo con la tipografía atrevida utilizada creó una interfaz potente y equilibrada. El diseño resultante fue justo lo que pretendíamos lograr desde el principio: un tema de cartera potente, nítido y moderno. Plano en su naturaleza, reducido en su paleta, Manon complementa y refuerza con éxito las obras que exhibe.
El diseño
El proceso de dar vida a nuestro concepto comenzó con la elección de las fuentes. Un tema que va a estar muy centrado en la tipografía necesita fuentes que sean absolutamente acertadas. En la fase de investigación e ideación, encontramos que las fuentes sans serif en negrita son las más sugerentes e impresionantes. También nos atrajeron las fuentes de la familia condensada. Queríamos que tuvieran un carácter fuerte y distinto. La única fuente que nos llamó la atención de inmediato fue Oswald. Potente y reconocible al instante, se convirtió en una elección lógica.
La elección de la fuente también influyó en la elección del contenido que íbamos a utilizar. Las obras presentadas tenían que ser tan atrevidas como la tipografía, de lo contrario se ahogarían o quedarían en el camino.
Mientras filtramos las obras, nos enfocamos en una paleta predominantemente en blanco y negro, salpicada de colores frescos e intensos para el contraste y el acento.
De lo contrario, tal elección de contenido visual podría resultar demasiado intensa en voz y carácter, pero la atenuamos aplicando un enfoque minimalista, espacioso, simple y plano al diseño de la interfaz. De esa manera, los usuarios pueden enfocarse intuitivamente en lo mostrado. funciona y consumirlos con facilidad.
Nuestro primer moodboard contenía varios puntos de inspiración y uno de ellos era esta línea sutil, delgada y circular. Jugar con este círculo y yuxtaponerlo con otros elementos de diseño más intensos produjo un contraste muy fuerte. Este efecto fue algo que nos pareció bastante sugerente, por lo que decidimos utilizarlo durante todo el tema.
Al investigar más a fondo el efecto de esta línea circular, decidimos crear un grupo de otros elementos discretos que servirían como contrapeso a la tipografía atrevida y las imágenes intensas. Párrafos, información y texto de categoría en fino tipo Open Sans, pies de página circulares y elementos de navegación en forma de líneas finas y pequeños círculos negros que guían suavemente al visitante a través de la página: todos estos pertenecen a este grupo de elementos de contrapeso que creamos.
Pero Oswald siguió inspirándonos, así que experimentamos un poco más con él. Así es como llegamos al tipo de contorno imponente utilizado para la introducción en el rellano y varias otras páginas. Resultó que este texto delineado, a pesar de su carácter formidable, ayudó a mejorar el equilibrio por el que estábamos luchando y funcionó perfectamente con los otros elementos lineales del tema.
La interacción continua entre ruidoso y silencioso, audaz y sutil, resultó ser el rasgo principal del personaje de Manon, y entendimos que era algo que debía explorarse más y pulirse a la perfección.
El siguiente paso en el proceso de diseño fue definir la estructura del diseño. Decidimos optar por una cuadrícula asimétrica, que funcionó muy bien con los elementos existentes y permitió suficiente espacio en blanco. Este "respiro" resultó esencial, aliviando la interfaz del peso de la tipografía y el contenido visual. También llevó las líneas sutiles, los puntos y los círculos al primer plano, enriqueciendo toda la experiencia.
Para los toques finales y un poco de delicadeza, decidimos hacer del cursor una parte integral de todo el concepto de diseño. Siguiendo el leitmotiv del círculo, diseñamos un punto interactivo lúdico y refinado con microanimaciones que aportan una dinámica muy necesaria a toda la experiencia del usuario.
El imperativo de equilibrio que se estableció desde el principio también influyó en el diseño de los botones. Hicimos un botón imponente y rico, y el otro circular y aireado. Junto con el botón simple, estos dos ofrecían suficiente variedad y se podían usar según fuera necesario en cualquier parte del tema.
Las animaciones
Las animaciones utilizadas en Manon se diseñaron con dos objetivos en mente: complementar el diseño minimalista agregando dinamismo y refinar la experiencia del usuario.
Una de las cosas que primero llama la atención al cargar Manon es el uso de cursores personalizados que mencionamos anteriormente. El elemento de círculo SVG se agregó al DOM para mejorar UX, informando al usuario de las posibles interacciones. Cuando el usuario hace clic en un enlace a otra página del sitio, el cursor comienza a pulsar, lo que indica carga de página. La animación como herramienta UX fue una elección lógica aquí, ya que Manon usa una paleta muy minimalista y el uso de colores para indicar interacciones no era una opción, al menos no elegante.
Algunas páginas aún podrían usar el precioso equilibrio que logramos en otros lugares, por lo que decidimos agregarles los círculos SVG también. Estos círculos, como elemento recurrente que aparece a lo largo de la temática, también son un elemento significativo de UX. Ayudan a que los botones se destaquen y sean más notorios, lo que hace que el usuario interactúe con ellos de manera sutil e inteligente.
De manera similar, hicimos que aparecieran varios íconos al pasar el mouse, lo que indica una acción disponible. Y para hacer estos elementos más prominentes, los renderizamos usando un modo de mezcla de diferencia, logrando un contraste con la estructura DOM.
Para las animaciones flotantes, usamos un conjunto distinto de animaciones de texto e imagen que revelan elementos primero desde una perspectiva sesgada, luego se desvanecen suavemente hasta alcanzar su posición final.
Para enriquecer la experiencia visual de Manon, agregamos movimiento de paralaje y desplazamiento por inercia, así como elementos magnéticos en los que los botones se dibujan en la posición del cursor cuando el puntero se mueve en su dirección.
También utilizamos la animación para hacer que nuestros diseños de portafolio personalizados realmente se destaquen: por ejemplo, en el diseño de Portafolio apilado, los elementos apilados entre sí se revelan dependiendo de la interacción de la rueda del usuario. La carpeta horizontal es una lista de desplazamiento horizontal hecha a medida que se puede ver en pantalla completa o como parte del flujo DOM normal.
Queríamos que algunas de las animaciones fueran elementos de declaración fuertes del diseño. Por ejemplo, la página de inicio de Portfolio Minimal se abre con un texto de carga masiva que se transforma en una parte más sutil pero integral del contenido, permaneciendo en la parte superior de la página. Por otro lado, mantuvimos el resto de las animaciones en esa página de inicio sutil y estrictamente funcional.
Esto nos lleva de vuelta al acto de equilibrio intencional y preciso que se encuentra en el núcleo de Manon. Entretejido a lo largo del tema, es este intercambio rítmico entre tensión y armonía, cuidadosamente mantenido en cada aspecto, en cada pequeño detalle del diseño, lo que le da a Manon su carácter indiscutible e instantáneamente reconocible.
Lanzar sitio web