Successfully Launching A New Website – Part Three

Part Three: Preparing Visuals

This is the third instalment of our blog series on best practices for successfully planning, building and launching a new website.

Our first article in this series explained how to execute the research, planning and specification stage of your website build to ensure launch success. Then, our second article explained how you can plan and create new content for your website, and what to consider when migrating existing content from your old site to your new one.

Now, let’s take a look at the design phase. We’ll explain the different steps we take when designing a website, from getting to know our client and their audience, through to getting designs signed off and passed onto the development team for beginning the site build.

Introducing the design phase

When you think about web design, you may think of colours, logos, buttons, fonts and other aesthetics. However, the way a website looks is just one part of design. There are lots of other things to consider, such as accessibility, usability, navigation, technical aspects, and how the design of the website will play a part in SEO, CRO and many other aspects of digital marketing. Really, the design of the website lays the foundation for these things – and when done well, it will set you up for online success.

Getting to know the business

Setting goals

Before doing anything else, at SilverDisc we like to get to know our clients as well as possible. We want to know a variety of things about your business which will help us to design a website that works for you. One of the first things we want to know is what your goal is. After all, a website is ultimately a sales tool that can help you to get sales, revenue, leads, bookings, or other meaningful conversions. If your website isn’t set up right from the start to help you reach your goals, then it may not do its job. So the first thing to understand – for both SilverDisc and for our clients – is what goals the website should be working towards. Why are we creating a website? If your goal is to increase sales, how many sales would you like the website to deliver? Being specific about what success would look like for you will help us to work together and reach that goal.

Understanding constraints

When designing a website, constraints can come in many forms. These may be budgetary or technical, and may come from outside sources. For example, you may want your website to have certain capabilities and there may be more than one way to implement these, with one way being more straightforward and the other being more involved and therefore taking more time and money. Knowing about any budget constraints ahead of this can help make these decisions easier during the early design stages. Whatever restrictions there may be, it’s important to work with them, not against them.

Understanding the nature of the content

We’ll talk more about content and design later, but one part of getting to know the business is knowing what kind of content might be placed on the website. For example, a fashion designer or artist may have lots of great photos to share and less text, while someone providing business services may have fewer images but write lots of copy. Knowing how a business likes to present itself can help us to decide which content should have the most emphasis and space dedicated to it, and how things should be laid out on the page.

Getting to know the audience

Identifying a target audience

Equally important as knowing the business is knowing its audience. Who is the target audience and what will they expect from your website? What is their age, gender, location, or need? Making decisions about the general aesthetics of your website relies on knowing who your audience is and what they want. Perhaps your customers are looking for luxury and your website needs to reflect the high-end value of your product. Or maybe your audience is looking for a very straightforward, no-frills transaction on a site that’s very simple to use and understand. This will factor into many of the decisions made about your website design.

Understanding audience behaviours

It may be that you already have some insights into your users and their journey, which could be useful to refer to at the design stage. Perhaps your sales have a long lead time and customers need lots of information from you before they make a decision. Maybe they like to get in touch and speak to you in person before buying. This can help with designing the features and navigation of the website. If you have used heat mapping tools and analytics on your old website, you may already have some idea of where users click, how much they scroll, which pages they go to in which order and what does or doesn’t work.

A holistic way of working

Departments working together

Once we have gathered all of the information we need, we create a functional specification to work from. Our designer, the project managers and our web development team work together closely on each project, all singing from the same functional spec sheet and bringing their own essential expertise to the table. The project manager oversees the entire project and liaises with the client and the development and design teams to ensure everything runs smoothly.

With several departments working together, we can ensure that the website we build is fit for its marketing purposes. Don’t forget about those goals we identified right at the start – we’re always designing with those in mind.

Designing for content

As well as working from the functional spec, we also design with content in mind. Remember in our last article when we talked about the importance of factoring content length and type into the design of the site? Content can inform the website design by helping plot out how much space to dedicate to each part of the page. This ensures that when it comes to populating the website with content – not to mention updating the site regularly going forward – there isn’t too much text crammed into a small area or a big white space that looks sparse or neglected.

Getting started

Gathering assets and guidelines

When we’re creating a new website, we might be creating everything from scratch, or we may already have some assets to work with. Businesses will have a logo they can provide us with, but they may also have some other assets such as icons or images that fit with their brand and that they would like to continue using. Add to this, some businesses have brand guidelines, which should also be taken into consideration when designing the new website. Brand guidelines help everyone to be consistent, and at SilverDisc we also write our own guidelines as we go along so that we know which colours, buttons, fonts and so on we are using throughout the site. This consistency is very important for user experience.

Using Adobe XD

At SilverDisc, all designs are completed using UI/UX design software package Adobe XD. Adobe XD gives us some great benefits as it’s quick and easy to use, and provides us with a great way of sharing designs with our clients and the development team. In this program, the dev team is able to hover over elements to find out more about each one – such as where hyperlinks lead to – and this makes it easier for us to share vital information about the design.

We also use Flaticon and Envato to speed up the process of creating design assets.

Working through the designs

We usually begin by creating the homepage for mobile and desktop. Once this is done, we send it to the client for any feedback. Starting with just this page means we can implement any required changes quickly without having to change too much. Then once the client is happy, we continue working through the rest of the functional spec.

Best practices for technical design aspects

The field of web design is huge, so here we've selected just a few best practices that we implement during the design phase:

1. Follow brand guidelines.
2. Keep accessibility in mind for people with disabilities and for all users, by complying with Web Content Accessibility Guidelines (WCAG 2.1).
3. Make the website easy to use on desktop, mobile and tablet, for example by ensuring elements aren’t too close together for the user to press them accurately.
4. Don’t underestimate the power of negative space for providing a clean look that isn’t overcrowded.
5. Choose a colour scheme that fits your branding.
6. Make calls to action bold and prominent.
7. Use consistent fonts, colours, navigation and wording across the website.
8. Don’t try to reinvent the wheel – if certain links or elements aren’t where a user would expect them to be, they could get confused and bounce off the site. Think logo top left, contact link top right, and navigation at the top.
9. Let SEO be your guide by considering elements such as H1s, ease of navigation, responsive design and internal linking.
10. Remember that design choices can impact your page loading times, which in turn can impact SEO.

Completing the design phase

When we have completed designs for the entire website, we pass these on to the client for feedback. We implement any changes, and then once the designs have been signed off, they are passed onto the development team ready for the website to be built.

But that isn’t the end of the design story. As a full-service digital marketing agency, many of our clients are not only website development and hosting clients, but also marketing clients. This means that we can continually gather data, review user behaviour, and most importantly, see whether the website is helping us to meet our marketing goals. With this information in hand, we can continue to make changes to the website as needed. When it’s time for a redesign, we’ll have plenty of knowledge behind us to help us make informed decisions about how to improve the website and ensure we continue to meet your business goals. This is all part of our Digital Marketing System, in which we strategize, engineer, market and measure as a continuous cycle of improvement.

In the next instalment of this series, we’ll explain what’s involved in the development stage of successfully launching a new website.