How can I become a better website designer?

April 19, 2007 9:58 PM

Given that I'm somewhat proficient in website coding (php, CSS, xhtml and so on) how can I constructively educate myself on actual design? What resources exist that will make me a better designer?

I've been doing back-end stuff for a while now, a ton of SEO-type work and optimization. I feel comfortable with anything code related, more or less, but as soon as I have to make significant design decisions on a site I get nervous.

For instance, you could draw out a layout and I'll put it together quickly, but for me to sit down and actually generate an intuitive, good-looking site design...it's a comedy of errors. My background has always been code, and I've never been a designer (I've always deferred to a graphic designer who helps me out with these things).

So if I'm fairly proficient with code, I can handle Photoshop as well as most, but all I need is help with cohesive and professional looking site design...where can I go? I'd love to get a degree in the field, but that's not feasible right now.

Can anyone here suggest websites, books or other resources which might allow me to feel more comfortable designing a site layout from scratch, and allow me to say I actually know what I'm doing?

posted by geodave to computers & internet (17 comments total)

A great reference for someone in your position is the Design Basics Index by Jim Krause. It goes into the absolute fundamentals of good design and teaches you the thought process behind it. Really helped me become more confident as a designer without any formal training to rely on.

I would work my way through something like that book and augment it by studying websites that you find visually appealing. Reverse engineer them - ask yourself what it is that you like about them and why. Take a look at the site Design is Kinky, which is always filled with links to new and beautiful sites.

Just have fun with it. It's interesting because I'm in the opposite situation - I could draw up a great website in Illustrator/PS, but I'd have no idea how to code it. Good luck.
posted by empty commercial spaces at 10:21 PM on April 19, 2007 [1 favorite]

The Non-Designer's Design Book has pretty much saved my life at least a dozen times.
posted by fvox13 at 10:47 PM on April 19, 2007

I've liked Sitepoint for awhile for most things developmentally-related, and they just released a new book + free chapter on web design.

When I started putting web pages together, a RISD designer buddy of mine taught me the squint technique...that is, when you put a design together, roll your chair back, furrow your brow, and squint at the thing. With blurry vision obscuring the details, does it make sense?

Tangentially, this might be, in part, why I think Hiroshi Sugimoto is such a rock star.

Back to the point: think of the end user, think of the end user, think of the end user.

If you want any feedback, email's in the profile.
posted by asuprenant at 10:55 PM on April 19, 2007

Books by Donald Norman are highly recommended -- but don't limit yourself to reading just him. I'd read both his earlier work and his latest work.

I'm now a huge fan of a book I just read recently (although the book was published in, I think, the eighties): _Exploring Requirements / Quality Before Design_ - it's out of print, but it's so good that people still talk about it; I found it in the (otherwise rather current) local university library.

Please, please learn something about color theory. It will change your life. I actually read about it some, and then played with some color-scheme-selection software (about three different packages), which I found quite interesting. I didn't agree with everything the software or the books recommended -- things are all over the place, color-wise, when you're dealing with several different types of computer screens rather than print design. However, these helped me learn to think about color, and allowed me to look and learn more from digital designs and indeed all kinds of influences I discovered I liked: home decor magazines, book covers, clothing, artfully-presented food, furniture, nature, faces.

Look at a basic art theory book and a history of art book, analyzing what you find attractive.

Please don't become too attached to the freedoms/constraints of print design. There's a lot to learn from the established, beautiful world of print design, but web design is both much, much more flexible and much, much more constrained than print design. The constraints are largely imposed in order to honor that flexibility; many designers, especially if they are trained with paper/print art or design, quickly abandon these constraints because they don't understand the deep value of the flexibility that web design _can_ yield, and because they think in terms of the fineness of line, subtlety of color, and clear boundaries of paper design. Keep this in mind constantly as you learn, and you could be a better designer than most.

Design is not art. Design is about carefully matching the product to the problem being solved, and about not distracting from serving the user's needs - usually allowing the user to ignore entirely your efforts so that he can do what he wants to do, learn what he wants to learn. Art is about expressing yourself. Design is about you disappearing.

I am also a programmer who's learning about design (continually learning). If you're good at programming, you're probably good at seeing underlying structures and systems to things. This talent lets you bring something extra to design, as long as you learn to ask questions about the user's needs first, and to process the world around you visually and logically at the same time.

As you can probably tell, I don't consider this the undertaking of a weekend. I decided to work in web development because I wanted to learn to perceive the world more completely.
posted by amtho at 11:03 PM on April 19, 2007 [2 favorites]

Seconding Non-Designer's Design Book. I have no idea how to code or design, but this book has helped me with the latter for my company's website.
posted by reenum at 6:44 AM on April 20, 2007

besides the book mentioned above (nondesigners), I've found articles are sometimes easier to digest. my favorites are a list apart, boxes and arrows, & alertbox.

