Designing a website should be a joy and in theory it should be something that allows you to be artistic and express yourself. A website is a reflection on who we are, and in theory it should be fun to choose layouts and colour schemes to create a look we like.

The problem though is that there is a barrier often between what we want to achieve and what we can realistically and easily accomplish. Designing a website isn’t like painting a work of art, because you don’t just ‘draw’ it straight onto the web. Instead you have to fiddle around with tools and code and you need to ensure it works on every device. You’ll need to do lots of planning and you’ll need to work with a fiddly mouse instead of a paintbrush…

But if you have the right set-up then you can bring down this barrier at least to an extent and allow you to create your sites in a much more expressive and natural way…

Pen, Paper, Scissors, Glue

The first tools you should be using are the good old-fashioned ones that you used to draw and take notes all your life. This way you’ll be able to put your ideas straight down onto paper as they come to you, and you’ll be able to express yourself more as a result.

There is a lot of discussion in the web development community about where you should do initial designs – some say that you should design ‘in the browser’ meaning that you go straight into the code, while others recommend using something like PhotoShop to create a layout you like to work from. The problem with using PhotoShop is that it takes a lot of time to do something you are only going to have to do again, though it does help to have an idea down to work from. That’s why pen and paper are ideal – as they allow you to get ideas down in a flash and then work from them without fiddling around with layers and various tools in PhotoShop. Scissors and glue meanwhile can be useful for making a mood board – which is ideal for getting inspiration when you have none.

Illustrator + Surface Pro

When it comes to designing individual elements for using on a website, Illustrator is really the best piece of software for creating professional looking designs. Using Illustrator you can create banners and logos that will look crisp, high definition and have no jagged lines. They will be symmetrical, they will line up perfectly, and in short they’ll have a professional quality that an online business demands.

However drawing in Illustrator isn’t always the most intuitive or natural process, which is where the Surface Pro comes in.

The Surface Pro is a tablet/laptop hybrid meaning that you can easily remove the keyboard and use it as a screen on its own. Because it also has the option of pen input – with all the pressure sensitivity and precision you’d expect from a digitiser stylus – you can then draw directly onto the screen with the device on your lap, as though you were drawing any other way.

What makes this the ideal set-up, is that you can relax in a chair and drawer straight onto the screen, only to then add a layer in Illustrator and to trace over that original image with the more precise tools. Again you’ll this way be expressing yourself naturally in a direct way, and then converting those ideas into files that are suitable to be used on a website.

Another option of course is to skip the Surface Pro and instead sketch your designs on paper. From there you can then scan in the images you create, load them up on a layer on Illustrator, and again trace over them with the tools. A good mouse will make this a lot easier.

Ultimately this set up will allow you to design your site in a way that feels natural, that allows you to express yourself, but that gives you the precise control you need as well. And that’s when you’ll do your best work…