Home My Work About Me Contact
A screenshot showing a virtual interview taking place.

Vintage Story Showcase Prototype


Role

User Interface Designer

Tools

Figma
VSCode

Deliverables

Project Proposal
Prototype
This Page

Duration

2 months

Overview


I was tasked to develop an informational website prototype designed to inform or teach a new user. For my project, I chose to create a showcase website for an game called Vintage Story. I was expected to account for and use the many laws and principles of user interface design in order to guide my design. The prototype was expected to be accessible while educating the user on the features of the game.

Goals


Blend Aesthetics

Easy to Understand

Show Expertise

Process


Project Proposal

Before I started work on the prototype, I first made a project proposal that described how I would consider and implement the various laws and principles of user interface design. In the proposal, I explained how I planned to use each principle in my prototype. The link below will take you to a PDF of my project proposal.

User Interface Design Principles

Jakob's Law

Jakob's Law states that users both prefer and have an easier time navigating websites that work similarly to websites they have browsed in the past. In my project, I considered Jakob's Law by using a standard top-of-the-screen navigation bar, carousel elements, and hero images.

Spatial Contiguity Principle

The Spatial Contiguity Principle states that users learn better when images and text in a webpage are in close proximity, rather than far away. I applied this principle in my project by placing text within and in close proximity to graphics to help users find key information.

Fitts’s Law

Fitts’s Law states that the time required to interact with an intractable element is proportional to the distance to and size of that element. In my project, I accounted for Fitts’s law by making the button and interactable elements in my prototype large. This accommodates for all kinds of users, but also makes all the interactables easy and quick to use for everyone.

Project Prototype


My final project prototype was a video game showcase website for a game called Vintage Story. The prototype was made in Figma, and each page is fully interactable. The first page is the homepage, which shows off the game to new users. The second page is the about the game World, and the third page shows all of the game's features and progression. The final page guides the user to purchase the game.

Retrospective


My design career has so far been focused on learning the nitty-gritty and small details of design work. This project was an opportunity to simply execute on what I've learned in the past, and I feel that I executed well. I've always been attracted to simple and no-nonsense designs, but this project allowed me to add details and complexity that I normally would have passed on. Overall, this project was a great exercise that I'm proud of.