- Read these books, keep them on your desk.
Head First HTML with CSS & XHTML
Don’t skim through this book, read it… cover to cover, and do every tutorial one at a time. The copy is terribly cheesy and the tutorials don’t have you building an entire site, but if you do each one in small steps you will find yourself pretty far very fast.
Designing for Interaction
This book is a great introduction to User Experience, Interaction design and Information Architecture. It clearly articulates the concepts in a way that will have you applying.
Designing with Web Standards
This book will sum it all up and bring it all together for you. Its “why” all the stuff you are about to do is so important.
- Read sites and blogs about web design.
Bookmark stuff that you do not understand but hope to eventually understand. Some that I reference frequently are:
A List Apart
456 Berea Street
- Attend Events to learn & make Friends. Lots.
There are tons of web related events but the ones I have found most helpful have been Refresh DC ( or Refresh in your area), Barcamp, and SXSW. Make friends and add them on Twitter and Facebook, pay attention to what they are talking about and why. You might even find that your new web friends are actually super cool real-life friends, and have other things in common with you like music, 30 Rock, and typography.
- Design & build something. Start small.
Build a one or two page site, for yourself, for your dog, for your dad. Try not to use Dreamweaver’s design view, or code hints. But you will. Everyone does. I did. After I did, I realized why I shouldn’t have, so maybe that is a step in the process. But …don’t. I really mean it. Why? Because if you don’t need to depend on Dreamweaver you will become a better designer faster. BB edit and Textmate (my favorite) are all much better alternatives. I realize lines of code may be very intimidating for some designers, and the last thing I want to do is scare you away from building the site, so… I don’t care what you use, just build something.
- Ask your new friends to look at what you built, and take notes.
They might not say nice things. They may actually tell you that they got sick of waiting for your images to load or got frustrated over your navigation (not that that is what anyone told me). Thats fine, thats actually good… because it is better to hear it from your friend who can explain to you how to fix it than never hear it from future users who get frustrated and click away from sites you design.
- Download the web developers toolbar & Firebug
When you see a site you like, peep the CSS & HTML. At first you may not understand what you are looking at, but get in the habit of just taking a look. As you continue through learning HTML and CSS you will begin to see good versus bad markup. When your site is doing something funky, use firebug to isolate the problem and work it out. Its just a good habit to get into looking at markup.
- Google everything.
Dave Shea said that in a SXSW CSS panel a few years ago and I don’t know why I needed to hear something so obvious from someone on a stage, but its a pretty common sense thing that designers don’t always think to do. If you are having a problem with something, someone else probably already had the same problem, and chances are they blogged about it. Sometimes it is hard to even know what to Google, thats when you hit up one of your web friends on AIM and ask them what you should google, then you google it. Bookmark it, tag it, and refer back to it.
- Build what you built again, and build it better.
This step is the key. If you are satisfied with what you built the first time around web design is not for you. The learning process happens when you rinse and repeat, every time you design and build a site you get better. Take what you learned from the books, from sites from google, from your friends, from things you did wrong but fixed in firebug, and build the exact same site again. This may sound like a drag but it is the most necessary piece of the puzzle.
- Become passionate about the Web.
It takes a LOT of time to transition from print to web, you can’t just do it because you feel like you begrudgingly HAVE to… If you are a passionate print designer its not hard to focus that same passion to the web. If you can design for print you can design for the web, but like anything, it takes work to get there. There is no button to push that will convert your InDesign document to a website, there is no magic pill you can take to make you wake up and know HTML. Just like it takes a lot of work to build a print design career it takes a lot of work to make the transition to web, you have to be motivated to do it. For me it took a change in lifestyle, that may not be the case for everyone but it was the case for me. Just depends on how good you are at juggling work & life.
This post was written in response to the overwhelming questions from the design community on how to transition from print to web that came up at a recent ADCMW event. I am not claiming to be the mac-daddy badass of making the transition, but this is just my advice coming from someone who went to school for print and made the transition to web without any additional schooling or classes. Any suggestions or additions are welcomed in the comments. I also have a whole host of links in my resources section.