Moving from print to web

Moving from print to web

For most designers, making the transition from print design to web design can be a frustrating process. At first it seems easy. You’re a visual designer, so design is design regardless of medium…right?! Undaunted, you jump right in and the next thing you know you are confronted with the most dizzying array of acronyms this side of the military. Suddenly you find yourself surrounded by terms like CSS, XHTML, PHP, AJAX, XSLT and countless other shorthand terms for technologies you never wanted to learn. It can be more than a little intimidating.

I consider myself fortunate to have made the transition in the mid 90’s, when the web had fewer moving parts than it does now. There was less to learn, and consequently I was allowed to grow along with the industry. For a print designer interested in adding web design to his or her skill set today, there is a much steeper hill to climb. I’ve heard more than one web designer say to their print design friends, “hire somebody, just not me, I’m really busy,” when the discussion turns to what they need to do to start designing web pages. I’ve often been asked that question myself, and my Dreamweaver and CSS courses are filled with print designers who are making that leap and want a clearer path from point A to point B.

Recently this question was put to me during an interview with Deke McClelland during his Martini Hour show, and during my discussion with Deke I decided to write a more thought-out response here, detailing what I’ve learned over the years about web design and how a new designer might go about making the transition. So here goes it (and Deke, here’s that more detailed answer…), seven tips from me to you on how to successfully design for both the print and the web.

Learn your craft

Are any of your friends web developers, stock brokers, or fast food employees? Imagine them purchasing a copy of InDesign and then taking on a Fortune 500 company’s annual report as their first project. Sound funny? Well, I’ve seen plenty of print designers do just that. They’ll snag a copy of Dreamweaver and fumble about, cursing the fact that it doesn’t work like InDesign as they try to put together a web site for their largest in-house client. Web design is not a subset of print design; it is not subordinate to it nor is it something you can pick up over a weekend. Web design is a discipline that requires your full attention. Learn your craft. As distasteful as it may seem at first, at a minimum you need to be comfortable with both XHTML and CSS. Technology is a tool; it allows us to get the stuff we see in our head to the printed page and onto the screen. Not knowing your tool means not being able to fully realize your vision.

Decide what you want to focus on

Do you want to build kick-ass dynamically driven ecommerce sites? Or perhaps you want to create immersive interactive experiences? Maybe you’re more interested in clean, well-structured front end design? Or maybe you want to build easy to maintain sites through the use of content management software such as joomla or drupal. Regardless, one of the best pieces of advice I can give is to choose a direction and then dedicate yourself to mastering that aspect of web design. Becoming known for a specific area of web design or development is not a bad thing, it gives you a niche that you can carve out for yourself and serve as the foundation for your work. You’ll find that you can give clients more consistent, professional results, and that you’ll become a proficient web designer faster. It also then allows you to move on to other aspects of web design or development, and that helps me make my next point:

Eat the elephant slowly

The web is a big place…and there’s a lot going on. PHP, .NET, or ColdFusion? WordPress, Movable Type, or Expression Engine? Joomla or Drupal? Flash or AJAX? CSS or… well, OK, you HAVE to learn CSS, but my point is there is so much to learn that it can often seem a bit overwhelming. Sure the cool kids seem to know everything (damn you Jason Santa Maria!), but in reality if you talk to them there is a laundry list of stuff they haven’t gotten around to learning yet. Start with your core skills, and move outward from there. Once you get a handle on one area of web design, you’ll find that projects just naturally move you into another. After a few years go by, you’ll be amazed at how far you’ve come. The trick is to not get frustrated and to understand one very important rule… you will fail, and you will break stuff. That’s how we learn.

Online brand is about experience

If I have one criticism to level at pure print designers when they create online content it’s this one. The design aesthetic that allows you to convey brand through print doesn’t always translate well to web. You can’t just take your print campaign, slap some XHTML under the hood and call it a day. Web design, more so than print design, is about experience. Check out Nike.com or Apple.com, those are just two of the companies that really get how brand is conveyed over the web. Not only do the graphics, text, and layout reflect brand; how the interface works, how items load, and how you interact with the site builds brand as well. Instead of being restrictive, as some designers mistakenly bemoan, web design allows you to create immersive brand experiences that print design cannot match.

Content is king, embrace standards-based design

So…who is accessing your content today? Is it a suburban Mom, tooling around in Internet Explorer over a broadband connection, a working-class office employee in Mumbai surfing your content over his mobile connection, or is it an individual with a vision disorder accessing your page through a screen reader? Depending upon your site, it might be all of the above. Therefore, while design is incredibly important, on the web it doesn’t top content. Making sure that the widest array of devices and clients can access your content should be central to your design decisions. Embracing web standards –properly structured XHTML and CSS– can ensure that your content travels well across the multiple platforms available today and into the future. Don’t take my word for it, let Jeffery Zeldman explain it to you, he does a better job of it than I’ll ever do anyway…

