Fog Creek Software
Discussion Board




Can engineers learn web/visual design creativity?

Is it possible to learn the creative aspects of web design, or do you need to be born an artist?

At work I'm part of a team of programmers, and I program (anywhere from the GUI to the database design at different times) web sites and pages - someone else creates the graphic images and designs the style of the pages. I also have had a variety of personal web pages/sites over time, and I sometimes help out family and friends with web pages. My training (and aptitude) is in engineering, not in an artistic field, but I would like to improve my web design/creativity skills a little if that's possible.

Years ago, my work involved writing Windows applications, including the GUI; I did reasonably well with the GUI style for those, but there were fewer variables - there are well-accepted user interface styles for various types of Windows applications, the colors come from the user's current selected Windows color scheme, etc. I learned a lot from Microsoft's guides for Windows user interfaces and from authors such as Alan Cooper.

However, with web pages, I struggle with the visual design/style. I know the technical details very well - I can write the necessary CSS, DIV's, tables, etc, etc to exactly match almost any page that I have seen (or, obviously, I can view the source and just copy the details) or almost any page for which the visual style has already been designed.

But, I don't want to exactly copy other pages, I want to use them as inspiration and create my own styles using some of the same concepts. Whenever I try to do this, the page that I create looks "clunky" (for want of a better word) or harsh even if it has broad similarities to a professional page. For example, I might see a page that has a title "banner" with a blue horizontal stripe containing the site name followed by a thinner pale orange stripe separated by a small amount of white space - when I try to create something similar, the colors I pick don't seem to match as well, or even if I use the exact same colors, I have more or less text in the first stripe and it doesn't look balanced or I haven't used the exact same text size and it makes the bars out of proportion, or something similar. This example probably doesn't explain the issue - I'm not looking for specific help on how to design this particular striped header, I'm looking for more general page design and style techniques.

I have read several of the typical web-design and user-interface books (books by Jakob Nielsen, Joel's book, web design books, user experience books, style guide books, Donald Norman's book, etc) and I learn some things from each book. I have also examined a lot of good sites (and some bad sites) on the web to try to learn more. I still seem to be far from being able to create my own good visual designs for web pages.

Is there anything else I can do to improve my visual design skills, or are most engineers doomed to never be much good at visual design?

engineer looking for artistic skills
Wednesday, April 02, 2003

First, buy a color wheel.

Second, keep reading.  There are "rules" for design, learning them will not necessarily make you great at design, but they'll help you to not be a lousy one. I'd recommend some book, but I'll be darned if I can remember any of them, although the title "Design Literacy" seems to spring to mind for some reason.

The only other recommendation would be to play around on paper with different themes and elements.  Don't try and make it look like the finished work, just do some rough drafts to get an idea of what might look nice together as far as shapes, text sizes, and what not.  You'll find out the sort of stuff you like after a while.

Once you get a library of stuff you like, feel free to mix and match elements from the different designs and get an idea of what works and what doesn't.

Have fun, and don't worry about it, you're just doodling after all.

I'm not a designer, but after working with several graphic artists, I can crank out a not ugly design now.  It's usually good enough for the purpose, and if it's not, that's what graphic artists are for.

Steve Barbour
Wednesday, April 02, 2003

First:  Yes, of course they can.  This is like asking if mathematicians can learn how to paint.  Learning one thing does not preclude a human being from learning another.

I'd recommend a trip to the local library for books on this subject.  There are plenty of them out there, and they can help tremendously.  That's what I did, and I think my web design skills are improving.

Brent P. Newhall
Wednesday, April 02, 2003

Try taking an art or graphic design class. Practicing and getting regular feedback may be more productive than reading books.

Beth Linker
Wednesday, April 02, 2003

I agree with Brent, to a point.

Yes, anybody can learn to be a great graphic artist, just like anybody can learn to be a great programmer. But it's not easy, and it won't happen by reading books (no matter how many of them you read).

