Tag Archive | advice
03/11/2011  

How to become a web designer, for graphic designers

A while ago a friend of a friend asked for some advice on how to become a web designer. They had a background in graphic design and wanted to know the ins and outs of how to move from one discipline to the other. I laid things out in fairly simple but frank terms and am hoping it will help others.

Any feedback would be appreciated, especially from graphic designers who’ve made the jump themselves.

The letter is to my friend who passed it on for me, hence the third-person-ness of it all.

The e-mail in full

Hi Dan,

Things that are unavoidable musts are in red bold.

My thoughts are “sod formal learning”. But if your friend insists, they should take a look at http://training.gbdirect.co.uk/courses/web/. I went on one of their advanced CSS courses in Bradford a while back and it filled in quite a few little gaps I had in my knowledge.

First and foremost, though, I’d start by teaching myself at home. All you need is a program like Notepad (or Notepad++ at http://notepad-plus-plus.org/ though I use PSPad, http://www.pspad.com/, because I have for years and I’m used to it) and somewhere you can draw images, ideally Photoshop and its ‘save for web’ feature. A free alternative is Gimp (http://www.gimp.org/). Play about with things, learn by experimentation.

To learn the code of web design (HTML and CSS), go to http://www.w3schools.com/. When you get confident enough and a bit more advanced, have a look at https://developer.mozilla.org/en-US/docs. These will give a solid grounding in what HTML tags do what and how they can be styled using CSS.

http://www.w3.org/standards/webdesign/ is the place where you find out how to do stuff properly. You can test your code for validity and find any errors by using http://validator.w3.org/ for HTML and http://jigsaw.w3.org/css-validator/ for CSS.

To ask questions, use http://stackoverflow.com/. It’s brilliant and people literally compete to give you great answers to specific questions. If your question’s good enough, you’ll get reputation points which will encourage experienced user to answer your questions. It’s a real community on there, the more you put in, the more you get out.

To see the power of CSS and how it styles websites, go to http://www.csszengarden.com/, read the page, then play with the ‘select a design’ links on the right. Do one for yourself once your CSS knowledge improves.

You say your friend studied graphic design. A good place to show how graphic and web design cross over is at http://www.smashingmagazine.com/2009/08/27/if-famous-painters-were-web-designers/. It shows what fine and graphic artists’ work could look like if it made the jump to website design. http://www.smashingmagazine.com/ itself is a good resource for ideas and finding out how things are done properly.

Your friend will come across things as they learn about design, but this is just a starter’s guide. I won’t go into Javascript, jQuery, MySQL, PHP, XML, WordPress, Drupal, Joomla, XAMPP, phpMyAdmin, SEO or anything else, but as you see I’ve linked to handy places so they can take a look! All these things together are what makes a good, well rounded, knowledgeable web designer though. I’ve been doing this for 12 years, 6 of them day in day out so it all comes with experience and using the things you find, as you need them. You’ll find yourself doing something new very often. The industry moves very quickly. Just today I’ve been trying to do something I’ve never done before! It’s not working yet but I’ll get there in the end.

My Workflow

Personally speaking, I approach all projects in the following way, without fail:

  • Sketch out various ideas on paper to get ideas on layout and what things will be included on the page
  • Make a graphic version of this in Photoshop to design things how they will eventually look on the site
  • Code the HTML to fit the design I’ve created
  • Code the CSS in Mozilla Firefox browser (http://www.getfirefox.com/) using the Firebug extension (http://getfirebug.com/)
  • Test the website as I’m designing it in the following browsers:
    • Mozilla Firefox
    • Internet Explorer 6, 7,  8 and 9
    • Apple Safari
    • Opera Browser
    • Google Chrome
  • Then it’s ready to go!

A few final pieces of advice

  • If you’re not tenacious in finding out why things are wrong and stringently testing to find things that might go wrong, you’ll end up doing twice as much work as you intended to do when people come back to you when it all goes wrong (trust me, I know!). It’s not often you can say “that’ll do” and move on.
  • Design every website as if they’ve never used a website before. Make things obvious.
  • Look at other websites do things that are similar to what you’re designing for and study them.
  • Look at design convention, e.g. where search bars are usually placed – top right of the page, where people look for contact details – in the footer, what colour links are – usually blue, that sort of thing.
  • Future-proof your designs as much as you can. For example, if you’ve get a horizontal navigation bar with six things in it that takes up 80% of the page width, what will you go when someone comes to you with another 6 links to put in it?