Skip to content

User Flow and U.I Wireframing

Figma design file available at : https://www.figma.com/design/VkWHgf14qgWScHtgv3j3IU/LF—companion-app?node-id=0-1&t=KxL0UoNo7FlzJz5a-1 Home page In order to start figuring out the compositional aspects of the app, I have created an 8 page long low fidelity prototype. The main menu is… User Flow and U.I Wireframing

Colour planning

The logo design was intentionally created using only two colours to embrace simplicity and maintain a sense of graphic minimalism. This decision wasn’t just an aesthetic choice, it was rooted in established design principles seen… Colour planning

Responsive Layouts

Best option is highlighted, and every option has its own visual cue. Every important option has a notable change in colour to bring attention to it and make them easier for the user to find.… Responsive Layouts

Typography

I made the choice to limit the number of typefaces used to just two. This decision was rooted in the principle of maintaining visual consistency throughout the design. By restricting the variety of fonts, the… Typography

Figma artboards 2

In order to ensure that my website is always easily accessible, I have made a version compatible with mobile devices. This would also make it possible for the users to present the website at the… Figma artboards 2

Design and Research.

The concept of “Mutant Haven” is based on an existing game “Monster Sanctuary”. Some features and styles were based on the original however all assets included in the final project are original and are created… Design and Research.

Rejected designs

Before deciding on my final prototype, there were 3 prior versions. I used grey scaled colour pallet in order to be able to better differentiate each individual block and therefore know what tones I can… Rejected designs