The 5 secrets to unique and successful website design

The Art of Unqiue Web Design

If you’re a web designer, it’s never a bad idea to ask yourself: “is what I’m developing fit for purpose?”. Hopefully, you're working towards something that looks fantastic and is unique, as well as being functional. Creating a design that stands out on the modern Web is a challenge.

You might believe your creation to be unique only to discover - a week or two later - another website has already been using that same idea! There is a reason for this: it is natural to take inspiration from our surroundings and reproduce what we see. Since designers will typically spend quite a lot of time on the web, it’s easy to see how they might become influenced, making truly unique web design harder and harder for a more experienced web designer to arrive at.

Much of what you see and like, your mind will attempt to recreate (whether your are consciously aware of it or not). So what should a web designer do to strike out and create that truly unique idea? First, you should clear your mind and start from scratch!

START WITH PENCIL AND PAPER

Sketching takes you back to basics which will help get your creativity flowing. It also liberates you from any established conventions about how modern web design ‘thinks’ about how web pages should be. With no errors, limitations or irreversible mistakes, it’s easy to let your imagination reign supreme, filling the blank slate element by element until it takes shape. Don’t stop until you’re happy with it: it isn’t complete until it’s complete!

LOGO SKETCHING

As you sketch, try to keep in mind that what you sketch must be both functional as well as beautiful. While you want to liberate your mind of any traditions or preconceived notions of web design, you don’t want to lose sight of the functionality; to keep in mind how the web works.

We recommend sketching out your top level framework first. The top-level framework components include elements such as the main navigation, any sidebars or widgets and the overall layout you expect the page to offer.

Build on what you’ve created; try to branch out to make it different without forcing it to be different for the sake of it. Try to avoid making design choices just because they are popular and consider the functionality of what you are designing. Enhance them to work better for you.

DESIGN GRIDS

No matter what software you are using, make sure you carry out the design of your website using the right grid system. There is a nice Adobe grid plugin http://guideguide-downloads.s3.amazonaws.com/3.1.2-guideguide.zxp if you don’t already have a good one you can rely on.

At this point it’s also worth considering your target audience and what devices they will likely use. The common widths are 960 pixels for older displays and 1200 pixels for widescreen monitors.

TYPOGRAPHY

Typography is another important element worth focusing on, particularly nearer the beginning of the design process. Generally, you should not use more than two fonts to make sure they work well and the page doesn’t start to look confusing.

There are many beautiful free fonts available through Awwwards.com and 1001freefonts.com.

COLOUR CONSISTENCY

Your colour scheme shouldn’t veer too much off the path set by the original concept. There are some great tool such as Paletton http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF to help you 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.

? 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 will end up spending quite a bit 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 never forget to back up regularly!

Also: be sure to share your design with the client at various stages to get their feedback. In most cases an incomplete version is better than nothing at all.

Another thing to consider is that your clients may 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.