Method of Action

our blog!

Learning made enjoyable

Method of Action is peer to peer education for people who want to get things done. Learn by doing, participating and teaching.

You're already a pretty good designer

by Mark on July 27, 2011 8:17 PM on Design

I'm a seasoned hacker that is able to tackle immensely complex problems with aplomb. I'm able to untangle spaghetti code and weave it into beautiful patterns. I envision systems and code them with the same grace a jazz pianist improvises music.

But I can't design for my life. Please help.

I've heard this story a couple of times in the ten years I've been working with programmers. Programming is a damn hard craft to learn. My mind is blown by the level of complexity software has achieved given the basic elements of programming—variables, conditions, loops, functions and objects. At times, it feels like you have a quarry, wood, rope, a saw, and a chisel and then an architect asks you to build a cathedral.

The programmers' approach to building a cathedral would involve using his tools and raw materials in order to build more advanced objects. Let's imagine the work of this craftsman: he'd grab some wood and stone in order to create a hammer, then he'd devise some pulleys to get rocks out of the quarry, he would build platforms and scaffolds to reach unaccessible places, he'd fabricate a crane to stack the stone, and so forth.

Our craftsman follows the architect's plans religiously, and painstakingly chisels every stone so that every brick fits in perfectly. He polishes the wood into a huge sculpted door that would accommodate God himself. The massive columns wouldn't fall in a thousand years.

Once finished, he steps back and mesmerized by the beauty of it all, he thinks 'Hey, I built this cathedral all by myself, perhaps if I tried designing my own cathedral I'd get all the praise, instead of this lazy hack who just handed me the layout and waited for it to be built'.

Of course, when a programmer first tries his own hand at designing, he will likely notice that it looks pretty clumsy, there are a couple of reasons for this, but—all in all—the odds are stacked in his favor. It is absolutely necessary to identify the shortcomings of the programmers' mindset in order to overcome these obstacles. Later on I'll detail what works out in his favor.

1. Being familiar with the implementation difficulty encourages compromises

I'm a designer by trade, I have a degree in Information Design. But—as often happens— ignorance instills confidence, and I jumped into programming expecting it to be a challenging hobby, but it actually sucks you in and you come out a different person. I'm not a competent programmer by any measure, but it is an activity I enjoy throughly. I've built memela.com entirely on my own, you can also see my portfolio. Here is my StackOverflow profile. The paradox of learning is that the field is just so huge that you must admit you're not able to master it in your entire lifetime.

When I first started programming, I'd start sketching a general idea on paper, and when I'd grow bored of it, I'd jump into Textmate and bang some code. Sometimes I'd encounter that a particular feature was difficult to implement, so I'd go back to my sketch and rework it so it was easier to implement, even if the user experience suffered in the process.

This, I think, is the biggest mistake programmers make when designing their own products. This is a form of technical debt that is incredibly expensive if done repeatedly, but it's very tempting when you've been struggling with a particular problem for some time.

Nowadays I separate the designing and programming phases completely. I start by sketching on paper, then create a pixel perfect mock-up and then I finally start programming. If there is something that I find hard to implement, I ask for help, making me a better programmer in the process.

The equivalent of our medieval craftsman would be noticing that the doors of the cathedral are a lot of work, so he replaces it with a standard sized door. Soon enough the cathedral is inaugurated and there's an unsurmountable bottleneck when the crowd tries to enter the cathedral.

2. Data modeling clouds your understanding of use cases and tasks

Nailing the data models is the hallmark of a competent software architect. It sets the foundation for clean, understandable code. Unfortunately, it also provides a data centric view of the entire project; and when the software architect designs the graphical interface, it looks a hell lot like the models with a CRUD interface slapped on.

Programmers get a lot of unjustified heat for designing these kind of interfaces. Very few people understand why data modeling shapes a very strong mental model of how the interface should work. This problem is often painfully obvious in backend administration systems, where the programmer is left on his own because designers are busy on the public side of the application. Often programmers rely on automated admin tools because—despite being a crucial component—clients don't want to pay for it.

