A Crash Course in Becoming a (Successful) Web Designer ∞
Posted at 6:06 AM on February 12th, 2009
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:
- Always hand-code your HTML and CSS and keep a quick reference handy when you need something.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Don’t be afraid to tell clients “No.” But do be prepared to have a good reason behind it.
- 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.
20 comments so far
Oops. I dribbbled.
-
Just posted a theme teaser on the UpThemes blog with this as a lead-in graphic.
-
This is a blog post header graphic from my latest post on the UpThemes blog.
-
Buy it now!
-
Working on a better way to purchase themes and bring some awareness to our Club Membership packages. Most customers either don't know what they are or understand what they do.
Steal this design. See if I care.
Hand-crafted in the year of the tiger.
I love the pie chart! I believe you have identified the sentiments of many who have ‘thought it’, but never said it out loud.
sweet article man. I’m glad you are saying something useful about the process and what a “real” web designer has to deal with instead of making this just a “how to”. keep up the good work miniGuy Kawasaki :-p
GREAT pie chart. I’m going to pass this on to my fellow designers. Good article. Keep up the good writing.
Nice set of tips Chris… I found some of them useful. Nice writing too…!!
Very good tips. The pie chart is hilarious and true. The best way I find dealing with ie is to have a separate style sheet for it.
Chris, I can’t agree with you less. It’s just inevitable how you described the chart. It’s just what we face every day. And the tips, they are just awesome, I strongly agree with number 4,5,8,9 and I’ve seen many people don’t follow those and hardly anyone talks about it..
lol internet fuck*ng explorer. thats hilarious and really true.
First time when I saw that pie chart, several years ago, it was quite real.
Now, we have far more steps in the design workflow. – UX, Wireframes, Usability testing etc.
I fully agree, but like I said in the post, some designers end up with that type of process, which is not where you want to be. I typically work with a usability architect and visual designer on most of my projects.
HAHAHA that pie chart is the BEST!!
Great article Chris! I appreciate you sharing some of the wisdom you’ve acquired over the years. You’ve definitely set the bar with this site, as I find I’m regularly judging other sites by it’s merits.
Don’t forget about Design Fundamentals, borrowed from graphic design: Typography, Grids, Color, Line, Shape and Layout and most important the gestalt principles of perception.
Actually webdesign is not about HTML & CSS, that’s called front-end development.
@Thijs I agree, but I would have to say learning HTML and CSS is still a large part of understanding designing for the web. You need to learn the basics of HTML/CSS before you can truly understand the realm of what’s possible when you are designing for the web. Ignorance of front-end development limits your ability to design effectively.
love the pie chart, but I was a little disappointing that it said time spent ‘before giving up and using tables for layout’ there’s really no excuse for that anymore (but I’ve been there at one point… we all have)
brent
@
mimoYmima.com
@Brent I didn’t make the chart, I agree, no tables for layout. Bad.
although yahoo answers or twitter may work for you but http://www.stackoverflow.com will be good addition for getting answers its quickest.
NICE ARTICLE
I thought it to be really good info. Thx.
good
chris ..dude plz give me ur personal email messenger id ..so tat i can talk to u lots of unsolved queries ..i am an young designer who is very determind .cheers hope u will revert me back
An execllent post with correct points, I’ve been a lurker right here for quite a while but desire to be much more included in the foreseeable future.