After sketching, there is one final thing you should work on before starting to design (although, admittedly, this is all part of designing). Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.
How a wireframe should look will vary wildly, depending on who you talk to. You have many options when creating wireframes – from the way you display your wireframes, to the software you create them with.
When creating your wireframes, you need to be working with layout and with the content that you’ve previously curated. The idea of a wireframe – as a deliverable to a client, or just as an extra step you’d prefer to take – is to be able to display the visual layout and flow of a website page, before you get bogged down with the design details such as colour, typography or any other visual flairs.
Designing Creative Wireframes
The best way to move onto creating digital wireframes for your project is to move directly from the sketching phase. In that section you should have already been playing around with layout, but creating a digital wireframe is a much more professional way of nailing down your ideas on the layout and flow of your web page.
When designing creative wireframes, you want to ensure that you use the real content that you’ve curated nearer the beginning of the project. Personally, I prefer to design wireframes that lack anything that could sway a client into thinking that design decisions are being made that will affect the look and feel of the project. Therefore I always ensure that I design a wireframe that focuses only on the content of the project and the way that content is presented on the page.
An example wireframe created using the Balsamiq Desktop application.
What Makes a Well Designed Wireframe?
Content that is well written and displayed in a manner that is useful and relevant to those that will read it, will always result in a better design and online experience. A well-designed wireframe is one that keeps in mind that the content is the most important thing on the page and is sympathetic to displaying that content in a manner that is suitable for the project and its end users.
The wireframe stage of a project will heavily relate to when you were editing and working with your content nearer the beginning of the project. As a brief example, at that point you’ll have worked hard to ensure that the content would be easy to read by proper use of headings and lists. Designing a good wireframe means transporting that content (in paragraphs, headings, lists and whatever other way you chose to format the content) into your wireframe and looking at how you can start to create visual relationships between each bit of content, connecting the dots until you have a visual representation of how that content could look on a page.
Designing With Blocks
In order to keep your wireframes design-free and content-focused, working with blocks is a really easy way of sectioning off parts of a page for particular content areas.
In a practical sense this means that if, for example, you wanted a standard header at the top of the page, then you would add a block to the top of your wireframe design. If, strictly for example, you wanted to add a logo and navigation area within the header, then you would place additional blocks for these elements inside the header of your wireframe design.
You can then use blocks throughout the rest of the wireframe design, continuing to section off areas for specific bits of content.
Don’t Take it Too Literally
Blocks don’t have to just be a literal monochrome square or rectangle though – once you have an idea of your basic layout with the blocks you’ve added, feel free to use your actual content in places that it will be useful. For example, use the real content for the navigation items, an introduction to a page, the headings and so on. This helps as you can start to see visually how the content works together in the layout you’re creating.
Quick Tip: Label Your Wireframes
When you’re designing your wireframes, always ensure you label the areas or sections that you place in your wireframe. Although you may understand what a certain block denotes (particularly when the real content isn’t placed there), a client or colleague may not and you should make it as clear as possible for them to understand what they are looking at.
Consider the Flow
When you’re designing your wireframes, one thing you should think about is the flow of the page – look at the way the content sits on the page and how it flows from one section of content to another.
The aim here is to make sure that the content reads correctly and that you the eye moves fluidly from one section to the next. This is particularly important when you have content-heavy pages – users should be able to move easily from one section to the next, without it being a jarring experience. If pages are too busy and don’t have the right sort of flow to them, users will be turned off by what seems a difficult to understand or follow process.
One idea is to think of what you would intuitively do when navigating a website – start by looking towards the logo and header, then down to the main heading and following the main content, moving gradually over towards a sidebar and so on.
Responsive Design and Wireframes
When designing a website, it’s near impossible to create a separate wireframe for every single stage that the website might change, how it looks or fits together. Instead, having previously thought about the flow of your design and content, you can look at a responsive flow to the wireframe design.
This was a tip I picked up from Sarah Parmenter’s Responsive Day Out talk, where Sarah explained how she adds numbers to her wireframes that help aid a client in understanding how the content and items may stack when on a smaller screen. This is really useful as it will help a client start to understand about the content hierarchy as well, also meaning that you can start to look at any possible pitfalls or challenges when working responsively very early on in the project – something that may save you a lot of time later on in the project.
Applications and Tools
When designing wireframes, you have a ridiculous amount of choice when it comes to the software that you can use. Personally, I think there are a definite three choices that seem most popular, particularly in the web industry.
Graphics Software (Photoshop, etc.)
When designing a wireframe, possibly the easiest solution is to work with a graphics app that you’re already familiar with – or at least have used a little before. This means there is little to no learning curve, so you can hopefully get on with designing your wireframes a little quicker.
The easiest way to design with your graphics software is to use the shape and text tools, using these to create your basic blocks, as well as specific areas with real content. Remember to label your wireframe blocks using the text tool while you go along.
Keynote and Powerpoint
This may be a surprise to some, as Keynote and Powerpoint are usually used for creating presentations. However, they’re really powerful and easy-to-use tools to create other things, including wireframes. Using the default tools that are available to you in the apps themselves, you can easily create professional-looking wireframes really quickly.
Balsamiq Mockups
My personal preference, Balsamiq Mockups is an app that is dedicated to creating wireframes. This app really makes it simple to design your wireframes and has a lot of resources at your disposal to quickly drag and drop the elements you want to place.
One thing I love about Balsamiq Mockups is that it uses a rough, sketched style that really lends itself to showing that wireframes are just that – an idea of layout that could be translated afterwards into a proper design. You have the option of choosing between a more standard feel to the wireframes as well as the sketched finish, if you feel a client would be more receptive to that.
Handy Resource: User Interface Kits
With the introduction of user interface kits, it’s also really easy to start designing more complex wireframes on a variety of apps. From full kits you can download to use as a PSD in Photoshop, to sets that help you create wireframes in Keynote a lot easier – there’s something there to help you.
- 50 Free UI and Web Design Wireframing Kits, Resources and Source Fileson SmashingMag
- Dev Rocketfrom UI Parade
- WireKitby @adamwhitcroft
- Keynotopia
- Keynote Kung-Fu
- Play around with all three types of ways that you can wireframe, so you can decide which suits your work style and workflow better. The idea here is to just allow yourself a bit of time to become familiar with the different apps that are available for you when wireframing and see which suits you best.
- Once you’ve found which wireframing solution you prefer, start to create and design your wireframes. Remember to start simple, building up your layout and components to represent the layout.
- Once your wireframe is complete, create a copy of it and start to think about the “responsive flow” and how each of the elements can stack when the viewport of the site starts to get smaller.
notebook 