When creating an enterprise-level website, wireframing is necessary for one or more of the following reasons:
- The user requirements are not completely understood
- Market research or product development is still taking place
- It is too early to take decisions about technology
- WordPress
- Drupal
- Flat HTML5
- Bespoke PHP
- Extensive testing is needed
- Buy-in is needed
Of course, design is imperative and these sites need to function as proposed. But the biggest development hurdle is usually internal: getting agreement on the look, feel and function of the site before coding ever begins.
The Wireframing Process
Understanding these five steps will help get wireframing right.
Brand
It may seem bizarre, but many organizations commissioning a large website do not have a brand specification, or do not have one that is sufficient for a website. A logo, typeface and color palette may be sufficient for simple sales brochures, but a website also needs definitions of tone-of-voice, stance in regard to the reader, photographic style, secondary graphical elements and interactions. At the very least, a brand specification must cover the brand promise, market position or category, brand values, brand style or personality, brand architecture, brand identity (name, logo, graphical treatment) and deployment-specific decisions. Otherwise, as the project grows, the team will return again and again to decisions that should have been made early on.
Function
All structured communication must answer questions of outcomes, audiences, messages and delivery. The outcomes relate to changes in the ‘real world’ as a result of changes in the thinking and behavior of individuals. ‘Produce a website’ is not in itself an outcome. The audiences are the people we need to reach in order for that to happen. Relevant audiences are the decision-makers, for example an individual who presses a button to buy a product, the influencers, for example people who share a quick post on Facebook, and gatekeepers. The gatekeepers are people who cannot necessarily make things happen, but they can stop them happening. The obvious example is regulatory authorities, but gatekeepers are often internal—a sales team that doesn’t push the website, an executive team that decides to cancel the project, or even a finance officer who withholds budget.
The messages are ‘what we believe will persuade the decision-makers to achieve the outcome, if they believe them.’ While there will be many messages appearing on a complex website with numerous contributors, the site will also have three or four underlying messages. These will often be communicated by the look and feel and only reenforced by words.
Delivery is how the messages reach the audiences consistently and repeatedly. For a website, this will ultimately be expressed in coding, but, left to themselves, coders easily get carried away. For example, WordPress has become a hugely powerful platform with a variety of plugins. At the last minute, a coder can simply add in a map plugin, or a calendaring plugin, or a social media platform. However, unless these are part of a deliberate decision to deliver the messages in this way, the result will detract not add.
Creative
The creative treatment is where wireframing comes into its own. Once the brand and function have been understood, we should look for the most effective possible presentation. It is always better to deliver messages through creative work than through coding. If you look at Apple’s website, you will notice that the front page is ‘flat,’ with gorgeous graphics but without interactions or animations. Once you click on a product line, some clever coding starts but only to the extent that you can configure your product based on some simple choices
Creative benefits from being tried out by lots of people. This may be a bit different from the way many designers like to work, but a designer who can facilitate an entire team by having them gather around their workstation and ask to add in additional elements—and then see them a minute later as a functioning website—will gain an increasing share in the process.
Buy-in
Large web projects go in increasing circles of buy-in. This is because the risk to the entire organization is dramatically greater with a website than with a single print publication. Executives who would take no interest in a sales brochure will want their voices heard on a project which will represent the entire organization. This will almost always mean producing additional written reports of the web project, rather than just showing wireframes (as with PowerPoint) or even allowing them to play with a QuarkXPress-produced flex website. Surprisingly, the quality of printed materials supporting the decision will often have more weight with the exec team than the digital work itself.
Coding
At a particular point, the creative work is ready and buy-in is complete. This is when the site is handed over to the coding team. It is actually possible to convert a QuarkXPress Flex site to WordPress, Drupal or other systems, but most coders will prefer to use the QuarkXPress-produced site as the visual and functional communication and do their own coding. Giving them a functioning website to work from will enable them to get it right first time. It will also enable the project team to explain what is wrong if the coding produce something that is substantively different.
Ultimately, wireframing has three goals:
- 1. Produce the site you actually want
- 2. Persuade the partners to buy into it
- 3. Publish your content easily
Wireframing with QuarkXPress can help achieve these goals faster, easier and with more confidence in the results. It is much better suited to propagating changes throughout the layout by means of item styles, shared content and image updating, and, crucially, the current state of the design can be turned into a preview or a functioning website at the click of a mouse. This gives confidence to the team, as they can experience the site for themselves at any point during development. It also means dramatically better communication with the coding team at the end of the process.
Watch the webinar replay of “Wireframing Enterprise Websites.”