Design Minded Development

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