In theory, it is easy to design a website, but making it a big success is the hard part. In an unregulated industry, web designers are everywhere, but how many truly understand how to design a website that will be successful when launched and achieve its goals, long-term?

Like everything, there is a right way and a wrong way to do it and getting it right doesn’t happen by accident. This article aims to help Web Designers follow 15 best practices to avoid disasters, keep their client happy, and deliver a website that will work hard for their business or organisation.

GET A DETAILED BRIEF

It is essential to understand the scope of the work, for both the design and development of the new website. In our busy world, clients are typically in a rush, but it is essential for managing client expectations that we understand all the features to add to the site, what pages are required and whether we need to integrate with third-party systems using API’s etc.

As a web designer, you’ll want to gauge what the client likes design-wise. What other websites have they seen that they want to take ideas from, what sites do they dislike and are there any new design features they want to include in their own website.

Web design is a bit like art, one person will love something that others will not like, so you need to discover what your client likes before starting any work.

PLAN WITH SITEMAPS, FLOWS AND WIREFRAMES

Creating a sitemap helps to confirm the pages that the client needs within the new website. Important pages should be relatively near the top, so users can find them, not buried too deep. Creating the sitemap is an iterative process; once the client has seen the initial sitemap, it will get them thinking and they will no doubt have additions or changes to make. Keep revising the sitemap until you get sign-off from the client. You then have a solid basis for the new site which determines what pages you need to design and build.

The next stage is to create wireframes. These are sketches of potential website layouts that you can use to explore the user experience (UX) of your design. Put important elements of the site in the most obvious places, so users will see them, obeying the golden triangle of web design.

If the web project is quite interactive, you may also want to build out some flows of your user’s journey through the various stages, showing the choices they will make as they go through the website or application. As with every stage, get your clients’ feedback.

GET YOUR HEAD INTO THE CLIENT’S BRAND

If your website is going to be a success and get your client’s approval, you will need to fully leverage their branding. Ask your client for their brand guidelines, including logo, fonts and colours. Have a look at any images they use, their tone of voice, and whether their brand comes across as very corporate, fun or friendly etc.

Be mindful that you may need to build on it, creating more of a digital design system, to include forms, cards, margin/padding, testimonials, sliders, banners, blocks etc.

Any fonts specified in the brand guidelines will need to be checked to ensure they are “web safe”. This means the font licence can be used on websites by anyone and you will have the correct font files, which web browsers can display correctly. If the brand uses fonts that are not “web safe”, you may be able to buy a licence from a font shop or you might be able to find an alternative that is similar using Google fonts.

DESIGN FOR YOUR AUDIENCE

You must design for the target audience of the website. By this, we mean you must think about who they are and what they will want to see when they visit the site. Artists and Creatives will appreciate more creativity, Accountants will want a more corporate look, and kids will want it to be bright and fun.

Consider how different the audiences of a Lawyer’s website and a School Nursery are. The Lawyer’s website will be corporate, with legal services/language that shows their skills, experience, and their strong team. Visitors will need to trust the firm to handle expensive legal matters and get things right. On the other hand, the School Nursery site should be friendly, fun, and welcoming, so parents are put “at ease” about leaving their children there.

Sit down and create personas to help understand who the audiences are. What are they looking to do on the site, what are their pain points, things they love etc. Will the website visitors mainly be male, female or both? Where do they live, what do they do in their spare time? Strong personas help you create a User Experience (UX) that is tailored to them, making it more likely that they will buy or enquire through your new website.

MAKE IT AN ITERATIVE PROCESS

Keep showing small, regular changes to the client, so they are updated along the way. This will reassure them that things are happening and catch feedback early on, which is much for you as the designer too.

Constant, small updates help the client to feel more involved in the project and more relaxed seeing regular progress. It’s always better to get feedback early rather than last minute so you can change things before going too far. This results in a more efficient process, which is less work overall and more profit for you, the web designer.

An iterative design process is part of developing a great end product and means your web design skills will develop and improve over time, leading to better results, leaving you and your client much happier.

CONSIDER ACCESSIBILITY

A website should be accessible to all users, no matter what disabilities they have, where they are and what device they are using.

Consider what accessibility requirements your target audience may have, e.g. if the target age is the elderly then don’t use tiny fonts! Infact, never use tiny fonts! They may look neat, but your users may be visually impaired or have a smaller screen than you.

Your website should be designed for all screen sizes, including mobiles, using the correct responsive web design techniques. Design both desktop and mobile versions of the site so you can size everything properly making sure fonts, navigation and buttons are not too small. Ensure a good contrast between text and backgrounds and if users require extra accessibility measures, you can include font size controls and a high contrast button etc.

When building the site, a framework like Bootstrap makes it easier to quickly create responsive layouts. Ensure users can zoom in on mobile devices using the “pinch zoom” gesture on their touch screen. To do this, make sure your meta viewport tag allows users to “scale” the website.

All text should be actual text in the HTML, not part of an image and images should have alt attributes to assist those who cannot see them.

Website speed is also part of accessibility. If you have a fast internet connection, is the site still quick enough to load pages on slower connections? You can test this using tools like Lighthouse and in your browser console, you can also emulate a slower connection:

If you are not personally building the new website, liaise with developers to ensure it will load pages quickly.

INCORPORATE THE LATEST DESIGN TRENDS

Research the clients’ niche and find what the latest design trends and features are in that niche. This is not just about making it look up to date but giving the design longevity, which means value for money for your client.

A search on Google will always reveal the latest design trends for the coming year, helping you expand your ideas as a designer. There are great websites for checking out other designer’s work such as Behance and Pinterest, helping you to feel inspired and avoid the dreaded designer’s block!

