Transitioning from a Print to a Web Designer

The following article is an overview of a keynote presentation given by Gatorworks’ during the 2009 AAF Student Conference discussing “Making the Transition from Print to Web”. Gatorwork’s president Brian Rodriguez finds that “many graphic designers coming out of college have a strong background in print design, however they have a hard time making the transition into web designers.

Coming from a print design background does not necessarily mean you have to neglect basic print principles and styles — use the skills you know well to design for the web. Imitating print design on the web has become increasingly popular, especially among e-commerce, blogs, news and political websites.

Good exploration of print styles on the web

  • New York Times - designed to resemble the famed newspaper layout of the NY Times newspaper. The masthead is designed to resemble a typical newspaper and the modular layout dictates the way the content should read.
  • Book of Numbers – it looks like a book. It navigates like a book. Is it a book?
  • CSS Tinderbox – it looks like a Russian propaganda leaflet created in the 40′s with strong block type masthead and grungy/paper-like textures. Also, the fact that Lenin is on there is a dead give away.
  • Jason Santa Maria – his blog definitely lets the content dictate his layout. It reads more like a magazine than a website and the hierarchy is MUCH more apparent… He definitely takes it one step further.

1- Design your sites and images at 72dpi

Design your sites and images at 72 dpi, not 300 dpi. Your standard screen resolution is 72 ppi. If you bust a site out in 300 dpi you are packing more information into each pixel, meaning a MUCH longer loading time for the entire site.

2- Use RGB

Make certain to work in RGB color mode instead of CMYK. Print = CMYK; Computer Screens = RGB. There’s no spot and Pantone colors on the web.

3- Design in Photoshop

Design your sites in Photoshop. Photoshop is used as a tool to create and manipulate raster graphics. When designing in Photoshop you are designing for pixels not for a number of minute decimal increments as you would in Illustrator creating vectors.

4- Use a grid and check your width

Make sure your rules and your text are in pixels and by all means use a grid! Your content area when designing should be within the optimal range of 960px wide. Try not to go over 1000px.

Grid Resources:

5- Use web safe fonts

Know your core web fonts! Different computers can have different font sets installed. When designing a site keep in mind those fonts you chose may not be on the viewers computer.

Every Web designer should use Web safe fonts!  Using a font as a header or illustration style through image replacement is fine, but DO NOT use images for body copy. So how do you know what fonts to use?

Core Web Fonts (that will work on every computer):

  1. Andale Mono
  2. Arial
  3. Arial Black
  4. Comic Sans MS
  5. Courier New
  6. Georgia
  7. Impact
  8. Times New Roman
  9. Trebuchet MS
  10. Verdana

Other Font Families / Stacks:

  1. Lucida Grande & Lucida Sans Unicode
  2. Baskerville & Palatino Linotype

6- Never rasterize copy

Never rasterize your body copy in a website mock-up.

7- Organize. Organize. Organize.

Organize your layers by folders with proper headings. Also, a good thing to do if you are handing the site off to a developer is to have a folder (hidden) labeled “Notes” to give them notes and information about the design if they have any questions.

Also don’t ever flatten your layers. This way you can go back and edit it later if you or your client decides to make changes.

8- Design for the content and for your users.

Make the content the priority. The artwork should compliment the content and directs the visitor to it, but does not overwhelm the site. Effective web site design is dedicated to getting people the information they want in a simple way.

9- Know your shortcuts

Shortcuts save so much time. It is proven that by using shortcuts you can be more productive as a designer.

10- Save comps properly

When you save comps, ‘Save for Web’, and save jpgs. But, don’t forget to keep your original Photoshop (.psd) file. There is a lot of information in the file when not saved for web. So by ‘Saving for Web’ you are reducing anything over 72dpi, and clearing out all the unnecessary junk.

11- Stay informed and inspired

Absorb yourself with information: bookmark blogs, read, absorb. Joing online social networking sites. Get involved in the design community.

