Educate a print designer about web design.
March 15, 2010 12:58 PM Subscribe
Recommend a crash self-education course in becoming a web designer for a graphic designer with 15 years of print experience. Books, websites, etc. Emphasis on correct/efficient process for development + industry standards (i know I should know CSS backwards and forwards...what else?) and general tips all appreciated!
The company I work for is very small and is primarily a print-based B2B marketing company and its looking to (finally) dive feet first into website creation. So far we've only been wading in now and then.
About me...I have strong design chops and had self taught hand-coded HTML and some light javascripting way back in the old days. Nowadays I can muddle through putting something together with Dreamweaver and modifying code directly, but I don't have a good handle on where to start and how to go easily from Concept to Finished Product.
The company I work for is very small and is primarily a print-based B2B marketing company and its looking to (finally) dive feet first into website creation. So far we've only been wading in now and then.
About me...I have strong design chops and had self taught hand-coded HTML and some light javascripting way back in the old days. Nowadays I can muddle through putting something together with Dreamweaver and modifying code directly, but I don't have a good handle on where to start and how to go easily from Concept to Finished Product.
In larger shops, the process of building sites is often divided between designer and implementer; one person makes a pretty illustrator or photoshop file, then it's up to the other to turn it into HTML and CSS. In your case, it sounds like you'll be "the web guy", so you'll need to wear both hats. I've been "the web guy" for most of the 13 years I've been doing web stuff, and I wouldn't have it any other way; to me the code is as much a part of the design as the colors and shapes.
I would say: dust off your hand-coding skills by getting up to speed with XHTML, which you can do as you get acquainted with CSS. Fire up your favorite text editor and get comfortable doing all this stuff by hand - even if you go back to a WYSIWYG tool like Dreamweaver eventually, Learning the capabilities and limitations of your medium (XHTML/CSS in this case) will directly inform how you design for it.
If the sites you plan to build are going to have more than a few pages, you'll probably want to get acquainted with a Content Management System (CMS) like Joomla or Wordpress - but before you get into creating templates for systems like that, you'll definitely want a solid foundation in plain old XHTML/CSS.
Recommended reading: definitely A List Apart.
Oh, and if you're not already, think about using a version control system like Subversion to manage your work as you go. Version control is usually associated with software development, but it's just as helpful for tracking changes to your HTML files and graphic source files - it's the difference between having 27 pages named index.html, index-backup.html, index-fixed.html, index3.html, et cetera or just committing incremental changes to a single index.html file, and then being able to review your revision history, see what changed when, roll back to earlier versions, etc.
posted by usonian at 1:50 PM on March 15, 2010 [1 favorite]
I would say: dust off your hand-coding skills by getting up to speed with XHTML, which you can do as you get acquainted with CSS. Fire up your favorite text editor and get comfortable doing all this stuff by hand - even if you go back to a WYSIWYG tool like Dreamweaver eventually, Learning the capabilities and limitations of your medium (XHTML/CSS in this case) will directly inform how you design for it.
If the sites you plan to build are going to have more than a few pages, you'll probably want to get acquainted with a Content Management System (CMS) like Joomla or Wordpress - but before you get into creating templates for systems like that, you'll definitely want a solid foundation in plain old XHTML/CSS.
Recommended reading: definitely A List Apart.
Oh, and if you're not already, think about using a version control system like Subversion to manage your work as you go. Version control is usually associated with software development, but it's just as helpful for tracking changes to your HTML files and graphic source files - it's the difference between having 27 pages named index.html, index-backup.html, index-fixed.html, index3.html, et cetera or just committing incremental changes to a single index.html file, and then being able to review your revision history, see what changed when, roll back to earlier versions, etc.
posted by usonian at 1:50 PM on March 15, 2010 [1 favorite]
Best answer: Since you've already go experience in graphic design, I won't include books on designing grid systems, and typography (though I think it's pretty important to freshen up, I suggest Jason Santa Maria's list of recommended reading). Instead, my list will be on web design, development, and project management (specifically for web). As a note, I approach web design as a user experience developer. I care less about building blogs and plain websites and more about web interfaces, experiences, and applications.
Books:
posted by thebestsophist at 2:03 PM on March 15, 2010 [6 favorites]
Books:
- Designing with Web Standards, 3rd Edition, Jeffrey Zeldman
- Designing for the Web, Mark Boulton (This book is available as PDF, and currently also available free to read online.)
- The Zen of CSS Design Dave Shea (A little dated, but still powerfully good).
- A Project Guide to UX Design, Russ Unger and Carolyn Chandler.
- Communicating Design, Dan M Brown
posted by thebestsophist at 2:03 PM on March 15, 2010 [6 favorites]
Best answer: I am the web developer for a graphic designer who's been doing graphic design for 25 years.
I would say that you first need to give yourself time. Throw the "crash course" talk out the window.
Given your Dreamweaver experience, I'd recommend Build Your Website the Right Way as a good start with your Dreamweaver de-programming. The book is very good at recommending other books (albeit by the same publisher) for continued learning. My students benefited much by this book.
Websites: A List Apart -- Go through their archives and read up on topics you're interested in.
You should immediately sign up for web hosting and get your own personal website going if you haven't already. Then, when that's done, go to your web host's control panel and install a few of their "quick install" software packages like Joomla or Wordpress. Then dive into those to learn about how a CMS works and what it can do for your business.
This personal web hosting account has the side benefit of "Oh shoot what if this kills my company's website" and then you can try it out on your own site and see what happens. :-)
CSS: One good way for designers to start is to head over to Open Source Web Design, grab a template, open it, look in the "images" folder, and see what you can do just by modifying the images. That will naturally lead you to the CSS file(s) for the template, and you can start working out bit-by-bit what everything does.
Later on you'll probably want to Google "Firefox web developer extensions" and install a bunch of those, like Firebug and PixelPerfect and YSlow. (I put PixelPerfect in there because you are a Graphic Designer and you are going to really want to make sure your web work turns out the way you thought it should when you comped it up in Photoshop/Illustrator).
Don't listen to too much talk about procedure at this point. I worked on a 12-person web team at one point and learned more about procedure than I'll ever need to know.
With that said:
Document everything you learn that took you more than 5 minutes of Googling to learn.
Leave yourself comments in your HTML and CSS files so you know why you did things.
Don't be afraid to peek at others' HTML and CSS.
Take every shortcut you can when it concerns your business deadlines (hire web designers, buy templates, whatever it takes).
Be careful about taking shortcuts when it concerns your personal education/development.
You are going to want to start learning something like a scripting language like Automator on the Mac or Bash...one of the most annoying web designerly-things is being sent a folder full of hundreds of files and realizing you need to rename every one of them. Or that you need to open every one of them, make a change, and save them. Or that you need to move every one of them into a specific folder based on their filename.
You have a huge head start on many web designers simply because of your design experience. But don't underestimate the time you'll need to build up your experience.
I'm happy to assist with your development as a web designer if you want to memail me with non-urgent questions. :-)
posted by circular at 2:06 PM on March 15, 2010 [1 favorite]
I would say that you first need to give yourself time. Throw the "crash course" talk out the window.
Given your Dreamweaver experience, I'd recommend Build Your Website the Right Way as a good start with your Dreamweaver de-programming. The book is very good at recommending other books (albeit by the same publisher) for continued learning. My students benefited much by this book.
Websites: A List Apart -- Go through their archives and read up on topics you're interested in.
You should immediately sign up for web hosting and get your own personal website going if you haven't already. Then, when that's done, go to your web host's control panel and install a few of their "quick install" software packages like Joomla or Wordpress. Then dive into those to learn about how a CMS works and what it can do for your business.
This personal web hosting account has the side benefit of "Oh shoot what if this kills my company's website" and then you can try it out on your own site and see what happens. :-)
CSS: One good way for designers to start is to head over to Open Source Web Design, grab a template, open it, look in the "images" folder, and see what you can do just by modifying the images. That will naturally lead you to the CSS file(s) for the template, and you can start working out bit-by-bit what everything does.
Later on you'll probably want to Google "Firefox web developer extensions" and install a bunch of those, like Firebug and PixelPerfect and YSlow. (I put PixelPerfect in there because you are a Graphic Designer and you are going to really want to make sure your web work turns out the way you thought it should when you comped it up in Photoshop/Illustrator).
Don't listen to too much talk about procedure at this point. I worked on a 12-person web team at one point and learned more about procedure than I'll ever need to know.
With that said:
Document everything you learn that took you more than 5 minutes of Googling to learn.
Leave yourself comments in your HTML and CSS files so you know why you did things.
Don't be afraid to peek at others' HTML and CSS.
Take every shortcut you can when it concerns your business deadlines (hire web designers, buy templates, whatever it takes).
Be careful about taking shortcuts when it concerns your personal education/development.
You are going to want to start learning something like a scripting language like Automator on the Mac or Bash...one of the most annoying web designerly-things is being sent a folder full of hundreds of files and realizing you need to rename every one of them. Or that you need to open every one of them, make a change, and save them. Or that you need to move every one of them into a specific folder based on their filename.
You have a huge head start on many web designers simply because of your design experience. But don't underestimate the time you'll need to build up your experience.
I'm happy to assist with your development as a web designer if you want to memail me with non-urgent questions. :-)
posted by circular at 2:06 PM on March 15, 2010 [1 favorite]
Tons of good recs here, just a word of advice: Start coding in dry, old Notepad. Learn to code clean and keep everything in mind. Move back to Dreamweaver when you have a good grip on the priciples.
posted by GilloD at 6:48 PM on March 15, 2010
posted by GilloD at 6:48 PM on March 15, 2010
Best answer: I would like to second the suggestions by circular, and GilloD. Tthe best code is written by hand, start out with a good text editor. ( I use Coda, TextWrangler, and BBEdit for Mac (Textwrangler is free). Gedit for Linux (free), and Crimson Editor for Windows.)
circular is right, saying that you're coming into web design via graphic design/visual communication, you've got a huge advantage over those of us who didn't. You're going to be able to catch the basics pretty quickly, but a crash course is not going to make you an expert, only practice and constant learning will.
I didn't include a couple really big resources that other web designers like, such as Smashing Mag, Web Designer Depot, and Design Bump. I won't speak for other mefites that have posted, but I don't read these, and find them of little value and downright destructive to the web design community. They offer a very shallow picture of web design. I believe that coming up through visual communication is very useful in web design. While it is important that designing for screen is very different than print because the medium is dynamic, the goals and the foundations are the same: it's about communicating and you've gotta remember the basics (always remember Philip Meggs and Edward Tufte).
posted by thebestsophist at 11:21 PM on March 15, 2010 [1 favorite]
circular is right, saying that you're coming into web design via graphic design/visual communication, you've got a huge advantage over those of us who didn't. You're going to be able to catch the basics pretty quickly, but a crash course is not going to make you an expert, only practice and constant learning will.
I didn't include a couple really big resources that other web designers like, such as Smashing Mag, Web Designer Depot, and Design Bump. I won't speak for other mefites that have posted, but I don't read these, and find them of little value and downright destructive to the web design community. They offer a very shallow picture of web design. I believe that coming up through visual communication is very useful in web design. While it is important that designing for screen is very different than print because the medium is dynamic, the goals and the foundations are the same: it's about communicating and you've gotta remember the basics (always remember Philip Meggs and Edward Tufte).
posted by thebestsophist at 11:21 PM on March 15, 2010 [1 favorite]
Response by poster: I entirely know that I won't be an expert at it for some time. I just need lots of info to get started. I'm a dive in and try to swim sorta fella. I remember go ole BBEdit!
posted by Wink Ricketts at 6:21 AM on March 16, 2010
posted by Wink Ricketts at 6:21 AM on March 16, 2010
This thread is closed to new comments.
posted by curious_yellow at 1:40 PM on March 15, 2010