{"id":2375,"date":"2019-10-11T15:30:09","date_gmt":"2019-10-11T13:30:09","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=2375"},"modified":"2020-12-16T13:38:45","modified_gmt":"2020-12-16T12:38:45","slug":"qode-catalog-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/qode-catalog-case-study\/","title":{"rendered":"Qode Interactive Catalog: 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\tQode Interactive Catalog is a curated compilation of creative WordPress themes designed by Qode Interactive with the aim of showcasing an original approach to contemporary web design in a streamlined fashion. The compiled themes share distinct aesthetic features inspired by various forms of art, all framed inside the Catalog\u2019s minimalist, modern context. \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
<\/div>\n

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

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

Site of the Day \u2013 Awwwards<\/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

Mobile Excellence – Awwwards<\/u><\/a><\/span><\/h3>\n

<\/h3>\n

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

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

Developer Award – Awwwards<\/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

Website of the Day \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

UI\/UX\/INN Award – 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

Webpicks – Communication Arts<\/u><\/a><\/span><\/h3>\n

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

\n\t
\n\t\t
\n\t\t\t
\n\t
\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\tFrom the onset, it was clear that we wanted the Qode Interactive Catalog<\/a> to be a showcase of all the bold, innovative directions a WordPress theme could be taken in. An exhibition, so to speak, of just how creative a theme could get. The fact that we already had an extensive back catalog of themes<\/a> certainly was an advantage in itself. But it also brought on one of the major challenges we faced while working on this project.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThe first dilemma surfaced during the process of theme selection. In the early stages, the number of themes we chose to focus on was well over 20. But upon taking a closer look at this collection, we realized that it was, perhaps, too much. Too many of the themes were competing with each other in terms of both design and functionality. This is when it became apparent that we needed to trim down the number of showcased themes and keep the emphasis only on the design aspects we wanted to put in the spotlight.\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 \"The <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tThis led to the cornerstone decisions in terms of the Catalog\u2019s design \u2013 we would focus on a toned down, monochromatic style, and typography would be the linchpin that brought everything together into a compact, unified whole.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThe main underlying trait of all the themes in the Catalog is their subtle reliance on elements inspired by or borrowed from different forms of visual art, be it classical or modern. This prompted us to figure out the most appropriate way to create individual theme presentations, and the smooth, horizontally scrolling, animation-rich layouts of the Catalog came to us rather naturally.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”30px”]
\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 main navigation page of the Catalog, or effectively the theme list, went through several stylistic revisions. It started off as a carousel slider, then morphed into an interactive slider with large theme previews popping up when a theme was selected, and after some further refinement and tweaking it grew into a minimalistic, interactive list which displays handpicked elements from each of its themes on hover.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”61px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n\t
\n\t\t
\n\t\t\t
\n
\n \"1\" <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div>
\n\t
\n\t\t
\n\t\t\t
\n
\n \"2\" <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n\t
\n\t\t
\n\t\t\t
\n
\n \"\" <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div>
\n\t
\n\t\t
\n\t\t\t
\n
\n \"4\" <\/div>\n<\/div>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”59px”]
\n\t
\n\t\t\t\t\tThroughout this discovery process, the overarching concept behind Qode Interactive Catalog remained true to our original vision. The final version of the Catalog\u2019s home page is predominantly typographic, centered around the simple, yet distinct, Heebo font family. By combining drastically large font sizes and animated details (e.g. large theme names with significantly smaller descriptions scrolling below them), we imbued the page with some additional playfulness and created an interface that would engage viewers.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n\t
\n\t\t
\n\t\t\t
\n\t