Blog Post

Web Worker Careers: Web Design

XHTMLYou wouldn’t be reading this post if it weren’t for web designers. It’s web designers who help make it possible for us to have the best and easiest web experience possible. Web design is a large and growing field; despite the downturn, currently lists nearly 1,000 vacancies for web designers. Demand for skilled web designers is only likely to increase in the future.

Could becoming a web designer be a good career move for you?

Web Design Career

Web design is not the same as web development. Web designers focus on visuals, typography, colors, layouts and other important design considerations. Their technical expertise usually consists of mainly HTML, XHTML and CSS along with one or two programming languages like JavaScript and PHP for adding interactive features. Web developers concentrate on web site function and programming, rather than design and the interface.

Once upon a time, web designers could do it all. All they needed to build an entire site was to know was some HTML and possibly a little JavaScript. In the last few years, though, the web site-building process has become more complicated and has evolved to include more technologies and techniques, including  CSS, AJAX, Java, PHP, Ruby on Rails, ASP.NET, information architecture, search engine optimization (SEO), usability and user experience. This long list makes it impossible for anyone to know it all and do it well. Designers like Jon Phillips from Spyre Studios know this and hire freelancers with specific skills to help out with their projects.

Matt Brown of thingsthatarebrown does design consulting and full-scale site development and deployment. However, as a small design shop he finds that the best use of his time and resources is focusing on design projects. “In a given day I tend to manage 2-5 projects (of various sizes) concurrently, and I’ll usually do a little work for each one during the course of the day,” he says. “This keeps me fresh and not too ‘over-focused’ on any one client project.”

How to Qualify

Do you know how to do HTML and CSS, but have no portfolio to speak of beyond your own web site? Do what Reese Spykerman of Design by Reese did. She asked, “Hey, who wants a free design for their personal blog?” Offer to design a web site for friends and family. Few designers majored in anything related to design in college. Most learn through reading and studying various online resources, and also by examining the code for web sites they like. A few take design classes at a local school or online. Jon Phillips makes time to learn new tricks and experiment with web design techniques.

This field is still very young, which is why those doing web design today typically don’t have degrees or certification in the field. However, new and wannabe designers have more opportunities than ever to get a formal design education as colleges and universities are increasingly adding design programs, such as the School of Visual Arts, which offers undergraduate and graduate degrees in graphic design, illustration, photography and more. Matt Brown recommends interning with design agencies to learn how to work with clients and gain experience in working with the latest tools and technology.

Web Design Tools

Photoshop (s adbe), of course, is in most web designers’ toolbox, along with Fireworks and Illustrator. They love Firefox’s Web Developer Toolbar Extension for editing and testing the site and its CSS. Designers often use a text editor like Textpad, TextMate or TextWrangler for hand-coding because WYSIWYG editors, like Dreamweaver, add a mess of unneeded code that weighs down the page. Besides design tools, many designers rely on business apps like FreshBooks for invoicing, Harvest for time tracking and Basecamp for project management.

Geography doesn’t tie down web designers. Reese Spykerman, who’s located in Malaysia but has most of her clients in the U.S., communicates with clients through email, telephone and conference calls.

Find Clients

Word-of-mouth marketing takes the lead in helping designers find gigs. Jon Phillips reported that over 40 percent of his clients found him through Twitter, but they also find him through his blog and referrals.

Are you considering a career in design?

Image from T. Al Nakib.

