How can a very left-brained programmer type become more skilled in design?

June 30, 2009 3:55 PM

How can a very left-brained programmer type become more skilled in design?

Here's the deal: I'm a professional web developer, and I'm pretty good at it. I'm into the design end of things—I read the blogs, I keep up with the trends, I know a good bit of the history and theory, I have folders full of design-related bookmarks—but mainly as an observer, not a participant. I know XHTML/CSS like the back of my hand, and I can convert someone else's design into a beautiful, faithfully translated, cross-browser XHTML/CSS template without breaking a sweat. But I can't design for shit.

Lord knows I've tried to learn. I have a hard drive full of mostly aborted attempts—twenty revisions of some projects. I've occasionally produced something decent, but only after agonizing over it for days and making countless false starts.

This is after working in the industry for almost a decade, using Photoshop on a near-daily basis, and spending hundreds or thousands of hours working on site designs. I can tell I'm getting better, but it's an excruciatingly slow process.

My process goes something like this:

1. Come up with a list, mental or otherwise, of the elements that need to appear on the page.
   
   
2. Open Photoshop, set up a 12- or 16-column grid, and place those elements (or at least the major ones) on the canvas in a generic and provisional fashion. Just to get the layers there so I can play with them.
   
   
3. Start moving stuff around, changing colors, and changing type treatments in a relatively experimental and undirected fashion. Sometimes I have vague notions of where I want to go with things, or I know I want to use a specific solution I saw somewhere, but for the most part I'm just stabbing in the dark until I hit on something I like.
   
   Eventually I'll find a micro- or macro-level concept that works, and start build up or down from there. I'll have varying degrees of success, but eventually I'll hit a brick wall. At that point, I start over from Step 2.

Specific advice about methodology, how to think about the process, how to get out of jams, etc. would be welcome. Please feel free to ask clarifying questions. Thanks!

posted by ixohoxi to computers & internet (23 comments total)

I think step 1(a), after you make your list of page elements, is to prioritize them: what's important, what's less important, what you want to stand out, and what can take a back seat.

Then think about the ways you can visually emphasize or de-emphasize objects. Leaving some empty space around a headline or image makes it pop out more. A bit of strong color used in moderation will draw the eye. Western readers generally scan the page from top left to bottom right.

Think about the different parts of your page (header, navigation, main content, etc.) and how you can make them show up separately and distinctly. A light background shade on sidebars or pull quotes. Simple, clean dividing lines with enough space separating them from text or other content.

A simple hierarchy of text styles: you can do most basic pages with four levels of text. Big headline, small sub-head, normal body text, small notes copy. Make sure each step is distinct enough from the others: a few points larger/smaller, perhaps bold or italic.

The biggest design hurdle may be knowing when to leave well enough alone. It's better to have a slightly spartan looking page that's readable than to go overboard with decoration. Let the content breathe with sufficient space, and you'll at least have a strong basis to make aesthetic tweaks later on.
posted by letourneau at 4:38 PM on June 30

Why worry about it?

Find one (or a few) graphic designers THAT UNDERSTAND THE WEB (not as many as one might think), and partner with them.

Do what you do best, and let someone else do what you need. I bet you'll find good designers that can't program, and you can play off each other's strengths.

Best wishes

Mike
posted by MTCreations at 4:41 PM on June 30

You're already doing the right things. Design involves a lot of trial and error. Willingness to work through tens or hundreds or thousands of iterations is often what separates mediocre designers from good ones. Read up on Frank Lloyd Wright or Charles and Ray Eames, and you'll learn that they were incredibly prolific -- not just in terms of what they completed, but also in terms of sketches, prototypes, and false starts they worked on along the way. The trick is to learn a little bit from each iteration, and feed that knowledge back into the design.

Two beginner mistakes to avoid:
- not going through enough iterations. it can always be better. you're never done.
- not learning from mistakes. You can learn something from every failed attempt. And when you're going through iterations, try careful, directed "baby steps" to test changes. Researchers only study one variable at a time, and the rest is kept controlled; you should try working the same way. You never know what a difference a move of a single pixel can make sometimes, but if you're making sweeping changes, you never notice those opportunities. Don't throw away your entire design unless you've discovered a completely brilliant approach that really requires a fresh start. Much better to improve your design incrementally, even when the progress seems maddeningly slow.

