Managing a website design project - guide for charities

Website project

Assuming you've sent out a brief for website design and appointed a design agency. the next step is working with them on the project. This post explains how to manage the design relationship well.

If commissioning a website is new territory for you then you are likely to be on a learning curve. You’re not alone, we’re all learning. Here we want to share a few insights with you about the web design process that will help you get ahead in your communications and get the very best from your partner agency.

Firstly, what do we mean by design?

Design is a general term that can mean a lot of different things. ‘Website design’ is a term often used to refer to the entire process of creating a website. You may have your own preconceptions that design is all about graphics, art or creative ideas.

Our designers are typically involved throughout a project with a number of key roles. They help understand user behaviour and needs, they generate creative ideas, they sketch concepts, produce layouts, and create icons, illustrations and diagrams to name a few.

In this two-part series we’ll go through the main design disciplines relevant to website design, in turn, roughly in the order they slot into the overall process. For each one, we’ll give you a quick tip for what you can do to get ahead.

Mood boards

Early in the process, we create mood boards.

A mood board is a collection of curated, inspirational content that represents your priorities and desires for the look and feel of your site. We often ask you to get the ball rolling by listing a few sites you like. We then take it into overdrive and source dozens of examples that push creative ideas in all sorts of different directions. These are then reviewed together, comparing and contrasting different ideas. These can be physical boards or somewhere on the web for lots of people to access at once.

This step in the process enables us to get to grips with what you want from your site before we’ve even put pen to paper. It’s fast and very effective.

Quick Tip:

If you’re looking to commission a web agency, get started right now collecting inspiration for a mood board. You can do this with tools like Evernote or Pinterest to save content you like, or simply bookmark websites in your browser or make a note of them in a document.

Your web agency will love you if you know the term ‘mood board’ and have already started one, especially if you’ve allowed yourself to look far and wide for inspiration.

Wireframing

WireFrames

A wireframe is a simple greyscale diagram of the layout of a web page. Wireframes are normally created to quickly visualise the layout of all the key pages of your website without having to take the time to apply graphical styling. Again, speed is of the essence so that we can quickly respond to your feedback and make changes.

A wireframe will normally have placeholder images, simple blocks or dummy text to represent content and maybe a single colour for important buttons or links representing key user journeys. The plan when reviewing wireframes is to put yourself in the place of the user and imagine travelling through the website from page to page taking actions.

Quick Tip:

When reviewing wireframes be prepared to forget about your mood boards as this stage has a very different purpose. While the mood board is about establishing look and feel, wireframes define layout and structure. Consider these two steps like long lost cousins, about to be reunited.

Your web agency will love you if you are able to understand that wireframes are just about layout, not look and feel.

Visual concepts

Designs

This is where mood boards and wireframes unite to form the first exciting view of what your website will actually look like. This is the stage in the process that is most commonly regarded as ‘design’. The designer will create visual concepts representing the look, feel, layout and structure of the key site pages.

Our clients are often interested to know that we regularly spend less than 30% of our ‘design’ time allocated for a project to this stage.

The reason behind this is that if we’ve engaged successfully over mood boards and wireframes, the visual concepts are where we slot this all into place. Your designer might start by showing you just a couple of pages, then through a few rounds of revisions, incorporate your feedback as it expands to demonstrate more and more pages of the site.

Quick Tip: 

When reviewing visual concepts, keep perspective. It’s all too easy to get too focussed on the visual aspects of the design. Remember all the work that’s already been done, and compare the visuals against the mood board and wireframes. Re-read the specification and recall your overall objectives. Most importantly, put yourself in the place of your target users.

Your agency will love you if you can be objective and specific in your feedback on designs, always referring back to the parts of the process already completed.

Responsive design

Responsive-Design

By now we're all aware that engaging with mobile technology is important. There are a few ways to achieve a good mobile user experience. One of the cheapest is to employ responsive design. This is the process of ensuring that any given web page can effectively change shape and style to suit the device on which it is being viewed.

