Why would anyone care about a barebones wireframe? Because basic layouts can help you demonstrate your competency to potential clients. Oursky’s working relationship with a client begins with understanding the problem they want to work and developing a user story. We share our early designs in the conversation to demonstrate our working style before they make their decision. This small investment builds trust with potential clients, helps secure contracts, and begins great working relationships.
The best part is, everyone can create a wireframe.
Below, we’ll share with you the basics to get you started (including a few tools and frameworks): how it looks, the features it includes, and what it can do. Whether you are building a mobile, desktop, or web app, a wireframe is a good reference point for your client and you to communicate on your future product.
Wireframes vs. Prototypes vs. Mock-ups
But first, let’s clarify a wireframe, mockup, and prototype. Generally, they go from lowest fidelity to highest fidelity. Another hack way to tell is how much colour there is. A wireframe is usually black and white (focused on the general idea); a mockup may have some initial colours; and a prototype can feel like a complete app with click-through functionalities.
This post is only about wireframes. Essentially, a wireframe acts as a blueprint to convey a product’s main features and serves as a visual roadmap that saves everyone time, effort, and money in all stages of development. Wireframes typically include such things as:
- Input Fields (buttons, text areas, image frames etc)
- Navigation Arrows (what leads to what/results in what)
- Sketched Notes (to specify any features/navigation that aren’t self-explanatory)
To put it simply, a wireframe may not focus on specific details like the button shape or how big each section is. Rather, the key purpose is to roughly make sure everything that needs to be built and integrated is included and visible to the client. For reference, check out these 40 free wireframe templates, as well as our own guide on how to approach wireframe design.
Oursky’s tool of choice is Sketch, but the process can begin with pen and paper — even right in your client meeting.
For developers and designers, a wireframe helps people spot potential flaws or missing elements much earlier and thus save countless hours of potentially wasted time for developers and designers. For clients, requests for changes can be made before development begins, ensuring that everything remains within the project budget as things progress. Showcasing a wireframe consisting of 40+ slides or frames to your client who originally imagined their product to take no more than, say, 10 frames can be incredibly helpful in helping them understand the scope their product.
While it’s great to know what a wireframe can do for both developer and client, how to build one is perhaps more important. Below are some main elements of a well-designed wireframe:
Navigation design is how a product flows. Where is a user taken to after pressing the “next” button? Navigation in a wireframe shows the relationship between pages, usually by drawing arrows from one page (or better, one specific button) to the next page. Navigation systems can be broken down into global navigation of the overall product, local navigation on the screen, and other types of navigation such as contextual and supplemental navigation. A useful Navigation Design typically includes:
- Current locator (where will a user go as a result of their action)
- Trace route (how can users get back to where they came from)
- Navigation method (where on a website/in a product users can go)
The user interface choosing the elements that allow a user to efficiently use the product. A well-designed system should be intuitive and usable (accesses the functions that you’ve put into the product). Note that ‘intuitive’ is sometimes cultural, particularly when you get to the Graphical User Interface (GUI), which includes such visual components as windows, icons, and menus. A Basic User Interface can include:
- Simple boxes
- Placeholder images
- Form controls
- User languages
Other things to keep in mind
Function Over Form: a common mistake is to believe that a good-looking wireframe is by default better. More important than appearance, however, is function. Wireframes are not just boxes, labels, and general arrows. Above anything else, a wireframe should be clear and detailed in stating the functionalities and basic flows of a product. Specific visual details (i.e. colour) typically come much later, usually when constructing the mock-up and/or prototype.
Detailed explanations of functions, features, and maybe even tools will often be included on the side (outside the drawn screen). The more detailed these notes are, the easier the checklist is when developing the product. These descriptions, which are linked to the visual features you’ve drawn and functions you want, will probably also indicate the tools you choose to build your apps. What API’s will you need? How will your CMS be structured?
Asking too much for feedback is better than asking too little. A feedback loop, or process, between you and your client ensures that the product evolves as accurately as possible. By involving your clients from start to finish, not only will you clients be more likely to choose you, they will also be more understanding of your challenges as they develop.
Have anything to add to the content above– tips, resources, tools? Please leave them down in the comments below! When it comes to developing a successful product, the more knowledge and perspectives the better.