Mistakes Developers Make When Learning Design | Hacker News Reader

Mistakes Developers Make When Learning Design

smashingmagazine.com

80 pointsmtgentry13 comments

When doing design work I usually now start with Ryan Singer's shorthand for UI flows: https://signalvnoise.com/posts/1926-a-shorthand-for-designin...

From there I'll dive into hand drawings, perhaps a wireframe (although Balsamiq is a pain to use), and maybe some specific visual designs if needed in Sketch, which may then go into Invision. Basically every step is optional along the way to a fully implemented design, but the general flow can be adapted at length.

This is especially nice when doing client work because clients' needs and budgets are highly variable. If I can get away with just a UI flow and drawings and feel confident that we're on the same page in terms of how they describe the UX back to me, then we're good to go.

The biggest thing is to just get over your own insecurities about scribbling and drawing. I'm awful at it. But when my anxiety or my attention-deficit keeps me from going through the earlier (cheaper) motions, then invariably I suffer in terms of time lost later.

I would recommend to anyone wanting to do any kind of visual design to learn to draw observationally. You don't have to become Leonardo or John Singer Sargent, but learning to draw is learning to see. The same goes for photography. Everyone has a camera phone. Learn to use it. As a side benefit, you become less dependent on clip art and photo stock ...

I also recommend studying color theory as used by painters and illustrators. You have hundreds of years of practice and theory to work with. James Gurney's books as a good, modern place to start.

And don't be afraid to get technical. Old Kodak and paint manufacturers have tons of really good scientific studies on how color perception and the brain work. Far too many designers learn a few basic recipes for color and this can be very limiting.

Any thoughts on expanding your "mind's eye"? I can often picture something, but when I go to sketch it it's as if I have tunnel vision and can only focus on a very narrow part at a time, and I lose sight of the whole. I feel that if I could somehow expand this -- perhaps through specific exercises? -- I'd be able to draw much better. Or maybe there aren't specific exercises and it just requires a lot of time putting pencil to paper.

I think that's exactly what "Drawing on the Right Side of the Brain" claims to teach. I've started it several times but I never stuck with it so I can't say if it works or not.

The big problem people hit when drawing (esp. as adults) is that they have a well-established picture of the world, built of archetypes and symbols which they impose on what they see. This pattern recognition works very well when you need to navigate the world, but gets in the way when you want to observe it as it is, rather than as you think it should be. In learning to draw you're actually trying to exclude your mind's eye completely (at least at first).

So specific exercises you can try (this is the sort of thing students do in art school):

Draw negative space - instead of drawing a thing, draw the shapes around it.

Draw without lifting the pen - put the pen on paper, look at the object, and draw without lifting or looking at your pen.

Draw textures, curves, colours - forget the class of thing you're drawing (a face, an eye) and try to truly see the specific thing in front of you.

Draw unfamiliar objects - things you don't have ready-made symbols of in your mind's eye.

Copy pictures you admire, and you'll notice how much artifice and craft is involved.

For visual design work, another skill which is very useful and often overlooked is to learn about typographic and typesetting concepts - a lot of those ideas about balance, repetition, rhythm, are very important in visual design.

> The blank Photoshop document glows in front of you. You’ve been trying to design a website for an hour but it’s going nowhere.

For me, it's exactly the other way around. I have a beautifully illustrated Photoshop picture and then I turn it into HTML and CSS and I realize that some relative alignments are literally completely impossible to do without design changes or doing some flexbox hack that's not supported on older browsers. The ugliness of HTML quickly catches up to your pretty bitmap. Going with HTML from the start is the way to go (unless you can avoid HTML altogether, in which case you should AVOID IT ALTOGETHER).

> Commit to spending 10 hours on visual design and see how it sits with you.

This comes automatically if you use HTML+CSS ;)

Of course you have to understand HTML/CSS very well to do good. But it's not going to be efficient to start from that. Luckily Photoshop has a working javascript engine and it's relatively easy to completely automate HTML/CSS/sprites generation and iterate very quickly. Or even better, switch to Inkscape and generate everything from an SVG XML file. We are moving towards all SVGs websites anyway.

>We are moving towards all SVGs websites anyway.

Ha haha ha. That was good one. Haha. Funny joke. Never tell again.

On "Getting Distracted By The Tech / Tools", this is why I still design in Photoshop, since Photoshop 7 many many years ago. I've seen so many tools come and go. New workflows, new interfaces and integrations to speed up web development. "Photoshop killers". But I, personally, feel right at home in Photoshop. I know every corner. It doesn't make me amazing but it lets me focus on creating. I don't know if I'll ever switch.

I wish I had kept my old copies of Photoshop. All these updates are useless and now I'm stuck paying monthly.

Let's not forget that most design is done for a client, so you need to work with that client on their needs and wants. Pro designers usually have a set process that leads clients along the designer's journey into why we make decisions that we do. It helps support our decisions, and leads to less surprise moves by the client. I think this is relationship is forgotten when developers learn design.

The mistake designers make when designing for the web and application is, the web or application frameworks are not a blank slate. Design without a solid understanding of the limitations of reality should stay in the world of dedicated art and design sites. So many times have I been shown a fantastic looking PSD that has 100% management buy-in that has to be totally compromised actually implementing it in CSS/HTML etc. We had a word for it: 'PSD.html'. Readers of this thread should check out the grumpy old men threads where 'younguns' argue they know better without having any real experience.

> The blank Photoshop document glows in front of you. You’ve been trying to design a website for an hour but it’s going nowhere.

This scenario seems implausible to me.

Reply on news.ycombinator.com