For print designers who want to learn web design

print designer learning web design

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.

It was difficult at first, putting my ruler and pantone swatches against the screen and thinking that JavaScript was some sort of Indonesian font, but I realized that some principles of design remain constant through print and web and it’s not as difficult as it looks.

code

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 color

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.

type

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:

  • Arial
  • Avant Garde
  • Courier
  • Georgia
  • Times New Roman
  • Trebuchet MS
  • Verdana

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.)

resources

Resources

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.

Conclusion

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.

Comments

  1. says

    Rob,
    Sometimes we miss the details and basic concepts: Studying and watchin carefully can teach us a lot.
    I’m a consultant. Last december i started to “design” websites in google sites. Then i started to learn some HTML. Today i’m learnign PHP, CSS and wrodpress. And i’m amazed that i learned a totally new job from zero.

  2. says

    Great article Rob. I haven’t heard the term typesetter used for a few years now, seems like everyone wants to say mac artworker or even worse mac operator, I hate that term. Agree about Dreamweaver though, have to have a clue about what’s going on behind the scenes. You have to wear so many hats nowadays just when you think you’re done….you’re not, still that’s the great thing about design. My next big learning curve is to create a wordpress theme and site from scratch.

  3. says

    I’m from a print background too, and have customised WP themes for clients, but lately, I’m thinking of offering web services, but getting the themes coded by a developer instead. I know some CSS and a little PHP, but to be totally competent in Web development takes a lot of time; time I rarely have.

    Some good advice here Rob…

  4. says

    Hello Samuel, I think once you start to understand something that you thought you’d never even begin to understand – it can be a great for morale and push you into learning more.

    Hello Rob, yes, I remember people using the term “mac operator” – it wasn’t usually a complimentary one. You right, we all have to pick up so much. I found this series very useful when creating themes from scratch: http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/

    Hello Andrew, good to hear from you again! If you find a good PHP/WordPress developer let me know! I don’t have much time these days and I think outsourcing could be the answer – it’s just having the correct contacts to pass these jobs on to!

  5. Brian says

    Dreamweaver isn’t a mistake if you know how the interface is writing your code. I would avoid using the Behaviors panel because it creates outdated and bloated code…but for the most part its a slick program that can speed up the code writing process. Its all in how you use the tools.

    I’d also check out Espresso and CSS Edit. Two excellent programs for working with code.

  6. says

    Hi Ian, glad this was useful.

    Brian, I agree, I use Dreamweaver all the time, but I had been using it in a WYSIWYG way, without looking at the code! Thanks for the tips!

  7. Mark Narusson says

    Great article Rob. I’m still pretty new to web design (4-5yrs) and still learning stuff every week. That’s the great thing about the web, it’s constantly changing and challenging our skills as designers. Always good to get some new tips :)

  8. says

    Hi Rob, I agree that Build Your Own Website the Right Way by Ian Lloyd is an excellent book and would really encourage new web designers to study it. I still have it on my desk – battered and dog-eared from constant use and reference for basic tips that are easily forgotten.

Leave a Reply

Notify me of followup comments via e-mail. You can also subscribe without commenting.