Top Banner
/ A Process for Responsive Design
51

A Process for Responsive Design

Dec 01, 2014

Download

Design

Verne Ho

FITC Toronto
December 1, 2012
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: A Process for Responsive Design

/A Process for Responsive Design

Page 2: A Process for Responsive Design

Verne HoCo-founder + Creative DirectorJet Cooper

@verneho

2

Page 3: A Process for Responsive Design

We design products for web, mobile and tablet devices

3

Page 4: A Process for Responsive Design

People we work withWe’ve had an opportunity to work alongside leading Canadian startups, brands, and organizations

4

Page 5: A Process for Responsive Design

CommunityWe take an active role in changing the way people think about design in our communities

5

Page 6: A Process for Responsive Design

ProgramsWe get hands on by helping Canada’s highest potential startups better integrate design

6

Page 7: A Process for Responsive Design

Me + Jet CooperCreative Direction + Process

7

Page 8: A Process for Responsive Design

ProcessA process exists to support creativity, not resist it

Page 9: A Process for Responsive Design

Today1. Getting Started2. Our Process

9

Page 10: A Process for Responsive Design

Disclaimers1. This is only our approach2. This is best case scenario3. This is difficult4. There is no such thing as perfect, just perfect-er

10

Page 11: A Process for Responsive Design

Getting StartedConsiderations for starting a responsive design project

Page 12: A Process for Responsive Design

Our ecosystem∞ Devices

12

Page 13: A Process for Responsive Design

Why RWD?A common access pointContinuity in the experienceA tailored experience

13

Page 14: A Process for Responsive Design

And for us?Scalability + Maintainability

14

Page 15: A Process for Responsive Design

Differences to expectNature of planningPace of iterationsDegree of finalizationClient sign-offsWorkflows & Roles

15

Page 16: A Process for Responsive Design

Be neighboursThere’s no substitute for pointing at a screen

16

Page 17: A Process for Responsive Design

Start devs earlyAn equally important voice

17

Page 18: A Process for Responsive Design

Our ProcessHow we do it

Page 19: A Process for Responsive Design

Content is still kingAsk yourself: what matters most?

19

Page 20: A Process for Responsive Design

20

Page 21: A Process for Responsive Design

21

1

2

3

4

5

6

Page 22: A Process for Responsive Design

22

1

3

4 ...

2

Page 23: A Process for Responsive Design

23

1

3

4 ...

*

*

*

2

Page 24: A Process for Responsive Design

Design is still a holistic activityDesign for all screens in mind

24

Page 25: A Process for Responsive Design

Comps are expensiveMinimize the comps you need to explicitly design

25

Page 26: A Process for Responsive Design

26

Page 27: A Process for Responsive Design

27

Page 28: A Process for Responsive Design

28

Page 29: A Process for Responsive Design

29

1 2 3

Page 30: A Process for Responsive Design

30

Page 31: A Process for Responsive Design

31

Page 32: A Process for Responsive Design

Do it live!Design can (and should) happen in a browser, too

32

Page 33: A Process for Responsive Design

33

Page 34: A Process for Responsive Design

34

Page 35: A Process for Responsive Design

35

Page 36: A Process for Responsive Design

36

Page 37: A Process for Responsive Design

37

Page 38: A Process for Responsive Design

38

Page 39: A Process for Responsive Design

39

Page 40: A Process for Responsive Design

Dynamic duoDesign informs, dev informs design

40

Page 41: A Process for Responsive Design

WarningThis takes practice

41

Page 42: A Process for Responsive Design

TipsMore things to keep in mind

Page 43: A Process for Responsive Design

Choosing screensIt’s not supposed to be one size fits all

Desktops

Laptops

Tablets

Mobile

Televisions

Kiosks

Large Format Displays

...

43

Page 44: A Process for Responsive Design

Defining breakpointsIt’s not always just about the devices

44

Page 45: A Process for Responsive Design

45

780px840px

Page 46: A Process for Responsive Design

TestingBuild your test suite

46

Page 47: A Process for Responsive Design

In Summary...A quick recap

Page 48: A Process for Responsive Design

In Summary...1. Ask yourself “what matters most?”2. Design is still a holistic activity3. Comps are expensive4. Iterate in a live environment

48

Page 49: A Process for Responsive Design

When all else fails1. Stay lean2. Open conversation channels3. Think about obsess over process

49

Page 51: A Process for Responsive Design

Questions+ Answers (Possibly)