The key to escaping mental model contamination is thinking in terms of use cases and tasks. Whereas duplication and redundancy are the bane of good data models, it often is the opposite for use cases. In some supermarkets you will find mayo next to the tuna, a cereal island next to the milk refrigerators, and Clamato next to vodka (as well as in the usual places). Let me use information where I need it, not where the data model dictates it should be.

3. Most design is written about and taught from the perspective of art

When I was younger I would ask people how to dance, they would often suggest to "feel the music". Once you feel the music you can start moving your body along with the rhythm, or so they said. "Just tell me how to move my feet and my arms", this would invariably turn out wrong, because I'd just flail my arms at my own pace. A sad spectacle that I'd prefer to forget.

It wasn't until the Rockstar type of games started coming out that I finally understood what they meant by feeling the rhythm. There is a bass that marks the predominant rhythm and some other instrument that marks a secondary rhythm. You pace a range of pre-defined movements to these instruments and boom, you're dancing half decently. But alas, this revelation came too late and I'm still a terrible dancer.

Perhaps you have already asked a designer where to get started with design. I'm pretty sure his advice was to observe things carefully, notice the details, copy things you like to understand how they work. This is good advice, but it's the same thing you would tell someone learning how to draw.

This is what I call art oriented advice and it's the same kind of advice I was being dispensed when I asked how to dance. It's useless to logical minds because when you like something you just don't know what you're supposed to be looking at. It comes naturally to people who have some art experience because they are used to observing proportion and balance.

People often make of design some sort commercial spawn of art. It is not. Design is a discipline in itself, related to engineering, that uses some of art's syntax (in the case of visual design). It is different from engineering in the sense that engineering looks after the efficiency and robustness the product, and design looks at the interaction between the product and a human being.

Now, let's get to the good stuff:

You are already a pretty good designer

If you have been programming for a number of years, you probably have very good design and architectural coding skills. These skills are connected to visual design at a high level of abstraction. The connections are so strong you can face off two masters of their own field and it will make sense to senior designers and programmers alike. In fact, I'm going to face Edsger Dijkstra against Charles Eames .

Design depends largely on constraints.
The ability of discerning high quality unavoidably implies the ability of identifying shortcomings.
Innovate as a last resort.
The competent programmer […] avoids clever tricks like the plague.
Who ever said that pleasure wasn't functional?
There should be no such thing as boring mathematics.

Everything you already know about design and architecture in programming can be applied readily to visual design, with few exceptions. The problem is that your skill set is domain specific. You don't have the bridge to apply what you know about software design into visual design.

You are already creative

Perhaps you have bought into the bullshit that creativity is a state of mind, an eureka moment that bursts into flash of brilliance to produce something that has never been done before.

I'd go as far as saying that the popular conception of creativity is actually harmful to good design, as it relies on established conventions in order to function. There is a time and moment to innovate, but it should never be done for innovation's sake.

Creativity is being able to create things. Objects that can be shown, discussed and built upon. In this sense programmers are much more creative than many so called creative professionals out there.

Your systematic mind can be used to your own advantage

One of the most difficult concepts to teach young aspiring designers is the ability to think in systems. If I requested a button in 99designs (without more context), people would jump at the chance of creating shiny realistic buttons. You probably know what is wrong with this scenario: you can't design a button without knowing how the rest of the design looks.

This is something that takes many years to mature in a designer, because the relationship between visual elements is not as obvious as it is in code. I'm not only talking about consistency, but the profound understanding that each element competes for attention, and that by making an unimportant element "shine" you are detracting from the rest of the elements.

You already have attention to detail

In a scale from 1 to 10, how sinful is choosing a poor name for a variable? Now, in the same scale, what number would you chose for code where every variable had an awkward name?

This is attention to detail. Knowing that the details make the product itself. I'm constantly amazed by the discipline of some programmers, their code is carefully formatted, comments are succinct, and the structure is evident by just looking at it.

So, how do you get started learning design?

Design education is quite different from other disciplines. It needs to be so, because design is concerned as much with skill acquisition as it is with knowledge acquisition. It is project oriented, because that is how design is professionally articulated. Design is not subjective, as people often say, it's meant to solve a problem, and the problem may have different solutions, some better than the others.

