I’ve been thinking a lot lately about the realities of print designers learning web design and the fact that there is no easy way to make the leap. More than 10 years ago, I worked at The Washington Post and as the resident Macintosh expert, I was charged with the task of teaching the photographers how to use their new iBooks to edit photos when they went digital. There were some people who were early-adapters and jumped in and embraced the technology, the ease and the excitement of learning something new.
But there were a few on staff who avoided going digital like it was the bubonic plague. Those people were the Pulitzer-prize winners. I can totally understand not wanting to change when you are at the top of your game. What happens when you are number one and the tools you currently use are taken away from you and replaced by something different. Will you still be at the top?
The last two people I trained were the ones who had the most to lose. And I had to hold their hands and gently pull them into the future. It was a transition, that’s for sure. But, they eventually adapted and joined in the excitement of discovering new ways in which to tell visual stories. One of those people now posts the most amazing images in Instagram and on Facebook, practically every day. The other consistently posts audio slideshows and video projects that blow everybody else out of the water.
My point being, that a similar transition is happening or is starting to happen now in the print design world. People who code or develop code are the ones ‘controlling’ web design right now. They may have coding down pat, but design is still rough. People who have been designing for years are the real experts. How do you transition into web design when the language seems like Greek? It’s a scary, daunting feeling when you are starting out. Especially, if you’ve won awards doing print design. When I first started learning modern web design, it was a little like trying to design a page with your feet. It felt wrong. It felt awkward. I didn’t think I could ever master the steps. But, much like modern print design, I figured it out.
I’ve talked to many people who are just thinking about taking a class or have already taken one and they are frustrated. The people teaching web design are not great at explaining it. I think that’s mostly because they are younger and have no print design experience. I sat in a seminar recently where someone asked what ‘2em’ meant in the CSS code. The young guy teaching the course went into a long lecture explaining typography and the equivalent of the letter M in relation to the history of typography. It struck me that all he had to say was, ‘Oh, the em code is the equivalent of an m-space and the 2 means 2x the m-space of that font.’ Anyone who had been a print designer for years would immediately understand.
Print designers only need a translator. They don’t need someone who has been coding since they were 15 to teach them. They need someone who has transitioned from print to web to show them the ropes. To that end, I have a few suggestions. In this post, I’m going to recommend a couple of books (and web resources) that helped me and I’m going to suggest a couple of places to start. I’m hoping that it will help you feel comfortable (and less frustrated) with the world of web design. And I’ll explain some of the terms that I have learned along the way.
Books:
1. {speaking in styles} by Jason Cranford Teague: This is one of the best resources I have found and as a designer, it made perfect sense to me. It was pricey when I first found it new, but it was worth it for the simplicity of explaining things in a way that I understood easily. Jason has numerous web resources online as well.
2. New Perspectives on HTML, CSS and Dynamic HTML by Patrick Carey: If you like doing exercises to work your way through a process, then this is a good resource. It is a textbook and goes through different explanations in each chapter and at the end of the chapters there are a series of exercises that you can go through that focus on what you learned in that chapter. There are pictures of the finished product, so you just refer back to the chapter and write the code from scratch to try to make it look like the picture. You need the base exercise files. E-mail me and I’ll tell you how to get them or I can send them to you. The book is expensive (really, really), but there are places online where you can rent it and you can get it slightly cheaper in some places. (Always go with the most recent version of the book because the more recent versions will have the most updated code)
3. The Zen of CSS Design: This book also keeps it simple, but it’s not as intuitive as the {speaking in styles} book.
4. Responsive Design Workflow: If you’re just starting out, this is also a good book and focuses on responsive design obviously, but it gives a basic overview as well.
5. Visual Quick Start Series: I’ve used this series for years and it always teaches in a basic step-by-step way. That’s one reason why I like it. I’d start at the top of the list, but the lower books in the list are cheaper if you are on a budget.
5. CSS Zen Garden: (Website) This site focuses on the concept of clean code and if you want to focus completely on the basics of css and html and how they work together, this is a cool site to understand the way it works.
Applications and techniques to master:
- Photoshop
- HTML5 and CSS3
- WordPress
- Responsive Design
- jquery and media queries
- PHP and Ruby
There is so much more to discuss, but what I want to say to designers trying to prepare for the future is take some steps, any steps. Not trying to keep up and being afraid of it is not going to do you any favors. And you’ll be even farther behind.
I have another post that addresses resources and I update it from time to time as I find things. So feel free to check back from time to time.
