SlideShare a Scribd company logo
1 of 183
Download to read offline
Design for developers


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




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




                       3
Some slides only contain a few words or
images so the slides don’t 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.




                     4
1   Introduction & design theory       -
2   Practical tips and tricks          -
3   Practical tips and tricks, cont.   -
4   Q&A: throughout                    -




                         5
Introduction


     6
My name is Johan
Wolf or @wolfr_ on the internet




                                  7
I run a little freelance
design studio


Wolf’s Little Store
                           8
I read stuff all day

                       9
I like to play video games

                             10
I love to write

                  11
12
So this is my company’s website, ( http://
     wolfslittlestore.be/ ) as you can see it’s
     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.




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




                      14
It’s not about the “WOW!”




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




16
It’s about creating a great product




                17
It’s about creating a great product




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

                     Product of the year for me.




                18
Avoiding this...




       19
You’ve got the power




         20
You’ve got the power




              I think everyone has the power to make a
              good product because it’s 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. That’s what I’m
              gong to do in this talk.




         21
Theory
       Let’s start with some theory on what makes a
       good interface.




  22
What is a good
 interface?

      23
It depends.


     24
Examples of desirable qualities

    Fast            Easy to use

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


               25
Fast
       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.




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




                                                 27
Considerations
                                         Build accessible apps
                                         because it’s the right
                                          thing to do (morally)
 Accessible
                                Does anyone in the
                                intended audience
                                 have a disability?
                                 e.g. cockpit software
                                     for F16 pilots
    Do we have the dev
   resources to focus on
       accessibility?

                           28
Let’s take this interface for example. I haven’t
     ever used it to be honest, but this us Lotus
     123, the competitor to Excel back in the days
     of MS DOS.




29
Not easy to use/learn        Inaccessible

Fast (performance)       Fast task completion
                        30
If we list our desirable qualities and compare
                               them with the program we have here, we
                               might come to the conclusion that it’s 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, it’s probably blazing
                               fast on current computers, and since it’s all
                               keyboard based I can only guess the time to
                               task completion is also pretty good.




Not easy to use/learn        Inaccessible

Fast (performance)       Fast task completion
                        31
Let’s 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.




Example: POS system


         32
Would you want this...




Fun   Easy to use        Fast?
                    33
...this...




    34
Or this?




   35
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?




                 36
There’s a Belgian supermarket, Colruyt, that
tests everything, optimizes everything, and I
think they thought long and hard about their
register/cashier system too. It’s 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.




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




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




    39
(I hate shopping there)

                Unfortunately the experience of shopping
                there is not really what I want, I’d rather pay
                a bit more and don’t feel like I’m shopping
                around in a prison. But that might just be me.




           40
Why did I put this theory part in the presentation? I want everyone to think
about what they’re building and for who they’re 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 <3 Apple software a lot of what they do feels dumbed down. I’m very
frustrated making this 150+ slides presentation in Keynote because there is
no automation whatsoever. I can’t align things automatically, I have to copy
paste this note thing from slide to slide manually.




                                   41
Some assumptions


       42
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



                         43
You’re a developer so:
• 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)



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


            Good interface =
           same principles
                      45
Web developers have a bit of an edge:




      CSS
                 46
Web developers have a bit of an edge:




      CSS     Shareable design

                 47
Who in the audience has ever tried to learn Photoshop?
It’s big and vast... there’s many tools and palettes and it’s easy to get lost.




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




                                    48
Text

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.




                                                     49
You don’t have to learn Photoshop (or any graphics program for that matter)
to deliver a proper software design. As I said before it’s 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.




                              50
Practical tips & tricks
                Now... on to the real meat of the
                presentation. The practical tips and
                tricks. What you’ve been waiting for I
                guess!




           51
Practical tips & tricks (1)
A   Typography                                                                               -
B   Alignment                                                                                -
C   Light & shadow                                                                           -


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




                                    52
Typography


    53
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                           The quick brown fox jumps
                                  over the lazy dog

Lucida Grande                     The quick brown fox jumps
(Fallback: Lucida Sans Unicode)   over the lazy dog




                                    55
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 you’re doing Microsoft software.




Droid Sans                        The quick brown fox jumps
                                  over the lazy dog

Segoe UI




                                         56
Why these fonts?
Specifically designed for UI: compare
Verdana to Times: which will be more
legible at small sizes?


Verdana at 36px                          Times at 36px


                  If you’re interested in typography at all, and you want to know
                  more why this is like it is, try http://typophile.com/node/12028
Why these fonts?
Hinted at low sizes




                      The two fonts at the bottom
                      will not be named... hint: one
                      is universally hated by
                      designers and the other
                      caused a stir when it was
                      used as the subtitle for
                      James Cameron’s Avatar
Gill Sans
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.




Palatino
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                                                           Some
            culpa qui officia deserunt mollit anim id est laborum.         fonts have their roots
                                                                in print, they are wonderful if
                                                                used for the right purposes.
                                                                Gill Sans is a great typeface
Impact
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                                                with British roots, Palatino
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisfor a book,
                                                                could be perfect aute irure
                                                                and Impact, wel...
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.




                            59
Impact ... probably good if you want
       to make an IMPACT.




  60
Why some fonts are better for interfaces than others




Verdana
                             1iIL
Gill Sans
                             1iIL
          Here’s the same character
          string in Verdana and Gill        As you can Excel set in Gill Sans might
          Sans.                             give some problems: what if you need cell
                                            I1, you would read it as II



                                       61
zero versus “o”: difference can be critical




A crossed zero can make the difference between a font that works for financial applications and one that
doesn’t. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog post
about Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . It’s
a very economical typeface perfect for spreadsheets.



                                                       62
Font sizes


    63
Relative readability




This is a pretty well known picture among designers, it displays the relative readability between a book and a
blog post on a screen set in 16px. Basically we all use type sizes that are way too low. 16px works for reading.
Why not use this browser default instead of making the text tiny?




                                                       64
Font sizes

• When in doubt, make it larger, especially if it’s
  for reading (any long form content in
  paragraph form)
  • All texts on the web that are meant to be
    read should be at least 14px big!




                         65
Font sizes

 • You can go smaller in interface depending
   on your font, e.g. if you use Lucida Grande
   or Verdana you could go for 11, 12 or 13px.




                      66
What is wrong with this picture?




               67
Reading length
• There's a reason newspapers are set in
  columns, that books are not wider than they
  are... practical printing reasons, but also a
  scientific reason: it's harder to read a text when
  lines are too long
