Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

do.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Design Minded Development The work, dress and concepts displayed within are the property of Austin Bales or others. Some or all rights reserved.

Slide 5

Slide 5 text

Good designers and good developers have a lot in common.

Slide 6

Slide 6 text

“ What is it that makes it what it is? ” Karen Moyer

Slide 7

Slide 7 text

DESIGN IS PROCESS from an existing state – to a preferred one

Slide 8

Slide 8 text

DEVELOPMENT IS PROCESS from a concept – to a functioning system

Slide 9

Slide 9 text

PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities

Slide 10

Slide 10 text

LABELS!? (DANGEROUS COMPLIMENTS)

Slide 11

Slide 11 text

UNICORN / NINJA

Slide 12

Slide 12 text

NINJAS THROW STARS, THEY DON’T WRITE CODE.

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

LEARNING Steps for

Slide 15

Slide 15 text

What do you want to Build? The Build icon is a trademark of Andy McMillan.

Slide 16

Slide 16 text

How can I realize an idea?

Slide 17

Slide 17 text

Start somewhere, somehow.

Slide 18

Slide 18 text

Iterate

Slide 19

Slide 19 text

Gradually aim to solve more complex problems.

Slide 20

Slide 20 text

PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities

Slide 21

Slide 21 text

PATTERNS No. 1

Slide 22

Slide 22 text

“ 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

Slide 23

Slide 23 text

-­‐  (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

Slide 24

Slide 24 text

In Design

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

SIMPLICITY No. 2 Contains quotations and excepts from… The Laws of Simplicity by John Maeda

Slide 33

Slide 33 text

“ Simplicity is about subtracting the obvious, and adding the meaningful. ” The Laws of Simplicity by John Maeda

Slide 34

Slide 34 text

In Code

Slide 35

Slide 35 text

“Subviews” in Backbone

Slide 36

Slide 36 text

Album art from Up From Below. Copyright Vagrant Records.

Slide 37

Slide 37 text

Control View Volume View

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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()) }

Slide 40

Slide 40 text

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()) }

Slide 41

Slide 41 text

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()) }

Slide 42

Slide 42 text

Render Initialize Render Bind Events

Slide 43

Slide 43 text

“Subviews” in Ember

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

1. Specify a Subview (2. Customize)

Slide 48

Slide 48 text

Simplicity is about subtracting the obvious, and adding the meaningful. ” “

Slide 49

Slide 49 text

In User Interfaces

Slide 50

Slide 50 text

Adding Contacts & Subscribers

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

“Mentions” in Do, Facebook, etc.

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Simplify UI by designing for user behavior.

Slide 55

Slide 55 text

CLARITY No. 3

Slide 56

Slide 56 text

In User Interfaces

Slide 57

Slide 57 text

Microsoft Word

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

46 WIDGETS

Slide 60

Slide 60 text

Pages

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

23 WIDGETS

Slide 63

Slide 63 text

Reduce.

Slide 64

Slide 64 text

In Code

Slide 65

Slide 65 text

Gob Bluth

Slide 66

Slide 66 text

   

Slide 67

Slide 67 text

Gob Bluth

Slide 68

Slide 68 text

   
       
           …

Slide 69

Slide 69 text

Don’t repeat yourself.

Slide 70

Slide 70 text

   
       
           …

Slide 71

Slide 71 text

{{constructAvatar  user  size=32}}

Slide 72

Slide 72 text

{{constructAvatar  user  size=48}} {{constructAvatar  user  size=80  style="rounded"}} {{constructAvatar  user  size=32  guest=true}} {{#constructAvatar  user  size=32  wrapper="uploader"}}         {{/constructAvatar}}

Slide 73

Slide 73 text

Uniform tag construction Consistent image sizes! Documented options Easy-to-Update Forget forgetting alt, title, etc.

Slide 74

Slide 74 text

Keep it DRY

Slide 75

Slide 75 text

Good designers and good developers have a lot in common.

Slide 76

Slide 76 text

Have a great day. arbales