INTUITIVE NAVIGATION IS CRITICAL

It is essential to design simple, easy-to-use navigation for your new website project. Try to minimise the number of clicks to important pages, otherwise, you risk users leaving the site before they reach them.

Consider adding breadcrumbs if the website is large enough, these are a great visual aid and way of linking back to parent pages.

You don’t have to add every link in the navigation, avoid monster dropdown nav’s with too many options. Some sub-pages can just be linked to from the parent page without featuring them in the main navigation.

Use a simple mobile menu with burger icon, this is the most common way of opening a mobile nav and users understand this because they are seeing it all the time on websites.

If you are designing a large website, adding a free-text search box really helps users find what they are looking for.

MAINTAIN VISUAL CONSISTENCY

Following on from the design system, develop spacing and text sizes that you can reuse over and over again in your designs. This will maintain visual consistency and make the pages appear seamlessly to be part of the same website.

White space can be used to let the content breathe and help website users focus on one thing at a time. If your design is cluttered it can be overwhelming and offputting to your audience, like a cluttered room would be to your guests.

Choose images that align not only with the clients’ brand style, but with each other. For example, don’t mix flat “graphic design” style images with photos, choose one or the other. Keep similar themes and styles of images, that have the same filters applied. E.g Don’t mix vintage style sepia images with more modern-looking full-colour ones unless there is a good reason to do so on a certain page.

KEEP IT SIMPLE

Ever heard of KISS (Keep it Simple Stupid!). It sounds rude, but the meaning is a good one. Don’t overcomplicate things, users want to find information fast, a website is not simply a gimmick or plaything for the web designer.

We may like to pretend that users will love our design so much that they’ll browse for hours, but in reality they are time-strapped and information-hungry and want answers before they move onto the next thing.

So focus on an attractive, but simple-to-use design. If you design a site that users don’t understand or struggle to use, then they’ll leave very quickly. This means they won’t convert to sales or prospects and the new website is in fact a disaster, no matter how amazing it looks.

BREAK UP LARGE TEXT BLOCKS

Users are in a hurry, so reading a huge block of text is unlikely to be something they want to do. However, you can break it up into various sections, with different backgrounds and supporting media like images and video.

Another option is to use a “read more block”, where there is a short intro and a “Read More” button. When clicking the button, more text is revealed.

Style-wise, you can also change the first paragraph to be a larger or bolder font. This will create more visual interest and entice users to actually read it!

PROMINENT CALLS TO ACTION (CTAS)

A Call to Action (CTA) is an element on a web page which tells a user what to do. CTAs are a very important element in the design of a successful website because they help guide users to what they need to do next. It makes life easier for the user, but it is great for the client too because we can guide them towards “conversion”, e.g. getting in touch, buying a product or donating to a charity.

Those are our ultimate conversions, but CTAs can be used to simply prompt users and remind them to do something too, like visiting our store.

Understanding our client’s goals for the project is a great way to work out what Calls to Action you want to put in your website designs. Is it to sell more products, build brand awareness, or collect more information for users?

Typical Calls to Action will start with a verb like “Buy” or “Learn” and end with an adverb such as “Now” or “More”.

DESIGN FOR SEARCH ENGINES

9 times out of 10, we are not just designing websites for users these days, but we are designing them for search engines like Google too. Optimising the design, code and content for search engines is known as Search Engine Optimisation (SEO).

Include keywords in headings and page names to help promote the site for the right terms that users will enter into Google. An SEO expert will help with this.

If you are building the site too, build in a good level of on-page SEO using headings in the right order where possible (h1 then h2, then h3 etc), and a reasonable amount of concise, relevant copy, avoiding purely AI-generated content. You’ll also want to add alt attributes to images and add meta title and description tags to pages. In addition, optimise your page urls to include keywords.

Design landing pages so marketers can build more content easily, without being restricted. Most of the time a new website will also want a News/Blog section, so make sure you design the list and detail pages for this.

BUILD YOUR CLIENT’S CREDIBILITY

The website that you design, must enforce your clients’ credibility. Anyone can have a website, it’s like your own shopfront, no matter who you are. But because anyone can have one, it can be hard to trust even the most professional-looking website.

A professional design goes some of the way, but it is important to add trust signals to really put users minds at rest. Trust signals can be reviews (if suitable), listing your full contact details, awards and accreditations, and delivery and returns information for online shops.

Correct any spelling mistakes and consider professional Copywriting to not only build a rapport with your audience, but to avoid poor grammar, and to make copy exciting and engaging.

GUIDE THE DEVELOPERS

Unfortunately, a great design doesn’t always translate into a great build. The final website may not look as good as what you have designed. Developers will be mostly concerned with code and how it will work, rather than the finer design details like exact font sizes and spacing. But these design details help make a website look neat and sharp, as intended by the designer.

As a web designer, you will need to feedback and guide the developers by detailing the size of margin, padding, and font sizes at various screen sizes, so they know exactly what they need to build.

Make sure they are showing you progress early on, so you can give feedback early, it’ll be less pain for them in the long run and save time overall.

CONCLUSION

By following these best practices, the output from your web design work will improve exponentially. Best practices are not here to stunt our creativity, they instead support us, making things easier and improving the results of our work.

The most successful web design agencies use best practices like this to streamline their processes, making the work more enjoyable and more profitable, resulting in happier clients, designers and developers.

ABOUT THE AUTHOR

David Reeder is the owner of Made Simple Media, a web design and development company based in West Sussex, UK. He has over 15 years’ experience working on software, web and digital projects for SME’s, international companies, charities and start-ups. David persuasively conveys complex ideas and is a visionary designer and developer with a track record of producing high-performance websites from initial concept through to production.