Designs Tools: Part 1 - Wireframing

ux-design-wireframing-blog-banner 2.png

In our previous blog post, we discovered our UI/UX Designers favourite and most used design tools. If you read the post you'll remember him mentioning the three important steps involved in a design project: wireframing, creating hi-fi mockups and prototyping. Over the coming months he will explain these steps in much more detail, showing you how we deliver excellent digital products!

Over to our UI/UX Designer, Balazs!

In the first part of this series, I’m going to explain some more about wireframing. Having worked on hundreds of UX/UI design projects, we have a great knowledge of how important this beginning step is to the overall delivery of the product and also - the customer’s satisfaction. Wireframing allows us to stay in line with the latest and most appreciated methods in the UI/UX world.

So - what is wireframing?

Wireframes are the most basic visual representation of all contents on a page. These are laid out in the first instance, providing instantaneous visuals on how the website will look. They are usually produced in a black and white skeleton of the digital product, focusing on contents and architecture rather than fully executed, detailed visuals.

This crucial phase is highly effective for any digital product design process, be it a general UX/UI refresh or a brand new product, designed from scratch. It allows us and the client to quickly realise any content or layout changes that should be made - early on in the project, saving time and budget.  Wireframing is usually the second step in a design project and by this time, the major user and business goals should have been defined and established so that the primary content and strategy is ready to be moved to the wireframing stage.

 
blogpostimage1.png
 

Initial wireframes for an existing client. Note the grayscale tone: sometimes black and white lines and boxes in the wireframes are swapped for grayscale boxes to enhance client understanding of the interactions and page / screen layout.

Why is this process useful to clients and us?

Due to the basic nature of these designs, they are easy to update, change and amend based on feedback. This phase fits in perfectly with our rapid agile design process and will save considerable amount of time, resources (and money!) compared to the cost of implementing changes to layouts, contents and copy after development work has been done.

 
BlogPostimage3.png
 

Wireframe showing a pop-up interaction on a web based app we previously created for a client.

Wireframing and other tools.

Our wireframes begin with pen and paper. This allows for fast thinking designs, letting our creativity flow without any barriers. We then take those initial designs in to Sketch,  the design software - which has extremely useful preset artboards for a variety of devices and an intuitive user interface. These digital wireframes will then be approved by the client ready for the next steps, prototyping, testing and hi-fi mockups.

 
BlogPostimage4.png
 

Pen on paper sketching works great when starting out with ideas due to its freehand, unrestricted nature.

 
Blogpost Image2.png
 

Conclusion:

So there you have it! Wireframing is a vital part of any agile development process that allows for mistakes, amendments and rapid changes without the need to fully execute a high-fidelity mockups - saving time and money!

MyAgileTeam