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.

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:

Sketch 1
Sketch 2

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.

Update

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.

REF:

  1. 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>
  2. Peldi Guilizzoni, ND, What Are Wireframes?, Balsamiq Wireframing Academy, Viewed 23rd March 2021, Available at <https://balsamiq.com/learn/articles/what-are-wireframes/>
  3. 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>

Student At Falmouth University (Online Studies) — MA User Experience Design