Ways to build a web wireframe: 4 awesome hacks
Want to build a web wireframe but not sure where to start? These 4 different methodologies, from free web wireframe templates to prototyping tools, will get you started.
The perfect web wireframe. Does it even exist? Short answer is, no. And yes. While there’s no pinnacle of wireframe excellence (because that would be weird), there is a rule of thumb to follow if you want to create successful, useful web wireframes time and again – build the most suitable wireframe for the job in hand. Not always the best looking, or the quickest and dirtiest, but the right one for the moment.
Have wireframes that pave the way to the future.
Have a wireframing tool that helps you get there faster.
The right web wireframe for the job is one that fits the objectives of the eventual software or app, that drives creative conversations and that creates spaces for innovation and experimentation, all within a framework open to rapid iteration. The actual look of the final wireframe will vary hugely – an enterprise intranet wireframe will look a lot different to a dating website wireframe, after all.
Whatever kind of website or browser software you’re working on, wireframing allows you to define the design’s information architecture, to map core navigation flows and even to test out how users interact with your wireframe interface.
From web wireframe templates through to coded prototypes, with a look at presentation programs and prototyping tools along the way, we look at 4 awesome hacks to make sure you stay on track to build the best web wireframe for the project in hand.
1: Web wireframe templates
Web wireframe templates, sometimes just called website templates, are suitable for beginners in the web design and development game; those who feel comfortable with something more malleable, move along to our second or third hack.
If you’re just starting out on your first wireframes, a template is a great hack to get things off the ground. Basically a pre-baked webpage or entire site, templates allow would-be designers to just insert their own text and images. As templates tend to be built around a CSS or HTML framework, it’s easy to set up a simple website without getting developers involved.
For beginners who want to try out this hack, there are plenty of free web wireframe templates online. Check out Speckyboy.
2: Presentation programs
Anyone with their Microsoft Office stripes will be familiar with using at least one presentation program – PowerPoint. It’s this familiarity and accessibility that is the main strength of presentation programs when building simple wireframes; because basic features are familiar, the learning curve is less steep than, say, on a prototyping tool. Plus new programs such as the increasingly popular Keynotopia, have their own (albeit limited) UI element libraries – great for shifting up the complexity of your website wireframe without confusing the process.
However, presentation programs are, for the main part, strictly linear beasts. Building a web wireframe with complex or conditional navigation is going to be tricky. And obviously the ability to design animated or interactive features cannot be represented with presentation programs.
Check out this list of presentation programs if you want to try your hand at wireframing in a linear, familiar fashion.
3: Prototyping tools for better web wireframes
Prototyping tools allow for more flexibility and interactivity in wireframes and prototypes, but still without getting into code. Used either online or offline, prototyping tools have the advantage of being specifically designed with wireframes and prototypes in mind, which means they often have powerful simulation, collaboration and interaction features. If you build a wireframe with Justinmind, you automatically have the ability to share, comment on and iterate on wireframes collectively with your team, and then move the fidelity up from simple wireframe to lifelike prototype in the same tool.
If you do decide to wireframe with a prototyping tool, core features to base your choice of tool on are:
- UI element libraries: Even for the simplest of web wireframes, you’ll save a heck of a lot of time if you have pre-built UI libraries at your fingertips. Many prototyping tools have device specific UI libraries and kits to help you build professional standard web wireframes from scratch, plus you can also create your own personalized UI elements – great for when you’re working on enterprise software, for example.
- High-level interactivity and animation: Obviously, wireframes are not built to be super interactive or to have stylish animations. But if and when you want to build on your initial wireframe and create something move advanced, a prototyping tool will let you do that without changing software. In-built features such as rich web interactions, data driven variables and advanced animations and effects mean that it’s relatively simple to switch up from an inert web wireframe to an interactive prototype.
- Easy collaboration: Depending on the project, you might need to share your web wireframe either with your team, with clients/stakeholders, or maybe even with potential users during early stage usability testing. If so, prototyping tools have a lot of useful features, as compared to templates or presentation programs: Justinmind allows you to publish, review and comment upon wireframes, plus integrate with user testing tools and simulate on a range of devices.
For more on how to pick the best prototyping tool for your project, check out this post.
Be aware that most prototyping tools have a bit of a learning curve, so if you’re under pressure to create that wireframe yesterday, stick with a software with which you’re familiar.
4: Coded web wireframes
Coded wireframes are not for the faint of heart, but they can be a great way to circumvent the outdated waterfall workflow and integrate developers right from the start of the website development process. The problem is, some designers don’t like building with code because it can feel clunky. So what are the benefits of getting into the code straight away? Well firstly, it can help reduce costs because you’re saving on other software (although you might end up paying out in reworks); secondly, you’re speaking the developers’ language from the start; thirdly, coded wireframes work on all platforms and anyone can use them.
That said, wireframing in code is going to be slower than with our other hacks, and you may find yourself chipping away at the code rather than thinking creatively about UX and usability.
Bonus hack: Faster web wireframing: use Sketching UI kit
Before you get into creating an interactive wireframe, it’s always good to get your ideas down. Sketching is a great way to do this – it’s fast and simple. Better yet though is digital sketching. With Justinmind’s Sketching UI kit, you have the chance to use over 100+ different drag and drop components to create easy sketches of your ideas. The beauty of sketching UI wireframes is the lack of commitment but the possibility of rapidly getting through ideas before you come to define properly.
Don’t miss out on these 10 inspiring examples of web wireframes to get your creative juices flowing.
To wrap it up…
Like we started out by saying, there’s no one-size-fits-all-projects website wireframe. A careful assessment of your projects objectives, your personal and team capabilities, and your resources, will take a long way to figuring out the right web wireframe methodology for you. But choosing one of these hacks will ensure you follow the appropriate methodology and end up with a web wireframe that acts as a foundation for a great final website.