I'm sure that doesn't seem helpful, but I really believe that there are no shortcuts to good design. It's hard work.

When architects hit that "brick wall", there are a few tricks to get the juices flowing again. One is to jump to a different scale: if you were working on a space plan, switch to working on a construction detail or a site parking layout. Another is to flip through magazines for inspiration. Another is to seek more information from the client: design doesn't happen in a vacuum, right? It's a response to a problem, so work to understand the problem better and you'll find better solutions. If these are just exercises without a client or defined program/problem, then bounce your ideas off a friend. Design thrives on criticism. Another is to set it aside for a while and work on something else. You can always come back to it; let it stew in your subconscious for a while.
posted by Chris4d at 4:44 PM on June 30 [3 favorites has favorites]

The trouble I have composing a response to this question is that I don't really think of myself as particularly skilled at this type of design. I'm probably a left-brained programmer type, too.

So with that as a sort of disclaimer, when I have had to do this sort of thing anyway, I've approached it in kind of the reverse order from what you described. Which is to say, I start by trying to come up with the overall look or visual theme that I want first.

That would be things like the colour scheme, graphical elements (like the ellipse and stripe across the top of MetaFilter pages), and fonts, and maybe a very high-level vision of the shape of the page (e.g. "a list of some stuff on the left, a grid of some stuff in the middle"). I don't know how to explain *how* to come up with these, except to say this is where imagination and creativity have to be let loose. And some trial and error, too.

Only once the overall look is settled do I start to think about the specific elements that have to be there. But that is a more analytical process than a creative one, I think--how to make all the required parts fit into the template. I find this easier than trying to start with all the parts and then make something good out of them.

Hopefully someone who is actually good at this design stuff will post some more specific advice.
posted by FishBike at 4:52 PM on June 30

I've got three suggestions. The first is from design school. The other two should make sense to you as a programmer.
1.) Critique. Get some honest critique, preferably from designers who are very articulate. If someone doesn't like something, you want someone who can explain why. If someone does like something, that's nice, but probably doesn't help you improve.
2.) Set goals. That relatively experimental and undirected fashion? Keep experimenting, but evaluate your experiments on how closely they bring you to the goal.
3.) Likewise, define your problems. That brick wall? What exactly is it? Can you work around it somehow? Do you really need to start over?
posted by kidbritish at 5:08 PM on June 30

If you haven't read any of the Robin Williams design books, I'd give them a go for basic principles. (Non-Designer's Design book? Something like that.) Her work helps me to deconstruct why one design or another appeals to me. (Oops: re-reading, I see you know history & theory, but I'm leaving this in anyway.)

Try a step in between "list of elements" and "open Photoshop" -- pencil & paper or whiteboard & marker. I've even put the elements onto post-its and moved them around on a piece of paper. Something about the analog that helps me to be looser and more relaxed about what I'm doing.

A half-step from MTCreation's suggestion: find a designer who you trust, or even another web developer like yourself, and use them. Brainstorm together, or bounce your early versions off of them. I love brainstorming with my co-workers, who know the web only as users, but who have good design ideas, and I have a developer buddy who I trust to be honest but constructive as I work through different versions.

Design is something I struggle with too. Knowing my limitations helps me to be more patient and forgiving with myself while I work towards something better.
posted by epersonae at 5:33 PM on June 30

I've occasionally produced something decent, but only after agonizing over it for days and making countless false starts.

It's OK! Designers do this too. It's called, "The Creative Process."

I think you are on the right track and like kidbritish's list, which lays out everything I would have said. Everyone else has good advice, too. I can only add that practice is essential, as well as giving yourself inspiration. I make a point of regularly going out and seeing what others are doing. If I find something especially brilliant, I'll try to get into the designer's brain and see if I can deduce how they came up with it. This can be a danger - you don't want to be a trend whore, but being aware and inspired is beneficial.
posted by bristolcat at 5:44 PM on June 30

