Tetsuo Portfolio and Creative Industry Theme: A Case Study
January 14, 2022
About the Project
Tetsuo 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.
The Approach
With each new theme, we challenge ourselves to create authentic solutions that are unlike anything we’ve 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.
With Tetsuo, a portfolio and creative industry theme, our goal was to devise a somewhat alternative design solution and create a portfolio theme 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.
These 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.
The Design
The 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 “Akira”. 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’ 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’s Homepage) or to mark the transition from one slide to the next (e.g., the Fullscreen Slider layout). The touch of orange on a dark interface gave the theme an incandescent futuristic glow, typical of cyberpunk works.
As a way to give users a wider stylistic range, we designed Tetsuo in two modes – 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’t 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.
We wanted Tetsuo to reflect all the major ideas of the cyberpunk genre. Aside from “Akira”, we drew inspiration from other magnificent cyberpunk works as well, including the movies “Blade Runner”, “2001: A Space Odyssey”, “Jin-Roh”, and “Matrix”, the games “System Shock”, “Deus Ex”, and “Ruiner”, the manga “Ghost in the Shell” and “Gantz,” as well as the remarkable artist Ash Thorp. All our inspirations were set in vivid, intricate sci-fi universes and we knew we wanted to achieve a similar aesthetic in our theme. However, we had to keep in mind the fact that a too complex interface could have a negative impact on the user experience and drive visitors away. So instead of creating a theme that’s entirely engulfed in colorful, detailed, sci-fi graphics, we decided to go for a more simplified interface.
We imbued the layouts with the works of some phenomenal artists that create authentic, striking, and futuristic artworks, such as Vladislav Ivanov, Seryozha Parshakov, Tano Bonfanti, Artem Lutay, R▲, Kristoffer Brady, and Vladimír Vilimovský. They were all kind enough to allow us to feature their art on Tetsuo, which helped root the theme in such a bold cyberpunk aesthetic. For instance, on the Fullscreen Slider page, we used an Artem Lutay piece depicting a dark, mystic cybercity with lots of neon signs. We wanted our viewers to feel the bustle of the futuristic metropolis but also the dystopian atmosphere of a Philip K. Dick novel. To create a fully immersive experience, we displayed the imagery across the entire screen.
Regarding the typography, we immediately knew we wanted to go for sans serif fonts. We looked for geometric, condensed typefaces similar to those typically used in cyberpunk video games. When it came to designing the theme’s logo, we tried out lots of terrific typefaces until we eventually settled on the simple yet bold Google font called Anton. The letters look thick, raw, and robust. We used them in all-caps, which further enhanced their futuristic appeal. For menu items and headlines, we chose the Rajdhani typeface. The straight letter forms have slightly rounded corners making the letters easier on the user’s eye. Because of that, this font was the perfect choice for titles, especially in sections with longer headings. And lastly, for body text, we used the Roboto Condensed typeface since we loved its rigid and futuristic style.
The text throughout Tetsuo is colored plain white i.e. black depending on the skin you choose to view the theme in. No matter which mode you use, great readability is guaranteed. In general, we didn’t want to go too wild in terms of typography colors – we saved that for the visuals. It was paramount we kept vibrant graphics, to express the theme’s cyberpunk character in all its neon glory.
To further immerse viewers into the exceptional world of Tetsuo, we added the possibility of playing background music while exploring the layouts. We selected dark synthwave melodies in the style of Carpenter Brut to further amplify Tetsuo’s sci-fi character and make our users feel like the protagonists of their own cyberpunk narrative.
The Animations
The animations in Tetsuo were carefully selected to enhance the theme’s sci-fi atmosphere. The most prominent effect of them all is the digital glitch effect, visible in the theme’s logo at the top of every page. The distorted imagery and typography underline the frailty of technology and society, and are widely used in rebellious and political art, making the glitch effect the ideal choice for Tetsuo.
Another striking feature we added to the theme is the exciting hover effect that splits letters in half. We applied it to menu items as well as project titles. A similar typographic solution can be seen on the Blade Runner graphics, and we deliberately chose this effect to pay homage to the iconic movie.
Elsewhere on the site, we didn’t go overboard with the effects. The visuals are vibrant and striking enough on their own so we decided to let their stunning appearance do all the talking. We were more interested in allowing users to share their portfolios in imaginative and striking ways, which is why we added the Fullscreen Slider, Project Reel, and Scroll Showcase templates with the infinite loop effect. In some cases, we applied a subtle zoom-in hover effect to project previews, as seen on the Pinterest Portfolio page. On the Animated Showcase page, the parallax effect makes project previews appear to be moving for a few moments even after viewers stop scrolling. The subtle motion amplifies the eerie and suspenseful atmosphere of a dystopian landscape and makes project presentations all the more immersive.
Conclusion
Tetsuo is a cutting-edge, riveting portfolio theme that converges the light and the dark, the familiar with the unknown, the neutral with the edgy, and the peaceful with the untamed. Its enrapturing appearance takes users on an adrenalin-fueled journey through engrossing futuristic terrains, evoking the spirit of a true dystopian work of art.