Task 4

This post is now a continuation from the last post as now I need to implement the ‘Rebirth of the mage’ app into a tablet and web format.

Tablet

In developing the tablet version I explored the concept of a responsive layout that adjusts to larger screens. Initially, I struggled to grasp this idea as I was unable to scale it properly resulting in distorted and misaligned elements. After numerous attempts and failures I ultimately succeeded in scaling it up achieving a user interface and user experience that closely mirrors the original application.

Tablet Wireframe (click here)

Tablet Prototype (click here)

Website

I felt that I had a significant advantage in developing the website due to my prior creation of a branding standard and logo (Post1) which maintained a consistent mood and aesthetic throughout the project. This consistency facilitated the development of a new webpage despite the prototype featuring a more complex wireframe. The next step involved adapting the navigation bar and pages from the app and tablet versions as well as creating call-to-action elements that were more appropriate for a desktop website. To achieve this I utilised the classic call-to-action designs from the apps marketplace page repositioning them for the web layout to maximise the available space for web design. I developed a component set for each section ensuring that actions were triggered upon hovering over ‘marketplace’ ‘chat’ ‘community’ and ‘leaderboard’. I eliminated the pop-up menu from the apps opting instead for a single streamlined bar at the top that included all the features and elements present in the apps thereby creating an overall minimalist web page. Additionally, I ensured that all legal disclaimers typical of web pages were included at the bottom enhancing the professional appearance of the site and ultimately resulting in a sleek minimalist webpage that showcases the enchanting game ‘Rebirth of the Mage’.

Website Wireframe (click here)

Prototype (click here)

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Post

Task 1Task 1

UI & UX The main aim of UI design is to provide users with an excellent experience a well-designed UI enables users to engage with a digital product easily and

Task 3Task 3

This post will be exploring the functionality of the User Interface (UI) of the ‘Rebirth of the mage’ app created using Figma. To start the high fidelity prototype I duplicated

Task 2Task 2

UI & UX Like I have briefly stated in the previous Post UI is the way the app looks where as UX is all about the experience of the user