A Crash Course in Becoming a (Successful) Web Designer

Layout, typography, and color all combine to make a great design.

You know, everyone has the moment in their life where they realize what they want to be.  For me, it was a natural progression. My love for the internet and computers combined with my love for designing and building things that wowed everyone around me. Web design isn’t for everyone and there’s definitely a lot of talent required, but should you decide to make the leap into creating things for the web, I’ve put together some great advice for your journey.

Get Started!

When I first started designing websites, I didn’t know much about web design. In fact, I knew nothing at all. But besides the fact I knew nothing about HTML/XHTML, CSS. or JavaScript, I started learning bits and pieces, always eager to find the right formula for great web design.

When you begin your career as a designer, you need to have access to the appropriate tools, such as a computer, a copy of TextPad, CSSedit (if you’re on a Mac), Adobe DreamWeaver CS4 (if you’re on a PC),  Adobe Photoshop CS4 (or a lesser version you bought at the pawn shop, however, I wouldn’t recommend anything lower than CS2, earlier versions are crappier and cause you to lose precious design time). If you are a student, you can obtain this software at a much lower price from the Adobe Education Store.

Once you have your tools in place, you need to start learning. A resource I still use as a reference for HTML and CSS is W3Schools, which is in no way affiliated with the W3C. Next, you need to do some reading up on designing in Photoshop, what makes a good logo, and how to write HTML and CSS from Jeffrey Zeldman and Eric Meyer. Once you’ve learned how to mark up simple layouts and design in Photoshop and Illustrator, you’re ready to start learning the process of a web designer, which is one of the most difficult parts of this career path.

The Process

Some designers end up with the following process due to a high level of frustration with establishing their own process (pardon the vulgarity but I felt this chart was a great example of people’s hatred of IE):

Alan Foreman thinks the design process can be frustrating at times.

The process of designing a website can be pretty simple and clear-cut as long as you hold yourself and your clients to a process. A neat example of the web design process can be found here. I suggest you take a proven process and adapt it to fit your personal preferences and design style. This takes years and is never perfect, but as long as you provide realistic expectations/timelines, stick to your process like glue, and deliver quality work, you should have no trouble building and launching successful web projects.

Designing your first REAL website

You should start asking friends and family if they need a simple website or even if they have an idea for one (simply for you to practice). It’s much easier to design when you have a “real” project and “real” clients, even if it’s just your mom’s pottery collection website. You’re going to want to follow the process you’ve started to compile for yourself, even with your mom. One of the hardest parts in web design is keeping your client’s requirements from ballooning or morphing after you’ve gotten pretty far along in your design process. This is really the most challenging part of becoming a designer, dealing with clients, building realistic and attractive proposals, and setting milestones and specifications.

Some general tips to remember as you create your own design process:

1. Always hand-code your HTML and CSS and keep a quick reference handy when you need something.
2. Only use the markup you need. Don’t bloat your pages with countless DIVs. This encourages meaningful, semantic code, which is easier to maintain for the poor sap that has to deal with your code later.
3. It’s ok to ask for help, it’s usually the quickest way to figure out a problem with your code or quickly identify design inconsistencies in your layout. If you’ve got a problem, put it up on Yahoo! Answers or even post to Twitter, see if anyone has encountered it before.
4. When you design in Photoshop, make sure to set Anti-Alias to None for text that is meant to look browser-generated. A lot of graphic designers designing for web seem to overlook this.
5. The client’s needs and the client’s users’ needs are what drive the requirements for the design and code. Make sure to take thorough notes and listen well to make sure you are taking the design in the desired direction.
6. Test your code in all major browsers. Major browsers currently include Internet Explorer 6 and 7, Firefox 3, Safari 3, Opera, and the newest kid in class, Google’s Chrome.
7. After learning a bit about HTML and CSS, while in Photoshop, make sure you are always thinking about how easy it will be to code your beautiful design. Sometimes you may see that part of the design is unnecessarily complicated and you need to simplify it in order to make life easier while coding. That’s perfectly fine.
8. Don’t be afraid to tell clients “No.” But do be prepared to have a good reason behind it.
9. Stay within your design capabilities. That doesn’t mean “don’t innovate” but merely try not to adopt a design style that you aren’t particularly good at, such as designing a grunge website.

I could go on for about sixty pages, but I don’t want to scare you off. Just make sure you are reading the necessary articles and tutorials you need to catch up. The biggest point to remember when learning anything new is to learn from everything and everyone around you. You’re never too good to learn something new and apply it to your own career.