nail your next web project - 25 fool proof ways to nail your web design project
Mar 22 2017

25 fool proof ways to nail your web design project

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


web design style guide 300x178 - 25 fool proof ways to nail your web design project


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


planning web design on paper 300x200 - 25 fool proof ways to nail your web design project


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

first impressions online 300x300 - 25 fool proof ways to nail your web design project

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.


blog sidebar for web design project 162x300 - 25 fool proof ways to nail your web design project


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

web design sans serif font - 25 fool proof ways to nail your web design projectIn 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


choose right font size online 300x180 - 25 fool proof ways to nail your web design project


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


the fold web design 295x300 - 25 fool proof ways to nail your web design project


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


web design develop wireframe uxui design 300x200 - 25 fool proof ways to nail your web design project


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


minimalist web design tablet 1 1024x394 - 25 fool proof ways to nail your web design project


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.


web design optimise mobile 300x300 - 25 fool proof ways to nail your web design project


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.


simplify navigation bar web design project - 25 fool proof ways to nail your web design project


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


photo shoot close up camera lens 300x128 - 25 fool proof ways to nail your web design project


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


block pop up ads 300x200 - 25 fool proof ways to nail your web design project


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

f style reading online 247x300 - 25 fool proof ways to nail your web design project

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


website colour palette 300x150 - 25 fool proof ways to nail your web design project


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


one2create contact details - 25 fool proof ways to nail your web design project


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.


home page link main navigation - 25 fool proof ways to nail your web design project


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


web design project design landing page 300x290 - 25 fool proof ways to nail your web design project


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


web design testing ab testing 300x200 - 25 fool proof ways to nail your web design project


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


prominent call to actions 1024x213 - 25 fool proof ways to nail your web design project


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


one2create awards website 300x240 - 25 fool proof ways to nail your web design project


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 sharing icons web design - 25 fool proof ways to nail your web design project


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:



It’s not about you – or your needs


identify customer needs 300x200 - 25 fool proof ways to nail your web design project


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


rich media social sharing 300x220 - 25 fool proof ways to nail your web design project


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:



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


define target audience 300x212 - 25 fool proof ways to nail your web design project


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 😉

Share Post
rob headshot 150x150 - 25 fool proof ways to nail your web design project
Rob Hewitt

The go-to guy when it comes to copy! Whether it’s crafting some educational blurb about your business, or getting creative with some clever marketing messaging, he’ll give you the words you need to smash it. No sentence is too big or small.

No Comments

Post a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.