Web Design is not Print Design

By Elyssa Dolinger on January 18, 2010 at 5:11 pm in Design

art

It’s easy to think that design is design and that there isn’t a whole lot of difference between the types of design.

For the most part this is true. There are definitely fundamental principles that translate across genres. Principles like the golden ratio and the rule of thirds and all of that good stuff. (If you’re a designer, even if you don’t know the name you’d know the rule.)

Aaaaand then there are concepts that definitely don’t translate.

Resolution

The great thing about web design is that you don’t need high resolution photographs. If you are buying stock images, this means you can buy the smaller (and usually cheaper) images.

As far as print goes, the higher the resolution, the better. You don’t deal with resolution as much in print design except for the dire need of a higher resolution image. Working in a higher resolution file means working in a larger file. Working on a larger file means higher processing needs.

Color Formatting

These are CMYK

Cyan, Magenta and Yellow printing pigments.

CMYK and RGB are two different animals. I could tell you one is additive and one is subtractive, but that doesn’t mean a whole lot to most people. It makes more sense to me to realize that one is light based (the light from the computer screen) and one is pigment (or ink) based.

It is very difficult to match print and web colors since they work with two entirely different color systems. Metallic colors are difficult to achieve, but more difficult for print unless you have access to metallic inks.

Fonts

aliasingIn large blocks of text such as books, brochures and newsletters, it’s advised to use serif fonts for ease of reading. The serifs have a way of directing the eye and helping you keep your line placement. It’s especially beneficial for the dyslexic because of the more obvious differences in i, I, l and 1. (Yeah those are all different characters.)

On the web, it’s advised that you don’t have large blocks of text. Sometimes it’s unavoidable, but for a lot of sites the fewer words, the better. The more you break up your paragraphs, the better too. So the need for serifs is pretty much gone.

There are also some technical benefits to using sanserif fonts. For example, sans serif fonts can be sized smaller than serifs and still be readable. There are also some aliasing issues (hard pixilation) with windows and serif fonts.

Organization

On the web, it is best to have your navigation available on every page so that you can navigate anywhere from anywhere. The print equivalent would be to have the table of contents on every page. It certainly takes up space.

Good design transcends browsers and platforms and material, but unfortunately a lot of times it is defined by them. Since the very make up of Print and Web are different, by definition shouldn’t the design be different too?

Color scheming

By Tim Priebe on December 25, 2008 at 6:30 am in Design

Merry Christmas, all!

For those of us who are not officially designers, but still like to create, it can be hard to come up with a color scheme. I had a few websites I liked to use for inspiration back when I wore all the hats here at T&S (scary, I know), and some other neat ones have come to my attention since then. So whether you’re designing a website, a brochure or just a business card, here’s some websites that can help you come up with a color scheme.

Color Palette Generator

ColorSchemer

Color Scheme Generator 2

ColourPost.com

ColorSchemer Gallery

ColourLovers.com

That website’s colors look terrible!

By Tim Priebe on September 25, 2008 at 6:30 am in Design, Hardware

Sometimes websites look awful. You’ve probably looked at a website and thought the colors were a poor choice. Or maybe you have worked with a web designer and the colors on your site didn’t turn out exactly like you wanted. While it may or may not be the designer’s fault, things are not entirely in his or her control.

Inexpensive monitors (the ones most consumers purchase) each come off the assembly line with slight differences in color. And even after that, the color on those monitors will drift over time. On most monitors, the drift is so small and the life of the monitor short enough, that it just doesn’t matter in day to day use. But when you’re approving designs for your business, that small difference will seem bigger to you.

So there are slight variations just from monitor to monitor, and that’s an unavoidable fact. While your designer can (and should) calibrate their monitors, that won’t let them see exactly what it looks like on your monitor, or anyone else’s, for that matter. All calibration does is give them a good average of what the site will look like on most monitors.

If you are about to embark on some web design work on your computer, or if you’d just like better color, there is an affordable option. While monitor calibrators used to be much more expensive, you can get one like the Spyder 2 Express or the Pantone Huey MEU101 for between $50 and $100. Although I’m not a graphic designer myself, I do use the Spyder 2 Express and calibrate my monitor on a fairly regular basis.

Another, less expensive option, is to simply check your website on a few friends’ computers. Or, failing that, email them a link and ask them if they could check themselves. Get some feedback on the website color. Your monitor may be way off, or it could be that you were absolutely right, and the color is horrible.

Either way, don’t judge your website by its appearance on a single monitor.

CMYK vs. RGB

By Emily Spirek on August 13, 2008 at 6:30 am in General

Probably one of the most important pieces of knowledge a designer could have is understanding the difference between CMYK and RGB color modes.

CMYK (Cyan Magenta Yellow Black) -for printing (subtractive color)
RGB (Red Green Blue) - for screen display (additive color)

Say you have white paper with black dots, and you allow 50% of the paper to show through: you would have a shade of gray. Depending on the concentration of the dots is what gives you different shades. CMYK works the same way with Cyan, Magenta and Yellow, and this is how you get different colors (1,000,000 options). By changing the shade of your paper, you can also achieve different colors.

Rather than using dots, RGB color shades are produced with different levels from the electronic source. Unlike the 100 variations per color using CMYK, there are 256 shades/levels of brightness per color using RGB, which means 16, 77,216 colors total.

Knowing the difference between the two is vital and the change is very apparent in your work.