Maybe you're in the small percentage of web designers who has never had a problem client, always turns everything in on time, and has never run into issues during a project. For the rest of you, these 10 tips for web designers will make your lives easier, whether you are just starting out in this field (or still in school), or you're a veteran web design ninja.
1. Set realistic goals, expectations, and deadlines
This one is probably the hardest for most web designers. We all want to say "Yeah, I can do that, it'll be awesomely high-tech, and it'll be done tomorrow." but the harsh reality is we often have many projects going, things come up, servers go down, and life sometimes gets in the way of our work (as does Internet Explorer...)
To avoid unhappy clients, overestimate your deadlines, downplay your design and coding skills, and be honest when you run into problems or things aren't happening on schedule. In general, underpromise and overdeliver to make your clients happy. They'll like you more if that new website has extra bells and whistles than if you have to leave things out that were on the project plan (or worse, the whole project is delayed).
2. Keep your files organized
Web designers and developers tend to have a million files of a thousand different types - HTML documents, CSS stylesheets, Javascripts, PHP files, database descriptions, keyword lists, sales copy, images, Flash files, and so on - that are all easy to lose track of. Which version of that default.css is most current? Why did I make this change? Where the %&*$ did I download those product images to?
To avoid a whole lot of hair-pulling, make a "Projects" folder on your local drive (if you don't have one, do it now, otherwise you'll forget), and make a separate client folder for each of your projects. I tend to use the domain name without the extension (so, for www.absurdhuman.com I have an "absurdhuman" folder in my Projects directory) which makes it pretty easy to track everything. Inside that folder, I usually keep the following folders:
- info - a description of the project, relevant login information, client questionnaires with answers, contact info, and other information about the project. Scans of sketches, audio / video of client meetings, photos of whiteboard sessions, deployment checklists, proposals, and contracts (scan a signed copy!) can all go in here.
- mockups - I keep my .psd or .jpg mockups separate. Once a client approves a specific design I usually move the selected mockup to /working/ so I can refer to it easily.
- current - an up-to-date listing of the files deployed or ready to deploy, and nothing else. This is where minified Javascript and CSS, gzipped XML sitemaps, HTML with meta tags, and a current robots.txt file reside.
- working - a whole mess of html, css, scripts, versioned by date and annotated with recent changes. This is the folder I work in.
- backup - the most recent set of files I deem reasonable to keep a complete backup of
- marketing - keyword lists, sales copy, banners, etc.
- fromftp - I use this to download a backup of files before moving them to /working/ and working there. That way I can always revert to the last live site if I screw something up.
- downloads - Mostly things sent by clients, including /images/ (usually uncropped large images from a digital camera that I need to edit before moving to working/images). I also keep software packages for a project (such as a gzipped recent download of jQuery or osCommerce) here before editing and moving to /working/.
- testing - Sometimes I'll include this folder to try out major changes to a design before moving to /working/, this way I can also have /testing/layouts/abstract/ or /testing/jQuery/12082009/
- snippets - I often find or write cool snippets of code or text that I want to incorporate into a project, but I'm not sure how or that part of the project is not done yet. I'll put text files of sales copy, code snippets, and even lists of images I'd like to use in here before putting it together in the working folder.
Feel free to modify this directory structure to your own design and coding needs, but the above is what I use and it helps me keep track of all 30+ projects I'm usually working on. Inside /working/ and /current/ you'll find the usual directories css, images, and scripts, as well as the planned directory structure of the actual site, which varies by project.
3. Backup!
You'd think I wouldn't have to list this here, but I've heard horror stories of accidental changes and deletions, and I've met many designers who can't tell me when the last backup was made of their Projects folder (if they have one). Back it up daily to an external hard drive or secure online virtual backup drive. Also make backups before you make major changes. Always knowing that you can "undo" changes from the last 10 minutes, few hours, or few days if necessary provides job security and peace of mind for a web designer.
4. Contracts are important
Most web designers don't have an MBA or a law degree, but contracts are the most important part of a web designers repertoire. If you don't have a lawyer, get a contract template online and have a lawyer look over your modified version of it. A good web design contract will include a project plan, provisions for payment, clauses for what happens if the client doesn't pay, copyright transfer information, and a whole lot more. This is what protects your digital assets, so for your pocketbook's sake, get a solid web design contract and use it with all of your clients (even friends and friends-of-friends).
5. Listen to your clients
Yes, web designers do crazy cool things with code and images that most people just don't understand, or even care to. But that doesn't work both ways. You, as the designer, have to take an interest in your client's business, their objectives, and their ideas. It is not your website, you are simply a glorified copywriter as far as most clients are concerned. Your job is to make their ideas shine on the Internet and present their information in a way that their clients and visitors will understand. If you don't listen very carefully, and ask the right questions, you will very likely end up with a problem client.
Examples of good questions to ask a potential or existing client:
- Who buys / uses your product / service?
- Who will be updating the website? Are they technically savvy?
- Why do you want a website?
- What is the primary goal of your website?
- Do you want visitors from this city, this country, or all over the world?
- What languages do your clients/buyers/potential site visitors speak?
- Who are your biggest competitors? Do they have websites? Do you like any of them?
- Are there any specific features you would like your website to have?
- What colors do you like to see on other websites? What colors do you NOT want to see?
And many other similar questions. Take notes when they answer, do more research on your own based on their answers, then go back and ask some more questions. Only after that are you really ready to write a project plan and begin work on their new website - which will be exactly what they wanted if you listened carefully and asked enough questions.
6. Keep up with new technology
If technology advances quickly, the web is like a cheetah (or maybe more like a tasmanian devil) in a world of gazelles. Make it a part of your daily routine to check up on new technologies - Is that cool new software out of beta yet? Are there new versions of any of the libraries you usually use? What new web technology are people Twittering about?
Check up on your competitors - are they using CSS3 or HTML5 to enhance their sites, while you're stuck using transitional HTML4? How do they ensure their sites degrade nicely? Do they have any new tricks up their sleeves as far as animation, IE fixes, or backend programming (e.g. Ruby on Rails, Scala)? What did they add to their websites during recent updates?
Keep track of W3C standards and drafts - W3C compliance is one of your major web design goals, so go straight to the source and find out what you need to do now, and what you'll need to do in the future to make sure all of your websites are compliant.
7. Breathe
We all do it - you're on a code binge, so into your current project that before you know it, the sun's gone up and down twice, you haven't slept, you're out of coffee, and as you look over the last few hundred lines of code and text you wrote, you notice misspellings and mistakes everywhere.
Don't forget to take breaks during long design / code sessions, get some sleep regularly (ok, so sometimes a 15 minute walk has to suffice, but at least do that), and have someone else look over at least the text you've written before turning it over to a client.
Don't burn yourself out on a project - you are much more likely to make mistakes without ever noticing if you've been working for over 12 hours. If the deadline is tomorrow and you have to stay up all night to get it done, move the deadline and wake up early in the morning to work on the project. Trust me, the client will be happier with a well done website tomorrow than a website filled with poor grammar or bad code today.
8. Comment, comment, comment
In every language, including HTML and CSS, there is a semantic construct for adding comments to your code. It's there for a reason - please use comments liberally. Good comments are the difference between easily being able to re-design a site next year and having to start over from scratch. Add comments for things like: last modified, major changes, author, contact information, and description of this file at the beginning of each file. Then comment each section with what that section does, and add specific comments for anything that might not make sense to someone not familiar with your code (if you're not sure, comment it anyway).
9. If at first you don't succeed...
Don't get discouraged by failures, mistakes, or problem clients. Learn from your experiences, good and bad, and remember that there will always be other people and businesses who need websites. Every designer looks back at their early work and thinks "What was I doing?" - just know you will get better at design and dealing with clients with time, and keep doing what you do best. Someday you'll be able to hand-code fluid CSS layouts in your sleep. Until then, practice, practice, practice. Work on your own pet projects, build websites for friends, and go back to improve previous projects even if you never deploy your changes.
10. Have fun!
Design is fun, that's why we do what we do. None of us would deal with the crap we put up with if we didn't absolutely love making our clients happy, and showing off our cool designs and code. If design is not fun for you, try these tips and get organized. If you continue to experience frustration and just can't get ahead, take a few design classes or get a professional designer to mentor you for a while. Then build a few websites about subjects you are interested in for no other reason than to practice web design. If you're still not having fun, it may be time for a career change.
Happy designing!
Useful resources for web designers
Here is a list of websites, articles, and software packages I refer to and use regularly in my web design and development work:
- W3C Validator
- W3C CSS Validator
- Instant Domain Availability Checker
- The Ultimate Website Launch Checklist
- Freelance Web Design Contracts and Templates
- 15 Best Places for Designers to Get Free Stock Photos Online
- Tools of the trade: Web development frameworks that the pros use
- 50 Amazing jQuery Examples - Part 1
- 35 CSS-based Layouts That Look Awesome
- 10 Templates That Solve Problems for Web Developers
- 20+ Brand New and Incredibly Useful Wordpress Plugins
- CSS Pseudo-classes at W3Schools
- jQuery Javascript Library
- PHP 4 Applications PHP RAD Framework
- 17 Hours of Javascript from the Masters
- CSS Zen Garden
- Top 10 Most Usable Content Management Systems
- Develop AJAX Application like the Pros
- 30 Helpful Video Tutorials for Web Developers
- 80 AJAX Solutions for Professional Coding
Some more places to find useful SEO, web design, and web development resources:
- Mashable
- Smashing Magazine
- Tuts Plus
- Tutorialized
- IBM DeveloperWorks: Web Development
- W3 Schools Web Design Tutorials
- SEO Chat
My Twitter page often has more web design resource, so be sure to follow me to keep up with new web design tips and tutorials!
"10 Tips for Web Designers to Ensure Client Satisfaction" continued here...
Posts
