Our guide to web design
Jade O'Donoghue

Our guide to web design

First published date September 06 2013 Amended date September 16 2014

When you look at a website, how much do you think about what’s gone on behind the scenes and how it came to look the way it does? Do you ever wonder why the search box has been placed at the top of the page or why the logo is the colour it is? Probably not, and that’s probably because someone has put so much thought into making it all look as great and intuitive as possible that they don’t even want you to think about all of that.

However, if you’re someone who visits a site and can’t help but think about the choice of colour or judge the arrangement of the icons, then you might want to consider studying web design and turning your fascination into a new hobby or even a career.


Behind the scenes of the internet

A lot of work goes into any website and the process that starts with an idea and ends with the finished product can be lengthy. To begin with, the client or manager of the project would come to a web designer with some ideas of how they’d like their site to look and the functions it should have. The web designer will then work on a ‘wire frame’ which is essentially a really rough look at how those ideas could be visualised. Generally this is done on a computer, but it could also be just a quick sketch.

Once the web designer has finalised what the client wants he/she will then move onto creating designs. Then, when these are finished, they will be turned into programming language so they can be viewed and interacted with online. This job might also be done by the web designer (as some can also code), or it may be taken on by web developers.


Technical vs creative

Designing for the web is quite different to designing for print. While the principles of what looks good are generally the same, sometimes the restraints of the internet mean you have to compromise what you see as best practice creatively. Things like the functionality of a site or SEO requirements for it can affect the designs you create.

You also have to create designs for every eventuality when it comes to the web because the page is likely to look different depending on what action the user is taking on the page. For example, if they roll their mouse over something, will it change colour to indicate it’s selected? On a typical web designer course you will be taught how to ensure your designs cover all the options of actions you can take on a web page.


The web designer’s tool box

On most web design courses you will try out the software used to create great looking websites. Here are some of the most popular names you’ll hear…


Photoshop is a type of photo editing software that many designers use, not just to edit photos, but for other web graphics too. You might be improving the colours in photos, resizing images for the web or adding effects to them so they stand out more. There are several different types of Photoshop software, depending on the level of editing you’re planning on doing.


Dreamweaver is used to design, build and manage websites. You might use it to do some coding but there is also a WYSIWYG editor so you can see what your website will look like as you make it. Dreamweaver is popular with web designers who not only create the look of a website but turn it into code and thus bring it to life.


Fireworks is used mainly for creating graphics and layouts for websites. It does a similar job to Photoshop in that you can edit images and optimise them for the web. It is also possible to design prototypes of apps using Fireworks and create animated GIFs.


InDesign is predominantly used in print to create layouts for books, magazines, posters and other printed materials. However some web designers do use it for prototyping. It allows you to create layouts for websites fairly quickly so that you can show clients or developers how the site should look.


Flash is used to create animation on websites. It might be a banner advertisement across the top of the page that moves, or a graphic that reacts when the mouse hovers over it. Basically if there’s anything moving on your web page, you’ll probably be using Flash to make it do so.


Tips from a web designer

We asked Jai, Junior Designer here at Hotcourses a bit about his experience in web design…

‘I studied Multimedia Technology and Design at the University of Kent. My course covered so many different subjects. We did some programming, filmmaking, flash animation and even 3D modelling. Web design was actually only one module in my first year. There are certain sites that I think are particularly well designed. I would say Amazon, Smashing magazine and Mailchimp to name a few. Oh and Hotcourses!’

Similar Subjects

  • Apps
  • Content Management Server
  • Dreamweaver
  • Fireworks
  • Flash
  • HTML
  • Javascript
  • Markup Languages
  • Photoshop
  • WordPress
  • Wordpress
  • Browse all fun courses