Design and development techniques for everything web

Logo sketching

5 steps to a successful and unique web design


As a web designer you want to make sure that what you’re designing is fit for purpose as well as beautiful and unique at the same time. However, being unique is not easy and that’s where most designers hit a 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 the one found on one of your favourite websites or blogs where you usually go for some inspiration.

As humans we pickup on a lot from our surroundings and as web designers we spend a lot of time on the Internet, and the Internet has a lot to offer. For example, 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 it whether you’re aware of it or not.

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


1. Grab a pencil and paper and find a quite place

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

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

Logo sketching

Logo sketching

You’re going to need to make something that’s not just beautiful but functional too 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, instead enhance them and make them work for you.


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

Adobe grid plugin:

Plugin source:

1200px template:

Size wise; 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. Choose your typography wisely, especially as you’re designing in 2015, the year in which typography really does matter.

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

Free beautiful fonts

Free beautiful fonts

Free modern font links:

Colour consistency, keep it steady don’t veer of the path too much, unless of course that was your intention in the first place, If so, you better be a design genius that’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:


3. 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 and keep things ultra simple in order to make sure that visitors will make the most out of the website.

Make sure that navigation is clear and easy to use and that the website contains useful content and/or functionality, and 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 signup insert your e-mail on the front page. Done.


4. 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! Get to work.

Part of the success of modern websites comes to their responsive design. With so many popular gadgets allowing access to the Internet, websites need to automatically resize and move functions around in order to look and work great with all devices, otherwise you will deter visitors.


5. 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 make sure that you regularly backup.

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


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.

Jade MasriWeb designer, web developer for WordPress, Ubraco & Drupal, based in London .
Jade Masri

Leave a Reply

Translate »