If you want to create a brilliant mobile browsing experience for your users, here are a few key things to keep in mind:

  • Maximise flexibility. The design needs to be very modular and fluid so that elements can easily be rearranged on the page depending on the size of the screen. You may need to sacrifice control over specific elements for the greater good.
  • Minimise bandwidth. The design needs to be as lean as possible to require less data and load quickly. This may come at the cost of less graphical embellishment or large images, but if a site doesn’t load immediately a mobile user is very unlikely to persevere.
  • Simplify navigation. It’s quite common for navigational tools to be hidden inside a menu for mobile devices so as to devote more screen space to actual content. It can be difficult for users to work with larger, more complex menus on mobile, so you often need to keep the sitemap simple.

Quick Tip:

When planning your website content, try thinking mobile-first. This will help you consider your users and the instances in which they might access your site. Ask yourself the question, ‘If a user doesn’t want this on mobile, why would they want it on desktop?’

Your agency will love you if you are ruthless about your content and are able to focus on what your users actually want.

Graphic design

GraphicDesign-ForumForTheFuture

Of all the design disciplines we’re covering, this is possibly the easiest to grasp and therefore regard too highly. However, it's important to remember that in the world of the web, graphic design always needs to serve a purpose. We’re never purely creating artwork, we always want the user to do something. All graphics should, therefore, support the main objectives - too much graphic design can distract and confuse.

This said, graphic design is not to be underestimated or pushed under the carpet. Attention to the smallest details can make a big difference. 

Quick Tip:

When looking for inspiration for your mood board or reviewing design concepts, always ask yourself ‘what purpose does this graphical design element serve and is it working?’

Your agency will love you if you can see the difference between functional and decorative graphic elements and understand the benefits of each.

 

User experience (UX) or user interface (UI) design

Voluntary Works Homepage

UX design, as the name suggests, is about looking after the users' needs and ensuring they always know what they should be doing. The UX designer is often striving for simplicity, clarity and fewer choices in an effort to guide a user along a particular path.

The UX designer will be concerned with the language used in a heading, the positioning and colour of a button, the number of clicks required to make a donation and many more fine details.

The success of your website is largely dependent upon user engagement. Normally, the more engaged they are and the more action they take, the better.

Reviewing the user experience of a design concept is often challenging, especially if you are very familiar with the project. It really helps to test with real users and ask open questions. Honest feedback from users can reveal unexpected results and often move the design direction from your initial preferences.

Quick Tip:

When reviewing design concepts, always put yourself in the position of your users or better still, ask them directly. Understand that a more attractive, colourful web page is not necessarily a better one. Test, see what gets results and go from there.

Your agency will love you if you always talk in terms of your users' needs rather than your own preferences.

Illustration design

FFTF-LooUp-Illustration

It’s helpful to think of illustration as a unique design discipline, partly because it is actually quite a specialised skill but primarily because of the role it has to play on your website. Illustration is a wonderful tool for adding depth to your content. It can help tell stories, grab attention, visualise data and explain complex concepts quickly.

Illustration is an area where it can be very easy to lose control of your brand identity, so it’s very important to keep close communication with your designer while selecting an appropriate style. Just like the mood boards you create for the main website concepts, you should research illustration styles to agree on a direction early on.

If you have data to present, make sure you know exactly what you want to say so that your designer can ensure the right elements are prioritised.

Quick Tip:

If you feel that illustration can form an integral part of a story you're trying to tell or a concept that needs explaining, get your designer involved relatively early and work of the copy and visual ideas together. The clearer your messages, the stronger the illustrations are likely to be.

Your agency will love you if you can be flexible with the style and content of your copy in order to accommodate the visual element as well.

Your Feedback Matters

Hopefully, the explanation of the different terminology involved in designing your website will help you feel more confident in approaching your website designer. Any agency worth their salt will want you to be involved in the process and deliver feedback, and being able to use these terms will help facilitate the process.

Date: 
16 April 2014
Owen Roseblade