UX Portfolio Mockup

Inspiration

Colors

When planning the mockup of my site, I wanted the design to represent my interests. I’ve always enjoyed a genre of music called Vocaloid, and the stylistically distinct music videos (MVs) associated with it have greatly influenced my art and style. I created this mockup during my freshman year, and at the time, there was a song by Syudou that I really enjoyed. In that MV, the artist Yasutatsu used a striking combination of yellowish-greens, red, and grays, and I was particularly drawn to those hues. I wanted to bring that visual intensity into my site. Around the same time, I was really into a game called Valorant and appreciated the character design of Gekko, which utilizes greens and purples. To combine these influences, I chose purples and greens from Gekko and accented them with the red and grays from the MV to achieve the kind of boldness and energy that I admire from the two.

Typography

So, from my interest in Valorant, I wanted to convey my interest in video games, and decided on Redaction, a pixelated font. I wanted to experiment with ways to incorporate this into the site’s typography, so I tried mixing a sans-serif font with Redaction. I’m a big fan of Helvetica Neue, so I decided on a font within that family, Neue Haas Grotesk Pro.

Iconography

To reinforce the gaming theme, I used the MV’s red for a retro video game health bar to visualize my skills in the resume section. I also drew a self-representative character in Yasutatsu’s style from the MV.

The mockup iterations evolved into something that I felt truly represented me, with bold colors and a good amount of contrast. At some point, I will create another mockup, as I’m now an upperclassman. My end goal is to create a product with a more timeless feel that I will eventually code from scratch.

Mockups