Everything that you need to know about Wireframes
Read this short, to the point article as it guides you through how you should start with wireframes, why and how you should use them in your workflow.
So you are a beginner having no knowledge about this field. No Issue. This article will remove all your doubts regarding how you should start with it.
“The beginning is always NOW.”
― Roy T. Bennett
Let’s begin 💃
What is Wireframing?
A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. They are commonly used to layout content and functionality on a page that takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added.
Developers use wireframes to get a clear picture of the elements that they will need to code, architects, present plans before building a home, wireframes are made to ensure that requirements and objectives are met through the design.
Why should I use wireframes?
- A wireframe is the blueprint of your website. The main purpose is to show the client how the website will look before designing.
- Let’s suppose you didn’t start with wireframes and directly created a well-designed webpage. And the client didn’t like a few things. Maybe he wanted a button on the right side. You’d have to make the corrections one by one, which requires lots of work and time.
- One of the great advantages of wireframing is that it provides an early visual that can be used to review with the client. By creating a simple website structure, you can quickly make changes to meet your client’s needs. It saves you time. ⏰
Wireframe vs Prototypes
Many people tend to assume that a wireframe and a prototype are exactly the same things. But no they aren't the same. Let’s dive into and understand what both terms exactly mean.
Wireframes
A wireframe is a low fidelity representation of a web page that shows the basic elements of the page. They are not interactive, and do not show much detail, but create a simple design that guides the project. Once it starts becoming interactive, it becomes a prototype.
Prototype
A prototype is a more detailed interactive representation of the final product. Prototyping means building a model of the website before you build the actual website. Prototyping allows you to test the final product before spending time or money on code.
What do wireframes include?
Content
What will exactly be displayed on this page?
Structure
How will the elements of this page be put together?
Hierarchy
How will these elements be displayed in positioning, labeling, and size?
Functionality
How will these elements work together?
Behavior
How do these elements interact with the user?
I’ll give a wireframe to my designer, and then I’m saying to her: “I know you’re looking at this, but that’s not what I want you to design. I want you to re-think it!” It’s hard to do that when you’re giving them this concrete thing.
Shape Up
Wireframe tools
There are many tools to create wireframes. The tools you decide to use will depend on personal preference and project requirements.
There is no best tool for wireframing. It’s just choosing whatever you’re comfortable using and whatever works for you well.
Pen and Paper
The pen is mightier than the sword. Putting your thoughts on a piece of paper can spark so many new ideas when you start digital design.
It’s my personal favorite way to make wireframes.
Balsamiq
Balsamiq is a rapid wireframing tool that reproduces the experience of whiteboarding but on the computer. Its sketch-like aesthetics may be a turn off for some designers, but I think it encourages brainstorming and creativity.
wireframe.cc
wireframe.cc is a very simple and minimal wireframing tool for websites and mobile apps. There are features or team collaboration, such as editing and commenting, but these features are only included in the premium upgrade.
Conclusion
No matter which tool you choose to create wireframes, you’ll learn that wireframing is a crucial part of your design workflow. Also, by starting with wireframes, you’ll be much more confident when you actually start designing. Again, the best way to learn is by doing.
That’s it, I hope you liked the article. Thanks for reading. I hope it helped you understand what is wireframing. If you like this article, please 👏 and share it so that more people can read it. I’d love to hear any feedback or any thoughts on the post.
In case you want to reach out, here’s where you can find me :)
Twitter: https://twitter.com/manvisinghwal
LinkedIn: https://www.linkedin.com/in/manvisinghwal
A note from UX In Plain English
We are always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer.
