Design for Developers

Design for Developers

on Dec 17th 2010 with 58 comments

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

During the recent DjangoCon, Idan Gazit gave an excellent presentation that details the fundamentals of design…for developers! Over the course of the talk, he discusses everything from white space, to line-heights, to the importance of contrast. If you’re a visually challenged developer, this one should help!

Tags: design
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Usability and Info Visualization junkie, happily married creative geek!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.pixoliacreative.com Ray

    I’m a designer and a developer! :)

    • http://www.wordimpressed.com/ Devin Walker

      OMFG!

      • William

        ROFL!

      • julio

        agree

      • GGO

        Well said!

      • http://www.suborganik.com Conor

        ROFLMAO!! :D

    • trololo

      OMFG!

    • aryan

      me too!

    • MeMo

      LOL

    • Carl

      XD LOL LOL LOL =.=’

    • Marco

      You are superman? ¬¬

    • Joao Lopes

      And you don’t evolve on any of them…
      Unless you are unemployed…

  • http://www.ingo-fahrentholz.com Ingo Fahrentholz

    Excellent ! I like these presentations.

  • EvilivE

    Impeccable timing, I just finished reading “Web Design for Developers: A Programmer’s Guide to Design Tools and Techniques” (http://www.webdesignfordevelopers.com/) and now this post.

  • http://daniel-rauber.de Daniel

    What’s the name of the font he uses for his headlines?

    • Nicklas

      I believe it’s called Rockwell.

    • http://kurkit.lt Tautvydas Bagdžius

      As I remember it should be the ChunkFive font.

    • http://twitter.com/idangazit Idan Gazit

      Yep, it’s ChunkFive, free from the League of Movable Type: http://www.theleagueofmoveabletype.com/fonts/4-chunk

  • http://www.sensitivedesigns.com Sensitive Designs

    Waste of time :(

  • Bob

    aah…., hum…, ah… !!!

  • http://www.sergio-freelancer.com Sérgio Soares

    Really good presentation and a lof sense of humor from Idan Gazit
    Thanks

  • Piry

    Am I the only one that got bored after 10 minutes and didn’t learn anything new or even useful ?

    Does anyone know a web developer that can’t write a bit of css and xhtml ?

    • http://twitter.com/idangazit Idan Gazit

      Hey, if you already know this stuff—great! (No sarcasm.)

      It’s been my experience that a lot of developers don’t know this stuff and/or are intimidated by “design” in general, assuming that you need to sport trendy footwear and facial hair in order to engage in pixelpushing. This talk was given with the goal of getting your average backend developer to give a damn about design as an integral part of their craft, not something that they can afford to know zero about.

      At any rate, if you’re looking for more advanced resources, start with A List Apart and branch out into blogs of the people who author articles for ALA.

      • http://humm Aah

        Hey dude, don’t take it wrong way but you just reduce saying “aah…., hum…, ah…” all the time. It’s really annoying.

      • http://www.etabrizi.co.uk Emyr

        Aah – Your a fool.

        Idan – Good work dude. I’m a designer and I found it really interesting. Never heard of Pattern Tap, thanks for the link. Take no notice of these idiots.

      • Piry

        When you say backend web developer I automatically think about php programmers. They seem to be the majority.

        Any php programmer while learning php has to learn html, and all the php guys I know can build an entire website using php+html+css+some kind of database. It probably won’t look awesome but they certainly know how to do it.

        They probably don’t know the basic principles of design, and they might not care (because they don’t plan going beyond the standard functional design), but that doesn’t make them bad at their job. They’re in charge of the functional part, knowing a visual technique (white space) won’t make them better in any way.

        So unless they want to design something, they don’t need to know anything about design.
        Designers are the ones that should know more about how web pages are requested, fetched and rendered, because these do affect the visual experience that they are in charge of.

        If a programmer decides to make a website that looks good and doesn’t like to buy templates, I completely agree he should keep it minimal. But I strongly disagree that developers should know anything about design (again, unless they want to design something !).

        Anyway, good luck with your next presentation, hope you’ll have a decent projector next time.

  • http://bluzgraphics.com Paz Aricha

    Cool lecture. I didn’t knew that are more Israeli guys that are known and speak on such conferences. It’s pretty awesome and I say it as an israeli designer and a developer.

    So to Idan big thumbs up ~! :D

    - Paz.

  • Abhijit

    Thanks! Should not it be “to the importance of contrast” instead of “to the important of contrast”?

  • http://karsva.net/blog Kars

    Nice to see this online. Already knew most of it, but it’s nice to hear things over again and pick up some new ideas.

  • http://www.afsigma.com Andre

    Thank you for the post…..

  • Kyle

    Good concept. I think presentations like these are good exposure for everyone, even the people that don’t touch front-end code.

    …. I do wish this guy would use “umm” a little less. Speakers that pause with “umm” more than they speak about content make it extremely difficult to listen to the entire presentation.

  • Edward Longman

    I like to refer to myself as a developer and designer but really I’m not too good at designing.
    Anyway I think this is a fantastic tool for help on how your colours will look to the colour blind because there is a menu in the top right

    http://colorschemedesigner.com/

  • http://konradstrozik.com Konrad

    Great advices for web developers.

  • Sk1ppeR

    Where i can find that list of “what should a web developer know” ? It was hard to read for me on the presentation projection and he said that it was published by some agency so if you can tell me where i can find it in original format i’ll be happy :)

  • Chris

    Idan, please take a speaking class. This presentation would be great if I didn’t hear an aah or um every other second.

    • http://twitter.com/idangazit Idan Gazit

      Well, it was a rather large audience, so I was quite nervous. :)

      I’m aware of the “um” thing, and I’m working on it.

      • Bevon

        For real the “um um” was getting out of hand but trust me i dont usually watch the tutorials and the one time i actually watched all of it i gained of info and not only i actually saw the reason why i cant start anything its because im aiming too high with designs for a beginner and when i start doing it i realize that its too much for me at my stage and then i get discouraged and forget the whole thing but repect big man you a di boss keep some more tuts suh me can learn some more u zeet!!!

      • http://www.etabrizi.co.uk Emyr Tabrizi

        Overall, a fantastic presentation which really rounds off key area’s regarding design. I think even a bidding designer should watch this as it really gives the framework on where to start.

        Also give this guy a break on his presentation style, some really stupid comments from people here. Grow up.

  • http://bibikova.com ben

    To wrap things up, Idan basically says to developers that because you guys suck at design just keep it minimal so it will suck less.

    • http://twitter.com/idangazit Idan Gazit

      TL;DR:

      * Doing less gives you less opportunities to suck. Minimalistic designs are easier to execute well.
      * Help people process your content efficiently and take action.
      * Typography has some basic rules; the web involves a lot of type—learn some of those rules and apply them.
      * Color theory is complex. When in doubt, stick to monochromatic.

  • http://www.csskarma.com Tim Wright

    “You get ambitious you’re going to fail”….. what?

    • http://twitter.com/idangazit Idan Gazit

      Not sure what’s so unclear about that statement given the context…

      The point was that trying to bite off more than you can chew (i.e. get “ambitious”) is often a path to getting stuck or building something that will be fundamentally flawed, particularly if you’re coming to design without any background or experience in the subject.

      Staying modest in goals and scope is a great way to succeed, for some values of success. A basic, clean design with few flaws is (in my opinion) preferable to something busy and ambitious but badly executed, particularly for the audience that this talk was delivered to.

  • http://elliottshafii.com Elliott Shafii

    This lectures category makes me very happy!

    Thanks!!!

  • Luís

    he’s right!… developers are not trained to design…

  • http://webinationstation.com Bahla

    It was worth watching. Great overview. I was pleased to see that I already knew a lot of this stuff. I too would like to know where the list of things designers should know is posted. Thanks.

  • Bevon

    mad presentation i learnt a lot

  • CR

    Are there any plans to provide a transcript or captioning? Pretty please?

  • http://www.ifadey.com Fawad Hassan

    Thanks a lot!
    I really need it :)

  • Tom

    Excellent lecture. Thanks!

  • raj

    Idan, great lecture, started a little slow but got going in the end. i think there are better examples out there for minimal sites (too lazy to dig out from my bm’s). as for those complaining about the um thing, i’d like to see them get up on stage and deliver such a presentation. the video is not about public speaking. desk critics, get a life!

  • Gary Tierney

    As a visually impaired (haha) software developer I found this article very useful. It took quite a while to get really into that presentation as Raj previously stated, although when he got further into it he explained the various concepts of web design in a manner which the average software developer can comprehend. I really liked how in-depth the presenter got into about colors and contrast, I’ll definitely be taking all this into consideration the next time I make an attempt at constructing a website!

  • http://loftycavalier.com Cav Curt

    I’m reading a lot of books on web design. They all say the same thing, but that’s a plus in my opinion, design needs to be reinforced. Unlike development, if you forget a certain method you just go look it up. If your messing up your design it’s just ultimate frustration.

  • Seppo

    Great drop of ‘grammar nazi’ in the middle of Berlin. Oops!

  • http://www.chillwebdesigns.co.uk Chris Hill

    Interesting video, I am both a developer and designer. Interesting to see an other point of view.

  • Rose

    Marry me Idan, :) thanks for the info’s. great help :)

  • http://www.inspiraghtech.com Inspiragh Tech

    Thanks to you’ll. I just can’t stop reading your post

  • http://uberlife.com Luigi Uberlife

    Hey mate, just twitted all of this. And I’ve just realised it’s 2 years old ahhahaha. Anyway that’s a good one. I’m only an iOS dev, but really planning to be a designer as well. Tks a lot mate.

  • http://www.facebook.com/synthestar Adam Marshall

    Great lecture, my course at uni teaches about the gap between the designer and the programmer and we are taught to bridge the gap. Lot’s of useful tips! Thanks