• Rule of thumb: paragraphs should never be
  longer than 60 characters, so limit them in
  width



                        68
Why is my type
 so boring?




      69
Font services
• Use Typekit ($50/yr for low traffic sites)
• Use Webtype if you have money ($40/yr/
  typeface)
• There are very little fonts in Google web fonts
  currently that are worth using
• Use with caution (performance, quality of
  fonts)
• Good design is not free in general


                        70
All efforts to optimize for performance on my own Wolf’s Little
Store website were kind of cancelled out by using 2 fonts from an
external web provider. If you care about performance at all, don’t
use @font-face.




                              71
Line height makes all the difference:




1.5 line height     72          1.0 line height
Line height

• I keep returning to these same values:
  • Use a line-height of 1.1 for headings
  • Use a line-height of 1.5 for paragraphs




                       73
Alignment


    74
How to align things?!




         75
How to align things?!




Much has been written about the dark art
of aligning things: there’s whole books
about aligning and grid systems, mostly
dealing with paper sizes and proportions.
I want to show you 3 things that might
make you better at aligning without
having to overthink it.




                                        76
Alignment

• Law of proximity (gestalt)
• Screen interface design: work with the number 6. 6,
  12, 18, 36... (example)
  • Grid design example
• Use space appropriately



                          77
Law of proximity


       78
The law of proximity




The law of proximity – Spatial or
temporal proximity of elements may
induce the mind to perceive a
collective or totality.

Wikipedia




                 79
The law of proximity




         80
The law of proximity




As you can see, the left circles form a
group, on the right side there’s 3 groups,
all of this is done by spacing between
elements only. Why is this so important
and what does it have to do with UI
design?




                                             81
The law of proximity




                The law of proximity says that elements
                that are closer together will be perceived
                as a group. Since the spacing is even
                between every comment here it’s hard to
                find out who wrote which comment.




         82
The law of proximity




                Compare this to a design where there is
                clear spacing between the comments.
                The author is on top (as per convention)
                and the avatar reinforces who is talking.




         83
I keep returning
 to the number


     6
       84
Base font size:      Base line height (x1.5)


2x6
      12 = 18px                                      3x6



      Reading font size:   Base line height (x1.5)



      16 = 24px                                      4x6



                           85
6px               as our “unit”



Major elements spacing      6 units
Regular spacing             4 units
Minor spacing               2 units


                       86
Example




          This part of the presentation is about how
          I keep returning to the number 6 for
          aligning and spacing UI elements. It
          makes sense: all the numbers we use for
          our defaults (1.5 line height, 16px font
          size for reading, etc.) form multiples of 6
          when used in simple calculations: 12, 18,
          24, 36, ...




                              87
Start off with a grid, I used an online grid
     calculator (here: http://www.29digital.net/
     grid/ ) and defined my column and gutter
     widths so are multiples of 6.




88
Here’s that same grid visualized. I used
     Photoshop but you might as well do it in
     HTML/CSS if you’re used to that.




89
As you can see, if we think of 6 as our
     unit, there are 4 units between columns,
     and each column is 16 units wide.




90
I add some elements to the interface...




91
...a header area, a content area...




92
The height of content area if flexible, for
     the header I used a multiple of 6 again.




93
For the spacing between the areas I used
     a multiple of 6 again. It’s easy, just keep
     returning to the number 6.




94
I add some text, this is from Moby Dick
     (book in the public domain). Now, it still
     looks like **** so let’s do something about
     that.




95
I set the font to 16px since this is my
     default for reading, then add spacing
     between the paragraphs.




96
I add a heading which has a font size of
     24px, once again tying into the number 6




97
Look, the spacing between elements is
     not arbitrary, it’s all a multiple of 6, and
     the reason I made my paragraph 4
     columns wide ties into the line length
     reasoning as discussed earlier. It’s a
     ruleset that makes sense.




98
I move the text to the middle since I want
     to add a navigation etc. to the website.




99
I know how my grid works so I don’t need
      to display it all the time now. I go to my
      standard colors (more on that later).




100
I keep on designing... again keeping 6 in
      the back of my head. For example, the
      padding in the comments is 12px, and
      the line height of the navigation items is
      24px.




101
We have a design that looks passable
      without much designing really: we applied
      some guidelines, that’s it.

      I’m not saying it looks like the bomb, but
      we have a solid base to work upon here.




102
I use this strategy all the time, look at my
      site, all the spacing is based on 6...




103
This might be a bit more clear.




104
Keep returning to
  the number


     6
       105
Use space appropriately


           106
Use space appropriately




                  This is the Netflix iPad app, I’m all for
                  proper whitespace, but this is just not an
                  appropriate design for the iPad. You have
                  all this space, why not use it e.g. to
                  display the film posters too?




                   It looks like they just stretched out the
                   existing iPhone app. This is a common
                   problem with most Android tablet
                   software these days.



          107
Use space appropriately




                   Compare with something like the
                   iPhoto design for iPad that makes
                   appropriate use of the space. Big fan
                   of the designer www.mikematas.com

          108
Light & shadow


      109
Shadows and gradients rule #1:


  Use shadows and
gradients as a tool, not
    as decoration

                   110
Think of real life




       111
Take a second to look at this photo
      and look at the reflections, the knobs,
      the shadows being cast.




112
In real life...
• Shadows are never pure black (radiosity)
• Objects higher than other objects cast a
  shadow on the lower object
• Some surfaces are reflective and some are
  not
• When we press a button it lowers
• Light is cast from a direction


                       113
Shadows are never pure black




The first box looks kinda like what you would see in a common “developer
design”. Try to soften it a bit more by using a greyish tint (middle), I like to
make my shadows a bit blueish grey (third box). It’s kinda hard to see but
all the little details together often make a design great instead of just good.




                                                     114
Drop Shadows will ruin your design if you
don't do it right. Things should be right up
against their surface which means using a
1-3px Drop Shadow size. And 0-3px
distance. This isn't WordArt.

Mike Rundle, flyosity.com




                    115
Window shadow




The window shadow on Mac OSX is a bit overdone but it does make a
good example that you should think of objects on top (windows, modals)
to be physically on top and thus cast a shadow. This helps with the
metaphor and helps people understand what they’re seeing.




                                                116
Recipe for a good button!

                                               Light to dark gradient