The actual structure of design education is centered around the design critique: the teacher explains some concepts, then asks his students to articulate something visual around those concepts adding some constraints, and then the final work is discussed as a group.

The actual critique mechanics are quite interesting. Every student lays their work on a large table, and the teacher will chose one, and ask other students what they think about it. At this point, authorship isn't important. It's likely the teacher and his peers don't know who made it. The objective is not criticizing the student, it's criticizing the piece of work. So a student volunteers an opinion, and the teacher validates it. After a small round of opinions, the teacher gives some insight and moves on to the next piece.

I've been thinking long and hard on how to replicate this experience online in a way that scales. I'll extend it to other disciplines, but the initial course will be on design for programmers. If you are interested sign up to be notified when we launch, or just follow our Twitter. We will be writing more on this blog about the relationship between design and programming. Keep tuned.

Update:

This got picked up by /r/programming. The course will be free, and here are the mechanics:

  1. There will be progressively more difficult missions. So you start by designing your own business card, then a logo, then a letterhead, and so on.
  2. You read the related content, so in the case of a business card you'd read on alignment, balance, typography and the specifics of business cards.
  3. You submit your mission for review, more experienced users decide if they approve or fail your mission. Approving missions gives you access to more difficult missions (i.e. designing an icon)
  4. Once you're advanced enough, the easiest way to gain access to the last missions will be reviewing the work of new users.
  5. I make money recommending related services. So, if you'd like to print your business cards online, I get a cut.

48 comments

alx359
July 28, 2011 1:20 AM

Very good piece. Apart of design and programming, you're a very clear and articulate writer. Kudos and lets inspiration keep flowing!

Anónimo
July 28, 2011 1:58 AM

Nice piece.

Talking of attention to detail... the "follow our Twitter" link is bad.

Chris
July 28, 2011 2:15 AM

Actually so is the "sign up" link.

Rob Boyle
July 28, 2011 2:20 AM

Awesome article. As a programmer, I think you perfectly captured the common pitfalls of programmers-turned-designers.

Susan Feng
July 28, 2011 2:29 AM

Very nice background color on this web page. Please publish some articles about Visual Basic design concepts.

Alex
July 28, 2011 2:35 AM

So is the sign up for notification link

July 28, 2011 3:18 AM

This sounds awesome! I would love to take design lessons, especially if they are free.

Here are the correct links, for anyone else who visits this page:

* Follow on twitter: http://twitter.com/#!/methodofaction
* Sign up to be notified: http://method.ac/

July 28, 2011 4:12 AM

I couldn't agree more... one thing I always try and encourage younger designers to do is to learn how to at least understand how HTML & CSS work.

Even if they aren't programming languages, per se, I've noticed that when designers understand how their design will finally be implemented, they design differently than they would have given a completely open palette, and that understanding yields to better product development.

July 28, 2011 5:40 AM

This article describes me exactly, reassuring.

I'd add to it that to learn one has to actually do, too.

July 28, 2011 5:59 AM

This is why there are so many bad web designers out there. Good web design requires both programming AND design skills and this does not come by often.

July 28, 2011 8:43 AM

That was an amazing piece and you really reframed the topic in a way that made me feel better about my own work. I've been struggling with the concept that the latest hiring practices involve finding programmers who are ALSO designers. I don't think I'm very good at design, but I think I'm okay at it, this article sort of explained why. Thanks for helping me start the day on a positive note.

July 28, 2011 8:44 AM

Author here, thanks for the notice on the follow/notification links, they are fixed now.

July 28, 2011 9:42 AM

Awesome piece! Awesome project! : )

Kelly
July 28, 2011 11:30 AM

I just wanted to say thank you for this article. I recently posted this exact same question to reddit as I program all the time but have no confidence when it comes to design.

Fantastic post!

July 28, 2011 12:32 PM

Nice article, very applicable to me. It's true that programmers don't realise what design skills they already have, or lack the confidence to use them properly, and it's great that you're helping them to change that.

