{"id":27921,"date":"2021-08-06T15:00:01","date_gmt":"2021-08-06T13:00:01","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27921"},"modified":"2022-01-14T10:31:56","modified_gmt":"2022-01-14T09:31:56","slug":"tetsuo-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/tetsuo-case-study\/","title":{"rendered":"Tetsuo Portfolio and Creative Industry 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\tTetsuo is a bold contemporary portfolio theme with a striking visual identity. Its overtly dark, futuristic aesthetics rely heavily on imagery inspired by various artforms and works of fiction with pronounced dystopian vibes. \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 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

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

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

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

\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\tWith each new theme, we challenge ourselves to create authentic solutions that are unlike anything we\u2019ve done in the past. We encourage our creatives to express their artistry and let their specific sensibilities and styles shine through each project. This approach lets us offer authentic themes to our audience and satisfy even the most unique tastes.
\n\t\t\t<\/div>\n<\/div>[vc_empty_space height=”37px”]
\n\t
\n\t\t\t\t\tWith Tetsuo<\/a>, a portfolio and creative industry theme, our goal was to devise a somewhat alternative design solution and create a portfolio theme<\/a> with an attitude. We wanted it to be futuristic looking yet permeated with some well-recognizable components. With that in mind, the choice of a color palette came naturally – we opted for neon and black colors. We wanted to counteract the edginess of the former with the inscrutability of the latter. We decided that the best way to create such an eclectic, wild aesthetic that simultaneously felt familiar was by imbuing the theme with cyberpunk and manga motifs.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n
\n \"Tetsuo <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tThese two styles are known for their striking, boundlessly imaginative art and recognizable characteristics. We wanted to dive deep into their roots, experiment with their unique elements, and combine them into a distinct canvas for showcasing portfolio projects.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”35px”][\/vc_column][\/vc_row][vc_row][vc_column]
\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 poster that started it all and inspired the look of the entire theme depicts the explosion seen at the beginning of the iconic cyberpunk manga \u201cAkira\u201d. We wanted Tetsuo to mirror the full force of that poster and carry the same sort of gravitas, so we initially decided to use a predominantly black and red color palette. However, we quickly realized that that combination might be a touch too intense for viewers\u2019 eyes, especially when paired with the bold, white typography. To avoid overwhelming the users with strong visual stimuli, we decided to tone the colors down a bit and opted for orange instead of red. For instance, menu items as well as some headings, logos, and titles become orange on hover, contrasting the darkness of the black background. We also added straight orange lines to layouts, be it to separate the footer from the rest of the content on a page (as seen on the theme\u2019s Homepage<\/a>) or to mark the transition from one slide to the next (e.g., the Fullscreen Slider<\/a> layout). The touch of orange on a dark interface gave the theme an incandescent futuristic glow, typical of cyberpunk works.\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 \"Tetsuo <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tAs a way to give users a wider stylistic range, we designed Tetsuo in two modes \u2013 light and dark. In case someone prefers a softer interface with a white background, they can use the color switcher to activate the light mode, which will invert the colors of the backdrop and typography. All other elements on the theme will remain unaffected by the switch. The white background does take a bit of the ambiguity away from the theme, but it doesn\u2019t lessen its strong sci-fi character. While the dark backdrop amplifies the gritty feel of a dystopian landscape, the light background mirrors the look of clean, shimmering surfaces of futuristic technologies.
\n\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