> If you haven't read any of the Robin Williams design books, I'd give them a go for basic principles. (Non-Designer's Design book? Something like that.)

Yes, seconding this. I liked the book because she gave me simple rules with memorable acronyms so that I could assess my designs for their

• Contrast
• Repetition
• Alignment
• Proximity

etc.

It won't make you a creative genius, but it's useful to reduce design to a formula/linear set of tests, so you can be left-brained about those things which are supposedly the province of the right-brained.
posted by AmbroseChapel at 6:07 PM on June 30

Why worry about it?

A legitimate question.

In cases where there's money to hire a designer (e.g., most of my paying gigs), I'm happy to leave design to the experts—they do a better job than me, and it allows me to focus my time and energy on the stuff I'm good at.

But I'm always working on little personal web projects, and they need to be designed too. I can't justify paying a professional designer out of my own pocket, but I still want them to be designed well—design is as much about function and usability as aesthetics.

Besides, I'm fascinated by the design discipline and would enjoy being more of a participant in the field.
posted by ixohoxi at 6:12 PM on June 30

I recommend Edward Tufte's books, any of them. "Envisioning Information" is my personal favorite. Analyze the examples you particularly like, and think about the author's method for organizing the information, above all.

After years of teaching Two Dimensional Design, one of the most interesting concepts to explore deeply is how other people organize information. The most difficult part of understanding any new system is figuring out how the person who designed the data categorizes information. If you can tap into simplifying the information as much as possible, graphic readability improves markedly.

And I assure you that there are lots of overconfident design school graduates that make hideous graphics, so don't underestimate your own capability.
posted by effluvia at 6:12 PM on June 30 [1 favorite has favorites]

I would say that the only thing you're doing wrong is looking for a formula or process that equals 'good design' (a very left-brain approach!). Creative work just isn't always that straightforward - I've been working as a graphic designer for years, and there are still projects where I go through endless iterations over the course of a few days before I find a solution that feels right. It does get easier with experience, but absolutely every artist or designer has a portfolio or two full of absolute crap from their early days. It's part of the learning process.

I generally find it helpful to start projects with a bigger-picture sense of the overall feel - is it refined & classy, clean & austere, or bold & energetic? Lots of smaller-scale design decisions will fall into place easily once you've decided this (fonts, colors, arrangements, etc). Starting with the small-scale stuff (as you've outlined above) can encourage you to get bogged down in the details way too soon.

Collecting inspiration around the web is awesome, and I've found it invaluable. Carry a digital camera to photograph things in real life that catch your eye - a striking color combination, a nice font on a sign, shapes, patterns, or even pages from photography or design books. It's always fun to start a project with a particular inspiration in mind, and having a library at your fingertips ensures that you won't be staring at a blank page.

Also, there's no particular magic in a grid system. Don't be a slave to it early on in the process, it's easy enough to line up margins and clean up structure once your larger moves are in place.
posted by Fifi Firefox at 6:36 PM on June 30 [1 favorite has favorites]

I like to think of myself as a fairly technically minded person. I've ony done a tiny bit of web design but I do a lot of motion graphics, 3d and fx design work, I spend a lot of time working with designers who may be more text and layout orientated.

The problem I think you have is that you have to have a vision in your head that your working towards. All the work and fussing about and actual "designing" should be realising that vision. You have to have a goals for your design otherwise your just fumbling around in the dark.

Come up with some goals. You may want it to look serious, be very functional, not too distracting. You may want to dazzle the reader, be exciting, attention grabbing. At a design or production studio a lot of time is taken to write treatments of this kind of stuff. If im working on an ad its not uncommon to get pages of writings on the "feel" of things and examples of what we are heading towards. It helps immensely to have a goal.

Instantly, as soon as you've thought a bit more about this your design choices start to be narrowed down. "I want a serious looking site that is intelligent, sort of like ????.com or ????.com but without that part" Ok I need very classic, readable fonts, subdued colours, this part of ????.com would work well...

Just as an example, have a look at the project planner here - http://www.happycog.com/contact/, particularly the "about your brand" section but the whole document is fantastic. Stuff like this-

Describe in as few sentences or words as possible the feelings you wish your site to evoke, and the brand attributes you want it to convey. (Sample feelings might include: warmth, friendliness, reassurance, comfort, or excitement. Sample brand attributes might include: caring, honesty, humor, professionalism, intelligence, technological savvy, sophistication, reliability, and trustworthiness.)

Using adjectives and short phrases, describe the site’s desired look and feel. (“Easy to look at, edgy, classic, up-to-date, crisp, modern, traditional, understated,” etc.)

