Opinion

Part 3 – Design | The 5Ds: LEAP’s web design and development best practice series

By Taylor Setterfield

People love beautiful things. When you see something attractive, you want it, right? Whether it’s the curb appeal of a dream property, the salivation over a delicious plate of food, or the desire to explore a really cool-looking website. Make it look good and people will be drawn to it.

Now, we’re not scientists (and to be honest, even the professors are still trying to fully understand why our complex brain responds in this way to nice looking things), but we support this fact wholeheartedly during the third phase of our 5Ds framework.

Phase three is indeed, Design. As a sidenote, this blog post is part of a five-part series. The series is aimed at sharing our best practice to help you understand the project processes involved in creating a new website, refreshing your existing site, or embarking on a digital project. Phase one is Discovery, and phase two is Defintion. Grab a coffee and head on over to read those when you get a moment.

In a nutshell, during the Discovery phase, we do the research, gather up all the data and collect a whole load of intel that we then call upon during stage two: Definition.

At the end of the Definition stage, we have a clear project brief that outlines the scope of the work. We have lots of verified creative ideas that will be used to communicate key messages to the intended audience/s and a visual framework showing how these messages will be delivered to those audiences. The visual framework includes assets such as a sitemap, a content framework and wireframes (don’t worry, it’s all explained in the Defintion!). Crucially, by this stage, we have also tested any necessary third-party integration, so we know whether concepts are feasible.

Essentially, the prep work is now done and now we can start bringing the project to life. Let’s go!

Content Audit

Does your content make the grade?

Did you know using red pen to mark school work is frowned upon nowadays? It’s all smiley-face rubber stamps and corrections in purple and green … apparently red pen is confrontational and THREATENING … What a load of ol’ *%?@!

We jest, but pop the red pen back in the draw, take your project brief and sitemap from the Definition stage and line it up against the information you uncovered during the Discovery stage (include your Employee Value Proposition ‘EVP’ too if you have it), and review these against each page of content on your site as follows:

  •       Is the content on that page suitable for purpose?
  •       Is the content on that page easy for the reader to understand and digest?
  •       Does the content incorporate your brand’s tone of voice?

In auditing the content, we’re looking at the quality and consistency of the content on an existing site. We’re also looking at what can be repurposed, what needs to be rewritten and what new content is needed.

Julian Dye, Digital Designer, LEAP

Copywriting

Having performed a thorough content audit, we’re now in a position to brief the copywriter as to the copy required. We are a content-first agency, leading with the content and messaging before the aesthetics of the site. This is for a few reasons:

  • It gives the project team a good understanding and foundation of what needs to be included in the project before we embark on design.
  • Collating the content first saves time as the designer and technical teams have all the necessary requirements and assets up front.

The copywriter can either review and edit existing copy, or write brand spanking new content for the site, dependent on the requirements for that particular project. Your content audit will determine this. NB. A copywriter will often use ‘track changes’, which appear on the document in red. Please don’t think copywriters are being confrontational – it’s just the way it is…

Don’t underestimate the power of words

Brief your copywriter fully and share all the necessary documents with them: the project brief, the sitemap, the wireframe, your brand guidelines and messaging map. The result will be purposeful, relevant and engaging content that is beautifully aligned to the sitemap and content framework.

Multimedia Content

Remember at the beginning of this post we spoke about people being drawn to nice looking things? Well here’s your opportunity to take your site to the next level.

Bring your website to life with multimedia assets

Not only serving to interest your visitors with a nice variety of content, multimedia assets also go some way towards giving visitors the three-dimensional experience they would get on the high street or during a face-to-face exchange.

So, review the video content, photography and stock images in your library to see if they meet the objectives of the creative design. Often, our clients will require fresh multimedia content, so we’ll step in and organise photo shoots, video storyboarding, filming and editing through our in-house film production company.

Bespoke imagery and video content 100% delivers a more unique, engaging and easy-to-digest format than words alone.

Julian Dye, Digital Designer, LEAP

SEO Guidance

Your efforts with copywriting and multimedia content have ticked the box for your human visitors, but what about the bots? You also need to make sure the search engines can find your site, so they can send organic (unpaid) traffic to your site, and that’s where SEO comes in.

We include an SEO specialist as part of the project team during the Definition process, to ensure our plans include their input as to the best approach. It helps to steer both the site structure and the content creation.

Our service is in-depth, but if you’re reading this with a view to making a few changes yourself to improve your site’s ranking in search engines, you might try the following tips:

  • Consider whether your URL – or domain name – is ‘friendly’ (no special characters, page IDs etc) and appropriate to your business (search engines will need to understand what your site is about – this is a clear indicator).
  • Write unique Page Titles and Page Descriptions for each page of your site. This is done in the ‘back end’. Search engines will use this information to rank your site.
  • Use Anchor Text. This is the text that visitors can click on to guide them to another page, either on your site, or another website.  Make sure you use Anchor Text in a way that’s useful to help visitors find what they are looking for! We used some Anchor Text at the start of this post – did you spot it?
  • Add Alt Text to your images. Again, in the ‘back end’ of your site, add a short description to tell search engines what the image is about.

Digital Brand Guidelines

You’ve worked hard to create your brand and you’re proud of it – you should be. It’s important not to let your brand identity become diluted as your online business grows, but with different challenges and constraints from the offline world, you need to ensure consistency.

We will often work with clients who have offline brand guidelines, and use these to help define the digital brand identity. Online, there are interactive elements to consider, such as rollover colours, button effects, and styles that need to adapt for different devices. We also need to consider the accessibility of a brand’s colour palette, ensuring that applications of text offer enough contrast for site visitors with impaired vision, for example. Typography guidelines may also need adapting to ensure they work across all screen sizes and applications.

 

Digital Design

Think of a website you love visiting and why that might be. Is it the way the site is structured, the way the content engages you, is it visually appealing and easy to navigate? We have so much choice – and so little time in our busy lives – that we simply don’t bother with ill-performing websites anymore. We’ve matured as digital consumers, and quite rightly, we expect more from an online experience.

It’s important to be creative, so your site makes an impact, and is memorable for the right reasons. Be user-centric in your approach to digital design, and remember, your visitors will be accessing your site from a variety of different devices, so make sure your design is responsive.

The next stage is to take all the insight from the Discovery phase, the groundwork created during Definition, and apply the different tools discussed above to craft and design the website.

The Digital test drive

At this point, we take the site for a test drive. We create an interactive prototype of the website for the user to interact with. Our user-experience (UX) designers can then see how visitors navigate the site as a whole, as well as specific user-journeys.

This allows any revisions to be made prior to the build phase. We’re very thorough, oh yes we are.

 

Marketing Assets

You’ve spent all this time creating something wonderful, now let’s tell the world about it! Online assets, such as emails, digital banners and infographics, and offline assets such as posters and leaflets, can all be used to support your marketing plan to tell your target audience(s) about the brand and the new website – as well as paid media to drive traffic to your site. Just remember to be consistent with your design and your messaging!

Hopefully by this stage in the process, you’ve developed an understanding of all the individual elements that need to align to create something that is head-and-shoulders above the competition – to attract both human visitors and search engines alike.

Next up, it’s the Development stage. Join us again soon for all things back-end, front-end, HTML, JavaScript and SEO Migration-esk! Don’t worry, it’ll be jargon-free. We promise!

If you have any questions about any part of the process, please get in touch. Leave us a comment, or drop us a line: hello@leapchichester.com.

Our door is always open.

Let's talk.

While you're here...