They Call Me Marty!
Design goodness and other ramblings.

Posted on February 17th, 2010 2 Comments

4 Things Print Designers Should Know About Web Design

InDesign and Web Design

The internet is a different type of monster than the non-digital print beast, and you should approached it differently. If you are a graphic designer thinking about adding web design to your list of skill-sets, here are four things you should know.

1. Navigation

Designing for print has it’s share of technical challenges, but one thing you almost never have to worry or even think about is navigation. Take a book for example. Most people read books left to right, navigate through its pages by flipping from right to left. If a reader decides to flip through the pages beginning at the back of the book, there is nothing you can do about it. In other words, people already know how to navigate through print material, they don’t need you for that. All you have to do is worry about guiding them through the content.

Designing a successful website requires an easy and intuitive navigation system. Don’t make people think or ask them to figure out how to get to the next section of your site, it should be a reflex. To achieve this, stick to basics and follow conventions until you are familiar enough with the limits of web design to do otherwise. The navigation is usually at the top of the page or on the sidebar on the left or right of the website. Asking your visitors to find the navigation somewhere else is like asking someone from the U.S. to drive a car in Europe—they will get it, but it can be nerve-wrecking, and unless the information they are searching for is worth it, they’ll most likely go find it somewhere else.

2. Design Vertically Not Horizontally

Several months ago a friend mentioned to me that she needed to get her portfolio online. She asked if I would take her Photoshop design, slice it up and code it. I agreed. This is what she sent me.

Horizontal Design 1

Horizontal Design 2

And these were her instructions:

“I want to stay with a very simplistic look, I don’t want anything other than my images to dominate the screen…”

Lets ignore the fact that there is no apparent way to navigate through the portfolio, my first reaction was,

“this is never going to work.”

I was reacting to the orientation of her design. There was a time when you could not find anyone using a monitor larger than 15”. Luckily, that has changed. Large monitors are becoming more and more common in the workplace, but not everyone that is looking to hire you is sitting behind a monitor large enough to view your horizontal design. So design vertically. Play around with different widths, and test them out at different screen resolutions.

I know what you design younglings are saying, “but you can scroll left or right to see the entire design.” True, but remember that staying true to convention is key. Most people do not like to scroll left or right, because it’s extra mental work. Don’t make them think!

3. Fonts

Graphic designers are very comfortable using lots of fonts—mostly because they are pouring out of our ears. Its easy to forget that our counterpart web designers don’t have the same luxury. In order to display a font on the web, the person viewing your site has to either have that font installed or you have to use an image to display it.

The problem with making your visitors responsible for installing the fonts you use is that they won’t. Their browser will replace any fonts not installed in the person’s computer with default ones and make your site look… well you know.

Converting your fonts into images creates a technical and accessible problem. You see, search engines can’t index images. Search engines will have a hard time deciding what your site is about if they encounter .jpg after .jpg—not to mention the hit your website will take in performance by making dozens of requests for images from the server. Learn the limitations of web typography and work within them. With CSS3, new services are popping up offering ways of using non-standard fonts in your websites. A way to use Flash to get around these limitations has been around for some time, but stick to basics until you are ready to move on.

4. Visual Control

This will be the hardest thing to wrap your brain around. In print, you control the layout, fonts, line breaks, colors, page size, paper stock etc… Therefore, you can reproduce your design several times over and be sure that it will be identical as the last. The internet makes all of those constants become variables. Your visitors will use different screen sizes, browsers, operating systems, system fonts, and color and contrast settings etc. These are just a few of the reasons why the same site could display differently on two computers inches away from each other—let’s not even get into mobile devices.

At the end of the day its going to come down to trial and error. Don’t try to break out of the conventions of web design until you have learned to work within them. Now go have fun!

2 Comments


avatar

On February 18th, 2010 at 1:13 PM

Andy Stitt thought that:

Great post! My fiancee is an ace graphic designer/photographer/Photoshop master, and we are now collaborating on some web design projects. I’m helping her add web design to her skill set, and I think this post will be very helpful for her. Thanks!

avatar

On February 19th, 2010 at 7:12 AM

Marty Romero thought that:

Thanks for the comment Andy.

Working together with someone that has complimentary skills is a great way to learn. When that person is your significant other can be a bonus!


What do you think?

Are you human?

Enter the image you see above