
Mistakes Developers Make When Learning Design - mtgentry
https://www.smashingmagazine.com/2016/12/mistakes-developers-make-when-learning-design/
======
joshdotsmith
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...](https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-
flows)

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.

------
commieneko
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.

~~~
biot
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.

~~~
grey-area
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.

------
Kenji
> 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 ;)

~~~
zzzcpan
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.

~~~
mixedCase
>We are moving towards all SVGs websites anyway.

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

------
serg_chernata
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.

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

------
adamredwoods
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.

------
mianos
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.

------
0xdeadbeefbabe
> 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.