This is stuff they get the client to think about before they even start so they dont spend lots of time doing what you are doing - fumbling around with no clear goal or end point.
posted by phyle at 6:55 PM on June 30

epersonae: "If you haven't read any of the Robin Williams design books, I'd give them a go for basic principles. (Non-Designer's Design book? Something like that.) Her work helps me to deconstruct why one design or another appeals to me. (Oops: re-reading, I see you know history & theory, but I'm leaving this in anyway.)"

I realise this is explicitly not the question, but I find myself in the same situation (minus the experience) as the asker, but without even the history and theory bits. Are there particular things that a (web) programmer should read in order to not put out embarrassingly designed (often personal) websites? (Directions to an appropriate askme or mefimail would be fine too!)

In response to the question, I doubt it's much help, but I find that the only way I can get designs I even sort of like is if I restrict myself heavily in some way (two colors, or one column, or what have you). That said, I suspect it might help if you described what sort of projects you have difficulty designing, if there's any consistent theme to them.
posted by pbh at 7:00 PM on June 30

I'm in fairly strong disagreement with a lot of what's been said here. [At least with what was said before I started typing; this got rather long.]

Throwing everything onto the page and then just sort of rearranging it and playing with colors until it looks good is a very poor design methodology. Almost the worst possible, in fact.

It's the one most people start with. But, as you're discovering, it doesn't really work very well -- it tends to lead to mushy, over-decorated pages that don't show a lot of coherence; and even on the occasions when you luck out and find something that does work, you don't get a lot of insight into why it works.

First things first: There are two equally important but almost entirely non-overlapping aspects of design.

The first half is more left-brain: here you want to make sure the page elements and controls are grouped logically, that the most commonly used ones are most prominent and vice versa, and most importantly that you leave out things that aren't necessary. (A useful exercise is to do an 80/20 filter on your feature list, then throw the 20 away and see if you've really lost anything.) It's also valuable to reuse familiar interface metaphors: look at other sites that have similar purposes to what you're building and see where they place things -- frequently you'll see a lot of similarity. Follow their lead: it's very helpful for your users if they don't have to completely relearn how things work just to use your site instead of a competitor. Often you'll find that the overall page structure will fall into place almost automatically once you've gone through this process: there are only so many different places you can put the top-level navigation; nearly everyone puts the login stuff in the same place, etc.

For non-trivial projects I always build a functional wireframe -- plain black on white, no real back-end functionality, but a collection of all the major page types with the features in their final position, that you can click through and get a feel for how it works. Don't move on from this stage until you can point at any individual element on the page and articulate to yourself why it is where it is. "Because it looks good there" is not good enough. ("Because there was no place else left on the page" is, but you're only allowed to use it for one element.)

Then, and only then, do you get to the "right-brain" look and feel side of design. You know where everything goes, now all you have to do is decide what it should look like.

It's more difficult to prescribe a methodology for this part, because it's less a matter of finding the right approach than of eliminating as many of the wrong ones as possible... but even here you can't just pick some colors at random and dive right in, not if you want good results.

My process starts by answering a set of basic questions about the site:
* Who am I designing this for? Who should it appeal to? What's the target audience?
* What's the overall "mood" of the site?
* If a user stumbled on the site by accident and hadn't read any of the text yet, what first impression do I want to give them?
* Which is the most important element on the page? Where do I want the user's eye to go first?

These sound like really dumb, obvious questions, but they're really helpful in narrowing down the otherwise infinite range of design possibilities. They can also have some subtle ramifications: for example, if your ideal user is eighteen years old, you can use teeny tiny grungy fonts, but if he's fifty, you'll want large, clear type. If you keep the answers to those questions in mind throughout your design process, you'll find you're dealing with a lot more trial and a lot less error.

My next step is usually to decide on an overall design strategy that answers all those questions. Without focusing too much on individual elements yet, come up with a broad concept: maybe I'll draw the user's eye to the most important element by making it the biggest; or maybe by making it brightly colored and everything else shades of gray. Maybe I need to clearly differentiate between page elements by giving them strong borders and heavy graphics treatment, or maybe the mood is better suited by lots of whitespace and no graphics at all. Maybe a grid structure is appropriate, or maybe I want to take a more compositional approach, use the golden rectangle or the rule of thirds. Text links or graphic icons? Buttons or links?

