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
510
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
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
710
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
190
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
280
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
190
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
450
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.9k
アクセシビリティに取り組むメリット
magi1125
2
270
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
590
kintone Style Book
kintone
4
3.6k
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
380
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
331
21k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Thoughts on Productivity
jonyablonski
70
4.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Bash Introduction
62gerente
615
210k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Documentation Writing (for coders)
carmenintech
75
5.1k
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