Tweet
Tweet

Slide 1

Slide 1 text

DESIGN the CODE, not COMPS! @katiekovalcin Tuesday, October 14, 14

Slide 2

Slide 2 text

Tuesday, October 14, 14

Slide 3

Slide 3 text

COLLABORATION! Tuesday, October 14, 14

Slide 4

Slide 4 text

COLLABORATION! But why? Tuesday, October 14, 14

Slide 5

Slide 5 text

Bill Bernbach Thanks to Jeffrey Zeldman for the story! Tuesday, October 14, 14

Slide 6

Slide 6 text

Tuesday, October 14, 14

Slide 7

Slide 7 text

Tuesday, October 14, 14

Slide 8

Slide 8 text

In 2014, the web industry is repeating the same mistakes that advertising made in the 1940s. Tuesday, October 14, 14

Slide 9

Slide 9 text

Working in silos & phases Designers “throwing it over the wall” Tuesday, October 14, 14

Slide 10

Slide 10 text

Static Comp ≠ Coded Page Template Why is this what we hold everything to? Tuesday, October 14, 14

Slide 11

Slide 11 text

Duplicate deliverables! We all just love to build the same site ~3 times. Tuesday, October 14, 14

Slide 12

Slide 12 text

Something has to give. Tuesday, October 14, 14

Slide 13

Slide 13 text

Something has to give. And it’s usually creative iterations, timeline & budgets, or sanity. Tuesday, October 14, 14

Slide 14

Slide 14 text

Designers & Developers need to be “Creative Teams” Tuesday, October 14, 14

Slide 15

Slide 15 text

Rather than a more traditional design and development departmental split, why not create small teams with both design and development talent? That way, when someone has a good idea, it can be designed and prototyped without the hassle of multiple handoffs.” — Trent Walton, Where to Start “ Tuesday, October 14, 14

Slide 16

Slide 16 text

More realistic expectations can be met in the browser Tuesday, October 14, 14

Slide 17

Slide 17 text

“...duh, Katie. We’re devs. We’ve been doing it like that for years.” Tuesday, October 14, 14

Slide 18

Slide 18 text

Let designers design* Tuesday, October 14, 14

Slide 19

Slide 19 text

Let designers design* By whatever means they are most efficient and comfortable in, this may still be a static PSD Tuesday, October 14, 14

Slide 20

Slide 20 text

*But everyone needs to expand their skillset! Yes, developers should learn some design. Tuesday, October 14, 14

Slide 21

Slide 21 text

Developers: help designers use your tools! Tuesday, October 14, 14

Slide 22

Slide 22 text

Tuesday, October 14, 14

Slide 23

Slide 23 text

Designers: explain your nuanced decisions in design reviews Tuesday, October 14, 14

Slide 24

Slide 24 text

Tuesday, October 14, 14

Slide 25

Slide 25 text

Everybody: A design system takes two (skillsets) to tango Tuesday, October 14, 14

Slide 26

Slide 26 text

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap- style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.” — Dave Rupert, Responsive Deliverables “ Tuesday, October 14, 14

Slide 27

Slide 27 text

Tuesday, October 14, 14

Slide 28

Slide 28 text

http://bradfrostweb.com/blog/post/atomic-web-design/ Tuesday, October 14, 14

Slide 29

Slide 29 text

Tuesday, October 14, 14

Slide 30

Slide 30 text

A Coded Design Process Case Study Tuesday, October 14, 14

Slide 31

Slide 31 text

Tuesday, October 14, 14

Slide 32

Slide 32 text

Tuesday, October 14, 14

Slide 33

Slide 33 text

Everyone involved from day 1 1 Tuesday, October 14, 14

Slide 34

Slide 34 text

Create goals together Things like: ✦ Performance budget ✦ Experience goals ✦ Prototyping ✦ Tools Tuesday, October 14, 14

Slide 35

Slide 35 text

“I have this really cool thing I want to try” ...said the developer to everyone except the team Tuesday, October 14, 14

Slide 36

Slide 36 text

2 Educate the client Tuesday, October 14, 14

Slide 37

Slide 37 text

What should they expect for deliverables? Tuesday, October 14, 14

Slide 38

Slide 38 text

Define Vocabulary Things like: ✦ Template ✦ Module ✦ Style Guide ✦ Hamburger Icon Tuesday, October 14, 14

Slide 39

Slide 39 text

What should they give feedback on? Tuesday, October 14, 14

Slide 40

Slide 40 text

Establish Design Direction This is usually static. 3 Tuesday, October 14, 14

