6 years ago I was typesetting company reports, trying not to look at the clock to see how soon I could go home. Now I work from home and every time I look at the clock I marvel at how quickly time passes! I have managed to cross-over from being a print designer and artworker to running an online design and marketing business.
Here are some of the secrets of learning web design
First of all, don’t make the same mistake I did and use Dreamweaver as a WYSIWYG design tool like QuarkXpress or InDesign! You’re going to have to learn some code.
HTML, the mark-up language that is the bare bones of all web pages, can be mastered in only a few hours. It’s very probable you already know some of it. CSS (which can be included in HTML files but is ideally a separate file) will take longer to learn but is necessary for the designer to know.
The best way to learn the various technologies associated with web design is to find web sites that you like and view the code to see how it’s done.
- In Firefox go View > Page Source
- In Google Chrome View > Developer > View Source
- In Internet Explorer go Page > View Source
Within the HTML you will see absolute and relative paths to other files, for example, the style sheet may be
http://www.website.com/css/styles.css or an image may be
http://www.website.com/image/company-logo.jpg. Follow these paths to find everything you can about the different elements of a website. This will help you to make them yourself.
Another techniques that will help you learn HTML and CSS is viewing the Developer Tools in Chrome or Internet Explorer and in Firefox using the Firebug extension. While in Developer Tools or the Firebug panel, select on the cursor (an arrow or a magnifying glass) and with that click on a web page element and the code affecting it will show up.
You can make HTML and CSS changes and see them live on the web page. These tools will also show you which CSS selectors affect an element and which are overrided.
Images should be 72 dpi and in RGB not CMYK
Most computer monitors display at 72 pixels per inch – so a 72 pixels high image will be roughly one inch tall. In Photoshop, all web images should be 72 dpi and in the RGB color mode (unless Grayscale). Images viewed at 100% in Photoshop will be the same size on the web page. However the colors will all look different from monitor to monitor. Use the Color Picker in Photoshop to get the hexadecimal values of colors.
Use File > Save for Web & Devices… or Edit > Copy Merged to export your web images. For file types, use:
- GIFs for graphics (maybe only a few tones of the same color)
- JPGs for normal photographs (like a headshot)
- PNGs if you want transparency (GIFs have transparency but only PNGs offer degrees of transparency – but don’t start dancing a jig of delight yet, you’ll need a hack to get them to work in Internet Explorer 5.5 and 6)
Think of space in terms of pixels and percentages not millimetres and inches! The content area of a website shouldn’t be much wider than about 1000 pixels. An HTML email really shouldn’t be wider than 600 pixels.
When designing or laying out web pages in Photoshop, try to use as many Vector Smart Objects as possible as they can be scaled, skewed and colored and will never lose their quality.
Think of type in terms of pixels, percentages and ems not points
For text you can use only a few core web fonts. There are ways of getting around this but that’s for another day. Maybe you’re only OK with the following:
- Avant Garde
- Times New Roman
- Trebuchet MS
But you can choose fonts to use if the one you want is unavailable. So a CSS declaration such as
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; means: “if the computer reading this webpage doesn’t have a lovely Helvetica Neue, please use an ordinary Helvetica, otherwise Arial, and if they don’t have any Helveticas or Arials then just use any old sans-serif font – there’s no hope for them!”
No need to bother about hyphenation, widows, orphans, legs of copy – they don’t exist here. This is the web, baby! (If you really want to get rid of a widow – on a heading perhaps – use a non-breaking space (
) between the last two words.)
The best way to learn web design is to … design web pages. Challenge yourself – each time you create a new website. Otherwise you can:
- Try Google (obvious, I know, but … )
- Ask a question at SitePoint or Digital Point forums. If you have researched the query adequately and explained it simply, then 99 times out of 100 someone will provide you with a solution. There are many other excellent design forums as well that can be a great help: Estetica Design Forum, DesignersTalk, Web Designer Forum, to name but a few. (If you’re interested in link juice Digital Point is dofollow for forum signatures!)
- Use online browser rendering services like Adobe’s BrowserLab and BrowserShots. BrowserShots has more browser choice but it’s painfully slow. Use IETester on a PC to test different versions of Internet Explorer – it’s crashy but it does the job.
- Use these sites to validate the HTML and CSS
- Read books. I found this book very useful: Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd
- Get up, make a cup of tea, tear your hair out and shout expletives – it won’t make any difference but it might make you feel better
Above all, don’t worry! Web design is sometime fiendishly tricky but strangely satisfying. And, if I can do it; anyone can.
Are you a convert from print design who has mastered the art of creating websites? What were the most confusing aspects of web design initially? Or, if you are just starting out, let me know if this has helped you at all.