iNoobs: Top 12 Web Design Guidelines (For Print Designers)

"Ohhhh God!! I love web design."

Welcome to another edition of the iNoobs series – where we teach you how to become a web developer (and how to grow lots of body hair and shoot omega beams from your eyes – because ya’ll know that’s the only thing that can defeat Superman).

Comic book geeky-ness aside I was asked the other day to help a friend get into web design…

[infobox margin_bottom="0" margin_top="0" border_radius="all" color="white" title=""] iNoobs is a series of articles for those new to web design and web development, created by Zach Katkin, founder of Promana.net, a brilliant resource for small business software news. [/infobox]

Holy f$%k,” I cursed at my grandmother… “I can combine two loves, kill two birds if you will. I can help my friend (aka my grams) and write a great post for the iNoobs series…”

(Is he already calling this a “great post”, sometimes I like his cocky writing style… sometimes it’s just too much. And is his “friend” his grandma?)

Yes… and… the parenthesis means YOU’RE thinking it…

On to the design juice…

Top 12 Web Design Guidelines (For Print Designers)

I know a lot of you out there are fantastic designers.

You can mouse through photoshop, clickety-clicking like there’s no tomorrow.

You can draw vectors in Illustrator like a boss (sometimes spelled BAWSE for effect).

You can layout stuff out in InDesign that would give any typophile a Times New Roman Orgasm. (Is that a font joke…?)

I’m not sure, just stay with me.”

But you want to know more about web design.

Well, if you’re like my friend – as well as a few designers I’ve coached while working at an ad/marketing agency – you’d like to create some sweet designs for the web, but have some questions like, “Where do I begin?

Unfortunately, I’ve tried simply telling designers to “open your eyes” but that never seems to work – but let’s start there anyway. Before we get to our bulleted list goodness:

OPEN YOUR EYES (BTW I’m saying this in a sultry Penelope Cruz voice)

As you move throughout the web pay attention to how everything is layed out. Pay attention to everything that has been taken into account (or haphazardly mashed together by the devs). Look at the margins, the size of the site, its behavior as you scroll, the consistency of titles, and boxes, and advertisement space and… EVERYTHING.

Then I would start by replicating the design of one of your favorite sites. That’s how I started. Just go find a beautiful site and… do it again, in photoshop or your application of choice (oh shit, I used the word application – when I used to use “program” apple is taking over).

Go recreate and enhance it. Add stuff and play with things. You’re a designer you probably have a good eye for design (and hopefully beautiful eyes in general) and will be able to move through your changes tossing the chaff and keeping your delicious wheat.

But, if you must have a complete break down here are my… Top 12 Web Design Guidelines (for Print Designers)

1) Photoshop

Preferably work/design in Photoshop (or export final design to a photoshop friendly format).

We coders like this because of layers. Layers rock for design, and for cutting up HTML/CSS.

While working within Photoshop or other software make sure colors are set to RGB and the resolution of the document you’re working on is 72DPI (but these are both defaults). It’s important to make sure to keep your design file organized (if using photoshop, keep your layers organized) using groups, and naming. Part of the next steps of cutting up a design into HTML & CSS require that we get to very specific portions of the design and organization helps reduce that time.

2) Design Resolution/Image Size

When considering the size of the website almost 100% of the time we go with a fixed width (set number of pixels) and centered design. If you’ll be following this same recommended path you’ll need to then set a maximum size for the design (boundaries for which all of the content falls under.  For smaller screens 760px is recommended, however with larger and larger screens more readily available the de-facto is currently 960px as it allows lots of design freedom, as well as space for advertising and multiple columns worth of content.

Additional Resources – http://960.gs/

3) Background

It’s important to illustrate in the design how the background will be handled so that it can be coded properly. There’s a number of different options here:

  • Static Background (simple color or image)
  • Tiled Background (vertically or horizontally)
  • Static Background (an image that stays in place despite scrolling)

Additional Resources – http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

4) Navigation

The main site navigation should (in my opinion) almost always be positioned at the top – and only in extreme situations to the side of the site. If you must put it on the side – position it to the left. The site navigation should be one of the most prominent elements on the page and should be consistent across the whole site.

5) Fonts

iNoobs: Top 12 Web Design Guidelines (For Print Designers)It’s important to understand that photoshop by default will anti alias text (make it look rounded and pretty onscreen – this is the “strong, sharp, etc.” setting) and has a host of EXTRA fonts unavailable to most users.

Most modern web browsers however don’t make font’s look pretty they stay jagged and that most users won’t have specialized fonts (see additional resource for most common web friendly fonts). Unlike colors, which you can display as many as you’d like (“web friendly colors” are no longer important to adhere to) fonts are a different story. Although fonts can be specially imported to create a unique design that is consistent for all users, it is usually done so at the cost of speed – it takes time for the user to download the tools required to have this done. I’ve played around with the flash versions and javascript version of embedded fonts and although both can work exceptionally well – they can seriously slow down the speed of your website!

Additionally, when converting the design into HTML, we’ll need to make sure we have the same fonts (in the cases where fonts are to be implemented exactly) should you want to use a custom font.

 

6) Headers/Titles

Much like the fonts consideration it’s important to consider headers. Any titles on the site (big areas of text usually signaling a page title) are considered “headers” being consistent here (using a similar font and style) will help in the conversion process.

7) Content

Although the fancy images and colors are important the single MOST important thing is your content (text!) – it’s probably the most space any single element will need to take up, and will take the most time of your user (reading) so consider the type/font, the contrast between the content and the background it sits on, as well as secondary elements (for example a blog/news section will typically have a comment section, a box listing the author, date, etc.).

8) Details

Often the best designs are very simple but with consistency and very specific tiny details. For example just adding a slight border and drop shadow to a box can make a world of difference. Great web design is all about those kinds of tiny details, both on the home page as well as throughout the site.

9) Colors/Links

Because of screen discrepancies and considerations for eye site problems it’s recommended to contrast your colors as much as possible, particularly links. Although this is ultimately an esthetic decision, contrast can really help ease the use of a website.

10) Graphics

If additional graphics are to be provided it’s important to consider file size, we try to compress all graphics as much as possible when posting to the web. For example JPG’s are typically compressed to 60% (good balance of size/quality), but Gif’s are used in places where not a lot of colors are important, and PNGs are used when transparency in an image is necessary. Because the design is to be provided as a PSD this is a moot issue unless other graphics/images are to be sent or uploaded to the site later on.

11) Goals

iNoobs: Top 12 Web Design Guidelines (For Print Designers)For each page being designed it’s helpful to sit down and come up with 3 goals (with a major goal on top) for a single page and then design so that you feel those goals are met easily and simply conveyed to a new visitor.

Then test – have a friend come over (perhaps your grandma) and see what the design communicates to them. Remember everyone is different and will have an opinion so although use cases and surveys like this are helpful – stick to your own gut. And seriously, old people make perfect test cases – they are rarely extremely computer savvy and typically get angry quickly so you’ll be able to tell if your design is not “up to snuff” (that’s an old person saying right?) by the fact that there’s now a keyboard lodged in your monitor.

JK – I love old people. 

12) Consistency

Be consistent in the overall design, particularly the navigation, title, and page elements. Although typically a homepage will look much different than internal pages consistency is important in communicate the flow of the website.