Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Minded Development

6a811536d2b8fba3a92ef054db9ba377?s=47 Austin Bales
March 01, 2013

Design Minded Development

Good designers and good developers have a lot in common.

6a811536d2b8fba3a92ef054db9ba377?s=128

Austin Bales

March 01, 2013
Tweet

Transcript

  1. Design Minded Development The work, dress and concepts displayed within

    are the property of Austin Bales or others. Some or all rights reserved. Austin Robert Bales arbales
  2. do.com

  3. None
  4. Design Minded Development The work, dress and concepts displayed within

    are the property of Austin Bales or others. Some or all rights reserved.
  5. Good designers and good developers have a lot in common.

  6. “ What is it that makes it what it is?

    ” Karen Moyer
  7. DESIGN IS PROCESS from an existing state – to a

    preferred one
  8. DEVELOPMENT IS PROCESS from a concept – to a functioning

    system
  9. PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities

  10. LABELS!? (DANGEROUS COMPLIMENTS)

  11. UNICORN / NINJA

  12. NINJAS THROW STARS, THEY DON’T WRITE CODE.

  13. YOU CAN BE A TOO DON’T PLACE PEOPLE ON PEDESTALS

  14. LEARNING Steps for

  15. What do you want to Build? The Build icon is

    a trademark of Andy McMillan.
  16. How can I realize an idea?

  17. Start somewhere, somehow. <?php ?>

  18. Iterate

  19. Gradually aim to solve more complex problems.

  20. PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities

  21. PATTERNS No. 1

  22. “ Good product design incorporates a number of timeless principles

    for human-computer interaction. ” “The Philosophy of UI Design: Fundamental Principles” OS X Human Interface Guidelines
  23. -­‐  (void)  setupVolumeView  {        NSView  *volumeView  =

     [NSView  initialize];        [volumeView  setDelegate:  self]; } song  =  Song.new song.name  =  "Ocean  Man" song.artist  =  Artist.where(name:  'Ween').first song.save
  24. In Design

  25. None
  26. None
  27. Art & Technology Lectures presents… Richard L. Gregory The Peculiarity

    of Pictures 7pm on November 31, 2007 Margaret Morrison Carnegie Hall 5232 Forbes Avenue, Pittsburgh Admission Free
  28. Art & Technology Lectures presents… Richard L. Gregory The Peculiarity

    of Pictures 7pm on November 31, 2007 Margaret Morrison Carnegie Hall 5232 Forbes Avenue, Pittsburgh Admission Free
  29. Art & Technology Lectures presents… Richard L. Gregory The Peculiarity

    of Pictures 7pm on November 31, 2007 Margaret Morrison Carnegie Hall 5232 Forbes Avenue, Pittsburgh Admission Free
  30. Art & Technology Lectures presents… Richard L. Gregory The Peculiarity

    of Pictures 7pm on November 31, 2007 Margaret Morrison Carnegie Hall 5232 Forbes Avenue, Pittsburgh Admission Free
  31. None
  32. SIMPLICITY No. 2 Contains quotations and excepts from… The Laws

    of Simplicity by John Maeda
  33. “ Simplicity is about subtracting the obvious, and adding the

    meaningful. ” The Laws of Simplicity by John Maeda
  34. In Code

  35. “Subviews” in Backbone

  36. Album art from Up From Below. Copyright Vagrant Records.

  37. Control View Volume View

  38. render:  function(){    this.$el.html(Warble.templates.controls());    volumeEl  =  this.$("[data-­‐region='volumeControls']");    this.volumeView

     =  new  Warble.Views.VolumeControl({        el:  volumeEl,        currentVolume:  this.model.get('currentVolume')    });    this.volumeView.render();    this.volumeView.on('change:volume',  this.changeVolume()) } warble_control_view.js
  39. render:  function(){    this.$el.html(Warble.templates.controls());    volumeEl  =  this.$("[data-­‐region='volumeControls']");    this.volumeView

     =  new  Warble.Views.VolumeControl({        el:  volumeEl,        currentVolume:  this.model.get('currentVolume')    });    this.volumeView.render();    this.volumeView.on('change:volume',  this.changeVolume()) }
  40. render:  function(){    this.$el.html(Warble.templates.controls());    volumeEl  =  this.$("[data-­‐region='volumeControls']");    this.volumeView

     =  new  Warble.Views.VolumeControl({        el:  volumeEl,        currentVolume:  this.model.get('currentVolume')    });    this.volumeView.render();    this.volumeView.on('change:volume',  this.changeVolume()) }
  41. render:  function(){    this.$el.html(Warble.templates.controls());    volumeEl  =  this.$("[data-­‐region='volumeControls']");    this.volumeView

     =  new  Warble.Views.VolumeControl({        el:  volumeEl,        currentVolume:  this.model.get('currentVolume')    });    this.volumeView.render();    this.volumeView.on('change:volume',  this.changeVolume()) }
  42. Render Initialize Render Bind Events

  43. “Subviews” in Ember

  44. {{view  Warble.VolumeControlView}} control_view.hbs Warble.JukeboxController  =  Ember.ObjectController.extend({    volumeChanged:  function(e)  {}

    }); jukebox_controller.coffee
  45. {{view  Warble.VolumeControlView}} Warble.JukeboxController  =  Ember.ObjectController.extend({    volumeChanged:  function(e)  {} });

  46. {{view  Warble.VolumeControlView}} Warble.JukeboxController  =  Ember.ObjectController.extend({    volumeChanged:  function(e)  {} });

  47. 1. Specify a Subview (2. Customize)

  48. Simplicity is about subtracting the obvious, and adding the meaningful.

    ” “
  49. In User Interfaces

  50. Adding Contacts & Subscribers

  51. None
  52. “Mentions” in Do, Facebook, etc.

  53. None
  54. Simplify UI by designing for user behavior.

  55. CLARITY No. 3

  56. In User Interfaces

  57. Microsoft Word

  58. None
  59. 46 WIDGETS

  60. Pages

  61. None
  62. 23 WIDGETS

  63. Reduce.

  64. In Code

  65. Gob Bluth

  66. <span  class="avatar-­‐wrapper">    <img  src="{{avatar.url}}"  alt="…"  title="…"  class="avatar"  /> </span>

  67. Gob Bluth

  68. <div  class="avatar-­‐wrapper">    <img  src="{{avatar.h48.url"  …  class="avatar  big"  /> </div>

    <i  class="avatar-­‐profile"  data-­‐image=    "<%=  current_user.avatar.full"></i> <span  class="avatar-­‐wrapper">    <img  src="{{author.avatar.url}}"  …  class="avatar"  />    <span  class="guest-­‐indicator"></span> </span> <div  class="avatar  uploader"  data-­‐role="uploader">    <img  src="{{url}}"  alt="…"  title="{{../../name}}"  class="avatar  big"  />    <label  class="button  button-­‐upload  icon">    … </div>
  69. Don’t repeat yourself.

  70. <div  class="avatar-­‐wrapper">    <img  src="{{avatar.h48.url}}"  …  class="avatar  big"  /> </div>

    <i  class="avatar-­‐profile"  data-­‐image=    "<%=  current_user.avatar.full"></i> <span  class="avatar-­‐wrapper">    <img  src="{{author.avatar.url}}"  …  class="avatar"  />    <span  class="guest-­‐indicator"></span> </span> <div  class="avatar  uploader"  data-­‐role="uploader">    <img  src="{{url}}"  alt="…"  title="{{../../name}}"  class="avatar  big"  />    <label  class="button  button-­‐upload  icon">    … </div>
  71. {{constructAvatar  user  size=32}}

  72. {{constructAvatar  user  size=48}} {{constructAvatar  user  size=80  style="rounded"}} {{constructAvatar  user  size=32

     guest=true}} {{#constructAvatar  user  size=32  wrapper="uploader"}}        <label  class="button  button-­‐upload  icon"> {{/constructAvatar}}
  73. Uniform tag construction Consistent image sizes! Documented options Easy-to-Update Forget

    forgetting alt, title, etc.
  74. Keep it DRY

  75. Good designers and good developers have a lot in common.

  76. Have a great day. arbales