john
July 28, 2011 12:39 PM

Great article, thanks :)

Theodore R. Smith
July 28, 2011 2:36 PM

By "design" do you mean software architecture (as your text seems to mean) or "graphic UI design" (as everyone on reddit seems to think)?

In any case, the general consensus *everywhere* is that "design" means UI and has nothing to do with architecture. At the very least, please clear up the ambiguities at the beginning of your post.

July 28, 2011 3:02 PM

Theodore: the point of the article is that—at a high level—they are the same thing.

Anónimo
July 28, 2011 8:04 PM

correct technical debt link: http://en.wikipedia.org/wiki/Technical_debt

July 28, 2011 10:50 PM

Great post, one of those I will read several times in future. Thanks Mark!

Timmah
July 29, 2011 2:03 PM

I'm not trying to be a hater, but I read this article and I think it's mainly hogwash: "It is project oriented, because that is how design is professionally articulated. ", cmon. what is that supposed to mean ?

I agree that drawing a neon green button on a black and white panel is dumb, but this seems like you're deluding yourself and getting lost in the "elegance" and "feng shui" of writing code, as if it's some form of art like building a $50k violin.

I also agree that you do something and see what is wrong with it, and learn to do it better, and that programmers don't know design out of school, but this isn't something that can be taught. I get the feeling that after Apple turned into this behemoth, everyone is getting obsessed with "design" thinking it's some holier than thou position to be in. Maybe true in architecture, but not computers. sorry.

July 29, 2011 2:37 PM

Timmah:

I hate when people say something is "an art". It's a shortcut that really means "I'm too lazy to explain it or think about it. It just comes out of me". Programming and design are not art.

The article reads like Feng Shui (god, I hate feng shui) because I have to abstract to a higher level to make it evident that visual design and software architecture are closely related. I will bring it down to a very practical level, you are welcome to stay and find out if I'm bullshitting you or not.

You are somewhat right when you say design can't be taught. You have to do it yourself and then get feedback, and that's what this project is all about.

Oliver Crow
July 29, 2011 5:50 PM

Great article. I was a bit surprised that your discussion didn't touch on usability engineering at all. That practice while related to design is not included under traditional graphic design training. Like your article, the user experience design and usability communities have made significant strides towards bridging the gap between graphic designers and programmers. Furthermore they have drawn attention to the areas necessary for good user interactions that are often overlooked by both programmers and designers, such as usability testing and providing meaningful user action feedback.

Trained as a programmer, I found Robin Williams book, the Non-Designer's Design Book, to be a useful and accessible introduction to the graphic design discipline. I'd be interested in learning more. Sadly both the sign-up and Twitter links at the bottom of your article are still broken.

Oliver Crow
July 29, 2011 5:52 PM

I take it back ... the links work now.

Timmah
July 29, 2011 7:30 PM

Thanks Mark. I would like to see the parallels you can draw between visual design and software architecture.

Adrian
July 31, 2011 11:23 AM

This sounds awesome. I would sign up for this in a New York minute. Please keep us posted.

Thanks.

Margaret
August 3, 2011 12:40 PM

Will it be open for spanish speakers as well? Can anyone participate?

August 3, 2011 12:51 PM

Hi Margaret! We will launch in English only, Spanish will come later. Yes, anyone can participate

Héctor
August 4, 2011 11:22 PM

Mark esta de bolas! yo me apunto donde se firma o que onda?

October 15, 2011 1:43 PM

This is one of the best theoretical/process articles I've read in a while. Thanks.

Kieran Hackney
October 19, 2011 10:47 PM

That is a one great concept! Btw. Anyone knows about a place for designers–want–to–be–programmers, or is it planned too? ;)

October 31, 2011 5:48 PM

hmmm don't agree, I'm not a good designer. A good designer is like a musician who can easily play and hear music, and I can't, it's a inherent talent thing at least partly IMO. Which is an old, old debate. The worst programmers or designers on average I have worked with are the ones who try to do both - just like the fighter/mage class in AD&D ;) Interesting article tho.

December 29, 2011 12:21 AM

