

Design for Developers - Wolfr
http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.
======
akavlie
Thanks for making a presentation that's useful to readers. While I'd still
prefer to see video, this stands on its own.

I see a lot of presentations hit Hacker News that aren't very useful on their
own because they were meant to accompany a talk -- and a good talk usually
omits the best material (or a at a minimum, important context) from the
slides.

~~~
Wolfr
Sometimes I prefer video (esp. if the delivery is very good) but for learning
purposes I prefer reading since then everyone can choose their own tempo.

------
jorde
Here's another presentation from Idan Gazit who works with Django: Design for
developers: Making your Frontend Suck Less

[http://blip.tv/djangocon-europe-2010/idan-gazit-design-
for-d...](http://blip.tv/djangocon-europe-2010/idan-gazit-design-for-
developers-making-your-frontend-suck-less-3704780) (video)
<http://blog.gazit.me/doc/32311867/Design-for-Developers> (slides)

This is probably one of the best presentation about the basics of web design
that I know. He also mentions the book, Designing for the web, in the
presentation which is a good entry for typography, colours etc
<http://designingfortheweb.co.uk/book/index.php>

------
rmason
Just tweeted that this was the best presentation on design that I'd ever seen.
None of the tips will turn me into a designer but they will help.

I've looked at lots of design for developers presentations, the topic must be
guaranteed link bait. None of them really were all that helpful to me until
this one.

I've only met two developers in my career that were were world class at both
programming and design. People are looking for a magic shortcut to grokking
design that just isn't there. The best solution for me right now is to use
Bootstrap but there really isn't a great alternative to hiring the best
designer that you can find.

~~~
wallflower
> I've only met two developers in my career that were were world class at both
> programming and design.

The one I know through a friend of a friend has had multiple apps in the top
100 overall, App Store. And he is a better designer! And so hard on himself
(e.g. you see his design and you think it is done and he keeps on going...)

------
Yaggo
Page 119:

"Just ﬂipping the gradient direction is the equivalent of the environment
light changing direction when you hover over/click a button, this makes zero
sense."

Inverting the gradient for pressed down button can also be seen as a convex
surface becoming concave; think a membrane button. (A flat button wouldn't
have such a gradient.)

While that kind of "faux membrane" buttons are not very common in real world,
the inverted gradient effect immediately gives me feeling of "popped in"
button. Am I alone here?

~~~
chrisdroukas
That makes more sense if the gradient is radial. For a linear gradient,
inversion gives the appearance of a changing light source - just like the
example given shows.

A radial gradient, on the other hand, might more typically assume an
'oveerhead' light, which is why inversion makes sense.

~~~
Yaggo
For me the linear gradient hints that the surface is curved on one axis, i.e.
is cylindrical, not spherical.

Of course the context plays a role too on the perceived illusion; the
appearance of changing light source may be stronger for lonely button (vs.
group of elements sharing the same light source).

------
csytan
Thanks for this! As a developer who has been slowly learning design by trial
and error, I wish I had access to this resource years ago. It's totally
frustrating when you know something just looks awful, but don't have the
knowledge or background to know how to fix it.

------
mmahemoff
Nice presentation with notes for people reading afterwards.

One thing I don't get is the font sizes. At one point, it says something like
"notice we're using 24px to tie into the multiples-of-6 rule", but elsewhere
recommends 16px as the main base size.

~~~
Wolfr
If you use 16px, the 1.5 line height I use for paragraphs becomes 24px, which
ties again with the multiples of 6 rule again. So your lines are actually 24px
high, if you then use maybe 48px for spacing around your blogpost, things look
balanced because they're even.

------
callmevlad
The author mentioned FamFamFam icons, but not Fuque by Yusuke Kamiyamane,
which I've found to be much more robust (and not quite as overused).

<http://p.yusukekamiyamane.com/>

~~~
callmevlad
There's also <http://www.iconfinder.com>, which makes finding the right icon
(and verifying its licensing) pretty easy.

------
kadavy
"There are very little fonts in Google web fonts currently that are worth
using." Amen!

I like this multiples of 6 thing, too. Most attempts to get a baseline grid
going (like on Blueprint, for example) just look wrong.

------
pknerd
Good stuff to read. I got chance to learn things which I usually ignore while
developing sites.

People who are recommending to hire a designer, I would add that its quite a
cultural thing. Not every designer is good at UX. Most of the designers in my
country are more into graphics rather than thinking of how to use good color
combination and typography.

------
lucisferre
The point about colors, specifically grays, on different screens is really
important. I can't think of how many times I look at a website I'm working on
at a friend or family member's house and am disappointed with how it looks.

Sufficient contrast is important. Worse still I have color blindness so for me
contrast is critical sometimes.

~~~
Chris_Newton
It's also important to consider the opposite perspective, when you're working
on design touches that usually _should_ be subtle. Some very common examples
are lighting effects like gradients, drop shadows and cut-outs.

These effects need to have quite a gentle contrast between the darker and the
lighter colours, and if you start throwing around 25%+ differences in grey
level your results could become overpowering for viewers with decent screens.

Of course, in such cases, you also won't completely break your design for
viewers with poorly configured screens or imperfect vision if the contrast
isn't as strong to them, so you can afford to be more subtle than when
choosing, say, foreground/background colours for body text.

~~~
Wolfr
This is completely true, I often use #EEE or even lighter grays for
"nonessential" or decorative gradients.

------
andrewfelix
If you can afford it, please hire professional designers. These posts are
interesting and useful. But as in any industry there things that you can only
learn through years of experience and education.

~~~
Wolfr
I agree, this is also mentioned somewhere in one of the last slides.

As a designer I know about MySQL, the terminal, PHP, Javascript, jQuery, RoR,
Sass, HTML, CSS etc.; if a developer knows the basics about color, typography
and alignment and knows why the designer in his team does the things he/she
does it's probably going to be much easier working together.

~~~
andrewfelix
Good point. I hadn't actually considered that angle.

I tend to get instinctively defensive when people from other professions make
assumptions about mine based on a limited understanding.

------
JoshTriplett
Odd bit of design problem on slideshare: if you change the page font size, all
the characters remain in place, but change size, making the presentation look
awful.

~~~
Wolfr
You could download the PDF, weird problem though.

------
edandersen
Great deck with a sly dig at ExtJS on slide 171.

Surely you don't mean that web apps that look like 1999 desktop apps are not
good design?

~~~
Wolfr
Hmm. I think Ext is great for stuff like dynamic datagrids and they have some
proper interactions (a lot of it based on the YUI! design library, which is
one of the best resources out there). Unfortunately most of it looks very
developer-y and doesn't really have good defaults. I can't recommend it.

------
hlfcoding
For a slideshow about design, it sure isn't very pleasing to the eye: sticky
notes, inconsistent formatting and image sizes, verbosity. The tips aren't
exactly creme-de-la-creme either. You'd learn more from just looking at the
Apple website (which actually looks good) or reading Spiekermann's Stop
Stealing Sheep. OP would do much better at self promotion if he actually
provided good tips and decent slides, instead of the heavy self-advertisement.
Keep it lean.

------
hrabago
I like to read a lot about design tips, but this is the first time I got what
is meant with "blending". Thanks for that.

------
flyosity
Ha, I'm quoted on slide 115. Thanks! Great resource, too. I'm about to tweet
it out.

------
ale55andro
Interesting slides and very much appreciated. Thanks!

------
Rajiv_N
Thanks for the presentation. It was awesome!

------
keeptrying
This is sooooo good. Thanks!

------
Maro
Terrible presentation. Didn't learn anything, even though I'm a Developer
always struggling with Design.

