How I Do Website Design

When you sit down with a blank piece of paper and the idea to design a website you may suddenly find yourself staring into the black hole of designer’s block. This is not uncommon, especially for those new to website design. There are so many options and colours and layouts to choose from that you may just get stuck trying to decide which route you want to take. I have found that if you start with the basics and work your way up it becomes a lot easier

The best way to get started is to take a look at the corporate identity for the website you are creating and pick out fonts and colours to use.

When choosing fonts, I find that Google fonts is extremely helpful. I generally start with the most legible font in the logo and go from there. Google fonts will happily suggest fonts that match with the font that you have chosen. Of course, if the font is a paid or commercial font, it is a little more difficult to pick matches out of thin air but you can take a look at sans-serif fonts on Google fonts and pick on that you like the look of. 

When choosing colours, I like to build a colour palette. There are online tools that can help you to do this. Pick out the two primary colours from the company’s logo and start with those as a base. Then pick one or two complementary or contrasting colours as well as a dark grey (not black).

Part of your website design should be a functional specification so that you know what you need to include in your layouts and website design. Find out what pages you are going to be doing, what functionality is required and what websites the client has seen online that they like the look of and why. 

Put all of this information together in a comprehensive document so that you have something to refer to when you are doing the next few steps. Make sure that you pay attention to things like search functionality and archives or databases of documents and articles. Any forms that need to be created need to be scoped out and planned.

Now that you know what you need to design, have a think about how all the different parts will ink together. Each page is going to have a number of features that you will need to include in your design. This could include things like feature images, display titles, bylines, block quotes, in text images, photo galleries, news feeds or blog pages and slideshows. 

Documenting all these small elements will help you to make sure that you don’t leave something out of your website design.

Once you know what pieces you need to design, you can start doing layouts. In order to make sure that the layouts are consistent across the site, I like to create pieces or blocks that I can reuse.

A grid layout will look the same on all pages on the site, block quotes in blog posts and on pages will look the same. Heading’s font sizes and text decoration will be consistent. 

I like to do the rough sketches on paper so that I have something to refer to when I start doing the mockups. It can be really helpful to rough sketch a few of the pages as a whole so that you can get an idea of what the final layout will look like.

Only now do I turn on my computer and start up my design software. I like to use Photoshop for website design.

Each page is created as an artboard in a single photoshop file. It is far easier to keep the pieces of design consistent if you can copy and paste from one artboard and layer to another. Now you can reference your fonts and colour palette as well as to your sketched layouts and it should be a fairly quick job to mockup what a page, post, gallery, form, slideshow and blog introduction will look like. 

Website design is not a job that everyone can do. You need a degree of creativity mixed in with a fair amount of attention to detail and ability to plan. If you can then build the website on top of it all, you are onto a great start…