design for developers

Download Design for developers

Post on 21-Apr-2017




3 download

Embed Size (px)


  • Design for developers


  • 2

    I would like to give some context to this presentation. These slides are from a 2 hour presentation called Design for Developers.

  • 3

    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 its something you should feel.

  • 4

    Some slides only contain a few words or images so the slides dont distract from what is being said. Since you are probably viewing this online, I reworked the entire presentation and added these sticky notes to add what I talked about when displaying the slide. They look like this.

  • Introduction & design theoryPractical tips and tricksPractical tips and tricks, cont.Q&A: throughout




  • Introduction


  • My name is JohanWolf or @wolfr_ on the internet


  • I run a little freelance design studio

    Wolfs Little Store8

  • I read stuff all day


  • I like to play video games


  • I love to write


  • 12

  • 13

    So this is my companys website, ( ) as you can see its mostly about interface design. Under work you can see I do a lot of stuff; webdesign, logos, HTML & CSS, design for iOS. But all of it comes down to designing interfaces.

  • 14

    The kind of design I do is interface design...

  • Its not about the WOW!


  • 16

    I dont really care too much for interactive presentations or branded games. While they have their right to exist as promotional material, its not the kind of work I want to spend my life doing.

  • Its about creating a great product


  • Its about creating a great product


    Take something that blows and make it better. Thats probably what the people at Dyson were thinking when they applied their vacuum knowledge to hand dryers.

    Product of the year for me.

  • Avoiding this...


  • Youve got the power


  • Youve got the power


    I think everyone has the power to make a good product because its more about knowledge and applying that knowledge instead of having strong visual skills. I believe we can extract a lot of rules from common design knowledge. Thats what Im gong to do in this talk.

  • Theory


    Lets start with some theory on what makes a good interface.

  • What is a good interface?


  • It depends.


  • Examples of desirable qualities

    Fast Easy to use



    When thinking about interfaces, and what youre going to make, you make a list of desirable qualities we want our interface to have.

  • Fast (app performance)

    Fast (time to task completion)



    Maybe we want our interface to be fast in terms of performance or we want it to be fast in terms of task completion.

  • Easy to use Productivity


    If we make our application easy to use, that might just hurt productivity (e.g. no advanced mode, lack of shortcuts, wizards for everything). Even though I like to design interfaces for the

    general public I have a special love for advanced modes and ways to get your task done ASAP even if it requires some training/learning.

  • Accessible

    ConsiderationsBuild accessible apps because its the right thing to do (morally)

    Does anyone in the intended audience have a disability?e.g. cockpit software

    for F16 pilotsDo we have the dev

    resources to focus on accessibility?


  • 29

    Lets take this interface for example. I havent ever used it to be honest, but this us Lotus 123, the competitor to Excel back in the days of MS DOS.

  • Not easy to use/learn

    Fast (performance)


    Fast task completion 30

  • Not easy to use/learn

    Fast (performance)


    Fast task completion 31

    If we list our desirable qualities and compare them with the program we have here, we might come to the conclusion that its not easy to learn, not accessible (to persons with sight or hearing disability for example; there is no VoiceOver like on Mac, there is no multitasking to run something like JAWS in the background.

    On the positive side, its probably blazing fast on current computers, and since its all keyboard based I can only guess the time to task completion is also pretty good.

  • Example: POS system


    Lets expand on this example with another example, a Point of Sale system. A POS system is used at a register, when you go to a shop and buy something basically.

  • Would you want this...

    Fast?Fun Easy to use33

  • ...this...


  • Or this?


  • 36

    The opposition between making an application easy to use vs. making it so you can complete your task quickly becomes clear here... since the employees in our imaginary shop all get trained do we really want to use the slick Easy to use system when maybe we want the system that enables us to do our task as fast as possible?

  • 37

    Theres a Belgian supermarket, Colruyt, that tests everything, optimizes everything, and I think they thought long and hard about their register/cashier system too. Its not very modern, but employees know how to work the system in an efficient manner because they are trained to do so and the software enables them to be fast.

  • 38

    Would you rather bit F5 + F8 to serve a customer or go through a wizard with next/previous options?

  • Business...


    The appropriate interface helps with the business side of things of course. Wikipedia says Colruyt has a cool 475 million profit in book year 2009-2010.

  • (I hate shopping there)


    Unfortunately the experience of shopping there is not really what I want, Id rather pay a bit more and dont feel like Im shopping around in a prison. But that might just be me.

  • 41

    Why did I put this theory part in the presentation? I want everyone to think about what theyre building and for who theyre building it.

    Even though kids are growing up with computers these days, the current generation of software is becoming flat and less usable to expert users. While I

  • Some assumptions


  • Goals You want your designs to look passable

    without the intervention of a dedicated (expensive) designer

    You want to be able to create web applications on your own, or with a team of developers only

    With a little time and some tricks this is not hard to do, especially for web applications


  • You use your IDE and never ever open Photoshop or Illustrator unless you have to

    You write scripts to solve problems You love your terminal and database schemes,

    not so much your ruler and color palettes (if you have them)

    Youre a developer so:


  • Web developer,Windows software developer,Java, Ruby or iOS fanatic:

    Good interface =same principles


  • Web developers have a bit of an edge:


  • Web developers have a bit of an edge:




  • 48

    Who in the audience has ever tried to learn Photoshop?Its big and vast... theres many tools and palettes and its easy to get lost.

    I took me years to become productive in Photoshop and I understand why people are advocating designing in the browser.

  • 49


    I feel at home here, I know what to do, I have the shortcuts in my fingers, I know what all the tools and palettes do.

  • 50

    You dont have to learn Photoshop (or any graphics program for that matter) to deliver a proper software design. As I said before its a matter of knowledge and applying this knowledge. As a web developer you have an extra edge in a sense that you can apply design frameworks easily thanks to the power of HTML (structure) and CSS (presentation) whereas sharing the design of one Java app with another is not convenient, if even possible.

  • Practical tips & tricks


    Now... on to the real meat of the presentation. The practical tips and tricks. What youve been waiting for I guess!

  • TypographyAlignmentLight & shadow



    Practical tips & tricks (1)


    I divided this up in sections, first up are typography, alignment and light and shadow. These are the most important parts.

  • Typography


  • Readability

    Generally you want a readable typeface, in interface design you want a very readable typeface that works in small sizes

    This leaves you with very little choice on the web:

  • Verdana

    Lucida Grande(Fallback: Lucida Sans Unicode)

    The quick brown fox jumps over the lazy dog


    The quick brown fox jumps over the lazy dog

  • Droid Sans

    Segoe UI


    The quick brown fox jumps over the lazy dog

    Droid Sans comes with Android and is also optimized for small size display; Segoe UI is the font used in Windows Phone 7 and parts of the new Windows I think. Solid choice if youre doing Microsoft software.

  • Why these fonts?Specifically designed for UI: compare Verdana