There's no one right approach, but if you do all of this while keeping the answers to those basic questions in mind, you'll be able to avoid a lot of wrong ones. And as with the interaction design, don't call it done until you can point at every element on the page and articulate why it looks the way it does. What purpose does it serve? If it doesn't serve an articulable purpose, you don't need it. Take it out.

The next step is to do that again, with a completely different design approach. And then again.

Then I show all three concepts to the client, and they choose their favorite. If you don't have a client, find someone who can give you honest feedback. (This is harder than it sounds.) Talk with them about why they chose that one and not the others, and learn as much as you can about what worked for them and what didn't -- this won't help for the current job, but it will for the next one.

Then, finally, I start plugging that design into the actual site. It's okay to change things around a bit at this point -- you might find elements from design B sneaking into design A, or new entirely new ideas showing up. That's fine, as long as you (again) can explain to yourself why they work, why they're better than what you had before, and why they fit into the current concept.

I guess that's my main point. It's not enough to make it look pretty; you've got to be able to explain why it looks pretty, and more importantly why it's usable.

Or if all else fails, just put dropshadows on everything. Everybody loves dropshadows.
posted by ook at 7:03 PM on June 30 [5 favorites has favorites]

A lot of this is helpful, but I'm less interested in design as branding (i.e., the edgy vs. traditional, bold vs. understated stuff), and more interested in creating websites that are as clean, uncluttered, and clearly presented as possible. You know how really well balanced sites almost look effortless and inevitable—like there's no other way the parts could have been fit together?

That's what I want to be able to create. No parts that feel crammed together, or arbitrary and inexplicable. I want a nice even texture, where the elements look like they're there because they belong there. Transparent design; design that you might not even notice because it does its job—to make the information it embodies clear and intuitive—so well.

If I can add some character through color schemes and typographic choices after the functional goals have been achieved, so much the better, but I guess you could say I'm more interested in the fit of the suit than the pattern of the material.
posted by ixohoxi at 7:19 PM on June 30

Or you can just read my above comment as "Tell me how to give my designs Zazz™!"
posted by ixohoxi at 7:33 PM on June 30

That's exactly why I suggest dealing with the structural and interaction design separately from the look-and-feel -- too many novice designers jump straight for the eye candy and end up doing the structural stuff in an accidental, unplanned way.

