Web Design Process In a Responsive World

Slide 1

Slide 1 text

@bencallahan @drewtclemens WEB DESIGN PROCESS IN A RESPONSIVE WORLD Thursday, January 10, 13

Slide 2

Slide 2 text

WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN MINDSET Thursday, January 10, 13

Slide 3

Slide 3 text

Where we’ve been. Thursday, January 10, 13

Slide 4

Slide 4 text

A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13

Slide 5

Slide 5 text

A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END LAUNCH! TH IN K A B O U T U SER S Thursday, January 10, 13

Slide 6

Slide 6 text

A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END LAUNCH! TH IN K A B O U T U SER S TH R O W IN C O N TEN T Thursday, January 10, 13

Slide 7

Slide 7 text

A SHIFT IN MINDSET Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13

Slide 8

Slide 8 text

What happens when you throw RWD into this process? Thursday, January 10, 13

Slide 9

Slide 9 text

A SHIFT IN MINDSET Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH Now with RWD! Thursday, January 10, 13

Slide 10

Slide 10 text

This doesn’t work. Thursday, January 10, 13

Slide 11

Slide 11 text

(example: seesparkbox.com) Thursday, January 10, 13

Slide 12

Slide 12 text

Jakob Nielsen Says... ‣ Build a separate mobile site ‣ Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ Thursday, January 10, 13

Slide 13

Slide 13 text

Jakob Nielsen Says... ‣ Build a separate mobile site ‣ Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO. Thursday, January 10, 13

Slide 14

Slide 14 text

We need to invite others into the process. Thursday, January 10, 13

Slide 15

Slide 15 text

A SHIFT IN MINDSET A Responsive Workflow Thursday, January 10, 13

Slide 16

Slide 16 text

Disciplines BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13

Slide 17

Slide 17 text

Collaborative Timeline Thursday, January 10, 13

Slide 18

Slide 18 text

Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13

Slide 19

Slide 19 text

Differing Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13

Slide 20

Slide 20 text

Life Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13

Slide 21

Slide 21 text

Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Thursday, January 10, 13

Slide 22

Slide 22 text

A SHIFT IN MINDSET A Responsive Workflow ‣ Cons - Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up Thursday, January 10, 13

Slide 23

Slide 23 text

A SHIFT IN MINDSET A Responsive Workflow ‣ Pros - Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results Thursday, January 10, 13

Slide 24

Slide 24 text

BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13

Slide 25

Slide 25 text

What happens when you invite others into the process? Thursday, January 10, 13

Slide 26

Slide 26 text

The quality as a whole improves. Thursday, January 10, 13

Slide 27

Slide 27 text

(example: m.people.com) Thursday, January 10, 13

Slide 28

Slide 28 text

So, how do we actually do this? Thursday, January 10, 13

Slide 29

Slide 29 text

WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN PROCESS Thursday, January 10, 13

Slide 30

Slide 30 text

A SHIFT IN PROCESS A Process Myth Each client deliverable needs to look more like a ﬁnal, beautiful end-product than the previous one. Thursday, January 10, 13

Slide 31

Slide 31 text

A SHIFT IN PROCESS Which Results In Pushing toward nearly-designed wireframes quickly and completely designed comps soon after. (This sets up all sorts of unrealistic client expectations.) Thursday, January 10, 13

Slide 32

Slide 32 text

A SHIFT IN PROCESS A Better Approach Deliverables that best serve the organization and prioritization of content and function across multiple resolutions. (Not deliverables made just to impress clients.) Thursday, January 10, 13

Slide 33

Slide 33 text

A SHIFT IN PROCESS Our Deliverables ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13

Slide 34

Slide 34 text

A SHIFT IN PROCESS Let’s Focus On... ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13

Slide 35

Slide 35 text

A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Prototypes - Takes the place of a traditional wireframe. - As much real content as you can. - Linear in nature, priority implied. - Possibly created in HTML, viewed in a browser. - Generated by content/UX people. Thursday, January 10, 13

Slide 36

Slide 36 text

A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Examples - Non HTML examples • Smashing Article: Design Process In The Responsive Age • New Sparkbox site early efforts - HTML example • building.seesparkbox.com Thursday, January 10, 13

Slide 37

Slide 37 text

A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype - Like Style Tiles, but in the browser (styletil.es). - Very fast to build. - Accurate web typography. - Easy to show web interaction. - Client reviews in their browser of preference. Thursday, January 10, 13

Slide 38

Slide 38 text

A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype Examples - building.seesparkbox.com • new Sparkbox web style prototype - dressresponsively.com • dress responsively style prototype Thursday, January 10, 13

Slide 39

Slide 39 text

A SHIFT IN PROCESS Use What The Project Needs ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13

Slide 40

Slide 40 text

WEB DESIGN PROCESS IN A RESPONSIVE WORLD LET’S DISCUSS Thursday, January 10, 13

Slide 41

Slide 41 text

LINKS ‘N STUFF Join Us! seesparkbox.com/foundry @hearsparkbox If you really like this sort of thing... buildresponsively.com @brworkshop Thursday, January 10, 13

Slide 42

Slide 42 text

THANKS! @hearsparkbox [email protected] Thursday, January 10, 13