Web Design Resources:

  • http://alistapart.com/ – dedicated to design knowledge, with fantastic articles. Created by the godfather of web standards Jeffery Zeldman and Mr. CSS Eric Meyer
  • http://www.webdesignerwall.com/ – a useful site devoted to trends, tips and tutorials on the web. Literally a wall of design ideas.
  • http://www.webdesignerdepot.com/ – a relatively new site chock full of hints, tips and loads of freebies to help you with your venture into all things web.
  • http://www.designmeltdown.com/ -a mecca of cached screenshots of sites at your fingertips. Broken down into categories even. A great resource for design styles and themes.
  • http://psd.tutsplus.com/ – blog that was made to house and showcase some of the best Photoshop tutorials around. This site is awesome, because it easily explains, with screen shots, step by step processes of basic to advanced tutorials.

For more information visit the Gatorworks website for additional information covered at AAF by Brian Rodriguez, Alise Johnson and David Link. You can also download the presentation:  keynotepowerpoint.



Discussion and Comments

+ Add to the discussion
  1. Andi says:

    And again the DPI/PPI myth. You can design with 72 ppi, with 300 ppi or 100000 ppi. It doesnt matter. Believe it. Just ask google about the “72ppi myth” or read this:

    http://www.monarda.se/extra/ppi-test/ppitest_english.htm

    Greets
    Andi

  2. Liberation says:

    Great topic! I frequently fix websites designed by print designers. The biggest problems I see are text / content as graphics (SEO poison!) and the need to fill every inch of the screen with something, anything. White space is our friend!

  3. cssah says:

    thanks so much
    great article about web designer

  4. Preston Lee says:

    Loved the tips about alignment/sizing using grids and the no rasterized text rule.

    Most print designers turned web designers get frustrated because, due to their failure to learn proper sizing and grid-using, they can’t get things to align how they like.

    They also don’t understand the importance of SEO sometimes and how detrimental rasterized text can be.

    Good luck to all who are branching into the world of web design as of late. Excellent article! Thanks!

  5. Tim Ngwena says:

    Good post.
    Although I made the switch the other way round, that is web to print, this is a great check-list to refer to.

  6. Tim Ngwena says:

    Great post.
    Although I made the switch the other way round, that is web to print, this is a great check-list to refer to.

    Is there a follow up on its way ?

  7. I never understood why Photoshop should be used for interface design. Isn’t Fireworks better at this? Why not work directly with HTML/CSS?

    Also, I think any experienced print designer would work in Photoshop in RVB mode (and convert in CMYK at the end of the process).

    Of course this is just my personal point of view :)

  8. Brian says:

    Andi,
    You are correct in the sense that 2 images set at the the different resolutions with the same size regarding width and height will be the same size visually but in regards to file size, the 300dpi image will take much longer to load.

    Jeremy,
    Photoshop would work equally as well as Fireworks. From a personal standpoint Photoshop gives you more flexibility when actually designing where Fireworks seems to lack.
    Also converting to CMYK at the end of the process can cause color “loss” or misleading colors when designing.

  9. Brian says:

    Tim,
    A follow up would be nice wouldn’t it? ;) I’ll see what I can do for you. Thanks for the comment!

  10. Brian says:

    Liberation, cssah and Preston,
    I appreciate the comments. Good to see some new faces on TDC. :) I look forward to hearing more from all of you.

  11. Andy Owen says:

    Some of those things are true, but I design in Photoshop using Vector tools, and then just rasterize what I need to when I’m done. Saves some quality from my perspective.

    Though the RGB & 72dpi points were good ones that I need to be better about.

    Thanks for the great post!

  12. Brian says:

    Andy,
    Sure that definitely works. And I’m glad you enjoyed the post. You can thank @alisejohnson and the Gatorworks crew for the great presentation :) Thanks for the comment as well.

  13. @Brian: I see. (about Photoshop/Fireworks).
    Yes, it is true that RGB (and not “RVB” of course, sorry for the misspelling) => CMYK conversion can cause color problems, but in Photoshop a lot of functions become unavailable when in CMYK mode. The “loss” or misleading color can be partially predicted by working in RGB mode but with CMYK preview (I don’t know the function’s name in English, sorry, French here…). Anyway, I assume we can find hundreds of different points of view / habits / situations about colorimetry ;)

    And I’m sorry for the digression, I forgot to mention I like this post, it helps to reduce the gap between print and screen.

  14. Brent Friar says:

    @Brian – Andi is right, as far as web graphics are concerned, 2 images 300×400 will be the exact same file size regardless of their pixels per inch resolution. The only thing that PPI affects is the size that the image will print. The PPI you design in is totally irrelevant unless you plan to print the graphics.

    I would replace #1 with a much more important setting. Always us PX for font sizes instead of PT. When setting font sizes in CSS it is either done in ems (preferred) or px. When you design in pts, the sizes do not convert to even numbers so the text is never quite the size that the designer intended.

    Other than that detail, great article. I will be sending this to some of my design partners.

  15. SnakeJake says:

    Wow, this was useless. And here I was hoping to actually get some good tips in stead of lousy stuff that everybody already knows.

    Use RGB! O RLY?

  16. Thanks for the article. I’ve been meaning to write a response for a few days but have been a bit snowed under.

    I think overall it’s a helpful article but there are a few points that are either misleading or only partly true.

    1. There should really be no file size difference besides the header information within the file, so I did this simple test for readers to see the results.
    http://cobaltcow.com/files/misc/dpitest.html
    The 300dpi file was indeed slightly higher, but as noted by some of the other comments, browsers measure in pixels not inches, so the display size will not be affected.
    I would recommend print designers get familiar with the ‘Save for Web’ tool (as per tip 10) in Photoshop, it not only converts to 72dpi but also allows you to adjust your compression to reduce the file size. To quickly get an image from a full comp, select it with your marquee tool, Edit / Copy Merged / New Doc (will default to the right size) / Paste / Save for Web.

    2. I’m guessing you know this already but CMYK does not equal pantone, they’re different. But the point is still valid, neither work with browsers.
    Note: If converting any file from CMYK to RGB, always change to LAB in between because it carries across the color information a lot better.

    3. Although I primarily use Photoshop, any vector logos or high resolution images will be better if you open in Illustrator, copy and paste into Photoshop as a smart object. This will allow you to keep the vector file intact and not lose any quality with resizing high res photos.
    Note: It will make your PSD file very large

    4. Be careful when setting guide lines in photoshop because by default they don’t snap to pixels. A quick way of setting your guide lines is to make a marquee selection at the right size then your guide will snap to the edge (perfectly on the pixel). Besides the width, I really don’t see much point in using grids or guides unless you need help lining things up.

    5. This is a good guide for using fonts and what the Mac/PC version is.
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    6. I’m assuming you’re referring to making text an graphic as opposed to using actual HTML text? Although I’d agree here, there are times when it’s useful for small sections and headings. What’s probably important to also note is to get accurate design comps, turn off text aliasing in the body copy sections. It won’t look as pretty, but will be closer to the finished product.

    7. This is the best tip of the lot. Organizing layers and folders will save you a lot of heartache for any use of Photoshop. Another thing that may help is to get yourself familiar with Layer Comps. You can save snapshots with layers turned on and off to show variations.

    8, 9 & 10. All good points, especially learning your shortcuts. Photoshop is good at helping you learn because most menu commands have it written right beside it and if you hover over a tool it will tell you the key.

    Not to hump the post, but I noted some issues with print designers in my blog post here. http://cobaltcow.blogspot.com/2009/03/3-things-that-make-your-website-pop.html

    Also happy to hear feedback on my thoughts :)
    Cheers
    Nathan

  17. Khoality says:

    This article should not have been an online blog. It should have been printed into a little brochure and handed out to all graphic design students on graduation day.

  18. mkko says:

    3- Design in Photoshop

    Photoshop is an industry standard in any media, but i recommend to learn Adobe Fireworks for web graphics. Afterall, Fireworks is only graphic software that is made purely for web oriented graphics.

  19. mkko, You are my friend :)

  20. Serj says:

    great article. really enjoyed it! keep on the good work

  21. paul her says:

    very nice article man. I started out as a print designer and later on wen to design for the web. looking back, most of my work from my first year looks alot like print. The more you explore and know, the better web designer you’ll become …

    paul

  22. Thanks so much for posting our presentation! I hope your blog entry has helped some designers out there!

  23. Jamal Ahmad says:

    very informative!

  24. [...] Transitioning from a Print Designer to Web Designer [...]

  25. Transitioning from a Print Designer to Web Designer | The Design Cubicle…

    The following article is an overview of a keynote presentation given by Gatorworks’ during the 2009 AAF Student Conference discussing “Making the Transition from Print to Web”. Gatorwork’s president Brian Rodriguez finds that “many graphic de…

  26. We are a firm based in India that provides web designing, web programming, Data entry, web

    hosting and domain names. That doesn’t matter what the website is, we have expert resources

    all of the following categories; Photoshop, Flash, HTML, PHP, dot Net, CSS, JavaScript, My SQL,

    Shopping Carts and more. If you are looking to have a website redesigned, maintained or

    designed from scratch, we can provide you. In this period of recession we can understand the

    budget of the clients and our rates are affordable in this recession period.

    +91 9726888111

  27. Lena Cardell says:

    I know this article is trying to be encouraging and all…but a taste of realism is probably in order.

    #1 should probably be:
    Don’t assume that because you have a background in print design that you are adequately prepared to design for the web without a LOT of research & practice.

    The two are very entirely different mediums, and clients & employers suffer greatly when a print designer oversells their skill because they’ve opened dreamweaver once or twice. The few things that carry over from one to the other are concept, communication, hierarchy, aesthetic. Words you’ve heard in one context (like grid) mean something quite different on the web v. print.

    As a print designer you’re closest to being qualified as a “visual designer” in the web world. This means you don’t know anything yet about information architecture, interaction design or user experience, but can probably make stuff attractive when given guidelines (wireframes) to work off. Most people with the title “web designer” (used mainly at smaller firms and companies) can also do some front-end development if necessary.

    The learning curve is steep, but it’s totally worth it :)

    Regarding typography:
    Here’s a great resource that lets you play around with your options in web typography and might help make the limitations a lot more clear: http://www.typetester.org/

  28. [...] Transitioning from a Print to a Web Designer [...]

  29. [...] started off designing as a print designer and later venturing off into the world of web design I can honestly say that I have always been a print designer (and logo designer) at heart – less [...]

  30. Mona Johns says:

    Lena,
    Thank you so much for keeping it real! I’m a print designer transitioning to the web and I knew all the stuff above about photoshop but that is just scratching the surface. I’m trying to find my place and really struggling because of articles like this. I’m careful not to oversell my skills precisely because I don’t know about information architecture, interaction design, SEO or user experience. I know what I like when I see it but have no clue how to make it interactive.

    Here is how I’m breaking it down. The designer does there job but on the web, the “Lena’s” are like your pressman and bindery people behind the scenes making sure each impression by the viewer is consistent.

    Lena, you are right, the learning curve is steep, I need a Lena in my backpocket. Designing a site purely in photoshop is not keeping it real, I need to know what goes on under the hood and what toolbox to use. I think this article is misleading to print designers, it just ain’t that easy.

  31. mabed says:

    I think designers should use Photoshop sparingly! This is a much better route.
    http://37signals.com/svn/posts/1061-why-we-skip-photoshop

  32. [...] moving towards online media, in addition to blogs, this also results in websites maintaining and taking influences from their printed form — relying heavily on layout and [...]

  33. Dave Ramsell says:

    Fireworks and photoshop accomplish nearly the same thing when it comes to web design. In Print, Photoshop is king, it is the industry standard and most print designers work in RGB mode with “show in CMYK” turned on so we can access all the inner workings it has to offer.
    As far as a print designer migrating to web design, you already have great visual creation skills, should have great typographical skills and some skills needed to design for the web (PS).
    Learning to “code” like a computer science major is simply not needed, although you need to know Dreamweaver (very well), the basics of html, PSP, and the like so you can speak the same language with your coders.
    Companies hiring web designers are looking for just that, NOT computer science majors.

  34. I am a recent graduate that this article is for, and let me say this article is past-date. The first 4 steps are common sense and any smart designer can easily figure those out. The 5th step is no longer true with startups like TypeKit. Number 6, – duh.

    Number 7 is often overlooked and a good recommendation.

    Number 8, is true for any design, not just web. Number 9 – for real, come-on, that is not advice, that is true for any career that uses software often.

    Number 10, come-on, common sense for any position that uses software alot. Sorry, but article is largely amateur and so sad is it so high on the google list for “from print to web design”.

  35. ccs says:

    I really don’t think it matters what program you use to design for the web. I tend to do most in production in Fireworks and a load of straight out design, specifically because it’s so easy to deal with both raster and vector objects as well as the use of symbols, one-click selection of any object on the canvas (whether vector or raster) and export of multiple button states in one step. These are very powerful production features in which Fireworks excels over Photoshop. Photoshop is clearly deeper for image creation/artistic expression/retouching…it is a digital art universe all its own. But it lacks in some of the most common web production tasks used on a daily basis. Photoshops handling of vector objects requires considerably more steps than Fireworks.

    I’m not sure why you’d forgo vector graphic production methods (Illustrator). Vector graphics are resolution independent. Vector source files are the flexible between web and print, as they can be resized to any dims with zero degradation. Vectors are your friend.

    I use Illustrator for certain graphic elements’ creation then bring them into Fireworks. I also use Photoshop for certain graphic elements’ creation, then bring them into Fireworks.

    Fireworks is a real gem of an application. It’s too bad that Adobe is minimizing it’s use by stating it’s good for “website prototyping” rather than web design.

    Careful with the interchangeable use of DPI and PPI. PPI is all that matters for web. You’ll attract the wrath of the rabid digital semantics police. ;^)

  36. Adrian Scott says:

    Some of those things are true, but I design in Photoshop using Vector tools, and then just rasterize what I need to when I’m done. Saves some quality from my perspective.

  37. ccs says:

    The most important thing (in my opinion) in making a transition from print into web is not learning code. It is understanding two key things: 1) How websites are used by visitors (you’re one, so you already have insight there). 2) The basic concepts of how websites are structured (layout code and dynamic content delivery).

    No.1 is being able to think like the target audience of a particular website…just like you might do for a print piece. That should be easy for you.

    No.2 is getting familiar with how functional, data-driven websites work. Not the actual scripting and such, but being clear enough on these concepts so that you know how you’ll design not only the overt visual aspects of a site, but how you’ll layout, style and graphically enhance dynamic content that might change. It’s a key diff from print, where you have a finite space. Dynamic web content might change in volume or type of content on a daily basis. A space in a website might grow and contract as different content cycles through it. This is key. Many times you can set the rules as the designer, other times content will set the rules and you have to accommodate it in its various forms.

    Otherwise, you just need to get familiar with the structure of web presentation. With XHTML and CSS, web layout is becoming much more like layering graphics and text in InDesign…meaning you throw down boxes that stuff goes into and you can style it a million different ways. You don’t necessarily need to write an ounce of code. But, understanding how it works so you can design within those parameters is essential and being able to write basic XHTML/CSS is a huge plus. It isn’t rocket science. It’s just layout control. You can leave all the fancy scripting and database stuff to the dev guys and make sure they make it look the way it should.

    My opinion is that you should find a local dev person to collaborate with that is willing to help you ramp up your basic knowledge. You’ll get nothing of that sort by outsourcing to people you cannot even site down with to truly discuss a project. The right designer/developer team can do wonderful things when they understand the logic behind each other’s tasks and goals. So, look for a dev person that has experience working with designers to accomplish both visual and functional goals.

  38. Preekly says:

    Some more tips would be to learn how to hand code HTML and CSS. You don’t want to rely on software or programs that write the code for you. Often times that add unnecessary markup that is convoluted and just plain ugly.

Brian Hoff
About Brian Hoff: Designer, Writer and Speaker

I’m a graphic designer living in Brooklyn, New York who loves creating compelling and useful websites and memorable interactions across the web. When I’m not designing I can be found writing, speaking and occasionally part-time teaching at colleges — all on the subject of design. I started this blog to share my passion and experiences with designers and clients. I'm most active on Twitter; say hello:


POWERED by FUSION