Illustration courtesy of Mal Jones
Even the most experienced and talented print designers can be intimidated by the need to learn and work with code when considering design for the web. I personally believe that – when learning to master the web design process – knowledge of code is secondary to the knowledge of some basic design guidelines necessary for creating killer web site layouts.
What good is a web site with awesome code if it is poorly designed and improperly sized? Just as print design requires an understanding of PMS colors, picas, pagination, and other pre-press techniques, web design requires the ability to understand browser sizes, plan and organize content, and use RGB colors.
I began my career as a graphic designer focused solely on print work, then later transitioned to the web. Having made the leap between those two media, I understand some of the initial roadblocks print designers can face and would like to share a few helpful tips.
This article will provide some creative direction for those transitioning, black-belt print designers who want to create powerful web site designs. We’ll leave code for another day.
Lesson No. 1 – Size the Screen
960 is the new 760, grasshopper! Seriously though, inches and picas are standard in the print world, but pixels reign supreme on the web. Before sitting down to design anything for the web, you need to know what size browser you are designing for. Based on current statistics, browsers set at 1024×768 surpass those set at 800×600. The recommended maximum width for web layouts is anywhere from 950 pixels to 990 pixels. (I generally recommend using 960 pixels for your page width and just love 12 & 16 column Photoshop and Illustrator templates that you can find with the 960 Grid System).
Lesson No. 2 — Lorem Ipsum is for the Weak
When it comes to designing for the web, it’s essential to know what kind of content you’re dealing with — nice aesthetics are simply not enough. Newbies often prepare layouts with “lorem ipsum” in paragraphs, marketing areas, and even headings. While this may help in the wire-framing stage of design, you shouldn’t be willing to move the project further until headings for content have been fully defined. Why? Because the quality of your web site is dependent not only on a snappy visual design, but on its usability and information design.
The Road to Enlightenment: Those ready to start practicing should spend some time with CSS Zen Garden. This site is a demonstration of what can be accomplished visually with CSS-based designs and offers a great content outline. Perfect for someone who wants to spend a decent amount of time in Photoshop and later move onto CSS.
Lesson No. 3 — Train Your Monitor
As a print designer, you’ve learned that it’s impossible to gauge color from a computer monitor alone. Pantone colors have been our standard for color, and a proof and press check will ensure accuracy.
When considering color and size on the web, you’ll need to flex some of the rules you’ve lived by in the print world. Colors will preview differently from screen to screen since a monitor’s calibration changes regularly over time. One trick is to always keep your monitor calibrated as a base for everyone else. PMS colors are still a decent starting point as you work on mood boards and creative exploration, but when converting to RGB, don’t forget to take a step back to judge for yourself. If you find this frustrating, just take a deep breath and think back to the days when life was simple and colors came in a box of eight, with names like red, green, and blue . . . then snap back to reality and have confidence in the colors that look the best to you on-screen.
Lesson No. 4 – Trust Your Monitor
On the subject of size and readability, you will again need to trust what you see on the computer screen and adjust accordingly. If you can’t read the paragraph text that’s set at 10 pixels, chances are your users won’t be able to either. It’s okay to zoom in occasionally to get a good look at those pixels, but just remember that people will be viewing the design at 100 percent and shouldn’t need to zoom in to read paragraph text that’s micro-sized. Bottom line, no matter how tempted you are to print a proof of your web layouts to review color and size, you must resist the urge — it’s for your own good! Although this practice served you well in the print world, it provides no assurances in the web world; it just uses up good paper and toner. Trust your monitor!
What Are Your Challenges?
Anne Kerns and Jim Darling have started a blog on this topic, sharing their progress and challenges as print designers learning web design and development.
Did you have some challenges with transitioning yourself? Do you have some challenges that you’re currently facing?
First, let me say “kudos” to you, Nick, on a well-written and informative article! I’ve often admired your work and have been impressed with your metamorphosis from print-primary designer to sage web designer.
A few observations from my own experience:
• Design first. Websites that forgo or forget to incorporate design principles in their UI have a harder time maintaining users’ attention—regardless of code quality.
• Why 960px is all-powerful. 960px is an excellent choice for width because it divides evenly when using a 3, 4, 5, or 6-column grid. Handy!
• I say avoid Pantones altogether. If you’re having trouble creating a scheme, try using a guide like this one, or one of the many others found online.
• You can never test too much! Test on a PC. Test on your parents’ computer. Test at the library. Test as many different machines and configurations as you can and make note of discrepancies. This will allow you to create a more broadly usable site, and will help you avoid missteps on future projects.
• It takes time. The print-to-web transition is not an easy one. It will take time, effort, and many, many mistakes from which you can learn. Ask questions, be patient, and keep on keeping on!
Thanks Scott, those are some great points!
Totally guilty of using lorem ipsum in my web designs in school! On the job, however, I’ve quickly learned that the content really does inform the design and layout of each page.
Thanks for all the great tips!
I think this is a great start in helping print designers make the transition. Although I started back in 1994 when Web pages had those bland gray backgrounds and tables were just starting to be used to reassemble sliced images from Photoshop in HTML, I am still trying to find the best way to work faster to speed the process.
While I have been using Photoshop exclusively to build graphic interfaces, I often find that it’s not quite as flexible when several design directions need to be cranked out in a short amount of time. Keeping track of numerous layers and trying to set text becomes a time-consuming task.
So, let me offer print designers a faster alternative to simply Photoshop that’s more familiar and helps to develop the new skills of designing for the Web. It’s called Adobe InDesign. Yes, a print page layout application.
Here is a good process to begin getting comfortable with designing for the Web using InDesign and Photoshop together.
1) Start with InDesign and set your document size to 1024 points (yes, points) by 1000 points. Why 1000 points? Because you want to leave enough room to show what pages may look like past the 768 height (actually a bit less) mark when a user scrolls. You could make it a lot larger but for a start 1000 points in height seems to work for me. It can change if needed.
Now, some may say, “wait a second, points isn’t the same as pixels”. No, but give it a try and draw some one point rules and then save the document as a PDF. When you go to open the PDF in Photoshop, importing the entire trim size at 72dpi, you’ll see that the points actually equate to the same pixels. The one point rules verify it. DON’T TRY TO GET FANCY and use anything below 1 point increments for rules and boxes in InDesign and you’ll be just fine.
2) Drag out grid lines to 960 points from the left-most edge and one down to about 748 or so to be safe on the height. You are just trying to stay within a safety zone for the height and I find that this height works well when setting the safety zone. Some may have other height settings. These grid lines mark the safe design area, like the “live area” in printed materials.
3) You can then use InDesign’s master pages to begin building the interface/ I find that I have my background established here, general regions for navigation, logos, footers—essentially anything that continues from page to page. You design leaving your main content areas defined—regions where content that differs from page to page will go. Use a worst-case scenario designing the most complex of pages. This helps you set up grid lines that can be used or altered on every page.
4) You can then override master page elements or copy master pages to new master pages and then change things as needed. Master pages based on others help keep things consistent and the grid intact.
5) Setting text is a bit more tricky. First, turn off all hyphenation. It doesn’t exist on the Web. Then, using standard Web fonts (you can look these up in Google) go ahead and set up a few sizes. For example, I use 11 points over 14 points and 12 points over 16 points a lot when I set text in Arial. You can experiment and ask a few of your Web designer guru friends to see what’s best. Always set more text than appropriate. It can always be cut down but rarely does everything fit perfectly unless you have 100% control over the writing when actual content is generated.
6) You can use the gradients and effects in InDesign and InDesign object styles to control special effects, box rules, etc. It’s the same for colors. Also, keep all elements on layers and you’ll find things easier to select when needed. I put the background on one layer, text on one, photos/images on one, and so on.
7) Once you have completed the design, export your design as a PDF and then open it in Photoshop at 1024 pixels by whatever the height is. The width matters most. Make sure the color mode is RGB and the pixels/inch is 72. I also play around with alias vs. anti-alias if I want to be exact when selecting pixels and building the actual site as I know all of the major text areas will be HTML anyway. When showing clients you can just keep it aliased as it looks much nicer. Just make sure your clients know that it may look a bit different when actually built.
If your design needs no Photoshop treatment outside of InDesign, you can many times just send the PDF directly to the client. I show a home page and two or three other sites pages (sub-level pages) as that is many times just enough to give the client what they need to gain their approval on the interface. If the site is small and the content is ready-to-go, I will many times mock up the entire site for safe measure.
Conclusion:
Using InDesign speeds up the design process, allows for better setting of text and moving it around as needed, quick variations on design/sketches, and consolidates everything for easy export as PDFs or importing into Photoshop. It has worked very well and keeps the print skills fresh while designing for the Web. Consider using Photoshop and InDesign hand-in-hand when making the transition.
By picking up a few books on XHTML and CSS you’ll also find it a bit easier to begin how to format the actual code. And, lastly, always ask people who are more knowledgeable than you. I often email the authors of books for further insight. I have developed a strong electronic relationship with a few of them.
Correction: Hyphenation does exist, but not at the end of lines of text. Turning it off in InDesign imitates the way a browser displays the lines of text in a paragraph.
Jessica: I’m glad you found this helpful.
Ephraim: Thanks for the detailed tips. Personally I use InDesign in a similar fashion for wire-framing and have met a lot of information architects that prefer it over Microsoft Visio and Omnigraffle as well.
For the visual design, I’ve always preferred Illustrator over Photoshop and have met a few folks that feel Fireworks is worth checking out too. With the latest versions of Creative Suite, there seems to be a great deal of synergy among these applications to work with one another.
Great article, great tips! I guess Jim and I should return from our hiatus & get back on that web horse.
:)anne