Over the past years websites and internet advertising have become a staple to businesses around the world. In this day and age a business that doesn’t have any sort of web presence is considered a cardinal sin. “What? There are businesses that don’t have websites yet?” Yeah, I know. I said the same thing. Everyone and their dog “needs” a website. Recently, my colleague designed a website for a lawn care business. The site consisted of 3 pages: A home page, a services page and a contact page fitted with a simple form. The website serves the primary purpose of being searchable on search engines such as Google, Yahoo! and MSN. That’s it. If you told a lawn care business that they needed a website a few years ago, they’d probably laugh at you.
The truth is that while print collateral is a fantastic marketing tool and every business needs it, a web presence is completely scalable and always ready to evolve. Regardless of who your product and/or service caters to, a web presence in the year 2009 will boost your chances of being discovered by potential clients and customers.
Like businesses, designers are changing with the times as well. Print and layout designers see how lucrative web development can be and they want in. I was that guy. As a designer, I’ve been around the block and I’ve “done it all”. Ad layout, booklets, stationery, screen print and even vehicle wraps—All the while dabbling in HTML and CSS on the side. I know that web was where I wanted to be and I wanted to be there in a few years. Since then, I’ve evolved myself into what I consider to be a “seasoned web developer” and when it came to gaining knowledge and a solid understanding of web design, I tip my hat to this list of freely available resources on the web.
In no particular order, here are 6 helpful resources for you print designers out there looking to become the ultimate web design ninja:
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
http://960.gs/
“Grids Are Good” is a booklet conceived and created by designer Khoi Vinh and should pretty much be in the arsenal of any designer, regardless of whether or not they’re a web designer or a print designer. “Grids Are Good” illustrates how a simple grid system can be applied to website interface design and organization in order to add usability and presentation. I personally think it should be included as required reading in all design-based curriculum.
Download Grids Are Good
Even to this day I find myself frequenting HTML Dog to make sure I’m using the proper markup for the job, or to refresh my memory on the proper application for a tag. It’s basically an online glossary of articles regarding website design and one giant markup reference. Bookmark this puppy and keep it handy.
http://htmldog.com/
I’m not sure about everyone else out there but I order the majority of my books through Amazon. A user by the name of Bart E. Caylor has assembled a nice list of entry-level books for those of you out there that are looking to make the leap. Although the web is an endless wealth of knowledge regarding everything, sometimes it’s better for your brain (and your eyes!) to take a step away from the computer to read a good old-fashioned book (remember those!?).
View the list
As you get acclimated to the web design environment, you will quickly learn that sometimes the best and most effective way to learn is to get your hands dirty and play in the sandbox. Yeah, it’s cool to learn but some of us preferred recess over class (I’m guilty as charged). FreeCSSTemplates.org will help you get your feet wet with (X)HTML and CSS, the bread and butter of what you are going to learn. Free CSS Templates is comprised of user-submitted templates that are created to today’s standards and in most cases, W3C compliant (you’ll learn about that later, young padawan).
http://freecsstemplates.org
On November 7th of 2008, web standards evangelist and “the father of web standards” Jeffrey Zeldman published an article on A List Apart that gives a fantastic insight as to what the web really is. Getting your hands dirty with web design and arming yourself with the tools needed to do the job is a must, but sometimes educating yourself on what is behind the scenes will help you along the path.
My 2 Cents
As a product of the print designer to web designer transition, I can tell you that there are going to be hurdles along the way. When you’re working with an application like Adobe InDesign or Quark X-Press, you’re completely relying upon the GUI and the tactile elements to assemble your layouts. A large part of the transition is learning how to apply the same methods but in a code environment. Sure, you can rely solely on the Preview pane of Dreamweaver but all good designers and developers are coding by hand. In my opinion, the best way to write the leanest, meanest code is to write it yourself. Not only will doing this help you learn the structure and semantics of HTML but it will also familiarize you completely with your own finalized designs. Trust me, this is going to save your time and hair in the future. When it comes time to update a large website, you’ll remember what’s what.
It’s kind of like the Matrix. It’s cool just living your life looking at what the Matrix creates but if you learn how to manipulate the code behind it and you understand it, the possibilities are endless.
When designing your first website, remember that it works in a similar manner to laying out a magazine spread or any other print material. Elements are presented in a manner that is appealing to the eye and easy to follow. Think in columns when organizing your page content and don’t be afraid to think outside of the box. 3 column layouts are nice and so are 2 column layouts but it really depends on the application at hand. If you are a Dreamweaver user, CS4 offers a whole slew of out-of-box column-based CSS layouts that might be of use for experimentation. Everything on your website is divided up into containers, otherwise known as divs. Learn to love the <div> because you will rely on it. Think of a div as a text or image frame in InDesign, and think of Cascading Style Sheets as the style sheets you apply globally in InDesign. Style sheets are what control the overall arrangement and appearance of the HTML elements.
What Are Your Thoughts?
If you are like me and transitioned over to the web design industry from print, I’d love to hear your experiences and some of the resources that helped you get over the hump.
