The secrets of planning a successful website

Wireframes

Budd considers wireframes essential for working out interaction design and a key tool in an interaction designer's toolbox, akin to a movie director's storyboard or an architect's blueprint.

"They enable you to communicate ideas in a visual medium and check they make sense before any costly development or production commences," he says. "Such things are cheap and it's easy to make changes on paper or to quick HTML prototypes, but it's harder and more expensive to do this once a site has been designed, programmed and implemented."

Crab is also fond of using wireframes during planning, although Lateral doesn't create them prior to working on initial graphic design components – instead, design-free wireframes are used in parallel with structure-free design concepts.

"The idea is to communicate the structure and functional aspects of the site in tandem with an explanation of the design language – typography, colour and layout," he explains. "We find it useful to show designs outside of structure during the planning process – this tends to avoid the 'can you move that box over there a bit' and 'make the logo bigger' type of feedback and forces clients to concentrate on the purely aesthetic or structural aspects of the design accordingly."

Le Clainche works in a similar fashion, but suggests the balance between structural composition and aesthetic components in a plan can be tailored depending on the complexity of the site.

"For larger builds, we translate requirements into a high-level site map, which is then refined into detailed section structures and wireframes," he begins. "But for marketing communications, we take a more creative approach, using scamps and mood boards as a rich way to translate ideas and metaphors that are structured into a site map and more detailed wireframes."

This, he argues, helps bring the site to life for key project stakeholders and presents additional ideas or approaches. Additionally Miro Walker, CEO at Cognifide notes how extra visual design can be used when planning sites with certain clients: "Although graphic design can come relatively late in the planning process, if your wireframes are of a high quality and the client is able to engage with them, less experienced clients benefit from an earlier focus on design considerations, as this helps them understand the planned end result."

Once a website's goals, structure and information architecture are defined, planning ultimately shifts towards the final piece of the planning puzzle, technology, and there are numerous things to be mindful of. You must investigate likely browsers and platforms users will visit the site with and plan accordingly.

For example, if the site is for a company intranet where employees are saddled with an ageing browser, the technology at your disposal and the standards you employ may differ from those used for an all-singing, all-dancing site for users at the cutting edge.

It's also important to fully understand any ramifications for hosting and performance, regardless of whether you're directly involved with hosting the site or not. "You must also consider scale, load and performance – how many users there are, what the usage pattern is likely to be, and whether downtime for maintenance is acceptable," says Walker.

The joy of tech

With many modern sites going beyond mere text and static imagery, planning must take into account rich media components. "Video, animation, image galleries and downloadable files all affect bandwidth costs and require a specific hosting environment to be able to cope with them," says Peter. "For example, if the site is likely to use streaming video, you need to consider whether the site's own server will host this or whether a third-party supplier will do so, because this has both a financial and technical implementation impact."