16 Responses to “Web Worker Careers: Web Design”

  1. Dreamweaver CS4 for someone like me who is starting out on the freelance road is a handy tool to have until i have fully grasped the fundamentals of HTML. I us it for my web site i am creating to push my company in the new year.

    I specialize in ‘web sites’, and ‘blog’ builds, and dreamweaver CS4 has so many layouts and CSS options with a split design mode that its so handy for me to code and watch the design develop.

    Why is everyone dragging dreamweaver down?? its not being forced on anyone, and for those expert html coders out there, don’t worry, we wish we could code from scratch like you, but until such this skill is developed by me, any software that helps in designing web pages is a god send.

  2. andrei

    ‘Designers often use a text editor like Textpad, TextMate or TextWrangler for hand-coding because WYSIWYG editors, like Dreamweaver, add a mess of unneeded code that weighs down the page.’

    I saw a program for ‘real designers’ change my code when i hit the ‘save’ button, but never dreamweaver in code mode !

  3. What annoys me is that response smacks (to me) of snobbishness, the idea that developers who don’t hand-code every character in notepad are in some way not “proper” web developers, or are pretending to be such.

    Welcome to Web design 101: Copping a ‘tude.

    I’ve been working in the web for 12 years, and have been handed a lot of attitude because I used a PC. The “real designers only use Notepad” thing is a new one for me – most designers I know swear by it. And yes, you should check in Code View a lot, use CSS whenever possible, that sort of thing.

    But such extreme statements are indicative of the elitist, poseur designers I’ve come across over the years. Don’t let it intimidate you too much — a lot of those folks are the Web equivalent of starving artists, and are using their elitism to mask their career desperation.

  4. @ben: Yes, I agree with most of your comments too. I’ll admit also that Dreamweaver helps me maintain code (especially legacy code) better than it helps me write it (as you said, there’s a limit to how much it can help when you know XHTML/CSS/etc inside out).

    Arguing over the +/- points of Dreamweaver is something I’ve done many times. Whenever I mention I use Dreamweaver to build sites, I get reactions ranging from mild surprise to howls of derision.

    What annoys me is that response smacks (to me) of snobbishness, the idea that developers who don’t hand-code every character in notepad are in some way not “proper” web developers, or are pretending to be such.

    Whether you choose to use Dreamweaver or not, I think we can all agree that you should never use WYSIWYG software to produce websites – the code, as the piece says, will be sloppy or inaccurate at best. I thought the piece unfairly targeted Dreamweaver in this respect.

  5. …Oh, and:

    Yes, frameworks and publishing platforms like WordPress are assimilating the market, but this is part of a natural progression: when you can get a domain and hosting account for less than 100USD per annum, there’s an expectation that you can get the rest of your pieces together for a capital outlay in the low hundreds of dollars.

    Quick, low-hanging fruit is always nice to get as long as the client doesn’t turn what should be a quick pickup job into a six month trip to hell in a handbasket, and it’s true that WordPress et al. reduce the value of those prospects… but we’re better off for that anyway. Let the DIYers and neighbor kids work that end of the market, while the professionals build the really good stuff. (So go low barriers to entry. Darn.)

    Finally: when it comes to sales and revenue, there are three matters that can’t be ignored: recurring revenue, professional contacts, and client trust. The first smooths out rough spots, the second directly correlates with the number of accounts you get, and the third directly correlates with the amount of revenue you can earn from those accounts.

  6. Finally time for me to jump in here…

    It’s hard to argue with the value of Dreamweaver as a prototyping and collab tool. For production, not so much; by the time you’ve learned HTML/CSS/JavaScript well enough to get the most from Dreamweaver, you’ve probably got a nice library of templates going (or can write them from scratch in your sleep).

    As for learning those nuts and bolts, the Opera Software Web Standards Curriculum is a great place to start. It’s no substitute for a degree in the eyes of staffing agencies and HR drones, but it does a great job of telling you what’s what.

    If you feel up to springing for TextMate or BBEdit in preference to TextWrangler, you’ll be getting what you pay for. On the Mac there’s also Coda, which integrates Transmit and thus emulates DAV features; the feedback I’ve heard suggests that it’s an excellent alternative to working with multiple terminal windows simultaneously.

    As for TextPad, I’ve sworn by it for years. There’s also Notepad++.

    Disclaimer: Meryl and I are online buddies going back years, but WWD was in my feed reader before she joined the roster. I can hardly speak for her, but what the hell – can’t hurt to clear the air.

    Second disclaimer: ALL of my articles at A List Apart are aimed at the same folks who would find this article informative.

    Third disclaimer: Likewise with my new book HTML & CSS: The Good Parts, published by O’Reilly Media and available for preorder at Amazon for receipt in late September.

  7. @meryl – OK, I accept your reasoning for saying that about Dreamweaver.

    However I want to re-iterate my original point that you should never rely on WYSIWYG code generation to write websites. It’s just not good enough and more to the point, if you are serious about pursuing a web design career, it would actually do you more harm than good.

    If you want to go into web design, learn the basics. Learn to hand-code. learn the difference between CSS IDs and classes and when (and when not) to use them. That way you won’t be repeating the hard-coded mistakes of WYSIWYG editors and you’ll also be making your code more SEO friendly and usable too. Chances are you’ll actually write a lot less code too.

  8. @Simon, the article focuses on people who may or may not be experts in web design. The point of the WYSIWYG statement is to show why the designers I interviewed tend to use text editors. Dreamweaver gets better with every release, but it’s not perfect.

    If you want to ensure the cleanest code possible, do it by hand or at least, comb over DW code. It’s the same thing as blaming PowerPoint for bad presentations. No one is stopping the presenters from using the templates that are all wrong.

  9. I echo Ashley’s comments. Just because you’re hand-coding something doesn’t mean you have to ditch your IDE or use notepad.

    You can still get all the benefits of an IDE without using the WYSIWYG features of a program like Dreamweaver.

  10. The problem with Dreamweaver is that too many novices use Design View to create their webpages and don’t bother to learn the fundamentals.

    I use Dreamweaver (and other programs) to assist me in coding, even though I could do it 100% by hand. It’s faster with small things like auto-complete tags, etc. As long as you don’t use Design View, you’re fine.

  11. Nobody is stopping you from using Dreamweaver for hand coding XHTML, CSS, etc.

    If you don’t like the code that Dreamweaver generates, don’t use it to generate code. Hand code it instead.

    If you’re going to code it by hand, why spend all that money on Dreamweaver?

  12. “WYSIWYG editors, like Dreamweaver, add a mess of unneeded code that weighs down the page”

    Another example of lazy journalism. Dreamweaver has suffered under this bad reputation for too long. Nobody is stopping you from using Dreamweaver for hand coding XHTML, CSS, etc.

    If you don’t like the code that Dreamweaver generates, don’t use it to generate code. Hand code it instead.