Quit being a control freak

Hey, can I make my page look exactly the same on Internet Explorer, Safari, Opera, Firefox, and Chrome?! Can I make sure that regardless of platform or device my headlines work the same with my paragraphs? Is it possible to create a pixel perfect design and display it across multiple systems in a standards-compliant manner?

No. Get over it.

Allow your designs the flexibility to move and sway in the wind that is the multiple device and browser universe of the web. You’ll find you sleep better at night. Trust me.

Make friends…good friends, with a developer

Look, no matter how much you focus on web design, there’s always going to be stuff that’s beyond your current reach. I will never build an ecommerce shopping cart. There, I’ve said it. It’s not that I’m not capable of it, I just don’t have the time or energy necessary to master all of the techniques needed to pull it off successfully. Hell, I’d get lost just trying to master the security aspect of it. Thankfully, the web development world is filled with people who find this sort of stuff fascinating. By cultivating relationships with those outside of your area of expertise you’ll be able to increase your capabilities by a factor of 10. Just as someone is willing to pay your for your design sensibilities and your ability to communicate information, you should be willing to pay someone who has the capability to make all that stuff actually function. Of course, the relationship works both ways, most developers I know couldn’t design an exit sign, much less a front end to that really, really cool app they’re developing. The web’s a big ecosystem and you’ll be much more effective as part of a larger team than trying to do everything on your own.

So that’s it really. It’s simple when you boil it down to a single statement: “There is no ‘make webpage’ button in InDesign, nor should there be one. Quit pouting and go learn how to be a web designer.” Where do you start? Well, there are some great books on learning web design, you could always take a class, and there are some excellent online tutorials. In the end, nothing beats rolling up your sleeves and just getting to work.

7 Responses to “Moving from print to web”

  1. blue92 says:

    Thank you for the great titles on Lynda.com. I just recently viewed the title on Web Design Fundamentals, it was simply EXCELLENT! I come from a print design background, and this title tremendously helped me understand the structure of web design and what to learn first.
    There’s so much information about web design out there that for new web designers is so overwhelming and confusing.

    Is it better to design sites using tables or divs? Trying to start my first site and not really sure what would be best?

    Thank you

  2. jameswill says:

    Thanks for reading blue, and I’m glad you liked the title, it was a fun one to record!

    Use divs for layout!! Remember that HTML controls structure and CSS controls presentation. By using div tags for sectioning content you can present it and control its layout any way you want.

    Check out the chapters on layout in my Dreamweaver CSS Essential titles.

    Thanks again!

  3. blue92 says:

    Thank you very much!

  4. blue92 says:

    Hello James,

    I’ve done all my website training and I’m ready to create my first website for a friend, but I want to add a CMS so he can update stuff. I’m planning on creating it as a static page using Dreamweaver, no sure if I can if I can integrate a CMS and a blog to it, I heard of WordPress. Can this be done? Confused!!

    Is there any online training you can recommend on this subject on lynda.com.

    Thank you

  5. Mahmoud says:

    What About Using @font-face tech With Arabic language Fonts Mr.James ????

    And sorry for the comment if I put it in the wrong place , i really wanna know how to ????????????

    please reply me

  6. jameswill says:

    Mahmoud, forgive me, but I’m not too familiar with Arabic fonts. I would guess that as long as the correct character encoding is being used, that an Arabic font would work just fine.

    Check out http://www.fontsquirrel.com, there you can convert fonts or just check them to see if they have additional info.

    Good luck!

  7. cf66 says:

    Dear James,

    I L-O-V-E your CSS tutorials on Lynda.com!!
    I am a graphic designer trying to make my way back to web (which I used to do back in the mid 90s… oy!!) after 15 years doing motion graphics, and I have A LOT to catch up with.

    I’ve done your CSS Core Concepts course, I’m now in to the next one (CSS Page Layouts) and I’ve also done WordPress courses.

    What I want your opinion on is the following:
    What would you recommend as the way to go: WordPress (with a framework like PageLines or another or none?), Dreamweaver or something else?
    It seems writing the CSS/HTML from scratch (like you do in your Lynda.com courses) gives you more design control that working on WordPress?? although of course WordPress (or another CMS??) gives functionality I could never dream of putting together myself.
    Anyway, upon my exploration of WordPress I came across the PageLines framework, which is yet another thing in itself to learn… oy!
    I don’t know what Dreamweaver is up to these days, so I wonder what route makes the most sense.

    I want to be able to work on small to medium-scope sites and don’t understand which option would allow me to design with ease AND have somewhat complex functionality and ease of maintenance.

    Please enlighten me!!!
    Thank you so much in advance…

    Carina

Leave a Reply

You must be logged in to post a comment.