Here at One2create we always enjoy sharing our insider knowledge on all things web design. This month we’ve created a list of our 25 foolproof ways to nail your web design project, perfect if you’re just starting out in the world of digital designing.
Utilise style guides
For any web design project, you need to ensure that you have a solid style guide. This is ideal for a company that regularly collaborates with freelance designers or a new member of the team who needs guidance on company standards.
A well-constructed design guide helps to keep continuity on a project with multiple designers. If you’re considering making your own style guide, key information should include:
- The colour palette of the design
- The font size and typography
- The way dates and numbers are formatted
- Image sizes for banners
- Product image sizing
If you need an example of how to create your own style guide, take a look at this document created by Google for their Material Design. It’s been separated out into defined sections with clear information in each.
Start your design on paper
Before you even set your fingers to clicking, it’s always better to start your design on paper first. This gives you the ability to see how each page will function and how users can navigate throughout the site.
Why not go back to basics and use a pen and paper or a whiteboard to plan each page. This lets you establish which design elements you’re happier to include, or which elements you don’t want on your site.
First impressions count
As is the case with a physical shop, the first impressions count when it comes to your website. You need to keep the design on brand, make sure each page is well structured and make sure that it’s immediately obvious where a web user has arrived.
Cut out the sidebar
Gone are the days a website needs a sidebar that showcases everything you’ve done on your site. This clutters the page and takes away from the user journey. A sidebar with too many links directing users further into your site is confusing, so avoid this where possible.
The exception to this rule would be blog pages. You should still include a sidebar on this page as it means you can categorise your posts by subject, publishing date or most popular.
Choose your font wisely
In our experience, Sans Serif fonts are the best to use in any web design projects. If you do have the option to customise the font that’s included in your web design project, then make sure that it’s one that easily readable.
We would recommend a Sans Serif font for the body copy, but you do have slightly more freedom with titles. All you need to do is make sure that each title can be easily skim-read and doesn’t clash with the rest of the page.
(Font) Size Matters
The minimum size for fonts on your website should be no lower than 16 points, this allows for easy readability, especially on smartphones or tablets. There’s nothing more frustrating than navigating through to a website and having to squint to read the copy.
Utilise the fold
Before you start worrying about this fold, just remember it’s not that hard to remember once you get your head around it.
Above the fold means the design and information found from the main navigation bar to the bottom of the screen (without having to scroll). Below the fold is any information that a user needs to scroll down to locate.
If any information does get cut off by the fold but is still visible, don’t worry. A web user will subconsciously realise there’s more information to be found below.
Never forget the user experience
The experience a user has on your website is crucial to its success in the future (it can also affect the SEO). If a website is clunky, doesn’t load properly or information is hidden on inner pages, users are more likely to leave before reading your content!
This is where the role of a UX or UI web developer comes into play. Each role has a different approach to a web design project, but each has to maintain focus on the end user journey.
Aspects of user experience design you need to focus on include:
- Utilising content above and below the fold
- Linking content through design
- Being consistent with your structure
- Prominent Call to Actions (more to follow on those)
- Prominent contact information
Learn more about the importance of UX UI web design in our previous blog post.
De-clutter your screen
In the modern world, it’s becoming easier and easier to become visually overloaded, especially when it comes to web design.
When you’re in the initial planning stages of your site, make sure that you leave enough space between paragraphs, images and banners. This is often called “white” or “dead” space.
The same principle of decluttering applies when you’re inputting your copy. You need to make sure that the sentences are short, as online readers are less likely to retain key information when it’s in a massive block of text.
Be responsive, or don’t bother at all
The future is mobile, not desktop. When you’re planning your website you need to make sure that it’s responsive.
In the not-too-distant past, you might have just ticked the “Make Website Responsive” on your web design to do list, but there’s so much more to it now.
Anything from optimising images for mobile, utilising burger menus and designing for both portrait and landscape views.
For an in-depth read on responsive web design, take a look at this article written by the team at Smashing Magazine.
Simplify the navigation
Another of our top tips for web design is to simplify your navigation. With such short attention spans, online users are becoming more and more inclined to use websites that are easy to navigate, with all information within easy reach.
When you’re planning out your main navigation menu, make sure that all the relevant pages are at the top level. For example:
- About Us page
- Contact page
- Offers and discounts (ideal for e-commerce website)
- Services (ideal for agencies and businesses)
- Contact details (perfect for smartphones/tablet users)
- Portfolio (perfect if you use a site as an online portfolio)
Up your imagery
For any website, it’s important that you invest time (and occasionally) money into high-quality images. One of our pet peeves at One2create is visiting a responsive, well designed, thoroughly planned website that is full of low-resolution images.
To help you in your search for these high-quality visuals, we’ve previously written a post on where to source free images.
Cut the pop-ups
From January 2017, Google has cracked down on websites that utilise intrusive interstitials on their website. Sounds complicated right?
Well, all it means is that a website that uses pop-up adverts that intrude on a user being able to view content is going to be penalised.
Examples of intrusive interstitials include:
- Pop-ups that block the main content on a page
- Stand alone ads that a user has to dismiss before reading the main content
- Pop-ups that appear when a user navigates towards leaving the page
However much we don’t agree with these intrusive adverts, it’s important to remember that some are not going to be penalised by Google. Pop up adverts that aren’t going to be penalised by Google include:
- Pop-ups that need to be displayed by law i.e. cookie usage or age verifications
- Log in dialogues where content isn’t publicly indexed i.e. private content such as email
F-style reading design
The F-style of laying out content is essential when it comes to designing a website. This covers the way in which a users’ eye flicks across the page and determines which information they are going to take in.
The F-style of reading means that users are less likely to read your content in full. They will skim read to find the most relevant information that answers their questions.
This means that you’re going to have to think carefully about the structure of your web design project. Things you need to think about include:
- Relevant headings (H1, H2, H3 etc)
- Shorter paragraphs
- Bullet point lists
- Videos and animations
- Images with captions
For more information, take a look at this article written by the Nielsen Norman Group.
Think about your colour scheme
The colour scheme of your website needs to reflect your brand. As we already explained, when you’re planning your web design brand guidelines, you need to establish a palette of colours you’ll use on each of the pages.
We would recommend that unless your brand guidelines specifically state that vibrant colours are to be used, then stick to using pale tones throughout the site. For example, if a website is covered in red, this invokes a feeling of danger in your readers.
In comparison, cool colours such as blues invoke feelings of calm and fluidity, so consider using these instead.
There is, however, one exception to the rule. When you’re creating ‘Call to Action’ buttons, it can be a good thing to use contrasting colours. This means that they’re more likely to stand out on a web page and users may be more inclined to take a specific action.
Contact details should be visible
One of the most basic aspects of web design you need to remember is to include your contact details. They should be prominently displayed on each of the pages, preferably above the main navigation bar.
Include a Home page link
Any web user will be familiar with the back button, its one of the most widely used commands when you’re navigating through the wonderful world of the Internet.
Including a Home page button in your main navigation means that a user won’t have to click the back button to reach their original landing page. This helps to improve the user journey and also reduce your bounce rate.
Design every page as a landing page
When you have a multi-page website, it’s important that each has been designed to represent a landing page. This means that whenever a user lands on your site via Search Engines or Social Media links, they’re immediately greeted with a website that looks structured and coherent.
This is especially important when you’re optimising your content with keywords. If you’re a business that offers multiple products and services, each page should have its own unique set of keywords.
This process also applies to the design. You need to ensure that not only is the main navigation bar the same on all pages but where applicable, the design structure is the same too.
Remember your A/B testing
You’ll find that a lot of these tips have been based on our own experiences, so you shouldn’t necessarily take each as gospel. You need to make sure that whenever you decide to implement a change you do A/B testing first.
Not only does this allow you to measure the results of your design, but it also gives you an insight into the browsing habits of your customers. Aspects of web design you can use A/B testing for include:
- Call to Action button designs
- Contact form design layouts
- Colour palettes and imagery
- Social sharing icons
Prominent Call to Actions
A prominent call to action is exceptionally important if your business is selling products or services. When it comes to the design of the page, you should ensure that these call to actions are separated into their own banners, ideally located in the middle of the page.
The lower down the page the call to action is, the less likely it is to be retained by a user. If you want your customers to take a specific action, then having the call to action in the middle of the page will yield more interaction that one at the bottom.
Build trust with your users
When your web design project is underway, you need to keep in mind how you’re going to be establishing trust with your audience.
With the rise in cyber security attacks and data leaks, website users are becoming more concerned about their online security.
Not only does this mean that you need to reassure your customers that their data is safe, you need to show new users that you’re an established, reputable company instead of a scam website.
Ways you can establish trust on your website include:
- Making your site HTTPS secure
- Including accreditations and awards
- Showcase your testimonials and reviews
- Highlighting your key achievements or work in a portfolio
- Creating a “Meet the Team” page
Don’t forget about social media icons
Social media is crucial for any online business in the modern world. When you’re thinking about your web design project, you need to make sure that you’re including social media icons that your users can click on.
Not only does this establish a feeling of trust with your audience, but it also helps to increase the brand reach and awareness of your company.
However, it’s important that you chose a social media platform that fits your target demographic. For example:
- Lifestyle brands could utilise Pinterest and Instagram
- Business consultancy businesses could utilise Linkedin
- Marketing and digital agencies could utilise Twitter, Facebook and Instagram
It’s not about you – or your needs
However much you might want to design a website for your own needs and wants, you need to remember it’s not all about you. It’s about your customers; their needs, their wants and why they’ve come to your website.
This doesn’t just apply to the aesthetic design; it’s about the user journey too. You need to ensure that all key information is within easy reach.
Rich media is your friend
Not only is it important to ensure your websites’ copy is concise, search engine optimised and on-brand, it’s crucial to incorporate rich media into your web design.
Rich media brings a new interactive level to a design, it means that your website users don’t lose interest and leave. Rich media can include:
- Infographics
- Downloadable PDF guides
- Video and animation
- Images
- Polls and surveys
When you’re adding in rich media, make sure that it’s in a format that can easily be shared on social media. For example, if you sell physical products, make sure that the image has been resized to the specifications set out by Pinterest or Instagram.
This allows your users to easily share with their own followers should they like the image enough.
Remember your target audience
Another top tip for nailing your web project is to never lose sight of your key demographic. With so many options available, it can be hard to rein in your creativity, but just because you like the look and feel, doesn’t mean your customers will.
So there we have it, our top 25 foolproof ways to nail your web design project. What do you think? Have we covered everything off or is there something we’ve missed?
We’d love to hear your thoughts, so let us know in the comments below. Likewise, you can get in touch with us here, give us a Like on Facebook or follow us on Twitter.
But before we finish up, one more question: How can we help you?
Unfortunately, there’s no one simple answer to that question but here at One2create, we love to see a brand grow and develop into a thriving company. If you’ve always wanted a new website that fully reflects your business, then that’s where we come in.
Our team of web design experts are constantly itching to create visually stunning, RIO-maximised websites so what are you waiting for? Get in touch with us, you won’t be disappointed 😉
