Compromising Web Design

Slide 1

Slide 1 text

User Experience, ART DIRECTION AND RESPONSIVE WEB Design Compromising Web Design

Slide 2

Slide 2 text

User Experience ART Direction RESPONSIVE WEB Design

Slide 3

Slide 3 text

user experience

Slide 4

Slide 4 text

Slide 5

Slide 5 text

The overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use. A definition of ux

Slide 6

Slide 6 text

Art Direction

Slide 7

Slide 7 text

Art direction is about bringing emotion, vision, and clarity to design. When it' supervise and unify a vision, how it communicates visually, stimulates moods, contrast features, and psychologically appeals to a target audiences. A definition of art direction

Slide 8

Slide 8 text

Responsive Web Design

Slide 9

Slide 9 text

RWD

Slide 10

Slide 10 text

A web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices. A definition of RWD

Slide 11

Slide 11 text

User Experience ART Direction RESPONSIVE WEB Design

Slide 12

Slide 12 text

WEB DESIGN

Slide 13

Slide 13 text

There is no perfect design

Slide 14

Slide 14 text

“Perfection in design is not possible. You can never simultaneously satisfy all of the possible objectives for any created thing. For example, a ballpoint pen is an excellent tool for writing, until you need to erase.” ~ Scott Berkun The myth of perfect design

Slide 15

Slide 15 text

Design is about constraints

Slide 16

Slide 16 text

Good design is full of compromises

Slide 17

Slide 17 text

User Experience ART Direction RESPONSIVE WEB Design

Slide 18

Slide 18 text

RWD

Slide 19

Slide 19 text

I RWD

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

We are getting the hang of it

Slide 22

Slide 22 text

MULTIPLE Devices PIXEL DENSITIES BREAK POINTS MOBILE FIRST CONTEXT FLUID GRIDS FLEXIBLE MEDIA MEDIA QUERIES TOUCH PERFORMANCE ERGONOMICS CONTENT STRATEGY FEATURE DETECTION

Slide 23

Slide 23 text

What are we doing about creating solutions?

Slide 24

Slide 24 text

Quite a bit actually

Slide 25

Slide 25 text

ATOMIC DESIGN http://bradfrostweb.com/blog/post/atomic-web-design/

Slide 26

Slide 26 text

Pattern Lab http://demo.patternlab.io

Slide 27

Slide 27 text

STYLE GUIDES

Slide 28

Slide 28 text

STYLE GUIDES

Slide 29

Slide 29 text

STYLE GUIDES

Slide 30

Slide 30 text

Are they a hELP OR HINDERANCE?

Slide 31

Slide 31 text

“The road to hell is paved with good intentions.” ~ Saint Bernard of Clairvaux Circa 1150

Slide 32

Slide 32 text

Emphasis on Performance

Slide 33

Slide 33 text

Assuming conventions

Slide 34

Slide 34 text

_ _ _

Slide 35

Slide 35 text

Overzealous Abstraction

Slide 36

Slide 36 text

OPTION 1 OPTION 2 OPTION 3 OPTION 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar bibendum venenatis. Integer consequat leo feugiat erat euismod ornare. Donec commodo euismod urna eu dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar bibendum venenatis. Integer consequat leo feugiat erat euismod ornare. Donec commodo euismod urna eu dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar bibendum venenatis. Integer consequat leo feugiat erat euismod ornare. Donec commodo euismod urna eu dapibus.

Slide 37

Slide 37 text

User Experience ART Direction RESPONSIVE WEB Design

Slide 38

Slide 38 text

Art Direction

Slide 39

Slide 39 text

Is this still a thing?

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

This shouldn’t be a trend

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Thankfully, it’s not a trend

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

“Art direction is about bringing emotion, vision, and clarity to design. When it’s combined with user interface and user experience, it’s a dangerous weapon.” ~ Jason Farell Art Direction and User Experience - Use All Five http://useallﬁve.com/thoughts/user-experience-and-art-direction/

Slide 55

Slide 55 text

The pendulum swings both ways

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

2003 2011 93.7kb 679kb

Slide 58

Slide 58 text

Slide 59

Slide 59 text

1600kb

Slide 60

Slide 60 text

1mb

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

1mb

Slide 64

Slide 64 text

The pendulum swings both ways

Slide 65

Slide 65 text

ART Direction RESPONSIVE WEB Design

Slide 66

Slide 66 text

ART Direction RESPONSIVE WEB Design

Slide 67

Slide 67 text

ART Direction RESPONSIVE WEB Design

Slide 68

Slide 68 text

User Experience ART Direction RESPONSIVE WEB Design

Slide 69

Slide 69 text

How do we strike this balance?

Slide 70

Slide 70 text

Good design is full of compromises

Slide 71

Slide 71 text

user experience

Slide 72

Slide 72 text

User experience lies at the crossroads of art and science and requires both extremely acute analytical thinking and creativity. User experience lies at the crossroads of art and science

Slide 73

Slide 73 text

conflictS between RWD and ART DIRECTION

Slide 74

Slide 74 text

Performance vs Visual Experience

Slide 75

Slide 75 text

Performance vs Visual Experience Pre-processing

Slide 76

Slide 76 text

Performance vs Visual Experience Responsive images Pre-processing

Slide 77

Slide 77 text

Responsive images Pre-processing Progressive loading Performance vs Visual Experience

Slide 78

Slide 78 text

Maintainability vs Bespoke Design

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Maintainability vs Bespoke Design High level abstraction

Slide 81

Slide 81 text

Maintainability vs Bespoke Design Working closely High level abstraction

Slide 82

Slide 82 text

Maintainability vs Bespoke Design Working closely High level abstraction Build the tools you need

Slide 83

Slide 83 text

Efficiency vs Labour of love

Slide 84

Slide 84 text

Efficiency vs Labour of love Forced towards efﬁciency

Slide 85

Slide 85 text

Efficiency vs Labour of love Take your chance when you get it Forced towards efﬁciency

Slide 86

Slide 86 text

Efficiency vs Labour of love Take your chance when you get it Forced towards efﬁciency Be aware of limitations

Slide 87

Slide 87 text

Good design is full of compromises

Slide 88

Slide 88 text

Compromising Web Design

Slide 89

Slide 89 text

There is no perfect design Design is about constraints Good design is full of compromises