Try to think of light as
coming from a certain
direction. The most natural
direction is from the top (e.g.
the sun). Thus, a light
coming in from the top
would make the top part of a
button lighter, and the
bottom part darker. This is
why your gradient runs from
light to dark, not just
because you thought it looks
nice.


                                  Clear verb        Clear lines



                                        117
Recipe for a good button!

                                            Distinctive active state
It’s not realistic to change
the color of a button when
you press it but it does help
to reinforce which button
was clicked.

In real life the button would
probably lower a bit thus
creating an inner shadow.




                                Inner shadows work for
                                    “pressed” look

                                      118
Don’t just flip the gradient direction!

                                         Just flipping the gradient
                                         direction is the equivalent of
                                         the environment light
    Light                                changing direction when you

direction                                hover over/click a button,
                                         this makes zero sense.

                                         It’s also way too subtle.




    Light
direction




                         119
Most interfaces: think of light coming in
                     from a 120° angle




Text inputs have shadows        Modal boxes cast a 120° drop
    on the top and left       shadow (more shadow on bottom
                                   and right), be subtle

                             120
Practical tips & tricks (2)


             121
Practical tips & tricks (2)
A   Color                                                                                -
B   Icons                                                                                -
C   Reusable design                                                                      -


            Next up are three parts, the first about color, then icons, and to end reusable
            design.




                                   122
Color


  123
Ways to pick colors


         124
125
Hues app for Mac is pretty
      cool, and it’s only €2




126
Hues is a good replacement
      for the standard digital color
      meter.




127
Easy coloring: 3 values


           128
I only ever use 3 colors to
      start with, to establish some
      hierarchy.




129
Blending
   If you do work with more color it’s a good idea
   to think about blending them a bit for a more
   natural and considered design.




      130
131
132
133
134
135
136
137
Try to use a darker version
      of the background color as
      your text color, this will look
      better than just pure grey or
      black.




138
Campaign Monitor does a
      good job at blending colors.




139
There’s a green background, dark green for the
      heading, some softer green for the text, and
      then a clear button. All work very well together,
      of course, they’re all variations on the same
      color.




140
For example, here’s the page title, instead of
      just using white they used a tint of blue,
      blending properly with the background color.
      This looks better.




141
I don’t use too much color to make a point
      about simplicity.




      (I also don’t have this 6th sense for colors
      that some designers seem to have)




142
I’m not the only designer just resorting to
      B&W, here’s http://www.subtraction.com/ by
      internet famous Khoi Vinh.




143
Kuler might be a good tool for color but I
      don’t really work with too many palettes in
      interface design, I mostly stick to what I
      know that works already (white/grey/black +
      accent colors + standard message colors,
      e.g. red for error and green for success)




144
I don’t have a sixth sense for color, I can
      apply the color theory I know, but mostly UI
      design doesn’t need a lot of color, so I
      wouldn’t worry too much about it either.




145
Fake harmony




           A way to fake color harmony in a kind of
           engineered way. See the video at http://
           methodandcraft.com/videos/creating-harmonious-
           color-schemes




     146
