If you’re into web design, you want to make sure that what you’re designing is primarily fit for purpose, whilst at the same time being beautiful and unique. But creating a website that stands out on the internet is far from easy, and it’s here where most designers hit their brick wall.

You might create something that you regard as being unique, only to find out a few days later that the layout you designed or button you created is exactly the same as a competitor’s.

As humans, we take a lot of inspiration from our every day surroundings, and as web designers who spend a lot of time on the internet, we’re no different. When looking for inspiration you’ll find hundreds, if not thousands, of websites that contain stunning visuals, use clever techniques and feature cutting edge code. Much of what you see and like, your brain will attempt to recreate whether you’re aware of it or not.

So how do you make something unique? Clear your mind, start from scratch!

Grab a pencil and paper and find a quiet place

Sketching takes you back to basics and helps to get the creative juices flowing. By starting of with a pencil and a piece of paper, you’re cutting out all the distractions and restrictions that come with using software.

With no errors, limits or irreversible mistakes you can really let your imagination run wild, just building one line/curve and shading one after another until something beautiful is formed. Don’t stop there, keep changing it; it’s not perfect until it’s perfect.

Logo sketching
Logo sketching

Whilst you’re busy getting creative, remember that anything you sketch will need to be functional as well as beautiful, so keep in mind the ways in which the web works.

Sketch your top-level framework at an early stage. This will help you get an overall feel for what the rest of your design will look like. Top-level framework components include navigation such as sidebars and bottom bars.

Build on what you’ve created; make it different without forcing it to be different. In other words, don’t try to avoid design features because they’re popular and you’re trying to make something different- enhance them and make them work for you instead.

Start right to end right

Design grids

No matter what software you’re using to carry out design your website, make sure that you’re using the right grid. Check out this Adobe grid plugin (link will download a zip file) if you feel yours may not be up to scratch.

As far as sizes go, use 960px width for older screens and a 1200px template for newer widescreen monitors.

Typography

Typography is another element to strongly focus on when you’re getting started.

Use no more then two fonts and make sure that they blend well and stand out.

FontFabric
Free beautiful fonts

There are thousands of free fonts available online; you can start by looking at Awwwards.com and 1001freefonts.com

Colour consistency

Be sure to keep your colour scheme steady and don’t veer off the path too much, unless of course that was your intention in the first place. If so, you’d better be a design genius who’s about to make this next site stick out in all the right ways and all the right places.

Colour scheme
Colour scheme

If you need help, use this online tool to find some great colour scheme ideas.

Remove what’s not needed

Most people have now come to understand how websites work. They expect certain functionality to exist if it says that it does. Follow these tips:

  • Remove any unnecessary buttons and icons to keep things ultra simple so that visitors will make the most out of your website.
  • Make sure that navigation is clear and easy to use and that the website contains useful content and/or functionality – not just extra design pieces for the sake of filling up space.
  • Remember to let the page breathe with negative space and padding. High density equals high bounce rates in most cases.
  • Minimise the steps it takes to perform an action. For example to sign up insert your e-mail on the front page. Done.

Make sure it can adapt well

Keep it crisp. Does it look good? Great. Does it look good on all monitor sizes in all browsers, on all phones and tablets? No! Then get to work.

A big part of the success of modern websites is down to their responsive design. So many popular gadgets now allow access to the internet which means websites need to automatically resize and move functions around in order to look and work great with all devices.

Keep it under control

You’re going to spend a lot of time refining and editing your design until it looks good enough in your eyes. While doing so, make sure that you keep track of where everything is, and remember to backup regularly.

Don’t spend too much time designing before you show your website to clients. In most cases an incomplete version is better than nothing at all.

Another thing to consider is that your clients might not share the same enthusiasm as you about the design. Showing them an early version means that you haven’t wasted your time doing something that you’re not going to use.

Finally, share your vision with the rest of your team. Make sure that developers know what approach you’re trying to take and that what you’re asking for is something that they are capable of doing.