We love working with print designers. Really, we do. Designers with a strict print design background have ways of changing the way we look at web conventions, and that is always a welcome point of view. Truth be told, we also take a good deal of inspiration from print design magazines and resources.
If we love working with print designers so much, what's the purpose of this guide you may wonder. The purpose is to outline some very basic web guidelines that will help the designer translate print based design principles over to the dynamic nature of the web.
Software.
We are aware that designers with varying backgrounds also have varying skill-sets and preferences in software. Adobe Illustrator & InDesign both have their purpose in illustration and print layouts, but they become extremely impractical for the web where pixels, not inches, are the key.
When pixels are in question, Adobe Photoshop is king. (Yes, we are aware of the argument for Adobe Fireworks, but that argument can be handled elsewhere.)
It is really important that all production-ready web mockups be provided in a layered Photoshop file. This will ensure that things get themed (Drupal term for front-end coding) exactly as intended when the time comes. While a design may look amazing in Illustrator, exporting to Photoshop can expose all sorts of issues now that the design is pixel based. Text or graphics that looked great as vectors could be unusable when brought over to the land of the pixel. Starting with Photoshop will really help avoid this issue. The client will approve designs that are actually usable thus avoiding backpedaling when an approved design doesn't work for the web.
The less than predictable world of web browsers.
While the software you use a big concern, how you approach the interface layout process is equally important. Websites are incredibly dynamic creatures, and there are several factors that have an impact on how things are viewed and presented.
While the stages before the client ever gets to see your work are very important in building up the foundation, making the design work with an expansive selection of browser & hardware configurations will make or break the website.
The first order of business is to be aware of the monitors and displays that clients will be viewing the website on. The website will be viewed on everything from tiny resolution mobile displays, to super high resolution 30â monitors.
We can't focus on either extreme because 95% of users will fall somewhere in between. The best we can do, and what is becoming standard procedure, is to design for a 1024x768 resolution. Taking into account browser interface and operating system elements, this leaves us with a 990x550 "safe area" to work with. The 960 Grid System is an excellent reference for print designers starting out with web layouts. We at Fuse tend to design with a 975px grid but that's just personal preference.
The mysterious page fold.
Jakob Nielsen would like to have everyone believe that anything that lies beneath the 550 pixel "safe area" will get completely lost and that visitors to your site will never scroll to see the rest of what you have to offer. While part of that theory is true, dropping design direction + feel in favour of simply cramming as much info as possible into the safe area is not the way to go.
It's best to just follow common sense. If there is anything that is absolutely vital to the site, then its best to listen to Mr. Nielsen and keep it above that page fold. Knowing this in advance will help the entire process.
Also, people scroll.
Fonts.
As 2010 continues onward, HTML5 and CSS3 support will only expand. One of the key features of CSS3 is @font-face. This handy little feature allows us to use just about any font (type-face) available. Almost.
The biggest hold-up on full capabilities is the licensing issues that come with uploading those expensive type families onto a web server. As these issues get worked out over time (and there is definite progress in this area) we suggest finding appropriate free fonts with proper web licenses when your design is in it's infancy.
While @font-face is a wonderful addition, it's not perfect. OSX renders things just as you would see them in Photoshop, whereas Window's machines have rendering issues on more complex fonts at small point sizes. It's best to keep the complex fonts for larger type, and a classic web-safe font for body copy.
More details on @font-face can be found here.
General awareness.
While the most important concerns have been outlined above, it's also important to understand the dynamics behind Drupal.
Please be aware that content on the web is flexible and very dynamic when built upon a CMS like Drupal. If your design relies on two paragraphs to be exactly 15 lines, and the accompanying image is intended to be the exact same height as these two paragraphs, we are going to have trouble.
The type that is used in Photoshop may be the exact same font, size and weight as what we apply on the site, but that type will display differently 99% of the time. Users also have the ability to increase/decrease their font size, and that will definitely have an impact.
Understanding that the web is dynamic is very, very important in the design stages.
If you have any suggestions, or even if you don't agree with certain points, please let us know in the comments. We know, for example, that some web designers use Illustrator successfully in their workflow. If you're one of those designers help us understand how you make it work. This is an open discussion on this issue so fire away!