Design Minded Development

Good designers and good developers have a lot in common.

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
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
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
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
52. “Mentions” in Do, Facebook, etc.
54. Simplify UI by designing for user behavior.
55. CLARITY No. 3
56. In User Interfaces
57. Microsoft Word
59. 46 WIDGETS
60. Pages
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