Design for Developers

http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong

by Wolfr • 15 years ago

270 39 15 years ago

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

lucisferre• 15 years ago

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• 15 years ago

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.

Wolfr7• 15 years ago

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

mmahemoff• 15 years ago

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.

Wolfr7• 15 years ago

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.

akavlie• 15 years ago

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.

Wolfr7• 15 years ago

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.

stdbrouw• 15 years ago

Yep, good presentation and the sticky notes are excellent.

andrewfelix4• 15 years ago

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.

the-cakeboss• 15 years ago

Just as is the case with many things, ability comes with experience. Design, while dealing with many concrete and quantifiable considerations, still relies heavily on a distinguishing and trained eye. It's what separates the Jakob Nielsens ( almost entirely intellectual in approach ) and marketable attractive design.

starwed2• 15 years ago

Well, the more knowledge an individual has in an area, the more likely they are to realise their shortcomings.

andrewfelix4• 15 years ago

It can also create a false sense of understanding...“A little bit of knowledge is a dangerous thing.”

Wolfr7• 15 years ago

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.

andrewfelix4• 15 years ago

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.

csytan• 15 years ago

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.

jorde• 15 years ago

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

hrabago• 15 years ago

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.

kadavy• 15 years ago

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

JoshTriplett• 15 years ago

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.

Wolfr7• 15 years ago

You could download the PDF, weird problem though.

rmason• 15 years ago

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• 15 years ago

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

Wolfr7• 15 years ago

Bootstrap is great and would be my top recommendation, I see Mark Otto from Twitter is working on v2. See his blog at http://www.markdotto.com/ .

keeptrying• 15 years ago

This is sooooo good. Thanks!

Rajiv_N• 15 years ago

Thanks for the presentation. It was awesome!

Maro• 15 years ago

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

Yaggo2• 15 years ago

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• 15 years ago

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.

Yaggo2• 15 years ago

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

edandersen• 15 years ago

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?

Wolfr7• 15 years ago

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.

ale55andro• 15 years ago

Interesting slides and very much appreciated. Thanks!

pknerd• 15 years ago

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.

flyosity• 15 years ago

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

callmevlad2• 15 years ago

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/

callmevlad2• 15 years ago

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

hlfcoding• 15 years ago

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.

Design for Developers

Related Stories