How I became a professional web designer (and how you could too)

It’s always nice to get fan-mail, and it’s especially nice to be asked for advice. Yong-Soo Chung wrote me recently to ask:

I’m interested in becoming a web designer myself (and selling things as you are). I’m dedicating 5-10 hours a day and going through books on xhtml, css, web design standards, etc. If you don’t mind, could you list the steps to get to where you are now (with web design)? I was thinking of learning in this order: html, css, web design standards, adobe cs5 (?), javascript, php(?).

I actually became a web designer largely by accident. It started off as a compulsive need to save text in a format that looked good, and which I could edit without needing a word processor. (Hence my obsession with typography today.) Let me tell you the story. I promise it will be rambling, and contain no subheadings whatsoever; but it will also be interesting and helpful if you’re starting out in web design.

I quickly realized that saving Word documents in HTML format was not the solution to my problem. The first time I opened one of Word’s “HTML” documents, I threw up a little in my mouth, and had nightmares about being buried alive beneath a never-ending mountain of <span> and <font> tags.

So, realizing that HTML was really, really easy to learn, I spent a few hours getting to grips with the basic way that documents are structured, and what all the tags meant.

Then I wanted to style it, so I spent quite a lot of time learning CSS. I think the most tricky thing about CSS is the box model—understanding how browsers actually interpret your code to lay out elements on the page. In fact, this is still the thing I have the most trouble with when I’m designing a complex page, or I’m trying to do something a bit too clever. (A List Apart has a really good article on CSS positioning that I occasionally re-read just to stay sharp.)

Then it was a case of practice. Creating new pages of my own. Deconstructing how other people had done things. Any time I ran into a problem, I tried to find a website that already did what I wanted to do, and I looked at their code to see how they’d done it. That’s the real beauty of the web. People think you’re a genius if you can copy someone else’s code. I’d wager 90% of everything in this site’s markup was originally copied and pasted from someone else’s. That’s the way the web works.

For a while it was static HTML pages, painstakingly styled and tested in Firefox, with no regard whatever for Internet Explorer (since my audience consisted largely of me, that was okay.) But I was really interested in being able to update elements across several pages at once—like changing the navigation for the whole site, without having to edit each page individually.

Which took me to free blog platforms. I cut my teeth on “web design proper” by creating a custom Blogger theme for my then-blog. That was nasty. So nasty, in fact, that after I’d been away from it for a few weeks, I came back and wanted to make a few tweaks…only to realize I’d already lost track of how to do it. It was just too complicated.

So I bought a domain and switched to WordPress. Once again following my copy-and-paste method of learning, I managed to piece together a good enough understanding of JavaScript and PHP to create a theme that used lightboxes to bring up category lists and search boxes and the like. I was always interested in exposing only as much functionality as the reader really needed, and making getting at more features as easy as possible. I suppose that’s where my interest in conversion rate optimization began.

Probably the most significant development for my skills during this time was coming to a rudimentary understanding of the importance of typography—assuming you want people to read your content. Now, the theme I created was by no means an example of best typographical practices. Light text on a dark background and poor leading between the paragraphs are the two most painful mistakes that jump out at me now. I should have stuck to a grid, and I should have stuck with book colors. But the font was at least large enough to be generally legible. Sadly, even this wasn’t really to my credit; I had just learned that you could style font sizes using “x-small”, “medium” etc, and believed this was the better, more future-proof, more accessible way of doing it—and “small” seemed to small to me. (I guess I lose points on typography but gain them back on accessibility.)

By this stage, I was working at a high amateur level. My knowledge was still patchy, but I had a good grasp of the fundamentals of markup and styling. What I really lacked was the kind of polish, the details, that you need to work in design at a professional capacity.

That comes with two things: lots of study, and lots of practice. So when I made the decision to turn my hobby into a job, I made a commitment to both. I started doing design work—mostly my own to begin with—every day; and I started reading as many web design blogs, magazines, articles and so on as I could get my hands on. A List Apart, which I mentioned before, was a great starting point, but there are so many that I couldn’t possibly list them here (many of them I’ve probably forgotten as I have become far more selective in my reading today).

You’ll notice I haven’t made any mention of specific tools; nor of graphic design, which most people seem to think web design is really all about. Here’s why:

What tools you use is irrelevant unless you’re planning to work for someone else. Since I use Linux, I use Gedit for coding, Nautilus for file management, Firefox and Chromium for browser testing, a Windows 7 dual-boot arrangement for testing IE and Safari, and the GIMP for graphic design. If you’re planning to work for someone, I suppose you’ll have to sell out to the man and buy a Mac, because I get the distinct impression that this is a prerequisite of being a “real” designer, artiste or “creative” of any kind. Also some square glasses with arms the size of small construction beams. But if you’re working for yourself, as a highly recommend, you can use whatever the hell you want, and no one is any the wiser.

In regards to graphic design, I believe this is a skill best left till last. Web design is not graphic design. In fact, web design is 95% typography (that’s another site worth reading front to back, btw). So once you’ve learned the basics of styling, markup, and accessibility, what you should be spending every waking moment immersing yourself in is typography—not graphic design.

For my own part, I rarely have a clear idea of what a website will look like, in terms of its visual style. I start with a basic idea of the colors I want to use, and a sense for the kind of thing I want to do (usually from browsing a lot of design galleries and looking at what strikes my fancy). But I don’t even think about that stuff until I’ve worked out what objectives the site is supposed to achieve, what content I need to display to do that, what order I’ll need to display it in, what kind of thought sequence I’ll need to ask users to go through, and so on. Only once that stuff is decided can I begin to think about layout, and only once I’ve got a good idea of layout can I start to ask questions about aesthetics.

Then I just spend time in the GIMP, playing around. That’s really what I do. I start with an idea, I see whether I can do it (I usually can’t), and so I adapt. In the process of screwing up my original idea, I usually come up with something a lot better—as witnessed by this site, for which my original idea was a kind of highway theme, with a road disappearing to the horizon. Wasn’t ever gonna work.

Now, if you’re planning to set out by your lonesome and become a freelancer, there is something else you’re going to have to learn, and that’s marketing. Fortunately, most people are so bad at it—as I discovered—that if you spend only a small amount of time learning the basics you will have a significant leg up. There are many excellent books you can read, but for the most systematic, absorbing, thoroughly excellent treatment I cannot recommend anything other than Drayton Bird’s Commonsense Direct & Digital Marketing.

So that’s how I became a web designer. I became a copywriter through a pretty similar process: seeing a need my design clients had, and taking a stab at filling it. I don’t like to do things by half measure, so I invested in significant amounts of training to get started. Turns out most copywriters are rubbish, so it wasn’t long before I was a lot better than most of them.

In fact, if there’s one takeaway I could offer you to close this piece, it would be to never stop learning. Never stop investing in your own training. Never stop studying. This includes not just reading, but also practice, and even writing articles. You’d be amazed how well writing about your field helps you to understand it better. (And of course it’s just good marketing; it makes you an authority.) Set aside time for study, practice, and writing every day. 99.9% of your competitors will not do this. And so with this one simple technique, you can rapidly become one of the best in your field.

D Bnonn Tennant
‘The Information Highwayman’

D Bnonn Tennant, ‘The Information Highwayman’, signs his name to this

Get these updates via email

Not only can I save you the bother of coming here to read this stuff, I’ll also send you my micro-course, 5 Sales-Spiking Website Changes You Can Implement Today—and my cheat-sheet on how to create a business site that sells.

There’s no cost or obligation, so enter your email address here:

other articles along these lines