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