Unless you count watching The Secret City with Mark Kistler on Saturday mornings as a child, the only formal training I’ve had in graphic design is an Intro to Desktop Publishing class that taught me the keyboard shortcuts in Photoshop and Illustrator. Everything else I’ve learned through observation and synthesis. That’s one of the great things about the Internet: there is no dearth of brilliant people taking chances, making progress and sharing their findings.
Now, I wouldn’t consider myself brilliant, but I’d like to think I’ve made some progress over the last two years since Plasticmind Design first hatched. So in the spirit of giving back, I think it’s only right that I share some things I’ve picked up over the years.
Here are some of the tools that help me do what I do. This first article in the series covers inspiration, instruction and administrivia. Part two which I’ll publish next Tuesday will cover resources and process. (In the mean time, you can find some helpful design resources here.)
Inspiration
Digital Web magazine recently ran a fantastic article about “collecting” based on Cameron Moll’s “Good Designers Copy, Great Designers Steal” dictum. The idea is this: No designer works in a vacuum. Some things work; others don’t. A good designer should be able to analyze client needs, goals and purposes and then strike a balance between using commonly accepted techniques and finding new ways of doing things. To put it another way: look around. What are other designers doing? Does it work? How could it be made better? What are some common patterns you see among good designers that may be missing from your work? Should that change? Here are some great places to go for observation and inspiration:
Web Creme – Challenge your status quo with this comprehensive list of sites that push the envelope; no layout, color palette, structure, or copy is sacred.
Logo Pond – It’s a good, humbling thing to realize that there are people with a lot more talent than you; it’s an even better thing to learn from them.
COLOURlovers – Never, ever, underestimate the importance of your color palette. COLOURlovers lets you search, submit, rate, organize and save color palettes.
MyFonts – Same thing goes for typography.
Stock Exchange – An enormous collection of royalty-free photographs integrated with an unobtrusive collection of reasonably-priced photos.
CSS Zen Garden – Standard fare for most designers, but an inspiration list without it would be incomplete.
Remember, if you want to be great at this, you need to stay informed about both technological and visual trends and advancements. The greatest web designers are not necessarily the best graphic artists; they are people who can combine the best technical solution and the most fitting visual design, marrying form and function.
Instruction
An essential part of standards-based web design is learning and understanding standards. There are many, many great resources out there for standards based design. You may not “get” them all at first, but there’s always induction, induction, induction! Here are a few resources that have helped me tremendously:
A List Apart – You knew this, right?
W3Schools — While this W3C doesn’t have the pizzaz of a Web 2.0 site, it remains one of the best resources online for learning CSS and HTML.
Max Design – CSS powered layouts.
CSS Beauty – Comprehensive collection of articles, tutorials and examples of great CSS.
Cascading Style Cheatsheet – CSS best practices in a nutshell.
How Much Should A Design Cost? – A really insightful article I wish every client could read.
The Art of Self-Branding – Probably one of the most difficult tasks for anyone starting a business is limiting themselves. What are you all about?
Google University: Hopefully, if you’re in this business, you’ve got the good sense to know where to look first if you can’t figure something out. No, it’s not your more knowledgeable web friend, it’s not a LazyTweet, it’s not a shotgun post to your favorite IRC channel, and it’s certainly not a cold email to a popular web designer/developer/celebrity; it’s Google. Ask Google your question first using several different search terms and phrasing it several different ways; if what you’re looking for doesn’t come up at all then you can ask around, preferably your knowledgeable web friend. (They’ll thank me for this.) If nothing else, they’ll give you a better set of search terms to use to find what you’re looking for.
Proposals, Billing and Project Management
One of the first steps for almost every design project is getting together with the client and identifying the target audience and main purpose. In fact, I almost always ask for some type of IA (information architecture) from the client before even writing up a proposal. I’ve found this to be an absolutely crucial step as it helps you eliminate clients who don’t know what they want out of their site. Trust me, if they don’t know what they want, you certainly aren’t going to be able to give it to them. Plus, this ensures that they’re serious about the project before you spend time writing up a proposal. Here are some of the things I use to make this all possible.
Proposals: iWork ‘08: Pages – I use Pages to write up my proposals. You could use Word; but Office for Mac runs slower than molasses uphill in January. It’s also really easy to export and mail a proposal and SOW (scope of work) in .PDF format. A quick tip about proposals: be specific and concise. It should not be more than two pages, should list everything you intend to do and should list an hourly rate for things that fall outside this list.
Billing: Blinksale – Extremely simple online billing solution for sole proprietors or small businesses. Also allows for recurring billing, perfect for hosting plans. Exports data to several common formats as well as providing useful RSS feeds. The $12/month for 50 invoices plan works perfectly for me. Note: Some clients aren’t keen on having their transactions stored on a third-party server; in those instances, I also keep a local record of business transactions in iWork Numbers.
Project Management: Basecamp – Not until just recently did I discover the importance of project management software. Don’t laugh, but for a while I used to keep a draft email open in Gmail with my todo list; that way I could have it wherever I went. Just recently I was introduced to Basecamp. It has its limitations; but overall it’s a painless way to get clients supplying the information you need with the added bonus of helping you appear far more organized than you may in fact be.
Time Tracking: I actually use several tools for this. For advance scheduling, I use iCal. iCal lets me import my Basecamp milestones which make up the framework of my upcoming calendar into which I can drop upcoming tasks that need to get done. This is the broad phase of my scheduling. When I’m actually working on a project, I record exact times for specific tasks. I used to use the free Daily Grind Dashboard Widget but have since paid for Timepost because of its additional features: time rounding, detecting idle time if you forget to stop a timer, the ability to post your times to other services like Basecamp and Blinksale.
One important tip about scheduling: leave yourself one “spacer day” a week. Earlier this year I determined to get a better handle of scheduling, so I booked nearly two months in advance. But when certain projects took longer than I had planned (as they always do), suddenly my entire schedule was in shambles. Just as bridge builders use expansion joints to allow a bridge to “flex” when the weather causes its expansion and contraction, your schedule needs “flex” time or else you’ll find yourself apologizing endlessly to clients and earning the infamous reputation: “he’s a great web designer, but he can’t meet deadlines.”
Continue reading: Tools of the Web Design Trade, Part 2 – Resources and Process
