Does every project require wireframes? Who needs wireframes and why? What’s the difference between wireframes, mockups and designs?
What are wireframes?
When you start thinking about anything that you’d like to build, whether it’s a website, web app or mobile app project, you want to make sure that you know what you’ll get at the end of the day. You want to see, know and understand how the project will look and feel to the end user. In order to do that you need wireframes.
Wireframes are basically, black and white images of every screen of the project you have in mind. The main purpose of these wireframes is to show the positioning of elements on each the screens. They help you to think through, plan and see the necessary layout and structure of the whole project.
Mockups and wireframes
Sometimes before making wireframes, you’d create mockups. Typically they are a very raw, basic illustration of the project that you want to develop. You do them to communicate your vision to the designer, agency or whoever else you’ll be working with to get the actual design or development done. There are different ways to create mockups, they can either be hand drawn on a piece of paper or you can use some sort of online tool, like balsamiq.
Mockups are not a mandatory stage of the development process, but very often you’d want to have them, to help you quickly and easily communicate what you’re looking to accomplish. This is something you can probably do on your own and it shouldn’t take more than about 30-60 minutes of your time. I went into more detail about mockups in my previous article.
Producing wireframes
Once you have a basic idea of which screens your product consists of, you then want to talk to a specialist. This should be someone who understands user experience and design, knows industry standards and best practices, stays on top of the latest online trends and is generally aware of what it takes to make a successful app or site. This is typically someone with a title like UX designer, information architect or project manager. Whether you have mockups ready to show them, a written brief, or you prefer to simply describe your vision to them in conversation, their job is to create the wireframes from your initial idea.
The process of creating wireframes involves representing every screen and every element which the screens will contain. Throughout their creation, user experience is the primary factor to be considered. Typically you’d use one of the popular desktop graphics software applications like Sketch or Adobe Photoshop, (though it doesn’t really matter what software is used). The important thing to understand is that the end result of the wireframing stage, is that you have actual images of all the screens of the product or project that you want to build.
Does every project need wireframes?
Coming back to the questions I asked at the very start. You probably do want to create wireframes for every project, yes. Having them in place makes everything clear and ensures that your expectations are in line with those of the developers and/or designers working on the project. They also set a solid foundation for design work and actual development to build on. The accepted “right way” of doing wireframes is to make sure that they clarify the main layout and structure of every page, section, block, button and other content.
The only potential exception would be a very small project with incredibly clear and simple screen layouts. In this case you might be confident of going straight to the design stage without spending time and money on wireframes.
Wireframes and design
One last word to clarify where ‘design’ comes into the picture. You might be thinking that instead of spending time and money on wireframes it would be better to send your initial ideas or mockups directly to a designer and get things rolling! This is a bad idea in the large majority of cases for at least two big reasons:
Financial – Design is comparatively expensive and time consuming. If you go straight to the design stage, but then what the designer creates isn’t in line with your vision, it will need to be redone and you’ll end up paying much more than if you’d clarified the layouts up front with wireframes.
User experience – Some designers are also UX specialists. Many are not. The wireframing stage is the point at which you finalise and make sure you’re really clear about the user journey. Designers then take those decisions and make them effective / good looking. If you jump straight to design you’re likely missing out one of the most essential steps in developing a new site or app (or at least entrusting it to the hands of a non-specialist).
Wireframes summary
So, to sum up. Wireframes are an essential step on the way to creating your app or site. They consist of black and white images of every screen, showing the layout of all buttons, text and other screen elements. They ensure that everybody connected to the project has the same vision for where it’s headed as well as representing a clear user journey. Designers and developers can then use the wireframes to inform the next steps of the app or site creation and managers and clients can use them as a reference point when discussing the project and it’s progress.
Need some wireframes made for your project? Let’s start the conversation.