Slide 41

Slide 41 text

Coded Style Guide Preparing yourself for the system. 4 Tuesday, October 14, 14

Slide 42

Slide 42 text

Tuesday, October 14, 14

Slide 43

Slide 43 text

Tuesday, October 14, 14

Slide 44

Slide 44 text

Tuesday, October 14, 14

Slide 45

Slide 45 text

Design Full Page This also will probably be static. 5 Tuesday, October 14, 14

Slide 46

Slide 46 text

Tuesday, October 14, 14

Slide 47

Slide 47 text

Tuesday, October 14, 14

Slide 48

Slide 48 text

Tuesday, October 14, 14

Slide 49

Slide 49 text

Tuesday, October 14, 14

Slide 50

Slide 50 text

Deliver static pages faux “in browser” Get the client comfortable with viewing deliverables in the browser Tuesday, October 14, 14

Slide 51

Slide 51 text

Tuesday, October 14, 14

Slide 52

Slide 52 text

Evaluate feedback You’ll want to feel confident in iterations. 6 Tuesday, October 14, 14

Slide 53

Slide 53 text

Tuesday, October 14, 14

Slide 54

Slide 54 text

Tuesday, October 14, 14

Slide 55

Slide 55 text

Tuesday, October 14, 14

Slide 56

Slide 56 text

Tuesday, October 14, 14

Slide 57

Slide 57 text

Deliver design feedback via code Interactions are design. 7 Tuesday, October 14, 14

Slide 58

Slide 58 text

Tuesday, October 14, 14

Slide 59

Slide 59 text

Tuesday, October 14, 14

Slide 60

Slide 60 text

QA, QA, QA! Designer perfecting the design alongside the developer 8 Tuesday, October 14, 14

Slide 61

Slide 61 text

Tuesday, October 14, 14

Slide 62

Slide 62 text

These are design iterations, NOT BUGS! Tuesday, October 14, 14

Slide 63

Slide 63 text

Build & document modular, extensible code 9 Tuesday, October 14, 14

Slide 64

Slide 64 text

Tuesday, October 14, 14

Slide 65

Slide 65 text

Iterate back & forth This will be determined by how you & your teammates work well together. Be fluid. 10 Tuesday, October 14, 14

Slide 66

Slide 66 text

Tuesday, October 14, 14

Slide 67

Slide 67 text

This is a screenshot of the same module from the homepage. Does not need designed! Tuesday, October 14, 14

Slide 68

Slide 68 text

This was already established—does not need designed! Tuesday, October 14, 14

Slide 69

Slide 69 text

Only these two patterns needed to be designed for this entire page! Tuesday, October 14, 14

Slide 70

Slide 70 text

Tuesday, October 14, 14

Slide 71

Slide 71 text

Tuesday, October 14, 14

Slide 72

Slide 72 text

Open & Constant Communication Both with teammates and the client. 11 Tuesday, October 14, 14

Slide 73

Slide 73 text

Tuesday, October 14, 14

Slide 74

Slide 74 text

Happy developers build future pages! The system is built and ready to be extended. 12 Tuesday, October 14, 14

Slide 75

Slide 75 text

“Let us prove to the world that good taste, good art, and good writing can be good selling.” — Bill Bernbach Tuesday, October 14, 14

Slide 76

Slide 76 text

“Let us prove to the world that good design, good code, and good content can be good selling.” — Bill Bernbach, if he worked on the web today Tuesday, October 14, 14

Slide 77

Slide 77 text

Tuesday, October 14, 14

Slide 78

Slide 78 text

Tuesday, October 14, 14

Slide 79

Slide 79 text

Tuesday, October 14, 14

Slide 80

Slide 80 text

Tuesday, October 14, 14

Slide 81

Slide 81 text

Tuesday, October 14, 14

Slide 82

Slide 82 text

Tuesday, October 14, 14

Slide 83

Slide 83 text

Tuesday, October 14, 14

Slide 84

Slide 84 text

Tuesday, October 14, 14

Slide 85

Slide 85 text

Tuesday, October 14, 14

Slide 86

Slide 86 text

Tuesday, October 14, 14

Slide 87

Slide 87 text

Tuesday, October 14, 14

Slide 88

Slide 88 text

Tuesday, October 14, 14

Slide 89

Slide 89 text

Tuesday, October 14, 14

Slide 90

Slide 90 text

Tuesday, October 14, 14

Slide 91

Slide 91 text

THANK YOU! @katiekovalcin Tuesday, October 14, 14