Kyle Pensa VO
The Project
This is a portfolio style website to house the Client’s demo reel and photos. He wanted sci-fi inspired designs paired with a vibrant color scheme to set his website apart from others in the market. The goal was to communicate what he does (voice acting) and what niche he occupies (animation and games) through the highly illustrative designs.
Skills
Visual Design, UI/UX Design, Web Design, Illustration
Tools
Photoshop, Adobe XD, Webflow, HTML/CSS
Visual Design
I began the project by collecting design inspiration and compiling references provided by the client into a mood board. I sorted these references into two main themes: Retro and Brutalist Sci-Fi, the goal being to find common ground between the two styles.
Once the visual direction was established I moved on to sketching ideas, narrowing down the style further. To keep the project on schedule I chose to create 3 thumbnails, each one exploring a distinct stylization.
The client wanted a neon color scheme that would contrast with the black background. A complimentary color scheme of turquoise and orange was chosen, allowing visual elements to stand out against one another while still maintaining harmony within the overall design.
Lo-Fi Design
Next I wanted to understand the visual hierarchy of the different pages, so I began sketching out rough ideas for the UI designs that would then be used to create the lo-fi wireframes.
Landing Page Wireframes
The landing page was planned to be the central focus of the website, with the demo section displayed front and center. After exploring several iterations of potential designs, we settled on the design that prioritized the demo as the first thing a user sees when viewing the website for the first time and built out the rest of the layout from there.
Bio UI Wireframes
Within the landing page is a bio section where I was given free reign to create a sci-fi style HUD that would contain the client’s biography and personal info.
Bio UI Iteration #1
Bio UI Iteration #2
Hi-Fi Designs
Once I was confident we had a solid design that addressed the Client’s main pain points I began polishing the wireframes, applying visual design elements established earlier in the project throughout the interfaces.
