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.

