Manon Portfolio Theme: A Case Study
January 14, 2022
About the Project
Manon is a contemporary portfolio theme with a strong, highly recognizable sensibility. Intense, contrasting and daring, Manon’s aesthetic is based on three conceptual pillars: strong typography, minimalism and dynamicity.
The Approach
Here at Qode Interactive, when it comes to theme design, we tend not to settle. Visual experimentation is very important for us, so we try to always push the envelope, research and test out different approaches. Manon was no exception. With this theme, we wanted to create a strong, typography-driven portfolio theme. Such a theme, of course, would have to be spacious and airy enough to allow the works to breathe, which is a rather challenging task.
The inspiration for the solution came in the form of a circle, a dynamic geometric shape that brought in the necessary breathing space. Juxtaposing the delicate sensibility of the circle to the bold typography used throughout created a powerful and balanced interface. The resulting design was just what we intended to achieve from the start: a powerful, crisp and modern portfolio theme. Flat in its nature, reduced in its palette, Manon successfully complements and reinforces the works it displays.
The Design
The process of bringing our concept to life started with the choice of fonts. A theme that is going to be heavily typography-centric needs fonts that are absolutely on the mark. In the research and ideation phase, we found bold sans serif fonts to be the most suggestive and impressive. We were also drawn to fonts from the condensed family. We wanted them to have a strong, distinct character. The one font that clicked with us right away was Oswald. Powerful and instantly recognizable, it became a logical choice.
The choice of font influenced the choice of content that we were going to use as well. The featured works had to be just as bold as the typography, otherwise they would get drowned out or pushed to the wayside.
As we filtered the works, our focus was on a predominantly black&white palette, sprinkled with fresh, intense colors for contrast and accent.
Such choice of visual content might otherwise turn out to be too intense in voice and character, but we toned it down by applying a minimalist, spacious, simple and flat approach to the interface design.That way, the users can intuitively focus on the displayed works and consume them with ease.
Our early moodboard contained various points of inspiration and one of them was this subtle, thin, circular line. Playing with this circle and juxtaposing it with other, more intense design elements brought forth a very strong contrast. This effect was something we felt was quite suggestive, so we decided to use it throughout the theme.
By further investigating the effect of this circular line, we decided to create a group of other discrete elements that would serve as counterweight to the bold typography and intense imagery. Paragraphs, info and category text in fine Open Sans type, circular footers and navigation items in the form of thin lines and tiny black circles gently leading the visitor through the page – all these belong to this counterbalancing group of elements we created.
But Oswald kept inspiring us, so we experimented with it some more. That’s how we reached the imposing outline type used for the intro on the landing and several other pages. It turned out that this outlined text, despite its formidable character, helped enhance the balance we were striving for and worked perfectly with the other linear elements of the theme.
The continuous interplay between loud and quiet, bold and subtle, proved to be the main character trait of Manon, and we understood it was something that needed to be further explored and polished to perfection.
The next step in the design process was to define the layout structure. We decided to go for an asymmetrical grid, which worked great with the existing elements and allowed for enough white space. This “breathing room” proved essential, unburdening the interface from the weight of typography and visual content. It also pulled the subtle lines, dots and circles to the foreground, enriching the entire experience.
For final touches and a bit of finesse, we decided to make the cursor an integral part of the entire design concept. Following the leitmotif of the circle, we designed a playful and refined interactive dot with micro-animations that bring a much needed dynamic to the entire user experience.
The imperative of balance that was established early on influenced the design of the buttons as well. We made one button imposing and rich, and the other circular and airy. Along with the simple button, these two offered enough variety and could be used as needed anywhere in the theme.
The Animations
The animations used in Manon were devised with two goals in mind – to complement the minimalistic design by adding dynamicity, and to refine the user experience.
One of the things that first catch the eye upon loading Manon is the use of custom cursors we mentioned earlier. The SVG circle element was added to the DOM to improve UX, informing the user of the possible interactions. When the user clicks on a link to another page of the site, the cursor starts to pulsate, indicating page loading. Animation as a UX tool was a logical choice here, since Manon uses a very minimalistic palette and using colors for indicating interactions was not an option, at least not an elegant one.
Certain pages could still use the precious balance we achieved elsewhere, so we decided to add the SVG circles to them too. These circles, as a recurring element appearing throughout the theme, are also a significant UX element. They help the buttons stand out and be more noticeable, subtly and smartly drawing the user to interact with them.
Similarly, we made several icons appear on hover, indicating an available action. And to make these elements more prominent, we rendered them using a difference blend mode, achieving a contrast with the DOM structure.
For hover animations, we used a distinct set of text and image animations that reveal elements first from a skewed perspective, then gently fading in until reaching their final position.
In order to enrich the visual experience of Manon, we added parallax movement and inertia scrolling, as well as magnetic elements in which the buttons are drawn to the cursor position when the pointer is moved in their direction.
We also used animation to make our custom portfolio layouts really stand out: for instance, in the Stacked Portfolio layout, the elements stacked upon each other are revealed depending on the user wheel interaction. The Horizontal Portfolio is a tailor-made horizontal scrolling list that can be viewed either fullscreen or as a part of the normal DOM flow.
We wanted some of the animations to be strong statement elements of the design. For instance, the Portfolio Minimal homepage opens with a massive loading text that transforms into a more subtle, but integral part of the content, remaining at the very top of the page. On the other hand, we kept the rest of the animations on that homepage subtle and strictly functional.
This brings us right back to the intentional and precise balancing act that lies at the core of Manon. Weaved throughout the theme, it’s this rhythmic interchange between tension and harmony – carefully maintained in every single aspect, every minute detail of the design– that lends Manon its undisputed and instantly recognizable character.