This is Campaign Monitor again, here they use a
      shade of dark grey with a blueish tint instead of
      just dark grey on a white background. I often do
      this too, it looks prettier and adds some life to a
      page. (you can apply the same logic to buttons,
      backgrounds, etc.;




147
148
149
150
Contrast                                   Not everyone has an Apple Cinema
                                           display: most people have a cheap
                                           computer with a crappy screen. If you
#EEE (very light grey) is evil,            use a light grey like #EEE then there’s

use at least #D5D5D5 (grey)                a huge chance only part of your
                                           audience is going to see it. Pro tip:
                                           Test your designs on your mother’s
                                           computer.

                                           You can even see the difference in
                                           screen quality between a Macbook
                                           and an iMac. The Macbook has much
                                           worse contrast, especially if the
                                           screen angle is not optimal.




   What they see      What you think they see



                             151
Icons


  152
Icons                          Not so much to say about icons,
                               they’re an essential part in the
                               interface to easily recognize actions
                               and parts without having to think too
                               much.




• Invest in a good icon set
• Pixel icons are ideal for web applications
• FamFamFam will only get you so far




                       153
FamFamFam (www.famfamfam.com)
      is a free set, often used, I’m kind of
      tired of seeing it all over the place.




154
Even multi million dollar companies
                                    get away with still using FamFamFam.




(I think they should hire an icon designer and redo
their visual design a bit... the product is great
though and that’s what matters in the end.)




                     155
Collect good things in your personal library




                     I went freelance in January. Must have spent over
                     €800 on icons this year. I consider it an investment,
                     since drawing custom icons for every project would
                     be a disservice to my clients with so many good
                     sets out there.




                    156
Picons is pretty good: http://picons.me/




157
I like Pictos too, http://pictos.drewwilson.com/




158
Something relatively new: @font-face icon fonts.
  Try Fico, by Belgian designer Lennar Schoors.
  http://fico.lensco.be/




159
Icon rule #1:


  Only use an icon
when it's well known,
otherwise use text, or
     text + icon


             160
Example 1




         What does this mean? It’s pretty clear... we know
         this from traffic, we know the exclamation mark,
         it means “warning”.




   161
Ambiguity




         This one is a little tricky. The right button below
         means add, and I can see that the toggle
         switches between a grid and a last view, but what
         about the loop icon? Does it mean zoom? Does it
         mean view details?




         Multiple meanings are a common icon problem,
         this can be resolved by using labels.




   162
Text + icon when in doubt




                 When in doubt, use text + icon, like here.




                  The top two icons (refresh and add) are pretty
                  clear and don’t need a label




           163
Reusable design


       164
Just like you create functions to reuse
  in code, you should have a design
 library with elements you can reuse
       (Web devs have it easy thanks to CSS)




                        165
Bootstrap from Twitter is possibly the best
      looking design framework I’ve seen: http://
      twitter.github.com/bootstrap/




166
A lot of the knowledge mentioned in this
presentation is applied perfectly in Bootstrap.


                                                   Hooray for http://www.markdotto.com/ !




                                                  167
This site for example was coded up with
 Bootstrap in one evening by a developer with few
 visual skills. Looks passable, even good to me!




168
jQuery Mobile recently released 1.0, if you’re
doing something that’s mobile only, this might be
a good framework candidate.
                                                    I played around with the beta and they do a lot of
                                                    things right by default.




                                            169
There’s frameworks out there for responsive
      design too, http://goldengridsystem.com/




170
Avoid frameworks that look dated. Not every
  framework is good.




171
Extras


  172
Don’t remove outlines!




         http://webexpedition18.com/articles/useful-css-snippets/

             173
Be consistent




      174
Don’t put everything on the same screen




                  175
Text is interface/Tone can make all the difference




                       176
So, this presentation is coming to an end.

As we walked through typography, alignment, light & shadow,
color, icon usage and reusable design I hope you learned
something new that you can apply to your work to make it better.

There’s certain parts of designing that we can make into
guidelines and rules of thumb. Applying these rules will make
your design better and in many cases good enough.

Nothing beats a dedicated designer though!




                             177
If you want to become a smarter person read every single book
and article mentioned on the following slide.




                            178
Web resources
http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php           http://twitter.github.com/bootstrap/

http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/                   http://jquerymobile.com/
http://www.uie.com/articles/three_hund_million_button                                http://goldengridsystem.com/
http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx     http://subtlepatterns.com/
http://www.asktog.com/columns/076AppleFlatlandPart2.html
                                                                                     http://www.mikematas.com/
http://www.asktog.com/columns/075AppleFlatlandPart1.html
                                                                                     http://pictos.drewwilson.com/

                                                                                     http://picons.me/

                                                                                     http://fico.lensco.be/


Books                                       Designing the obvious by Robert     Designing the obvious by Robert
Defensive Design for the Web: How           Hoekman Jr.                         Hoekman Jr.
to improve error messages, help,
forms, and other crisis points by
                                            Designing for interaction by Dan
Jason Fried & Matthew Linderman                                                 The Elements of Typographic Style
                                            Saffer
                                                                                by Robert Bringhurst
Designing Web Usability by Jakob
Nielsen                                     Getting Real by 37signals http://
                                            gettingreal.37signals.com/          Detail in Typography by Jost Hochuli
Don’t make me think! by Steve Krug


                                                          179
Hire me.
If you like what you’re seeing, I can apply my
knowledge to your application too, or give this
presentation for your company. Get in touch:
mail@wolfslittlestore.be




                       180
Follow me on Twitter
          Here’s the link:
     http://twitter.com/wolfr_




                181
Subscribe to the blog:
               Here’s the link:
      http://wolfslittlestore.be/journal/

                    RSS:
 http://feeds.feedburner.com/Wolfslittlestore




                      182
Thank you for your attention!



              183

More Related Content

What's hot

機械学習の精度と売上の関係
機械学習の精度と売上の関係機械学習の精度と売上の関係
機械学習の精度と売上の関係Tokoroten Nakayama
 
データマイニングの話詰め合わせ
データマイニングの話詰め合わせデータマイニングの話詰め合わせ
データマイニングの話詰め合わせTokoroten Nakayama
 
DX 組織デザインパターン
DX 組織デザインパターンDX 組織デザインパターン
DX 組織デザインパターンOsaka University
 
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -Tier_IV
 
物聯網與工業4.0情境分析
物聯網與工業4.0情境分析物聯網與工業4.0情境分析
物聯網與工業4.0情境分析Kenny Huang Ph.D.
 
フリップボード・ブレスト(Real版)
フリップボード・ブレスト(Real版)フリップボード・ブレスト(Real版)
フリップボード・ブレスト(Real版)Rikie Ishii
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEYoshiki Hayama
 
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリアHCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリアYoshiki Hayama
 
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?豆寄席 (株式会社豆蔵)
 
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬Mizuki Tanno
 
機械学習応用システムセキュリティガイドライン―背景と公開について
機械学習応用システムセキュリティガイドライン―背景と公開について機械学習応用システムセキュリティガイドライン―背景と公開について
機械学習応用システムセキュリティガイドライン―背景と公開についてNobukazu Yoshioka
 
つくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUXつくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUXMasaya Ando
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019Masaya Ando
 
產品設計的0到1,與1到1億
產品設計的0到1,與1到1億產品設計的0到1,與1到1億
產品設計的0到1,與1到1億Ivan Wei
 
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイント
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイントリクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイント
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイントRecruit Technologies
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsYoshiki Hayama
 

What's hot (20)

機械学習の精度と売上の関係
機械学習の精度と売上の関係機械学習の精度と売上の関係
機械学習の精度と売上の関係
 
データマイニングの話詰め合わせ
データマイニングの話詰め合わせデータマイニングの話詰め合わせ
データマイニングの話詰め合わせ
 
DX 組織デザインパターン
DX 組織デザインパターンDX 組織デザインパターン
DX 組織デザインパターン
 
Building inclusive personas for NSW
Building inclusive personas for NSWBuilding inclusive personas for NSW
Building inclusive personas for NSW
 
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
 
物聯網與工業4.0情境分析
物聯網與工業4.0情境分析物聯網與工業4.0情境分析
物聯網與工業4.0情境分析
 
フリップボード・ブレスト(Real版)
フリップボード・ブレスト(Real版)フリップボード・ブレスト(Real版)
フリップボード・ブレスト(Real版)
 
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFEUX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
UX、デザイン思考、リーンスタートアップのためのオブザベーション(観察)入門:2014年7月5日 UXD/HCD ワイワイCAFE
 
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリアHCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
HCDのはじめの一歩を体験しよう! ユーザーインタビューの基本:2016年8月5日 メンバーズキャリア
 
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?PMBOKガイド7をアジャイル屋はどう迎え撃つか?
PMBOKガイド7をアジャイル屋はどう迎え撃つか?
 
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬
プロダクト開発におけるプロダクトマネージャーの役割とは #‎devsumi‬
 
Bella Anhaia Melo
Bella Anhaia MeloBella Anhaia Melo
Bella Anhaia Melo
 
Elements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James GarrettElements of User Experience by Jesse James Garrett
Elements of User Experience by Jesse James Garrett
 
機械学習応用システムセキュリティガイドライン―背景と公開について
機械学習応用システムセキュリティガイドライン―背景と公開について機械学習応用システムセキュリティガイドライン―背景と公開について
機械学習応用システムセキュリティガイドライン―背景と公開について
 
つくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUXつくり込むUX・うみ出すUX・うまれるUX
つくり込むUX・うみ出すUX・うまれるUX
 
UXデザイン概論 2019
UXデザイン概論 2019UXデザイン概論 2019
UXデザイン概論 2019
 
產品設計的0到1,與1到1億
產品設計的0到1,與1到1億產品設計的0到1,與1到1億
產品設計的0到1,與1到1億
 
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイント
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイントリクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイント
リクルートにおけるセキュリティ施策方針とCSIRT組織運営のポイント
 
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of ChatbotsユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
ユーザーにうれしいチャットボットのUX 7原則 - 7 Principles to Design UX of Chatbots
 
Slideshare Japanese
Slideshare JapaneseSlideshare Japanese
Slideshare Japanese
 

Viewers also liked

iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case studyJohan Ronsse
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Good vs. Great Design
Good vs. Great DesignGood vs. Great Design
Good vs. Great DesignCameron Moll
 
What slide dimensions should you use for your presentations?
What slide dimensions should you use for your presentations?What slide dimensions should you use for your presentations?
What slide dimensions should you use for your presentations?Presentitude
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 

Viewers also liked (7)

iOS design: a case study
iOS design: a case studyiOS design: a case study
iOS design: a case study
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Good vs. Great Design
Good vs. Great DesignGood vs. Great Design
Good vs. Great Design
 
What slide dimensions should you use for your presentations?
What slide dimensions should you use for your presentations?What slide dimensions should you use for your presentations?
What slide dimensions should you use for your presentations?
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
The AI Rush
The AI RushThe AI Rush
The AI Rush
 
SlideShare 101
SlideShare 101SlideShare 101
SlideShare 101
 

Similar to Design for developers

Thoughts on Product Design | Guest Lecture Tilburg University
Thoughts on Product Design | Guest Lecture Tilburg UniversityThoughts on Product Design | Guest Lecture Tilburg University
Thoughts on Product Design | Guest Lecture Tilburg UniversityEtienne Bertou
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1Lewis Lin 🦊
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesFloat
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesomeJen Yu
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014Lewis Lin 🦊
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014MoodLabs
 
Bootstrapping Using Free Software
Bootstrapping Using Free SoftwareBootstrapping Using Free Software
Bootstrapping Using Free SoftwareColin Charles
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Patrick Hays
 
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Steve Feldman
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsMark Roden
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
 
ELMSLN @ OpenEd 14
ELMSLN @ OpenEd 14ELMSLN @ OpenEd 14
ELMSLN @ OpenEd 14btopro
 
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignA Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignHoltstrom
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Processcreed
 
How to embed UX thinking in API design
How to embed UX thinking in API designHow to embed UX thinking in API design
How to embed UX thinking in API designstephshin
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slidesSameer Al-Sakran
 

Similar to Design for developers (20)

Thoughts on Product Design | Guest Lecture Tilburg University
Thoughts on Product Design | Guest Lecture Tilburg UniversityThoughts on Product Design | Guest Lecture Tilburg University
Thoughts on Product Design | Guest Lecture Tilburg University
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
ATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologiesATDTK18 - design patterns for emergent learning technologies
ATDTK18 - design patterns for emergent learning technologies
 
From open source labs to ceo methods and advice by sysfera
From open source labs to ceo methods and advice by sysferaFrom open source labs to ceo methods and advice by sysfera
From open source labs to ceo methods and advice by sysfera
 
Usability Design: Because it's awesome
Usability Design: Because it's awesomeUsability Design: Because it's awesome
Usability Design: Because it's awesome
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014Uxpin web ui design patterns 2014
Uxpin web ui design patterns 2014
 
Bootstrapping Using Free Software
Bootstrapping Using Free SoftwareBootstrapping Using Free Software
Bootstrapping Using Free Software
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013
 
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
Ensure Optimal Performance and Scalability: Implementing a Robust and Reliabl...
 
Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Ibm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applicationsIbm worklight - going from xpages mobile to native mobile applications
Ibm worklight - going from xpages mobile to native mobile applications
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
Cl 03
Cl 03Cl 03
Cl 03
 
ELMSLN @ OpenEd 14
ELMSLN @ OpenEd 14ELMSLN @ OpenEd 14
ELMSLN @ OpenEd 14
 
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignA Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
How to embed UX thinking in API design
How to embed UX thinking in API designHow to embed UX thinking in API design
How to embed UX thinking in API design
 
Biz Product Learnings
Biz Product LearningsBiz Product Learnings
Biz Product Learnings
 
Full stack conference talk slides
Full stack conference talk slidesFull stack conference talk slides
Full stack conference talk slides
 

More from Johan Ronsse

The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelanceJohan Ronsse
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010Johan Ronsse
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designersJohan Ronsse
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Johan Ronsse
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenJohan Ronsse
 

More from Johan Ronsse (9)

What is Bedrock?
What is Bedrock?What is Bedrock?
What is Bedrock?
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelance
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Workflow
WorkflowWorkflow
Workflow
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
 

Recently uploaded

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 

Recently uploaded (20)

Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 

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. 2
  • 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 it’s something you should “feel”. 3
  • 4. Some slides only contain a few words or images so the slides don’t 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. 4
  • 5. 1 Introduction & design theory - 2 Practical tips and tricks - 3 Practical tips and tricks, cont. - 4 Q&A: throughout - 5
  • 7. My name is Johan Wolf or @wolfr_ on the internet 7
  • 8. I run a little freelance design studio Wolf’s Little Store 8
  • 9. I read stuff all day 9
  • 10. I like to play video games 10
  • 11. I love to write 11
  • 12. 12
  • 13. So this is my company’s website, ( http:// wolfslittlestore.be/ ) as you can see it’s 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. 13
  • 14. The kind of design I do is interface design... 14
  • 15. It’s not about the “WOW!” 15
  • 16. I don’t really care too much for interactive presentations or branded games. While they have their right to exist as promotional material, it’s not the kind of work I want to spend my life doing. 16
  • 17. It’s about creating a great product 17
  • 18. It’s about creating a great product Take something that blows and make it better. That’s probably what the people at Dyson were thinking when they applied their vacuum knowledge® to hand dryers. Product of the year for me. 18
  • 20. You’ve got the power 20
  • 21. You’ve got the power I think everyone has the power to make a good product because it’s 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. That’s what I’m gong to do in this talk. 21
  • 22. Theory Let’s start with some theory on what makes a good interface. 22
  • 23. What is a good interface? 23
  • 25. Examples of desirable qualities Fast Easy to use Fun Accessible When thinking about interfaces, and what you’re going to make, you make a list of desirable qualities we want our interface to have. 25
  • 26. Fast 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. 26
  • 27. 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. 27
  • 28. Considerations Build accessible apps because it’s the right thing to do (morally) Accessible Does anyone in the intended audience have a disability? e.g. cockpit software for F16 pilots Do we have the dev resources to focus on accessibility? 28
  • 29. Let’s take this interface for example. I haven’t ever used it to be honest, but this us Lotus 123, the competitor to Excel back in the days of MS DOS. 29
  • 30. Not easy to use/learn Inaccessible Fast (performance) Fast task completion 30
  • 31. If we list our desirable qualities and compare them with the program we have here, we might come to the conclusion that it’s 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, it’s probably blazing fast on current computers, and since it’s all keyboard based I can only guess the time to task completion is also pretty good. Not easy to use/learn Inaccessible Fast (performance) Fast task completion 31
  • 32. Let’s 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. Example: POS system 32
  • 33. Would you want this... Fun Easy to use Fast? 33
  • 35. Or this? 35
  • 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? 36
  • 37. There’s a Belgian supermarket, Colruyt, that tests everything, optimizes everything, and I think they thought long and hard about their register/cashier system too. It’s 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. 37
  • 38. Would you rather bit F5 + F8 to serve a customer or go through a wizard with next/ previous options? 38
  • 39. 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. 39
  • 40. (I hate shopping there) Unfortunately the experience of shopping there is not really what I want, I’d rather pay a bit more and don’t feel like I’m shopping around in a prison. But that might just be me. 40
  • 41. Why did I put this theory part in the presentation? I want everyone to think about what they’re building and for who they’re 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 <3 Apple software a lot of what they do feels dumbed down. I’m very frustrated making this 150+ slides presentation in Keynote because there is no automation whatsoever. I can’t align things automatically, I have to copy paste this note thing from slide to slide manually. 41
  • 43. 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 43
  • 44. You’re a developer so: • 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) 44
  • 45. Web developer, Windows software developer, Java, Ruby or iOS fanatic: Good interface = same principles 45
  • 46. Web developers have a bit of an edge: CSS 46
  • 47. Web developers have a bit of an edge: CSS Shareable design 47
  • 48. Who in the audience has ever tried to learn Photoshop? It’s big and vast... there’s many tools and palettes and it’s easy to get lost. I took me years to become productive in Photoshop and I understand why people are advocating designing in the browser. 48
  • 49. Text 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. 49
  • 50. You don’t have to learn Photoshop (or any graphics program for that matter) to deliver a proper software design. As I said before it’s 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. 50
  • 51. Practical tips & tricks Now... on to the real meat of the presentation. The practical tips and tricks. What you’ve been waiting for I guess! 51
  • 52. Practical tips & tricks (1) A Typography - B Alignment - C Light & shadow - I divided this up in sections, first up are typography, alignment and light and shadow. These are the most important parts. 52
  • 54. 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:
  • 55. Verdana The quick brown fox jumps over the lazy dog Lucida Grande The quick brown fox jumps (Fallback: Lucida Sans Unicode) over the lazy dog 55
  • 56. 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 you’re doing Microsoft software. Droid Sans The quick brown fox jumps over the lazy dog Segoe UI 56
  • 57. Why these fonts? Specifically designed for UI: compare Verdana to Times: which will be more legible at small sizes? Verdana at 36px Times at 36px If you’re interested in typography at all, and you want to know more why this is like it is, try http://typophile.com/node/12028
  • 58. Why these fonts? Hinted at low sizes The two fonts at the bottom will not be named... hint: one is universally hated by designers and the other caused a stir when it was used as the subtitle for James Cameron’s Avatar
  • 59. Gill Sans Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Palatino Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in Some culpa qui officia deserunt mollit anim id est laborum. fonts have their roots in print, they are wonderful if used for the right purposes. Gill Sans is a great typeface Impact Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor with British roots, Palatino incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisfor a book, could be perfect aute irure and Impact, wel... dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 59
  • 60. Impact ... probably good if you want to make an IMPACT. 60
  • 61. Why some fonts are better for interfaces than others Verdana 1iIL Gill Sans 1iIL Here’s the same character string in Verdana and Gill As you can Excel set in Gill Sans might Sans. give some problems: what if you need cell I1, you would read it as II 61
  • 62. zero versus “o”: difference can be critical A crossed zero can make the difference between a font that works for financial applications and one that doesn’t. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog post about Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . It’s a very economical typeface perfect for spreadsheets. 62
  • 64. Relative readability This is a pretty well known picture among designers, it displays the relative readability between a book and a blog post on a screen set in 16px. Basically we all use type sizes that are way too low. 16px works for reading. Why not use this browser default instead of making the text tiny? 64
  • 65. Font sizes • When in doubt, make it larger, especially if it’s for reading (any long form content in paragraph form) • All texts on the web that are meant to be read should be at least 14px big! 65
  • 66. Font sizes • You can go smaller in interface depending on your font, e.g. if you use Lucida Grande or Verdana you could go for 11, 12 or 13px. 66
  • 67. What is wrong with this picture? 67
  • 68. Reading length • There's a reason newspapers are set in columns, that books are not wider than they are... practical printing reasons, but also a scientific reason: it's harder to read a text when lines are too long • Rule of thumb: paragraphs should never be longer than 60 characters, so limit them in width 68
  • 69. Why is my type so boring? 69
  • 70. Font services • Use Typekit ($50/yr for low traffic sites) • Use Webtype if you have money ($40/yr/ typeface) • There are very little fonts in Google web fonts currently that are worth using • Use with caution (performance, quality of fonts) • Good design is not free in general 70
  • 71. All efforts to optimize for performance on my own Wolf’s Little Store website were kind of cancelled out by using 2 fonts from an external web provider. If you care about performance at all, don’t use @font-face. 71
  • 72. Line height makes all the difference: 1.5 line height 72 1.0 line height
  • 73. Line height • I keep returning to these same values: • Use a line-height of 1.1 for headings • Use a line-height of 1.5 for paragraphs 73
  • 74. Alignment 74
  • 75. How to align things?! 75
  • 76. How to align things?! Much has been written about the dark art of aligning things: there’s whole books about aligning and grid systems, mostly dealing with paper sizes and proportions. I want to show you 3 things that might make you better at aligning without having to overthink it. 76
  • 77. Alignment • Law of proximity (gestalt) • Screen interface design: work with the number 6. 6, 12, 18, 36... (example) • Grid design example • Use space appropriately 77
  • 79. The law of proximity The law of proximity – Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. Wikipedia 79
  • 80. The law of proximity 80
  • 81. The law of proximity As you can see, the left circles form a group, on the right side there’s 3 groups, all of this is done by spacing between elements only. Why is this so important and what does it have to do with UI design? 81
  • 82. The law of proximity The law of proximity says that elements that are closer together will be perceived as a group. Since the spacing is even between every comment here it’s hard to find out who wrote which comment. 82
  • 83. The law of proximity Compare this to a design where there is clear spacing between the comments. The author is on top (as per convention) and the avatar reinforces who is talking. 83
  • 84. I keep returning to the number 6 84
  • 85. Base font size: Base line height (x1.5) 2x6 12 = 18px 3x6 Reading font size: Base line height (x1.5) 16 = 24px 4x6 85
  • 86. 6px as our “unit” Major elements spacing 6 units Regular spacing 4 units Minor spacing 2 units 86
  • 87. Example This part of the presentation is about how I keep returning to the number 6 for aligning and spacing UI elements. It makes sense: all the numbers we use for our defaults (1.5 line height, 16px font size for reading, etc.) form multiples of 6 when used in simple calculations: 12, 18, 24, 36, ... 87
  • 88. Start off with a grid, I used an online grid calculator (here: http://www.29digital.net/ grid/ ) and defined my column and gutter widths so are multiples of 6. 88
  • 89. Here’s that same grid visualized. I used Photoshop but you might as well do it in HTML/CSS if you’re used to that. 89
  • 90. As you can see, if we think of 6 as our unit, there are 4 units between columns, and each column is 16 units wide. 90
  • 91. I add some elements to the interface... 91
  • 92. ...a header area, a content area... 92
  • 93. The height of content area if flexible, for the header I used a multiple of 6 again. 93
  • 94. For the spacing between the areas I used a multiple of 6 again. It’s easy, just keep returning to the number 6. 94
  • 95. I add some text, this is from Moby Dick (book in the public domain). Now, it still looks like **** so let’s do something about that. 95
  • 96. I set the font to 16px since this is my default for reading, then add spacing between the paragraphs. 96
  • 97. I add a heading which has a font size of 24px, once again tying into the number 6 97
  • 98. Look, the spacing between elements is not arbitrary, it’s all a multiple of 6, and the reason I made my paragraph 4 columns wide ties into the line length reasoning as discussed earlier. It’s a ruleset that makes sense. 98
  • 99. I move the text to the middle since I want to add a navigation etc. to the website. 99
  • 100. I know how my grid works so I don’t need to display it all the time now. I go to my standard colors (more on that later). 100
  • 101. I keep on designing... again keeping 6 in the back of my head. For example, the padding in the comments is 12px, and the line height of the navigation items is 24px. 101
  • 102. We have a design that looks passable without much designing really: we applied some guidelines, that’s it. I’m not saying it looks like the bomb, but we have a solid base to work upon here. 102
  • 103. I use this strategy all the time, look at my site, all the spacing is based on 6... 103
  • 104. This might be a bit more clear. 104
  • 105. Keep returning to the number 6 105
  • 107. Use space appropriately This is the Netflix iPad app, I’m all for proper whitespace, but this is just not an appropriate design for the iPad. You have all this space, why not use it e.g. to display the film posters too? It looks like they just stretched out the existing iPhone app. This is a common problem with most Android tablet software these days. 107
  • 108. Use space appropriately Compare with something like the iPhoto design for iPad that makes appropriate use of the space. Big fan of the designer www.mikematas.com 108
  • 110. Shadows and gradients rule #1: Use shadows and gradients as a tool, not as decoration 110
  • 111. Think of real life 111
  • 112. Take a second to look at this photo and look at the reflections, the knobs, the shadows being cast. 112
  • 113. In real life... • Shadows are never pure black (radiosity) • Objects higher than other objects cast a shadow on the lower object • Some surfaces are reflective and some are not • When we press a button it lowers • Light is cast from a direction 113
  • 114. Shadows are never pure black The first box looks kinda like what you would see in a common “developer design”. Try to soften it a bit more by using a greyish tint (middle), I like to make my shadows a bit blueish grey (third box). It’s kinda hard to see but all the little details together often make a design great instead of just good. 114
  • 115. Drop Shadows will ruin your design if you don't do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn't WordArt. Mike Rundle, flyosity.com 115
  • 116. Window shadow The window shadow on Mac OSX is a bit overdone but it does make a good example that you should think of objects on top (windows, modals) to be physically on top and thus cast a shadow. This helps with the metaphor and helps people understand what they’re seeing. 116
  • 117. Recipe for a good button! Light to dark gradient Try to think of light as coming from a certain direction. The most natural direction is from the top (e.g. the sun). Thus, a light coming in from the top would make the top part of a button lighter, and the bottom part darker. This is why your gradient runs from light to dark, not just because you thought it looks nice. Clear verb Clear lines 117
  • 118. Recipe for a good button! Distinctive active state It’s not realistic to change the color of a button when you press it but it does help to reinforce which button was clicked. In real life the button would probably lower a bit thus creating an inner shadow. Inner shadows work for “pressed” look 118
  • 119. Don’t just flip the gradient direction! Just flipping the gradient direction is the equivalent of the environment light Light changing direction when you direction hover over/click a button, this makes zero sense. It’s also way too subtle. Light direction 119
  • 120. Most interfaces: think of light coming in from a 120° angle Text inputs have shadows Modal boxes cast a 120° drop on the top and left shadow (more shadow on bottom and right), be subtle 120
  • 121. Practical tips & tricks (2) 121
  • 122. Practical tips & tricks (2) A Color - B Icons - C Reusable design - Next up are three parts, the first about color, then icons, and to end reusable design. 122
  • 124. Ways to pick colors 124
  • 125. 125
  • 126. Hues app for Mac is pretty cool, and it’s only €2 126
  • 127. Hues is a good replacement for the standard digital color meter. 127
  • 128. Easy coloring: 3 values 128
  • 129. I only ever use 3 colors to start with, to establish some hierarchy. 129
  • 130. Blending If you do work with more color it’s a good idea to think about blending them a bit for a more natural and considered design. 130
  • 131. 131
  • 132. 132
  • 133. 133
  • 134. 134
  • 135. 135
  • 136. 136
  • 137. 137
  • 138. Try to use a darker version of the background color as your text color, this will look better than just pure grey or black. 138
  • 139. Campaign Monitor does a good job at blending colors. 139
  • 140. There’s a green background, dark green for the heading, some softer green for the text, and then a clear button. All work very well together, of course, they’re all variations on the same color. 140
  • 141. For example, here’s the page title, instead of just using white they used a tint of blue, blending properly with the background color. This looks better. 141
  • 142. I don’t use too much color to make a point about simplicity. (I also don’t have this 6th sense for colors that some designers seem to have) 142
  • 143. I’m not the only designer just resorting to B&W, here’s http://www.subtraction.com/ by internet famous Khoi Vinh. 143
  • 144. Kuler might be a good tool for color but I don’t really work with too many palettes in interface design, I mostly stick to what I know that works already (white/grey/black + accent colors + standard message colors, e.g. red for error and green for success) 144
  • 145. I don’t have a sixth sense for color, I can apply the color theory I know, but mostly UI design doesn’t need a lot of color, so I wouldn’t worry too much about it either. 145
  • 146. Fake harmony A way to fake color harmony in a kind of engineered way. See the video at http:// methodandcraft.com/videos/creating-harmonious- color-schemes 146
  • 147. This is Campaign Monitor again, here they use a shade of dark grey with a blueish tint instead of just dark grey on a white background. I often do this too, it looks prettier and adds some life to a page. (you can apply the same logic to buttons, backgrounds, etc.; 147
  • 148. 148
  • 149. 149
  • 150. 150
  • 151. Contrast Not everyone has an Apple Cinema display: most people have a cheap computer with a crappy screen. If you #EEE (very light grey) is evil, use a light grey like #EEE then there’s use at least #D5D5D5 (grey) a huge chance only part of your audience is going to see it. Pro tip: Test your designs on your mother’s computer. You can even see the difference in screen quality between a Macbook and an iMac. The Macbook has much worse contrast, especially if the screen angle is not optimal. What they see What you think they see 151
  • 153. Icons Not so much to say about icons, they’re an essential part in the interface to easily recognize actions and parts without having to think too much. • Invest in a good icon set • Pixel icons are ideal for web applications • FamFamFam will only get you so far 153
  • 154. FamFamFam (www.famfamfam.com) is a free set, often used, I’m kind of tired of seeing it all over the place. 154
  • 155. Even multi million dollar companies get away with still using FamFamFam. (I think they should hire an icon designer and redo their visual design a bit... the product is great though and that’s what matters in the end.) 155
  • 156. Collect good things in your personal library I went freelance in January. Must have spent over €800 on icons this year. I consider it an investment, since drawing custom icons for every project would be a disservice to my clients with so many good sets out there. 156
  • 157. Picons is pretty good: http://picons.me/ 157
  • 158. I like Pictos too, http://pictos.drewwilson.com/ 158
  • 159. Something relatively new: @font-face icon fonts. Try Fico, by Belgian designer Lennar Schoors. http://fico.lensco.be/ 159
  • 160. Icon rule #1: Only use an icon when it's well known, otherwise use text, or text + icon 160
  • 161. Example 1 What does this mean? It’s pretty clear... we know this from traffic, we know the exclamation mark, it means “warning”. 161
  • 162. Ambiguity This one is a little tricky. The right button below means add, and I can see that the toggle switches between a grid and a last view, but what about the loop icon? Does it mean zoom? Does it mean view details? Multiple meanings are a common icon problem, this can be resolved by using labels. 162
  • 163. Text + icon when in doubt When in doubt, use text + icon, like here. The top two icons (refresh and add) are pretty clear and don’t need a label 163
  • 165. Just like you create functions to reuse in code, you should have a design library with elements you can reuse (Web devs have it easy thanks to CSS) 165
  • 166. Bootstrap from Twitter is possibly the best looking design framework I’ve seen: http:// twitter.github.com/bootstrap/ 166
  • 167. A lot of the knowledge mentioned in this presentation is applied perfectly in Bootstrap. Hooray for http://www.markdotto.com/ ! 167
  • 168. This site for example was coded up with Bootstrap in one evening by a developer with few visual skills. Looks passable, even good to me! 168
  • 169. jQuery Mobile recently released 1.0, if you’re doing something that’s mobile only, this might be a good framework candidate. I played around with the beta and they do a lot of things right by default. 169
  • 170. There’s frameworks out there for responsive design too, http://goldengridsystem.com/ 170
  • 171. Avoid frameworks that look dated. Not every framework is good. 171
  • 173. Don’t remove outlines! http://webexpedition18.com/articles/useful-css-snippets/ 173
  • 175. Don’t put everything on the same screen 175
  • 176. Text is interface/Tone can make all the difference 176
  • 177. So, this presentation is coming to an end. As we walked through typography, alignment, light & shadow, color, icon usage and reusable design I hope you learned something new that you can apply to your work to make it better. There’s certain parts of designing that we can make into guidelines and rules of thumb. Applying these rules will make your design better and in many cases good enough. Nothing beats a dedicated designer though! 177
  • 178. If you want to become a smarter person read every single book and article mentioned on the following slide. 178
  • 179. Web resources http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php http://twitter.github.com/bootstrap/ http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://jquerymobile.com/ http://www.uie.com/articles/three_hund_million_button http://goldengridsystem.com/ http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx http://subtlepatterns.com/ http://www.asktog.com/columns/076AppleFlatlandPart2.html http://www.mikematas.com/ http://www.asktog.com/columns/075AppleFlatlandPart1.html http://pictos.drewwilson.com/ http://picons.me/ http://fico.lensco.be/ Books Designing the obvious by Robert Designing the obvious by Robert Defensive Design for the Web: How Hoekman Jr. Hoekman Jr. to improve error messages, help, forms, and other crisis points by Designing for interaction by Dan Jason Fried & Matthew Linderman The Elements of Typographic Style Saffer by Robert Bringhurst Designing Web Usability by Jakob Nielsen Getting Real by 37signals http:// gettingreal.37signals.com/ Detail in Typography by Jost Hochuli Don’t make me think! by Steve Krug 179
  • 180. Hire me. If you like what you’re seeing, I can apply my knowledge to your application too, or give this presentation for your company. Get in touch: mail@wolfslittlestore.be 180
  • 181. Follow me on Twitter Here’s the link: http://twitter.com/wolfr_ 181
  • 182. Subscribe to the blog: Here’s the link: http://wolfslittlestore.be/journal/ RSS: http://feeds.feedburner.com/Wolfslittlestore 182
  • 183. Thank you for your attention! 183