(But beware of thinking of the look and feel as "just" branding -- it's equally important.)
posted by ook at 7:39 PM on June 30

I haven't designed a whole lot of websites, but when I have, I've always started with the color concept first, then built the designy bits around those colors. I tend to think about the content of the site, & the character of the organization it's for, & decide in my head (before even touching Photoshop or Illustrator) on a 2 or 3 color scheme as a starting point. Like, for the anarchist bookstore, I chose a black background with red text, and a kind of darkish blue-grey as an accent color. The layout sort of fell into place after that. They loved the first submission. No revisions. (anarchists are predictable though, design-wise -- just a blatant example)

When I designed the site for my old shirt printing company, I wanted to emphasize the fact that we were a good halftone printer, so the fade behind the logo at the top was a light grey to dark grey 20-line-screen dot pattern.

In the long run, you really need four main colors -- background, text, link text & some sort of accent for elements. I think if you can set the color scheme first, it makes a solid foundation for the rest.
posted by Devils Rancher at 7:54 PM on June 30

Design is notoriously one of the most difficult things to teach or learn, and I suspect the utility of AskMefi answers in this regard is pretty limited. So, I'll highlight some things that have been mentioned which I believe are valid:

1> Learning how to design takes a lot of practice, as in years. Most of the folks I think are very good at it have decades of practice. So give yourself time
2> You need goals and evaluation so you can learn from your efforts. The best evaluation comes form unbiased third parties. Getting your design critiqued can be rough, but it is the best way to learn.
3> Don't try to design in Photoshop, especially for learning. Learn how to test ideas quickly with paper and pencil.
4> Iterate quickly. Spend no more than 5 minutes on a sketch of an idea, then move to something completely different. The comment about jumping scale is a good one.
5> Don't be shy about borrowing heavily from design languages you like, especially in your learning. Acknowledge what you are borrowing and why, but don't avoid things that work just because you didn't invent it.
6> Get design training, preferably in two dimensional graphics and art, and preferably not with a focus on computer or website design. Look for cross pollination opportunities.
7> Get a peer group, possibly through some of the above steps. Find others also looking to improve their design skills. One great thing about artistic practice is it lends well to a 'dojo' environment. You can all be at quite different skill levels and still share and learn from each other.
posted by meinvt at 7:56 PM on June 30 [1 favorite has favorites]

I was going to post a long, long answer then (on preview) ook's awesome answer said it much much better than I would have. So there.

Really, though. Design is pretty much a left-part-of-the-brain issue, it's about solving problems and creating solutions; although important, the "aesthetic" part of it is, aptly, just "a part". Many skip the design entirely and go for the eye candy, but I snarkily call that "decoration".

Once you can find your way on a grid (which web designers seem to have discovered just a while ago) and you're able to put on a page a clear vision of what goes where (and most of all, why), you're more than halfway down the road.

Proof: often well thought, extremely minimalist designs work so well and are so clear that they get to have an intrinsic aesthetic quality to them.

The opposite (think the cluttered, flashy, basically uncomprehensible, over-the-top and overdecorated futuristic designs from the early '00s *cough*two*cough-cough*advanced) is rarely true.

(and yes, not even a pro is immune from endless agonizing on drafts)
posted by _dario at 8:10 PM on June 30

Just one caution about Tufte's work: A lot of his work is from the perspective of print design, which assumes greater-than 300 dpi resolution. On a computer screen, you have no idea what DPI you're working with. 72 dpi is pretty common but really, who knows? There's been a fair amount of criticism in this vein, so take a look at that along with the Tufte books/artlcles.

Otherwise, yeah, what Ook said.
posted by Alterscape at 8:29 PM on June 30

Here's a somewhat vague suggestion that might not be helpful at all.

After you clarify what the site visitor is supposed to do... (come away persuaded of something? submit an email address? buy something?)

And figure out the mood that will encourage the visitor what you want him/her to do...

Survey the blank page...

Defocus your eyes so you can more easily hallucinate blobs of color and shape...

and just start feeling out what colors and blobs and shapes go with the mood you're trying to create.

Minimize your internal dialogue and subtle sub-vocalizations by keeping your tongue flat and motionless in your mouth.

Keep your eyes defocused, yet pointing toward the page.

Imagine colors and shapes pouring into the page.

Notice the feeling you get from them. These feelings will probably be vague, subtle, and easily dismissed or ripped apart by the slightest questioning or analysis... so don't do any analysis or thinking yet. Just let yourself notice that there are feelings evoked, prior to wondering or understanding why they might be evoked.

Then stop, jot down notes about what you let yourself see... and toss out everything but the three most striking elements. Again, note what remains.

Now put those notes aside, and repeat the process a few more times, using different colors and shapes each time.

Do this a few more times, so that you get more and more comfortable with realizing that you naturally and automatically already are getting a feel for a page before you start breaking it down into its components.

Once you prove to yourself that of course you feel something before you understand why it works, then you can start to see how you can design things by letting possible combinations splash together.

And once you've done that, then you can start formalizing and explicating, looking for the rhythm of stylized repetition, and the various categories and filters and principles named by others above. (One design-y way of looking at things is that any given design is really about one single and often small element, or one single contrast between two small elements,-- one "idea"-- that just plays out again and again at larger scales, along different vectors, or at different intensities.)
posted by darth_tedious at 9:19 PM on June 30

ook (and maybe others) made a really good point that should be stated again for clarity: you should really be able to verbally explain every decision. That's not to say that you need to have a reason for everything before you do it -- you may have a flash of intuition or a lucky coincidence that wasn't pre-planned at all, and have to study it after the fact to find a way to explain the logic (sometimes this feels like bullshitting, but it's a good exercise). When you seek feedback from clients or colleagues, you should be able to engage in a dialogue with them about every piece of the design; talking about and defending your ideas makes them stronger.

The finished work, of course, should be almost self-explanatory; that's the essence of clean, effortless, and functional. But getting to that point takes a lot of explaining :)
posted by Chris4d at 7:20 AM on July 1