jaja, sos bueno compadre!., me apunto. Interface design is the hardest part in the software development, and the best way to sell the final product,.., great! congrats!

January 24, 2012 4:38 AM

This is so promising! Thank you :)

Cole Levi
January 24, 2012 8:04 PM

Great article. I'm looking forward to taking part in this class!

January 25, 2012 2:05 AM

MIND = BLOW

Nicholas Rogé
January 25, 2012 2:21 PM

You have my attention.

January 25, 2012 3:17 PM

This reminds me of a great book on similar topics by Paul Grahm called "Hackers & Painters" - Very similar concepts discussed and so true.

Definitely worth a read here is link (don't mean to be "spammy")

http://www.amazon.com/Hackers-Painters-Big-Ideas-Computer/dp/1449389554/ref=sr_1_1?ie=UTF8&qid=1327522352&sr=8-1

Guill
January 28, 2012 6:07 AM

Exciting!

February 10, 2012 1:40 PM

Há certamente uma série de particularidades, como que para ter em consideração. Que é um grande nível para levar para cima. Eu forneço os pensamentos acima como inspiração básica, mas claramente há questões como o que você entregar até o local um importante fator pode estar trabalhando de boa fé, honesto. Eu não me sei se melhores práticas surgiram coisas redondas como esse, mas tenho certeza de que seu trabalho é claramente reconhecido como um bom jogo.

March 6, 2012 5:58 AM

I can't wait!

Roberto
March 7, 2012 11:44 PM

Mark, nuestro amigo Wucius Wong estaría orgulloso de ti. "La creación no debe de ser simplemente estética sino también funcional" He de decir que en lo particular la mente lógica tiene gran beneficio en el diseño, el saber que algo tiene que proponer mejor resultados mediante el analizarlo me trae a la mente por ejemplo el diseño de interfaces e interactividad. Esto va a la lógica de la implementación, a lo bello de lo estético y a la funcionalidad de la mente racional.

Me da un gran gusto el trabajo que estas haciendo con Maria. Mucha suerte en su proyecto y un saludo mexicano.

March 17, 2012 12:14 PM

I haven't really studied for the exam... maybe later. XD

Stanly
March 17, 2012 11:14 PM

I don't know if you guys don't already realize this. Design is very left-brained. Lot's of logic and problem solving involved, so you folks are already prepared for that. However, great design, needs that artist experience, which is why creative people are sought after.

Millie
March 27, 2012 9:34 AM

I studied some musical stuff in highschool, also I love drawing... and now I'm studying computer science.
PROGRAMMING + ART = AWESOME

Sarah
March 30, 2012 12:40 AM

I love graphic design, even if I won't go into it for a job. While I have a slightly more art-oriented mind than logical, I love the logical-feeling vectors often used in design and wonder how they were made(I know how to use Illustrator in a very basic sense, but not nearly in professional use). The design class I took in high school was VERY art-oriented, not much logical thought involved, especially because we mainly learned the stuff of the business end of the industry(Time constraints, clients, etc.). The kids who weren't very creative(And usually had lackluster art skills) couldn't survive in it...it's a sad sight, really, as even the most logical of people can be very creative.

I really can't wait to see this program, since I'd like to see a more...logical and almost mathematical view of design. I never saw design in an artistic light, so a more straight-up and less art-oriented venue may work better with me. :D

June 22, 2012 7:32 AM

Everyone who doesn't agree with this article should read design books from some of the greatest designers of the last century. For example; the grid system by josef muller brockmann.
Or take these two free e-books:
http://www.lonegunman.co.uk/2009/01/26/typography-and-design-two-free-ebooks/

Design is about usability and solving a visual problem in the most efficent manner. Actually, art and design used to be the same thing. The conception that art is for gifted people is a lie for uneducated. To make good art you have to inderstand why art is art, and to understand that you must read a bit about art history.

Glonim
July 3, 2012 3:25 PM

I made visual artwork before using my classical art training to learn graphic design on my own. Now, I'm thinking about studying computer science in college just to compliment my design skills and overall am looking forward to the online program the people behind this blog are making.

Write a comment