Every web designer especially User Interface/User Experience (UI/UX) designers should know how to map out layouts of anything they’re designing. Whether that be websites, mobile applications or even software. This helps understand what a typical user journey may be through your product. This where prototyping or wire-framing comes in.
If you have a knowledge of Common User Habits of your intended target audience you could always implement those in your design. If I had more resources and time I would ideally carry out extensive Usability Testing to find these habits out.
For example in our family Immigration Law firm we run several websites and some of them are teaching resources. So we use those websites in class every day and so we get a class full of students that give us valuable feedback on the interface and their understanding of how to use our website. That’s obviously the best case scenario for any website having that much Usability Testing every day though we do test new websites with students periodically.
That would be ideally what every website should have before being released to ensure the highest quality of User Experience (UX). Below are some of the Wire-frame programs that will help design a layout to help ensure a good user experience.
I will begin my prototyping and wireframes with a paper wireframe first as shown in the guide in this video. I do not normally use paper prototypes but as a standard after this project I will do going forward afterwards when I join the web design industry after graduation.
- Platform: Mac, Linux, Windows & web-based
- Price: $79
It is the industry standard and it’s the one out of the three I’m looking into that I’ve used before. I mainly used it at my time working in a design agency in my first year at University on placement for the summer.
It’s famous for producing mock-ups with intentionally rough and low fidelity which encourages more feedback. It has your typical drag and drop components with interactive elements that allow you to see it function as a normal website as your plan out the layout.
It has a 30 day trial with a full compliment of all the features but it is $79 which for me is £54.45. Not a steep ask for a fairly important tool in any designers tool-kit.
Photoshop CC (Creative Cloud)
- Platform: Mac, Windows
- Price: £17.15/month as part of Adobe Creative Cloud
Photoshop doesn’t offer all the interface elements that the other two options on this list do but for straight-forward, quick wireframing, it is the simplest of choices once which I designed my first wire frames on.
A bonus to using Photoshop is if you want to scale up the quality of your prototyping or wireframing you can do to a higher graphical level. When I spent time working in a design agency in my first year at University I always produced two levels of wireframes. A skeletal wireframe that only had the bare essentials and core elements mapped out on it in a basic aesthetic (usually done in Balsamiq). Then I would produce a higher graphical wireframe using the WordPress theme that had been decided upon by the creative director or myself.
If we had not already sold the quote to the client this would normally clench it once they saw a beautiful prototype designed in Photoshop. So it scales up very well and most designers already have Photoshop in some way in their arsenal.
- Platform: Web-based (Flash)
- Price: Free-$79
iPilotz and Balsamiq are very similar though the only major differences are that iPilotz has a free version where as Balsamiq only has a 30 day trial.
It has the typical drag and drog components you’ve come to expect in wireframe tools and to be very blunt the only real main difference between this and Balsamiq is preference. I do not like that it’s flash based and it runs slower than Balsamiq unfortunately.
Flash-base wireframing tool iPlotz allows you to make clickable wireframes with drag-and-drop components. Its main addition includes the ability to add tasks and notes for project managers and coders.
Being that iPlotz and Balsamiq are so similar I’ll opt to use Balsamiq as I am familar with that and it is the industry standard to use this prototyping tool.
I will then follow up my prototyping/wireframes with Photoshop for more graphical polish if needed for a higher level of detail.
For this project I will firstly paper prototype my wireframe and offer the prototype for feedback from peers. After the feedback I will produce another wireframe on Balsamiq. Once that is finished I will present that to the client and based on his feedback I will amend it then re-present it to the client and begin work on the website.