Wireframing — for beginners
Wireframing is a stage in the product design process which focuses on the layout of our user interface. They are usually used to determine the best way to present information hierarchy, that is, the order in which we want our users to see & interact with information on each page.
Imagine we were designing the homepage of a clothing store’s website. Some important elements we need are (but aren’t limited to) the categories of items the clothing store offers, search, bag and wishlist buttons. There’s also the need to let users know about any event that’s occurring such as sales or new collections.
In the example below, the home page in sketch A is grouped into three different sections — clothing categories, events and help. This gives the website an organized structure where users can easily access whatever section they need. However, in sketch B, all the items available for sale are displayed on the homepage. This layout may work well if the store only offers one type of item and/or doesn’t have a lot of inventory.
How do I create wireframes?
To answer this, I’ll be breaking the process into three — before, during and after wireframing.
Before
Before we get started with our wireframes, a couple things need to have been done. We need to have completed our user research, created our user personas and identified the solution we are providing with our product.
We also need to have our user flow/sitemaps ready. I’ve found it useful to have my sitemaps next to me as I create my wireframes. This ensures I do not lose focus on the direction of my product/ the functionality of each page.
Now that we have our user flow/site maps, we can move on to the next stage — sketching.
During
1. Sketching: When it comes to sketching, we are not bothered by accurate dimensions leading to much needed advantages of getting out many ideas as fast as possible.
The tools you need at this point are paper, such as grid pads, and pencil/pen (You can also use apps that mimic pen and paper such as concepts, if you prefer). Right now, I use A4 drawing pads and pencils
Tips:
- Even though you are not working with exact measurements, let the dimensions of the frame you sketch look similar to the interface you are designing for. Don’t sketch a laptop screen when you are designing a mobile app.
- Try to sketch five to seven designs per page consecutively. This forces you to think better than you would if you stopped at one or two.
- Don’t forget to reference your user flow at all times. Mimic your users’ interaction with the interface as you go and change what doesn’t make sense.
2. Keys: The best way to easily identify what each element in your sketch represents is by using keys. Ensure the keys you use are consistent across every frame. You can make use of shapes, shading or multi-coloured pens. In the example below, the rectangle with an X in it represents an image while the shaded lines represent different categories of text.
Tips:
- If you decide to use actual text instead of rectangles/shading, restrict it to two basic typefaces. Remember, our main focus isn’t aesthetics.
- Avoid lorem ipsum. Try to use placeholder text related to the product you are designing.
3. Move to the screen: Now, that you are satisfied with your sketches, it’s time to move to the screen. You can use any design tool of your choice (I use Figma but other software, such as Adobe InVision, would serve your purpose too).
At this point, try to make your elements a bit more aligned but don’t put too much focus on it as this isn’t your finished product. Additionally, do not introduce vibrant colours yet as the focus is still on the functionality and structure. Instead, make use of varying shades of grey to signify hierarchy.
Tips:
- Use grids to make alignment easier.
- You don’t need to transfer all your sketches to the screen. Only transfer the best sketches.
After
1. Share: Now, that you are done, share your wireframes with your client and if it is a personal project, get your (mock) users to test out the designs. Remember, if they aren’t able to interact with the wireframe properly, then there’s a good chance they won’t be able to interact with the finished product either.
Tips:
- Apply feedback you get and only move forward with your high fidelity design when your wireframes have been approved. Doing this reduces the chance of having to start over because your client doesn’t like it or the design isn’t efficient.
Final tip: Don’t forget, your wireframe isn’t your finished product. Don’t be scared to try out any idea that comes to mind.
There you have it. I hope you’ve learnt a thing or two.
