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."

Latest in Internet
A smartphone on a sofa showing the WhatsApp, Telegram and Signal apps
Forget AI – WhatsApp is planning a simple messages feature that could be its most useful upgrade in years
Quordle on a smartphone held in a hand
Quordle hints and answers for Friday, March 14 (game #1145)
NYT Strands homescreen on a mobile phone screen, on a light blue background
NYT Strands hints and answers for Friday, March 14 (game #376)
The logo of the social media app Bluesky is seen on the screen of a mobile phone
Bluesky gets a massive video upgrade to tempt X fans who are frustrated by its cyberattack outages
Quordle on a smartphone held in a hand
Quordle hints and answers for Thursday, March 13 (game #1144)
NYT Strands homescreen on a mobile phone screen, on a light blue background
NYT Strands hints and answers for Thursday, March 13 (game #375)
Latest in News
Jason Sudeikis' Ted Lasso pointing at someone in Ted Lasso season 2
Believe it, baby: Ted Lasso season 4 is officially in development for Apple TV+ – and Jason Sudeikis will reprise his role as the titular soccer coach
Rainbow Six Siege X promotional art.
The Tom Clancy's Rainbow Six Siege X 6v6 mode might finally pull me away from Black Ops 6
A close up of the new web version of Apple Music Classical
Apple Music Classical is now available on the web, but its Mac app is still nowhere in sight
Silent Hill f
Silent Hill f will present players with 'a beautiful yet terrifying choice', and I can't wait to see what it is
Google Chromecast 2
Google is finally rolling out a fix for broken Chromecasts – just as new bugs appear on the Chromecast with Google TV
Garmin Instinct 3 in Neotropic Green
"I'm an idiot": Garmin user reveals how fixing one setting completely changed their training after months of making no progress