Showcasing a happy blend of gaming and web capabilities.
With the majority of my historical experience being in web, but my current focus being on gaming, I wanted to craft a case study that combined the two into a portrayal of vision and capability in terms of UI. This led to a fictional game world that allowed me that opportunity: The Vael. A world that allows for you to experience it, without being in combat, and without: finding peace, exploration, or simply a moment of still. What better way for me to build UI elements that would carry over into an in-game interface, while demonstrating story, flow, and general web understanding.
This was a fun one. Step through some of my project intentions below, or skip straight to the concept images here.
View Full Concept
Project Intention
Create an impactful presentation
The reason for crafting this was predominantly for my love of both web and gaming, but also to create an impactful experience that could translate further into either: in-game interface design, or further development of public/private web development.
Skills & Tools
- UI
- Figma
- Photoshop
Create An Experience
High-level story fabrication left much creativity to the layout. The goal was to create an experience first and foremost, and worry less about the actual content for this exercise (but still the “type” of content).
Show Understanding
I wanted to ensure to demonstrate how effective call-to-actions can be structured, how storytelling keeps a user engaged, and how the flow of styles is important to retain interest and usability.
Creative, But Usable
Creative doesn’t necessarily mean abstract. This design is intended to walk a line of functional and fun, and include a variety of elements that break outside of the standard without breaking the brain.
Sketches and definitions
I always start with my most open-ended tools: pen and paper. Sketching, visualizing, and high-level planning are necessary to make sure I’m going in the right direction. With a direction envisioned, this followed by defining base style standards for the “Vael” concept, including colors and typography. Beyond this, I dug straight into the canvas to begin employing my sketches and definitions in a creative round of drafting. The final outcome is portrayed below.
Impact and awe
The initial goal upon landing: impact. My intention was to rope the user in, present them with something unique yet familiar, harness the power of video and movement, and solidify that impact with big, bold typography. They should want to see all of the slides, and dig deeper within the site.
Engagement and splendor
Further down the landing page, I continue to focus on keeping the user engaged with overlapping elements, subtle transitions and textures, and unique containers that provide some opportunity to present new information for users that haven’t delved deeper into the planned website.
A satisfying story
When all was said and done, I was pleased with the way that the entire piece came together. The initial message provided, the story that was told along the way, the row-to-row flow, and the demonstration of the initial vision was just a sliver of what I would envision for the rest of a project like this.
See it live on Figma