{"id":5018,"date":"2020-02-28T12:40:46","date_gmt":"2020-02-28T11:40:46","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=5018"},"modified":"2022-01-14T10:30:21","modified_gmt":"2022-01-14T09:30:21","slug":"manon-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/manon-case-study\/","title":{"rendered":"Manon Portfolio Theme: A Case Study"},"content":{"rendered":"

[vc_row][vc_column][vc_empty_space height=”3px”]

\n\t
\n\t\t\t\t\t<\/p>\n

About the Project<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tManon is a contemporary portfolio theme with a strong, highly recognizable sensibility. Intense, contrasting and daring, Manon\u2019s aesthetic is based on three conceptual pillars: strong typography, minimalism and dynamicity.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n\t
\n\t\t\t\t\t<\/p>\n

Awards:<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\t<\/p>\n

Best Innovation \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Best UI Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Best UX Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Special Kudos \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”55px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]

\n
\n \"Manon\" <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”49px”]
\n\t
\n\t\t\t\t\t<\/p>\n

The Approach<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tHere 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<\/a> 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThe 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<\/a>. Flat in its nature, reduced in its palette, Manon successfully complements and reinforces the works it displays.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n
\n \"Manon <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”50px”]
\n\t
\n\t\t\t\t\t<\/p>\n

The Design<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tThe 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThe 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tAs we filtered the works, our focus was on a predominantly black&white palette, sprinkled with fresh, intense colors for contrast and accent.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tSuch 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tOur 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”59px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n
\n \"Manon <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tBy 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 \u2013 all these belong to this counterbalancing group of elements we created.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tBut Oswald kept inspiring us, so we experimented with it some more. That\u2019s 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThe 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.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n\t