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 competitors.

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

No matter what software you’re using to design your website make sure that you’re using the right grid.

Check out this Adobe grid plugin (you may have to copy and paste it into your browser bar to download the .zip file):
http://guideguide-downloads.s3.amazonaws.com/3.1.2-guideguide.zxp

Plugin source:
http://guideguide.me/

1200px template:
http://1200px.com/

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

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

Check out these links for some free modern font links:

http://www.awwwards.com/the-100-greatest-free-fonts-for-2014.html

http://www.1001freefonts.com/

Colour consistency – keep it steady 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

Use this online tool to gain colour theme scheme ideas: http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

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.

For example,

Simply search
Simply search

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. Let the page breathe, high density = 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 the 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.