Application Security Project
UI/UX Prototype
Introduction
In this group project, my team and I were tasked to design a suitable website for a hotel.
​
We had to demonstrate the different techniques we had learned for UI/UX design and were not given any theme to follow, which meant that the overall layout and design (eg. font, images, colours) was up to us to decide. The design was to be done using the WIX platform.
​
In this project, I was responsible for the "home" page and "getting here" page which I will show below. I have also highlighted some UI/UX concepts applied in the project.
Home page
The home page includes the navigation bar, “check availability”, introduction, promotions, footer, and graphics.
The different fields are separated clearly through the use of different shades of background. For example, the “check availability” and “promotions” fields have a lighter blue background. The background colours are still blue to prevent overuse of colours.
Visual hierarchy has been applied by ensuring the sub-headers have a larger font size than the body text.
The field “check availability” has been ordered first because of its importance amongst the others. Customers want to be able to check the availability of rooms without having to scroll down too much. In other words, it applies the concept of “Above the Fold”. Additionally, the Gutenberg Diagram is applied by placing the “Find Rooms” button on the bottom right side.
​
This is followed by the introduction text, which tells customers why they should stay at Lakeshore Resort. It is placed on the home page because it is the first page people visit, hence making it easier for them to get a brief introduction to the resort.
​
Lastly, the footer, which displays the address, important contact information and the resort’s terms and conditions, is found on all pages. Links to the “Getting There”, “Contact Us”, and “Terms and Conditions” pages are included. In the footer, continuity (alignment) in Gestalt Principles is applied by aligning the address information, and the general inquiries texts.
Top section of the home page
Getting Here page
The “Getting Here” page includes information about the resort address, directions to take to the resort, and nearby attractions. Information for directions and nearby attractions are clearly separated through the application of proximity in Gestalt Principles. It is applied because there is a clear spacing between the two fields. Alignment in Gestalt Principles is also applied.
Apart from that, visual hierarchy has also been applied by ensuring the sub-headers have a larger font size than the body text.
An image of a map has been included to ensure the page is not too wordy, and visitors can still refer to graphics.
The sub-headings “Lakeshore Resort”, “Check-In and Check-Out Timings”, “Nearest MRT”, “Directions” and “Nearby” are in blue, a different colour from the other texts for easier separation of information.
Bright colours are used to draw the reader’s attention. The icons for the bus, train, taxi, and limousines are for the reader to associate the directions written next to it with the image of the type of transport mode.
Key Takeaways from this Project
The main focus of this project was not coding. Instead, it was to understand and apply UI/UX design concepts that would engage users.
​
Overall, I have learned what each concept and principle meant and when they should be applied. I am able to apply what I have learned from this project to future projects I will be working on.