You need practice working in a visual medium. You should pick up a pencil and some paper and start teaching yourself to draw. The absolute best drawing book on the planet is "Drawing on the Right Side of the Brain" by Betty Edwards (ISBN #0874774241 ).

The idea of the book is that people are so used to looking at objects symbolically rather than visually. That's why children draw people as having a round head with dots for eyes and a curved line for a mouth. They're drawing a symbolic representation of a face, rather than a visual representation. As an adult, drawing can be frustrating because you draw things symbolically but then evaluate the merit of those drawings visually. For example, even as a (somewhat) practiced artist, I find it very difficult to draw a realistic face at an oblique (or three-quarters) angle. I can draw profiles, and I can draw a face straight-on, because I know (symbolically) where the eyes and the mouth and the nose all go. But if I try to draw at an angle, the proportions change in such a way that I have to drop my symbolic expectations and work from a purely visually. And I'm not good enough to do it.

Drawing on the Right Side of the Brain takes a systematic approach to teaching you how to stop drawing symbolically and start drawing visually. It's a great read. And I think it's really effective.

Of course, why in the world am I suggesting that you learn to draw when all you want to do is design slick web pages? Drawing stimulates the visually sensitive areas of your brain. And that's the same part of your brain that does web design.

So learn to draw.

Benji Smith
Wednesday, April 02, 2003

By the way, I think I speak from experience as someone who feels very comfortable with both visual art (and graphic design) and programming.

A few of my designs:

http://www.xxagg.com
http://www.xxagg.com/inshift
http://www.daryntufts.com
(I also did all of the programming for these)

And my visual arts portfolio (including drawings & paintings)
http://www.xxagg.com/benji

If you like my style, send me an email with links to your web design projects, and I'll be happy to give you a point-by-point checklist on how you can improve them, from either a visual perspective or a functionality perspective.

Benji Smith
Wednesday, April 02, 2003

Engineer -- My belief is that if you are sensitive enough to at least be able to tell a well-designed page from a not-so-well-designed page (e.g., one of your own), then you'll be able to develop a better eye and a facility for designing well yourself, though it could take a lot of work.

It's the person who can't even tell the difference between an aesthetically pleasing design and a not-so-pleasing design who I would say is doomed to failure.  You've got to have enough visual sense to bootstrap yourself upward.

Also, some people think they have a good aesthetic sense when they really don't.  (These are the people most commonly categorized as having "bad taste".)  So you may have to learn to user other people's opinions as barometers of your own.  If someone who's widely acknowledged to have good visual sense tells you that you don't, you'd be well advised to listen.  And if lots of people whose judgment you trust tell you that you have no visual sense at all, even though you think you do, you'd be well advised to start seriously questioning your own judgment. 

Herbert Sitz
Wednesday, April 02, 2003

I can totally relate to this.  It seems like all of the web pages I create have a primitive, unprofessional feel to them.  I understand (mostly) where to put things to make a good UI, but I just can't seem to make a nice looking web page.

One-Armed Bandit
Wednesday, April 02, 2003

Incidentally, good web design has very little to do with good web usability (though you should strive for both), so knowing, in general, where to put things on the page doesn't really help contribute to good aesthetics.

If you want to be a good web designer, you have to become (at least to a certain degree) an artist. As an artist, there are some definite guidelines that get you going (form, color, texture, line, etc.), but in the end, you need to be able to say "That's ugly. And that's not ugly." And you need to know how to take ugly things and make them not-ugly.

And to do that, you need practice.

Like I said, grab a pencil and some paper and get to work. (Or, if you want the fast approach, hire someone who's already good at it, and stop worrying about becoming a Jack-of-all-trades).

Benji Smith
Wednesday, April 02, 2003

I'd recommend The Non-Designer's Design Book, by Robin Williams (no relation, female) for basic graphic design principles.  I see she's also put out The Non-Designer's Web Book.  Haven't read it, but I'd tend to trust her.

Colin MacDonald
Wednesday, April 02, 2003

I had (well still have) similar issues when I first started designing web pages as well. I knew technically how to do them but somehow mine never had the same "polish" as the professional ones I saw out there.
I did a few things that helped that did not involve reading countless number of books (I am a slow reader).

First I got my wife to review my design. Even though she is not an artist, my wife is clearly more right brain oriented that I am . That helped a lot. After making a whole bunch of small iterations, she was able to guide me in the right direction with what worked and what didn't.
Second, I made many iterations and spent lot of time on them. That's where the Pros have an edge on us. They probably went to school for a few years during that time they probably spent countless hours just practicing little graphics details that we take for granted. For example, look at the curriculum for a design course of a local design school http://www.eciad.bc.ca/eciad/degrees/communication.html
You will see courses like "Design for Motion", "Typography" so on. Man they spend a lot of time on typography!!
Now on top of this great background, they have a full work week to work on that stuff while most of us probably have a few hours at night here and there.

Finally, don't forget that the grass always look greener on the other side of the fence and you are probably more critical at your own work then you are at other people's work.

S
Wednesday, April 02, 2003

Engineer,

I designed and programmed www.waterlogic.com.sg.
If I summarise all my experience into a single advice, it will be: observe, and learn how the good ones did it, then do it yourself; just like how we learned many of our programming skills.

Good solid graphic design is often the application of many different basic designs. Just like how a good solid application is the composite of many different basic 'design patterns'.

Horowitz once told Perahia, '...to be more than a virtuoso, you must first be a virtuoso...'.


.rex

rexguo
Thursday, April 03, 2003

Reading books, and learning to how draw and such is ok, but it's exact parallel is telling people how to construct "if/else", "for/while" and whatever other flow operaters and saying "keep practicing, in time, you'll be a programmer"...

It's not "wrong", but...
With the basics and time, the rest will happen with raw determination. But everyone will tell you that it'll help you see the light faster that when someone shows you how to "do", they tell you how to "think" as well. This is not very well conveyed through books.

Art is a process. It has a way of thinking. If you can think the certain way, then the rest will be a simple act of doing. Like coding... if you can visualise the design path, and how it's all fitting together, all that's pretty much left to do is typing. Design is quite the same, but you wont get there without knowing how to visualise. There are those times when nothing comes to you, and you have to rely on experience to drag you through by the gonads. Same for coding and design.

This is where schools and instruction comes in. A good design teacher will show you the path to the thinking game of design. I'd actually start out with some crazy loony art teacher that's commonly a wild wooly and free designer to show the creation process, then go to some other place to learn the technique.

This is what a graphic design school does. You'll have crazy classes of pure creation, these mixed in with doing the deed.

I do have to say though, some people are more wired than others, and instruction may not get you too far. In design school, it's just as painful watching someone try to be creative, but not find their groove as it is explaining to someone how an algorithm is working but the light not shining for them. Same thing.

Not to discourage in any way, but there's many levels of design. Just like it's not all that hard for someone to be a "good enough" coder, it's possible to take enough of the design game to make a presentable page. Nothing that's going to win the archibald, but quite spiffy. This is very achievable.

Everything comes down to effort and pashion. You'll know if your forcing a square peg into a round hole. Some people are just creative thinkers, and some are coders. The creative thinkers will do pretty stuff, but they'll balk at the simplest of logical problems. But there is a middle ground.

I also have to say... do you really want to be a designer?... If you're not in the right environment, it's the worst job on earth. I moved my day job of graphics to a night job, and took up fulltime coding because I was working for someone with no idea. But, he had eyes, so he had a visual design opinion. Being the manager, it was the last word. He also liked watching me drive photoshop 'cause it was pretty watching pallettes and colours flying around. It was hell. But, turn to some code, and he'd get bored and leave the room in under a minute. That's when I had the epiphany that I was going to be a coder...  :)

Anyways, like most things, design is a very rewarding thing. I love it. But I'm very wary about doing it for managers who don't know it from the hole in the ground.

Nowadays, it's a night job. Churn out print ads or whatever for those people who let me do what I do, the way I think it should be done. Very rewarding.

Everything is possible by anyone, it's just that various skills and accomplishments have different length journeys for different people.

Don't be discouraged by the square peg. With enough effort, it can be jammed in there to make it fit!  :)

Problem with learning totally different skills like this, is that we place too much anticipation on things, and things never happen fast enough. Probably the best tip I can give, is that design is constructructive play. If you're not having fun, you're not gonna get better. Many of the great designers note that graphic design is the art of guiding and controlling accidents rather than following a path or a rule. Rules only govern more mechanical aspects, like balance and such like that.

Anyways, enjoy whatever new things you learn, design, coding or otherwise.

All the best mate.


Arron.

Arron Bates
Thursday, April 03, 2003

Wow - lots of good advice and a lot of very thoughtful and insightful commentary and suggestions. Thanks.

I'm not sure if it's possible for everyone with one skill (programming or mathematics, for example) to learn a new totally unrelated skill (such as painting or graphic design) - well, actually, it's possible to learn at least the basics but not necessarily to become extremely good at the new skill. When I was a teenager, I tried learning the piano for a while (by choice, I wasn't forced to), and I learned the "mechanics" and I could read the music and play an existing tune relatively well (the timing and all the notes were correct, etc) [my favorite piece to play was "Sounds of Silence" by Simon and Garfunkel], but even I could see that I didn't know how to put any "soul" into the music, I couldn't change anything without it sounding totally wrong, and I could certainly never compose any new music. In my soul (or brain), I was always an engineer, not a musician or artist.

There are relatively few people, no matter how much training they receive, who could paint a "Mona Lisa", and I'm not trying to become an "artist" in graphic design or web design. But, I would like to be able to move a little above the "paint by numbers" level (fill in the pre-defined shapes with the already-specified colors).

At work, (as suggested) the best solution is having the visual design done by a professional designer or graphic artist - we already do that and I'm not trying to take over that role. However, sometimes at work I create quick prototype pages or concept pages to demonstrate a new proposal (without the assistance of the designer) and I would like these to look reasonably good because the people reviewing these pages get distracted by the visual appearance if it's not quite right. Also, for my own home pages and those of friends that I help, I can't realistically hire a graphic designer, so I want to be able to design reasonably attractive pleasing pages on my own.

Benji Smith: "good web design has very little to do with good web usability" - this is a very important distinction, and I think I can usually create web pages with good usability (and other people tell me that, too), but I need help with the style and design. I tend to build the usability first with a visually simple (even stark) page and then try to add the visual style; perhaps that's not the best approach. I work this way with Word also (for work documents such as specs and proposals) - I type in (and edit and revise) all the text without any formatting and then when the words are close to what I want, I add headings, formatting, diagrams, etc; this usually works well for me, and other people have told me that they like my documents and understand them very well. However, with PowerPoint presentations, I usually start by selecting the visual template and page style before I type in any text and this approach seems to work well for PowerPoint for me.

Benji, I also appreciate your offer to review some of my pages and give me point-by-point improvements, but that's not what I'm looking for - I want to learn enough to be able to review the pages myself and make my own improvements. I don't expect to be able to create pages as excellent as yours, but I want to learn "how to take ugly things and make them not-ugly" as you say.

Yes, this process takes time, and I have improved over the years - I can create much better looking web pages now than the pages I created in, for example, 1996 (when I was doing it as a hobby, not for work). Some improvements are because of changes in accepted styles and practices, learning from improved designs at commercial sites, etc; and some of it is improvements in my own web design abilities. It feels like a very slow process. Maybe, as "S" says, it just does take a lot of time, and I should create more iterations and spend more time on them, as he does.

From some of the replies, it seems like perhaps I should take some sort of graphic design class at a local technical college, and I will see what I can find.

There were also some helpful book suggestions that look interesting:

Drawing on the Right Side of the Brain: A Course in Enhancing Creativity and Artistic Confidence; by Betty Edwards (June 1989)
http://www.amazon.com/exec/obidos/ASIN/0874775132/

The New Drawing on the Right Side of the Brain; by Betty Edwards (September 1999)
http://www.amazon.com/exec/obidos/ASIN/0874774241/

The Non-Designer's Design Book; by Robin Williams (January 1994)
http://www.amazon.com/exec/obidos/ASIN/1566091594/

The Non-Designer's Web Book: An Easy Guide to Creating, Designing, and Posting Your Own Web Site; by Robin Williams, John Tollett (October 1997)
http://www.amazon.com/exec/obidos/ASIN/020168859X/

Robin Williams Design Workshop; by Robin Williams, John Tollett (October 2000)
http://www.amazon.com/exec/obidos/ASIN/0201700883/

engineer looking for artistic skills
Thursday, April 03, 2003

"I'm not sure if it's possible for everyone with one skill (programming or mathematics, for example) to learn a new totally unrelated skill (such as painting or graphic design) - well, actually, it's possible to learn at least the basics but not necessarily to become extremely good at the new skill."

Crossover isn't that big of a deal. A lot of people are way better than average at more than one thing.
Herbie Hancock, the famous jazz pianist, has an undergraduate degree in electrical engineering. In his early days he recorded a lot of his own concerts. Kandinsky was a theoretical economist before he became a famous painter. The guy who does www.slowwave.com cartoons, is an illustrator, has a PhD in computer science, and plays the upright bass.  Most people that work at MOTU.com are also really good musicians. People that are "technical directors" at pixar have to be good artists and programmers/technicians.

I taught myself spanish and japanese by listening to tapes walking to work, have commercial artwork published on t-shirts and skateboards, and can embed a scheme interpreter into a C++ program. What helped me, is quitting watching 18 hours of TV a day, waking up earlier, and not drinking as much hard liquor.

choppy
Thursday, April 03, 2003

What a load of hooey! I get up late, and dig hard liqour, they have nothing to do with it!  :)

