You may be wondering what can you get from an article like this. My goal is to give an in-depth look at the basics of wireframing from more of a practical aspect.
In this article we’re going to answer the following very basic questions:
- Who uses it?
- Why should you consider using them?
- How can you create awesome wireframes with or without software?
Let’s begin
When it comes to wireframing the easiest way to describe it as the cornerstone of product design and development. Regardless of the project itself, you will work with this tool in the early stage when building websites or mobile applications. The goal here is that everyone who’s involved in the project is standing on the same pillar. This means not only designers product managers and engineers but everyone. If we look at a company that is preferring agile development, we can see that wireframes are implemented in the early stage of product design and development phase. Yes, even a simple paper based sketch can be considered as a wireframe, but we’ll discuss this in depth as the article continues.
Sketch, Wireframe, Mockup
Okay, hold on aren’t mockups the same as wireframes?
Wrong.
The wireframe is all about making it work. As it’s shown on the picture above its fidelity ranges between low-to-middle. In a case of an app or website, it can be navigation, the layout of buttons, boxes and other elements. While a mockup is close as possible to the end result. Sometimes changing details you would ignore otherwise, like repositioning CTA-s can make a huge difference in conversions. Understanding how users really interact with your website can help you a lot to find the right place for your CTA. It’s purpose to give an overall look at the final product. You can use graphic software or dive into coding, it depends on you. If you try to show the end result in its glory with all the details then you’re doing a mockup. Going even further and taking functionality into the picture we can talk about prototyping but that’s another topic. If you wish, you can read more about the differences here.
Who Uses Wireframes?
„In short, anyone involved in the product — in any capacity.”
Although designers, developers, and product managers typically create and use wireframes the most in their daily work, many people benefit from wireframes. These may include business analysts, information architects, interaction designers, user experience designers, graphic designers, programmers, and product managers.
Why Should Anyone Use Wireframes?
„Wireframes are the “blueprint for design.”
In other words, they have a role of connecting the information architecture with the visual design itself in order to represent an interface. This interface has five main purposes:
- To tell how the site or app comes together
- To tell how will it be usable
- To tell how the information will be organized and represented
- To tell how and what content should it hold
Last but not least
- To tell how will these interact with the user
So how can you create wireframes?
Earlier I’ve said designers, developers, and product managers make wireframes. But this doesn’t mean that it’s the same.
UX/Graphic Designers consider using wireframes when they wish to create graphic mockups, prototypes or a new UI overall. So for them, it’s a pre-work process. Another reason is to simulate user flows. They create them after having a persona, a user journey, site map to work with. In other words after putting together the discovery-related activities.
For the UX Designer wireframes are like abandoned, empty houses waiting to be filled with life.
The designer decides what furniture goes where and how can visitors navigate through the house without breaking the pinky in the kitchen table. In other words, user flows are basically series of interactions between the user and the interface in a way that ends up in a silky smooth result. Flowcharting, storyboarding and wireframing work hand in hand to achieve the goal.
Developers use wireframes to get a more tangible grasp of the site’s functionality.
It gives the developer a clear picture of the elements that they will need to code. Worth to note however what kind of development process are we talking about. In the case of back-end development, wireframes can be low-fidelity the way a UX designer creates it. On the other hand, front-end development, requires a high-fidelity wireframe.
Product managers require wireframes with more of an inspection purpose. To review and ensure that requirements and objectives are met through the design.
Copywriters can make use of wireframes also! For an example in order to visualize their copies towards their clients or support designers in during the design process. It is also worth mentioning that wireframes not only provide a strong pillar but also speed up the workload.
Creating wireframes with zero investment:
Sketching/Paper Wireframing
Pros:
- Speed: Just grab a pen and a piece of paper and that’s it, nothing fancy. Start drawing the product design at any level, only your imagination is the limit.
- Flexibility: You have the opportunity to swap between low-high fidelity concepts, so who knows you might start up with a sketch and end up with a prototype on your way.
- No distraction: You focus on that piece of paper in front of you. No colors, forms or pre-done styling (good for lazy people)
The following two applies when you turn sketches into paper prototypes:
- Easy standardization: This comes from the flexible fidelity aspect. Since you’re creating multiple patterns with the same layout/cutout you can standardize your prototype with ease.
- Interactive and alive: They’re just as mobile as sketches plus they are alive! Run around the office and show them to colleagues, pin them on the wall.
Cons:
- Duplicating work: Once you ruin something at the end of your process it can be frustrating to redo some parts. You can undo some of the decisions by erasing or overlapping lines, probably resulting in a big ball of ink spaghetti. Also, you can’t “save” your work and have no access to templates. If you go a step further and wish to create a paper prototype, you have to put in that extra work making it even more time consuming.
- Zero level of interactiveness: Forget about animating things and also you pretty much out of luck if you wish to link your sketches together. No advanced stuff here.
- Hard to update: After a couple of hundred papers sitting on your desk you’re pretty much sitting there hopeless when it comes to “updating” your work. Especially if multiple personnel work on the same project.
- Potential inconsistency: Unless you have a lot of routine on your back or talent in drawing, you have to be very careful during your process unless the end result will be inconsistent.
If you wish to read the full article, please click here.
Please write a comment, your feedback means a lot to me! Also sharing and recommending is a big motivation. I appreciate every help! ❤
