UltraViolette Portfolio Theme: A Case Study
December 16, 2020
About the Project
UltraViolette is a portfolio WordPress theme with an aesthetic evocative of digital dreamscapes and perfect for displaying contemporary design projects and artwork.
The Approach:
When we start working on a new portfolio theme, we tend to ignore market research and sales data. The goal here is to avoid overanalyzing the statistics or letting them inform our creative process. Instead, we approach each portfolio theme as a blank canvas. A playground for our designers to experiment in.
We have 25 professionals with diverse backgrounds on the Qode Interactive design team. Web and graphic designers, UX and UI experts, painters, concept artists, industrial designers, photographers, and fine arts graduates – all of them have specific tastes and artistic tendencies. And when we’re creating what’s, at its core, a showcase of creativity, we want those tendencies to guide us. We encourage originality and innovation and invite each designer to create the type of theme they would use to present their own work. This approach ensures each portfolio theme that comes out of our workshop is unique in its own way – a small work of art that reflects the idiosyncrasies of its creator.
With UltraViolette we set out to create an imaginative, almost dreamlike digital terrain suitable for showcasing contemporary projects.
The Design:
The genesis of UltraViolette can be observed in its atypical color palette. From the very beginning, we knew we wanted to experiment with shades of purple and pink – hence the theme’s name.
Purple, as one of the least common colors in nature (and the color with the highest frequency in the rainbow), has an unmistakable supernatural quality. Its connections to royalty, spirituality, and wisdom give it powerful historical and symbolic connotations. This is evident in its strong presence throughout the history of the visual arts, as each generation is repeatedly drawn to its mystical glow.
Pink, on the other hand, is a tender color. As the symbol of youth and hope, it is in direct contrast with the strength and forcefulness of purple. When combined, these two hues create a very distinct atmosphere. One that’s both calming and dynamic – a fusion of opposites found only in the imaginative landscape of dreams and visions.
As soon as we had our two main tones pinned down, the rest was a matter of fine-tuning the intensities and values until a full color scale emerged. Despite the innate energy and vitality of the main colors, we decided to tone down the palette to create that gentle, otherworldly quality that permeates UltraViolette. This intense, yet somehow simultaneously soft palette is contrasted with large, spacious areas that give the composition room to breathe.
The next step was deciding on a dominant shape. Here, the choice was fairly simple. The circle is the softest and most dynamic form. It’s also a symbol of infinity, timelessness, and unity, which fits perfectly with the theme’s mystical tendencies. UltraViolette’s characteristic floating circles are accompanied by purple floral elements that enhance the sense of mystique. And the addition of abstract 3D shapes lends a raw, digital quality to the theme.
We soon noticed that our layouts were extremely smooth, but lacked a contrasting element. We knew this contrast had to come from the details of the interface. Since we wanted to create a tactile experience, we decided to make these details dark and heavy. This provided a much-needed sense of physical presence to the theme. The prominent lines that slice through the airy layouts on hover. The strong sans-serif typography (a combination of the bolder, condensed Bebas and the clear-cut Muli fonts) that brings a sense of clarity to the dreamlike atmosphere. The sharp, black icons that draw the eye. All these elements work together to ensure the theme doesn’t drift too far off into the world of the intangible.
The Animations:
The animations in UltraViolette enhance the theme’s surreal and ethereal qualities. Just take a look at the levitating elements that float gently through the parallax backgrounds. Or the theme’s soft, almost dreamy slider transitions.
But it’s in the strange balancing act between gentle animations and sharper effects that UltraViolette finds its unique rhythm. From the more obvious effects like the gently swirling colors within the theme’s circular shapes, all the way down to barely perceptible micro-interactions like the transformation of the soft circle into a sharp “plus” symbol when buttons are hovered on – each soft animation is offset by a sharper, more drastic one.
This approach is evident throughout the theme. On the one hand, we have things like the slow change of background colors as users scroll through certain pages (inspired by the shifting hues of the rising sun). On the other hand, there’s the brisk stretching of images as they enter the viewport or the fluid movement of the SVG handwritten signatures. What’s important here is that nothing is too obvious or too aggressive. It’s this careful blend of smooth and precise motions that brings UltraViolette fully to life.