Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design Minded Development
Search
Austin Bales
March 01, 2013
Design
8
500
Design Minded Development
Good designers and good developers have a lot in common.
Austin Bales
March 01, 2013
Tweet
Share
More Decks by Austin Bales
See All by Austin Bales
UI Encapsulation with Handlebars and Sass
austin
5
1.1k
Building Awesome Products at Do.com
austin
2
190
Building Do on Heroku
austin
7
700
Other Decks in Design
See All in Design
Saudade typeface
tiagoporto
0
320
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.6k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
minpaku-community-scrum-patterns
norinity1103
1
110
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
CMS管理画面のアクセシビリティ
magi1125
6
1.9k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
sachi_y_portfolio
sachi337
0
250
デザイナーとPMの両ロール_3つのポイント
toy1618
1
320
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Facilitating Awesome Meetings
lara
54
6.4k
A better future with KSS
kneath
239
17k
Producing Creativity
orderedlist
PRO
346
40k
Optimizing for Happiness
mojombo
379
70k
Building an army of robots
kneath
306
45k
Designing for Performance
lara
609
69k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Become a Pro
speakerdeck
PRO
28
5.4k
Transcript
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
do.com
None
Design Minded Development The work, dress and concepts displayed within
are the property of Austin Bales or others. Some or all rights reserved.
Good designers and good developers have a lot in common.
“ What is it that makes it what it is?
” Karen Moyer
DESIGN IS PROCESS from an existing state – to a
preferred one
DEVELOPMENT IS PROCESS from a concept – to a functioning
system
PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities
LABELS!? (DANGEROUS COMPLIMENTS)
UNICORN / NINJA
NINJAS THROW STARS, THEY DON’T WRITE CODE.
YOU CAN BE A TOO DON’T PLACE PEOPLE ON PEDESTALS
LEARNING Steps for
What do you want to Build? The Build icon is
a trademark of Andy McMillan.
How can I realize an idea?
Start somewhere, somehow. <?php ?>
Iterate
Gradually aim to solve more complex problems.
PATTERNS SIMPLICITY CLARITY & DRYNESS The Commonalities
PATTERNS No. 1
“ 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
-‐ (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
In Design
None
None
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
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
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
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
None
SIMPLICITY No. 2 Contains quotations and excepts from… The Laws
of Simplicity by John Maeda
“ Simplicity is about subtracting the obvious, and adding the
meaningful. ” The Laws of Simplicity by John Maeda
In Code
“Subviews” in Backbone
Album art from Up From Below. Copyright Vagrant Records.
Control View Volume View
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
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()) }
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()) }
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()) }
Render Initialize Render Bind Events
“Subviews” in Ember
{{view Warble.VolumeControlView}} control_view.hbs Warble.JukeboxController = Ember.ObjectController.extend({ volumeChanged: function(e) {}
}); jukebox_controller.coffee
{{view Warble.VolumeControlView}} Warble.JukeboxController = Ember.ObjectController.extend({ volumeChanged: function(e) {} });
{{view Warble.VolumeControlView}} Warble.JukeboxController = Ember.ObjectController.extend({ volumeChanged: function(e) {} });
1. Specify a Subview (2. Customize)
Simplicity is about subtracting the obvious, and adding the meaningful.
” “
In User Interfaces
Adding Contacts & Subscribers
None
“Mentions” in Do, Facebook, etc.
None
Simplify UI by designing for user behavior.
CLARITY No. 3
In User Interfaces
Microsoft Word
None
46 WIDGETS
Pages
None
23 WIDGETS
Reduce.
In Code
Gob Bluth
<span class="avatar-‐wrapper"> <img src="{{avatar.url}}" alt="…" title="…" class="avatar" /> </span>
Gob Bluth
<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>
Don’t repeat yourself.
<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>
{{constructAvatar user size=32}}
{{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}}
Uniform tag construction Consistent image sizes! Documented options Easy-to-Update Forget
forgetting alt, title, etc.
Keep it DRY
Good designers and good developers have a lot in common.
Have a great day. arbales