edward tufte is worth a look on the longer term. also, getting someone to disagree with you/critique you and having to work it out is really helpful.
posted by ejaned8 at 7:46 AM on April 20, 2007

How did you learn code? From what I understand a lot of coders learn by copying and pasting and then doing a lot of tweaking. Before you design, do a competitive analysis. Print out a bunch of designs that deal with similar problems to the one that you are dealing with. This isn't cheating. It would be criminal for a designer not to do this, because what's intuitive to people is often the design models and conventions people are used to seeing and using in similar circumstances. The world is your oyster and teacher.

I used to do usability research. A long time ago, I remember a project where the design we were testing was basically specified by the client. We knew it was confusing. One exasperated user sat me down and said "why, why, why, is this so hard for designers? Here is what I want from a website, and drew a top level global navigation with left navigation subsections and page content in the middle. This was that user's "model" of a website and how it should work. They wanted simplicity and familiarity, at least in terms of function. If you are scratching your head over a design or are trying to be clever, don't. Make the simplest design possible.

There's a specific discipline of website design that is solely concerned with layout, interaction design, and a site's content structure. It's called information architecture. Google that, and look at the Yale Web Style Guide to familiarize yourself with website design basics. It's a good resource.
posted by xammerboy at 9:12 AM on April 20, 2007

This is what you want, really:

http://webstyleguide.com/
posted by xammerboy at 9:15 AM on April 20, 2007

Dave, this is a GREAT question and one that I wish more developers asked. Just as designers need to familiarize themselves more with the tools of rich media development, so do developers need a good grounding in design concepts.

Personally, even though as they say "web typography sucks," I'd start with a really basic backgrounding in typography. Type and grid systems are the cornerstone of all page design, online or in print, and if I were in your position I would do the following:

a) buy or borrow a copy of Robert Bringhust's Elements of Typographic Style. You can ignore some of the history, for your application, and some of the glossaries, but read as much of the book as you can. If this is too arcane or print-centric, try Erik Spiekermann's Stop Stealing Sheep - a very basic primer mostly for non-designers, although it may be too basic for you.

b) Of all the non-textbook intro design texts out there, my favorite is the relatively recent Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students by Ellen Lupton. Don't let the long title fool you; it's much wider in scope than other type-centric texts, gives LOTS of examples, and can be digested in a day or two.

c) Tufte is great for the theory stuff, but expending the amount of energy required to read and really understand his books is best put off until after you have more of an understanding of graphic design in general.

d) other books that might be interesting, useful or fun: Emil Ruder's Typography; Christian Leborg's Visual Grammar (this is a VERY easy read and definitely worth reading for anyone who works with designers in any capacity); the Thames & Hudson manual; some of the Graphis annuals - especially the logo annuals - for thinking about the creative process and evolution and distillation of concept > mark.

There's also a fun how-to series called Before and After that you can check out on the web (they have some sample downloadable PDFs). They also have a bi-monthly magazine and a book or two, all worth looking at.

Good luck!

Typophile.com is also a great place to look - check out the critique / graphics section.
posted by luriete at 9:21 AM on April 20, 2007 [2 favorites]

And by the way, I should have linked "web typography sucks" like so.
posted by luriete at 9:25 AM on April 20, 2007

The Elements of Typographic Style Applied to the Web
posted by kirkaracha at 9:51 AM on April 20, 2007

I agree that this is a great question! One thing I would suggest is browse the web and figure out which sites you like and don't like, and why.

Also, when designing a site, figure out (this may involve some probing of the client) what "feeling" you're going for. For example, I worked for a construction company for a while, and they wanted their website to project an upscale image. After some discussion, the owner decided he wanted people to think "high-end hotel." So I went through some hotel sites with the designer, and discussed elements of different sites that were appealing. We ended up with a very nice website.
posted by radioamy at 10:05 AM on April 20, 2007

Along those lines, agencies will sometimes use what is called a "mood board" to better understand the look and feel the client wants. A mood board consists of images of anything the client or designer feels is representative of the mood they are going for: pictures of colors, people, pets, whatever.
posted by xammerboy at 10:13 AM on April 20, 2007

I'm a little surprised no one's mentioned Steve Krug's Don't Make Me Think yet. So I just did.

Currently trendy, but still with good ideas: Raph Koster's A Theory of Fun. It's about lessons from game design, so it's not at all about the appearance of a web page, but it has interesting thoughts about a user's experience of a system.
posted by Zed_Lopez at 10:23 AM on April 20, 2007

All fantastic answers, I owe you all a beer.

I'm off to the bookstore, this will be a busy weekend =)
posted by geodave at 11:24 AM on April 20, 2007

Check out Before and After magazine. They focus on design in general, both physical and web. It's been a great help for myself to understand what makes good design, and more of the paper world translates than you'd think. The subscription isn't too much, and pdf's are handy.
posted by cschneid at 12:53 PM on April 20, 2007

This article, 35 designers x 5 questions, was on Digg.
posted by radioamy at 1:04 PM on April 20, 2007