minimal design

Because of my job, I have a lot of designer friends. Most of them went to college for design, but didn’t study web/interactive design there, and I often get that question: “Where do I start?”

I usually end up writing a huge email explaining everything. This is how this article started, as a huge email…

Before You Start

The first thing to know: this is real life advice, I’m not selling anything, so I’m not going to tell you that web design is easy, or that anyone can do it… But, if you’re willing to put the time and effort into it, most of the knowledge you need is available online and in books. No need to go back to college…

Second thing to know: yourself. You got to sit down and take an honest look at your motivation and your goals. If the only reason you want to get into it is because “everyone wants a website” and that you feel you have to get into it, but deep down you real love is print design (you might even consider web design as a lesser form of design), then you probably shouldn’t get into web design, because you’ll suck at it. If you’re curious and interested about it though, it can be very fun and rewarding.

With that out of the way, which way to go from there really comes down to what you like and feel comfortable with. In terms of money, the more you go on the programming side, the easier it gets to make some… BUT, there’s no cutting corners… You really have to sit down and learn the actual language. Some people (like me) find it fun, but most designers don’t… I was lucky enough to be introduced to coding when I was about 11 years old, hacking in BASIC on a TI-99/4A and backing up to… audio cassettes! So I knew very early on I liked it. If you’re not sure, there’s really only one way to find out… Try it. The best way to go about it in my opinion is to build something. For instance, when I decided to lear PHP, I coded minimal gallery. It took me a while, and the end result was definitely not the most elegant code ever, but it got the job done and I knew enough PHP to get most common tasks done after that. You don’t have to start with something that complicated, the important thing is to make something that you can use for yourself and to finish it so it actually works in practice, not just in theory. It’s kind of like sports… You can read about tennis all day, you won’t really get it until you play.

Here are the basic different areas you can specialize in (you could break it down further or combined some of those to):

Your Options

UI design/Usability: no programming needed, but still very different from print design. You will need to familiarize yourself with many skills that just don’t exist in print design. And to some extent, you’ll have to go through the whole Jedi thing of unlearning what you know…

Front end (HTML/CSS): this is probably where you’ll be inclined to start, and you can’t go wrong learning this. It will help you being better at any of the other options described here. The good news is: in terms of programming, HTML is the easiest (it’s not technically programming, it looks like code, but it’s really just presentational markup). As for CSS, it’s both simple and deceptively hard because of its idiosyncrasies (and unfortunately, also because of Internet Explorer’s infamous buggy support for it). There are actually few people who understand CSS well. I do get a lot of front-end consulting work because of that. The HTML part is rarely a problem for anyone, but CSS drives quite a few people a little crazy. If you can become a CSS specialist, you’ll get a lot of work.

Back end: That’s the real programming… As a designer, you’re probably better off collaborating with a a developer who takes care of the back end for you. But if you enjoy coding, nothing stops you from learning that too. You’ll probably want to learn PHP/MySQL because it’s used everywhere and available on most servers. Another popular option, but not nearly as ubiquitous (at least for now) is Ruby and Ruby on Rails. the thing to keep in mind though: if hacking your own little programs doesn’t excite you, I’d recommend you don’t waste your time and just collaborate with a developer… Learning a programming language is an involved process.

Flash: it’s its own little ecosystem. You can do some really cool stuff in Flash, but for that, you’ll need to learn ActionScript, which is serious programming too. Another thing to consider is that most people tend to agree Flash is on its way out… I can’t predict the future, but I’d tend to agree. If you’re hoping to future proof your skill set with web design, you might be better off learning any of the other options I’ve outlined here. And, as a Standards advocate myself, I can’t really recommend proprietary technologies like Flash or Flex.

The Start

Ok, so… you ‘re interested in web design, you got a pretty good idea on what you want to focus on… then what?

As a print designer, you must first understand the fundamental differences between the two media. The quickest way to do that is to read A Dao of Web Design.

When that’s done, you should understand what Standards are all about. the reference in that department would have to be Zeldman’s book: Designing With Web Standards.

You should also familiarize yourself with information architecture and usability. There are too many books to list here, but a few short ones, packed with good info come to mind: Don’t Make Me Think!, The Elements of User Experience, Designing Interfaces…

Once you got the basics roughly covered, you want to start building stuff as soon as possible. Keep creating. That’s how you’ll learn. However, there’s a right way and a wrong way to go about it. In a nutshell: taking a “shortcut” and using something like Dreamweaver or any other app that makes it “easy” to build a website will get you nowhere. You might be thinking: “but I’m just a beginner, I’ll start with that, and move on to more advanced tools later on.” But it doesn’t work that way. It’s as if you decided to become a Chef and the first thing you did was to buy a microwave and a bunch of frozen food. You’ll get to eat… But it won’t get you anywhere closer to your initial goal.

So, forget about Dreamweaver and all those apps. The only “visual” tool you’ll need is Photoshop (or Fireworks… some people swear by it, I just could never get used to the fugly Macromedia feel of the app, even after Adobe bought it). Get yourself a good text editor (I’d recommend TextMate on OS X, and if I used a PC, I would probably check out Sublime Text or E-TextEditor), and one of those books and build something! It might take a little while before it all comes together, but just keep building… If you want to be a pro, you’ll need to learn how to code by hand. Period.

Once you get more comfortable, you might want to check out my Ultimate Web Dev Setup article. It outlines everything I use for day to day work. Some of it might go above your head for now, but it should be enough to get you started.

I terms of general info, tutorials, etc… The best resource out there is without a doubt A List Apart, you can pretty much read everything on there and you’ll be set, there isn’t one bad article on there (well, besides that one which I wrote about before). You’ll probably also want to become a member of a good forum where you can ask for help. sitepoint forum are pretty beginner friendly, cover most topics, and are very active. I would personally recommend staying away from the “33 Must Read CSS Tips!” type blogs who’s owners are a lot more interested in catchy headlines and adsense revenue than in the quality of the articles…

Your first site probably won’t be great… The key is not to make it perfect, but to finish it. Don’t waste too much time on tutorials… Build, build, build!

Hope that helps!