How can I become a better website designer?
April 19, 2007 9:58 PM Subscribe
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?
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?
Best answer: 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 [1 favorite]
posted by fvox13 at 10:47 PM on April 19, 2007 [1 favorite]
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 [1 favorite]
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 [1 favorite]
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]
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
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
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 [1 favorite]
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 [1 favorite]
This is what you want, really:
http://webstyleguide.com/
posted by xammerboy at 9:15 AM on April 20, 2007
http://webstyleguide.com/
posted by xammerboy at 9:15 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
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
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
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
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
Response by poster: 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
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 [1 favorite]
posted by cschneid at 12:53 PM on April 20, 2007 [1 favorite]
This article, 35 designers x 5 questions, was on Digg.
posted by radioamy at 1:04 PM on April 20, 2007
posted by radioamy at 1:04 PM on April 20, 2007
This thread is closed to new comments.
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]