Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Site storyboarding and design

Take a structured approach to designing your websites and you will end up with a design that fits the site objectives perfectly, as well as looking stunning

Creating a design for a website that successfully represents the subject matter or business in question is more than chance. When we embark on a new web design project it’s always very tempting to jump straight into creating visual mockups, defining navigation placement and colour schemes. This can work occasionally, and definitely adds a freshness to the final design, but as an approach it’s full of risks.

As a professional web designer it’s better to take a structured, measured approach where you build a design solution after examining business objectives, user requirements and defining the informational layout; that is, how the information contained within the website will hang together.

There are many different ways to approach a design project. In this short tutorial we will look at just one way to improve your workflow, reduce risks to meeting business goals and end up with a meaningful design that meets users’ needs. You can adapt this approach to suit your own personal needs – the key lesson to take away here is that having a firm structure in place doesn’t actually restrict the creative process but rather gives it a solid grounding.

(Author: Sam Hampton-Smith | Originally appeared in Issue 156)

01 Gather information

The first stage of any design project is to find out who you’re designing for. This is simple enough if you’re working on a personal project, but if you’re employed to work for a client you need to ask some crucial questions at the beginning of the process. Establish what the purpose of the site is, who it’s going to be aimed at, what the constraints are (specific colour schemes, fonts and images that are required as part
of any existing branding) and so on. In our case, we’re going to be creating a design for a medium sized engineering consultancy business. Understanding your client and their business is crucial as this will have a huge impact on the design considerations.

02 Define your objectives

Having determined who the website is going to represent, we need to establish what and who it’s for. In most cases your client will want their site to perform a particular function: increase sales, communicate with customers, build relationships or explain a concept. These are the core business objectives that drive the decision to develop a site. Once you’ve defined the objectives, you’ll have a good idea of who the users of the site are going to be. You’ll also be able to set some success criteria; define how you will measure success or failure of the website. For our business the client wants to broaden their customer base, educate existing clients to other services offered and introduce a new sustainable energy service.

03 Create user personas

At all points of the design process it’s useful to refer back to the business objectives, and also the target users. You should ask yourself what the user reaction will be to any design element you introduce. To help measure and objectively record this crucial information, create a series of user personas. A user persona is a caricature of a typical user within the target audience. Develop a separate persona for each major element of the target audience. Give each a name and some broad characteristics such as age, sex, wealth, education and attitudes. Base these attributes on what your client can tell you about their customers (but avoid recreating a real person). Have a look at our personas which you’ll find on the cover disc. If it helps to visualise your users, Google Image search for suitable mugshots for each persona.

04 Create a site map

Now we know what we’re creating, for whom, and what the objectives are. This collection of information allows us to start creating the informational layout for the website: how the content and site information is arranged semantically. A common approach to handling this part of the design process is to create a site map. This is a visual representation of the pages or sections that comprise the site overall. Draw this on a piece of paper and think carefully about the relative importance of pieces of information. Refer to the objectives and user personas to ensure that the key information is readily accessible. In our case, the client wants to push their renewable energy services, so our primary navigation will contain a link to further information about this.

05 Make a mood board

Here’s where the fun begins. It can be tempting to jump straight into a web design project at this stage, but the value of the information gathered and developed in the first four steps will really show a benefit when you start laying down ideas. The idea is to gather together as much inspirational material as possible. Collect this in any way that suits you: a mood board with cuttings from magazines and brochures, a digital clipboard with web snippets and screen grabs, or a big box that you can stuff T-shirts, sandwich wrappers and vinyl records into. Save and record anything that can provide inspiration to your project. If you’re unsure what a mood board might look like, do a Google image search for ‘mood board’ to get some ideas. See the boxout for useful tools to help you create your mood board.

06 Sketches and storyboards

Now it’s time to take your mood board and sitemap, user personas and objectives, and create a series of thumbnail sketches to represent a design solution that encompasses all of these elements within a single layout. Each design decision you make will be related back to the information established and developed in the previous stages. We’re using the company font, Cafeta, to create accent headings and navigation elements, helping to support the branding. The branding suggests the Twenties to us, so we’re aiming for a stylised industrial look which also helps to re-enforce the business message and competencies. Notice that we’ve set aside three large areas for key service messages; as our user personas are busy decision makers we’re going to try to get the most important information across to them quickly and effectively. We’ve still got room for an aesthetically pleasing layout though! Every designer is different; there is no right and wrong answer to the design process, so do what feels right for your project.

07 Reflect

This is arguably the most important phase of the design process overall. You must take time to step back and reflect on the work you’ve done, the design solutions you’re proposing, and what that means in terms of usability and the business objectives. Consider how the users represented by your personas will react to the website; will it appeal? Will they like it? Will it meet their needs quickly and without fuss? Is the design appropriate to the business and its objectives? If you can answer positively on all counts you’ve got a workable design. It’s also worthwhile getting second opinions at this stage; ask some willing volunteers to give you honest feedback on your design approach, and take on board any criticisms without taking these personally – feedback, good or bad, is a useful tool to help you refine your design.

08 Create design approach

Once you’re happy with your thumbnails, you need to develop these into a first digital mockup. Everyone has their own favourite way of approaching this, so use whichever tools you’re most comfortable with whether it’s Photoshop, Fireworks, Paint Shop Pro or Illustrator. We’ve used Illustrator and Fireworks here to refine our thumbnails into a design that fits a 1024 screen width (common for corporate businesses). Choose supporting images carefully, and refer to your mood board to get the right combination of image association and colour. Stick to a defined colour palette throughout the design. Don’t spend too much time on the fine details yet; we need to test that the design works before developing the final product. The photographic images used within our example site design are licensed to Stock.xchng (

09 Prototype your design

Ideally you’ll have a couple of different pages laid out roughly. There are numerous ways to test your design works effectively. Paper prototyping allows you to quickly spot any issues with navigation or information. Print out each page layout and sit down with a volunteer. Ask your helper to perform a series of tasks using your design (for example “locate the contact information for this business”). Get your colleague to point to the button they want to press, then show them the page that will appear when that action is taken. If the user can’t find the information you’ve asked them to, you need to look again at your design. Another approach is to use a tool such as Fireworks which allows you to create functional mockups of the website based on interactive images. Save each page design as a flat image then import them into Fireworks. Add image maps to link between pages where the navigation sits within the design. Repeat the same process as for paper prototyping, but sit your helper in front of the computer to conduct the testing.

10 Attention to detail

Once you’ve established that your design works, it’s time to go back and develop the fine details. Add your “wow-factor” elements here; embedded Movie Clips, careful typography and consistency checks. You still need to refer back to the user personas and business objectives, but by now the design should be very well defined so there’s less risk of going off-message. We’ve added some useful brand-supporting elements here such as ghosted versions of the logo, as well as a caption area for the primary accent image.

11 Refine into final template, then test again

Once the design is signed off by the client (or you’re happy with the completed design where you’re the client), work up the design into HTML in the same way you normally would. We look at some of the techniques involved in realising our design in the tutorial found on page 50. When the design is translated and you have your HTML, don’t forget to test it once more to make sure everything still works. This design approach might seem overkill for some projects, but your clients will thank you for it when their new website meets the specific needs of their users and supports their business objectives as well as looking great.