UX Design: Week 4 — Wireframes
Wireframes are a blueprint that are helpful in creating the product and are important part of the UX design phase. It is a start of the design phase which gives the ability to find out how the final design will be confirmed, showing the visual representation. Wireframes play an important role for when sharing and communicating with other team members.
The wireframes concepts can be designed from a low-level block to a high-level fidelity design, all depends on how much information requires to be communicated and what’s best for the project. As there can be multiple designs, it is recommended to create more than one form of wireframe concepts.
This is a perfect way for any designer / developer to understand how the user would interact with the end product. Afterall, it is important that the product meets the target audience.
Low-Block Sketches: A design using lines, marks and texts
Low-block Sketches from own module:
Detailed Wireframe: More detailed, adding buttons and texts, font styles and a black & white representation
High-Fidelity Design: Contains images, coloured fonts and text. Almost confirming the final design
I personally would make most of wireframes for this module. I have used this technique before and has been of good experience and benefit. I’ve been able to use low block sketch, and high-fidelity designs for my past modules so this shouldn’t be of difficulty for when I create the wireframes designs for this module.
Wireframes are essential part for this module. This is the beginning of create the product. I started off by creating paper-based designs of pages that I want in the final prototype. As this is a first design phase, the paper-based wireframes are initially the first draft. It is a rough design of how I want to produce the product.
Before starting to draw these, I needed to figure out how to layout the design and how to include the main aspects into the wireframe. I approached this by thinking simple ways to do this and not to overthink. Afterall I was creating a first attempt in the wireframe.
Although I am not much of a drawer, I drew the designs on paper using a pencil. I used up multiple papers until I was happy with the way I designed the wireframe. Using this method, I started to progress into the first steps in the design phase.
The plan is to use the wireframes to create my prototype. I will use this as a starting point and improve and add the relevant features into the product. Using the research that I found, I will now know which features to add. I begin this from now and up to the next coming weeks to complete a draft version of the prototype.
- Falmouth University, February 2021, Week 4: Introduction to Wireframes, Falmouth University, Viewed 23rdMarch 2021, Available at <https://flex.falmouth.ac.uk/courses/907/pages/week-4-introduction-to-wireframes?module_item_id=48471>
- Falmouth University, February 2021, Week 4: Sketching Fundametals, Falmouth University, Viewed 23rd March 2021, Available at < https://flex.falmouth.ac.uk/courses/907/pages/week-4-sketching-fundamentals?module_item_id=48469>
- Peldi Guilizzoni, ND, What Are Wireframes?, Balsamiq Wireframing Academy, Viewed 23rd March 2021, Available at <https://balsamiq.com/learn/articles/what-are-wireframes/>
- Jaye Hannah, 1st August 2019, What Exactly is Wireframing? A Comprehensive Guide, CareerFoundry, Viewed 23rd March 2021, Available at <https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#3-what-is-the-purpose-of-wireframing>