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
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
190
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
130
マンガで分かるサービスデザインガイドライン
senryakuka
1
890
PF_濵村ひろみ_202503
maru_design78
0
170
Saudade typeface
tiagoporto
0
320
How to get a Tiger to Tulsa
mcduckyart
0
100
問いの変遷
iflection
0
140
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
600
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
Liquid Iron
mcduckyart
1
100
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building an army of robots
kneath
306
45k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Bash Introduction
62gerente
614
210k
4 Signs Your Business is Dying
shpigford
184
22k
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