Slide 1
Slide 1 text
Dr. Weblove
Or: How I Learned to Stop Worrying About Photoshop and Love Designers
http://www.flickr.com/photos/x-ray_delta_one/4152356696
Slide 2
Slide 2 text
How I go from a visual
design (i.e. a mock) and
make it a real weby thingy
Or more specifically:
But that's a crap title.
Slide 3
Slide 3 text
๏Mock ➡ Developer
๏Deconstructing the
mock: work, risk, costs
๏Approach to coding
My Plan:
http://www.flickr.com/photos/zervas/3848962977/
Slide 4
Slide 4 text
In my
previous
life I was
NOT a
designer.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
http://www.flickr.com/photos/jojakeman/3825935283/
Grrrr
ROAR
Designer
Developer
Slide 7
Slide 7 text
http://www.flickr.com/photos/jojakeman/3825935283/
Designer
Developer
I love you,
man
Slide 8
Slide 8 text
http://www.flickr.com/photos/jojakeman/3825935283/
Slide 9
Slide 9 text
Designers:
How to prepare a design that devs can use
+ work flow with clients/manages
Developers:
Process tips for dev and testing
Slide 10
Slide 10 text
http://www.flickr.com/photos/barbaradoduk/195689523
lube === good
Slide 11
Slide 11 text
Basics
Seeing all the problems
in a mock immediately
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
If you're using a grid,
make exceptions.
Don't make exceptions,
the rule of thumb.
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
WTF?
WTF?... oh...
"flick"
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
#home {
max-width: 100%;
}
http://www.flickr.com/photos/adactio/5818096043
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Don't let your
design deficient
developer do
this design -
it'll look crap.
Slide 29
Slide 29 text
Good Great
Slide 30
Slide 30 text
Quote Messer Upperers
๏Liquid layouts
๏Fixed sizes
๏Responsive design
๏Tiny variances
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Deconstruct
the design
Slide 37
Slide 37 text
What can't you see?
The invisibles will always bite you in the arse.
http://www.flickr.com/photos/remysharp/1163289602/
Slide 38
Slide 38 text
What's clickable?
What's touchable?
What's the target platform?
Browser support?
Slide 39
Slide 39 text
http://www.flickr.com/photos/dannynic/3295160732/
Touch vs.
Hold vs.
Drag vs.
Double tap over a tap
hotspot vs...
Slide 40
Slide 40 text
Recommendation:
sit with client & drawing
and touch that.
Slide 41
Slide 41 text
Risk = screw ups = time = £
Slide 42
Slide 42 text
๏When third parties are
involved
๏What you don't immediately
know how to solve
๏Where you can't visualise a
solution
Slide 43
Slide 43 text
[bling image] You.
You wish.
Sorta...
Costing
http://www.flickr.com/photos/deronkamisato/4965826757
Slide 44
Slide 44 text
[bling image]
Costing
๏Never give quotes
off the bat
๏Break down into
components
๏Deadlines are a
cost factor
๏Cost IE6 separately
http://www.flickr.com/photos/deronkamisato/4965826757
Slide 45
Slide 45 text
Google support
latest-1. So do I.
Slide 46
Slide 46 text
Add
40%
for IE6 support
Slide 47
Slide 47 text
Estimates & Quotes
๏ Get it wrong first
๏ Track your hours
๏ Compare to the quote
๏ Repeat
๏ Mine was consistently out by 20%
http://www.flickr.com/photos/pacdog/213744694/
Slide 48
Slide 48 text
Experience will help too :)
Slide 49
Slide 49 text
Deadlines
http://www.flickr.com/photos/klif/2847294014
Bad
Good
Slide 50
Slide 50 text
Deadlines
๏Don't miss them
๏Don't slip and slip and slip
๏Very few deadlines can't be
moved
๏Urgent rarely means urgent
http://www.flickr.com/photos/klif/2847294014
Slide 51
Slide 51 text
Approach
Slide 52
Slide 52 text
Prototype
early
http://www.flickr.com/photos/donsolo/1301608111/
Slide 53
Slide 53 text
KISS
http://www.flickr.com/photos/anirudhkoul/3725928708/
Slide 54
Slide 54 text
KI(RF)SS
KI(RF)SS
http://www.flickr.com/photos/nathaninsandiego/2723174963/
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Style: choose
๏Style for design/desktop fixed
width
๏Style for lowest possible size
๏Style for multiple deployed
versions - ala gmail
Slide 57
Slide 57 text
Do JavaScript Last
http://www.flickr.com/photos/charliebrewer/2897862701
Slide 58
Slide 58 text
jQuery plugins
Good for fast prototyping
Quality is mixed, and
often do way more than
you need
ixedit.com,
jqueryfordesigners.com,
try out some coding!
Slide 59
Slide 59 text
1. Build without jQuery.
2.Design the start and end of
your effects without jQuery.
3.Add jQuery a little at a time.
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
๏github.com
๏Check commits & last activity
๏Check issues being opened
and closed
Third Party Libraries
Slide 62
Slide 62 text
Offline → Not quite offline
๏Lets the client see it in prototype stage
๏Dropbox is your friend
๏Get a short url for mobile testing
Slide 63
Slide 63 text
RewriteRule ^db/(.*)$ http://dl.dropbox.com/u/43399/$1 [L]
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule (.*) $1.html [L]
Slide 64
Slide 64 text
Recap Time
1. Remember function as well as form
2. Anticipate the invisibles
3. Prototype
4. KI(RF)SS
Slide 65
Slide 65 text
And...
remember
to cuddle!
http://www.flickr.com/photos/jojakeman/3825935283/
Slide 66
Slide 66 text
Otherwise: rock on.
@rem
Hire me @
leftlogic.com