Part 1, Section A: UI/UX: Wireframes & Prototypes

In the third part of my first assignment, I have constructed wireframes for each of the case study brands using drawi.io as it is a free and easy introductory program to wireframing. Other programs that I have been recommended by UX designers, that I would like to try are Figma and Adobe XD which I may have a go at, in the prototyping phase. Draw.io however, has proven to be easy to use, intuitive and uncomplicated in its click, drag and drop functions. It also allows you to save each project to your Google Drive and design multiple pages for one site, linking them together with button paths.

For each of the brand, I have done a quick sketch on paper first before construction on draw.io. As it is my first time drafting up wireframes, I found sketching it out useful to have a general structure in my mind before opening the program. In my experience working as a digital designer, a pencil sketch is my go-to first step for the design process. As evident in the wireframes below (they are presented in the same chronology as how I made them), the outcome gets better with each time I use the program, proving immediate improvements from every practice.

Sketch of Thindi Homepage (left) and Order Online page (Right). (Source: https://www.thindi.ie/)

Wireframe of Thindi Homepage using draw.io. (Source: https://www.thindi.ie/)
Wireframe of Thindi Order Online page using draw.io. (Source: https://www.thindi.ie/)

 

Sketch of Domino’s Homepage (left) and Checkout page (right). (Source: https://www.dominos.ie/menu)
Wireframe of Domino’s Homepage/Menu page using draw.io. (Source: https://www.dominos.ie/menu)
Wireframe of Domino’s Checkout page using draw.io. (Source: https://www.dominos.ie/menu)

 

Sketch of Bao London’s Homepage (left) and Menu (right). (Source: https://baolondon.com/)
Wireframe of Bao London Homepage using draw.io. (Source: https://baolondon.com/)
Wireframe of Bao London Menu page using draw.io. (Source: https://baolondon.com/)