People can learn totally unrelated skills, but certain people have a disposition that allows them to pick up certainy skills better than others. But "crossover isn't that big of a deal" is wrong. Sure there's plenty of examples (Pixar's probably the largest collection of such), but some people will find it almost impossible to learn something they're not geared to do.

I'd take up Benji's offer to review your pages. You need mentors. They're very important. How can you ever pick up on things that you've never been shown to pick up on?...

All art books will tell you to pick one or a few artists, and simply copy them. Follow their exact lead to the absolute letter. Eventually, your style will appear from nowhere, and you'll be marching to the beat of your own drummer.

Just remember that "always two there are"... :)


Arron.

Arron Bates
Thursday, April 03, 2003

"Robin Williams Design Workshop"

Someone actually _designed_ Robin Williams? I always thought he looks like he'd been made up from the spare parts that were left over from the previous week's producti0on run.


Friday, April 04, 2003

One topic that you should surely investigate is "Design Gestalt Theory" which, at it's core, is a simplified view of why (understanding human nature) things are percieved as "right" or "wrong" visually, within a given context.

Now if that previous sentance seems like trying to tapdance on a soap bar, I apologize, but whether something looks "good" or "right" depends, mostly, on the use and audience.

However, the underlying organizing principals (gestalt), such as rhythm, proximity and closure, for example, do not vary. They are those oft noted "rules that can be broken."

I believe that much of what people call "artistic talent" is actually an inherent (internalized) understanding of the impact of the visual gestalt of a design. But these skills can be learned. How do I know? I teach them. Student work improves MARKEDLY when they learn and understand the principals of gestalt.

When someone uses the phrase "it just came together" it almost always means that, at some point, through whatever mechanism (chance, sometimes?) gestalt principals have been satisfied. I would encourage you to investigate the topic.

Mark W. Lewis
Friday, April 04, 2003

*  Recent Topics

*  Fog Creek Home