Rapid Prototyping with Sass & Compass

Slide 1

Slide 1 text

With Sass & Compass Rapid Prototyping @bermonpainter #csssummit #teamsass

Slide 2

Slide 2 text

@bermonpainter #csssummit #teamsass 1. Fidelity 2. Kill wireframes with ﬁre 3. Prototyping 4. Rapid Prototyping 5. Workﬂow

Slide 3

Slide 3 text

@bermonpainter #csssummit #teamsass Fidelity

Slide 4

Slide 4 text

@bermonpainter #csssummit #teamsass Visual Fidelity Low vs. Medium vs. High

Slide 5

Slide 5 text

@bermonpainter #csssummit #teamsass Content Fidelity Lorem Ipsum vs. Real English (no context) vs. Actual Content

Slide 6

Slide 6 text

@bermonpainter #csssummit #teamsass Functional Fidelity Static vs. Interactive

Slide 7

Slide 7 text

@bermonpainter #csssummit #teamsass Wireframing

Slide 8

Slide 8 text

@bermonpainter #csssummit #teamsass Wireframes should die because...

Slide 9

Slide 9 text

@bermonpainter #csssummit #teamsass Wireframes should die because... static, not suited for dynamic interactions

Slide 10

Slide 10 text

Wireframes should die because they are... not user friendly, ironic huh?, Mr. UX Designer

Slide 11

Slide 11 text

@bermonpainter #csssummit #teamsass Wireframes should die because they are... open to interpretation

Slide 12

Slide 12 text

@bermonpainter #csssummit #teamsass Wireframes should die because they cause a... lob it over the fence mentality

Slide 13

Slide 13 text

@bermonpainter #csssummit #teamsass Wireframes should die because they... add drag, on everything

Slide 14

Slide 14 text

@bermonpainter #csssummit #teamsass Prototyping

Slide 15

Slide 15 text

@bermonpainter #csssummit #teamsass Prototype Review/Test Reﬁne

Slide 16

Slide 16 text

@bermonpainter #csssummit #teamsass Prototyping is nice because...

Slide 17

Slide 17 text

@bermonpainter #csssummit #teamsass Prototyping is nice because it... Communicates design closer to it’s intended use

Slide 18

Slide 18 text

@bermonpainter #csssummit #teamsass Prototyping is nice because it is... more user friendly

Slide 19

Slide 19 text

@bermonpainter #csssummit #teamsass Prototyping is nice because it... requires less documentation

Slide 20

Slide 20 text

@bermonpainter #csssummit #teamsass Prototyping is nice because it... better support user centered design

Slide 21

Slide 21 text

@bermonpainter #csssummit #teamsass but...

Slide 22

Slide 22 text

@bermonpainter #csssummit #teamsass Prototyping isn’t nice because it... still doesn’t capture full user interactions

Slide 23

Slide 23 text

@bermonpainter #csssummit #teamsass Rapid Prototyping with Sass & Compass

Slide 24

Slide 24 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because...

Slide 25

Slide 25 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides a... More natural focus on ﬂuidity and interactions

Slide 26

Slide 26 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it allows... Markup & code reuse

Slide 27

Slide 27 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides... Inherent documentation with code + comments

Slide 28

Slide 28 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides... More eﬃcient use of time

Slide 29

Slide 29 text

@bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it helps... Improve collaboration with other disciplines

Slide 30

Slide 30 text

@bermonpainter #csssummit #teamsass Workﬂow

Slide 31

Slide 31 text

@bermonpainter #csssummit #teamsass Don’t over engineer your prototyping workﬂow

Slide 32

Slide 32 text

@bermonpainter #csssummit #teamsass 1. Sketch

Slide 33

Slide 33 text

@bermonpainter #csssummit #teamsass

Slide 34

Slide 34 text

@bermonpainter #csssummit #teamsass 2. Style Tiles http://styletil.es

Slide 35

Slide 35 text

@bermonpainter #csssummit #teamsass

Slide 36

Slide 36 text

@bermonpainter #csssummit #teamsass 3. Rapid Protoype System Building a graybox and theming system with Sass & Compass

Slide 37

Slide 37 text

@bermonpainter #csssummit #teamsass

Slide 38

Slide 38 text

@bermonpainter #csssummit #teamsass Alt Static Site Generators https://gist.github.com/2254924

Slide 39

Slide 39 text

@bermonpainter #csssummit #teamsass Command Line

Slide 40

Slide 40 text

@bermonpainter #csssummit #teamsass

Slide 41

Slide 41 text

@bermonpainter #csssummit #teamsass

Slide 42

Slide 42 text

@bermonpainter #csssummit #teamsass

Slide 43

Slide 43 text

@bermonpainter #csssummit #teamsass

Slide 44

Slide 44 text

@bermonpainter #csssummit #teamsass

Slide 45

Slide 45 text

@bermonpainter #csssummit #teamsass https://github.com/ bpainter/frankenstein

Slide 46

Slide 46 text

@bermonpainter #csssummit #teamsass

Slide 47

Slide 47 text

@bermonpainter #csssummit #teamsass

Slide 48

Slide 48 text

@bermonpainter #csssummit #teamsass

Slide 49

Slide 49 text

@bermonpainter #csssummit #teamsass

Slide 50

Slide 50 text

@bermonpainter #csssummit #teamsass

Slide 51

Slide 51 text

@bermonpainter #csssummit #teamsass

Slide 52

Slide 52 text

@bermonpainter #csssummit #teamsass

Slide 53

Slide 53 text

@bermonpainter #csssummit #teamsass

Slide 54

Slide 54 text

@bermonpainter #csssummit #teamsass

Slide 55

Slide 55 text

@bermonpainter #csssummit #teamsass

Slide 56

Slide 56 text

@bermonpainter #csssummit #teamsass

Slide 57

Slide 57 text

@bermonpainter #csssummit #teamsass

Slide 58

Slide 58 text

@bermonpainter #csssummit #teamsass

Slide 59

Slide 59 text

@bermonpainter #csssummit #teamsass Compile Methods

Slide 60

Slide 60 text

@bermonpainter #csssummit #teamsass Local

Slide 61

Slide 61 text

@bermonpainter #csssummit #teamsass On Deploy

Slide 62

Slide 62 text

@bermonpainter #csssummit #teamsass On the Server (cached)

Slide 63

Slide 63 text

@bermonpainter #csssummit #teamsass Client

Slide 64

Slide 64 text

@bermonpainter #csssummit #teamsass

Slide 65

Slide 65 text

@bermonpainter #csssummit #teamsass

Slide 66

Slide 66 text

@bermonpainter #csssummit #teamsass

Slide 67

Slide 67 text

@bermonpainter #csssummit #teamsass

Slide 68

Slide 68 text

@bermonpainter #csssummit #teamsass If your CSS sucks, Sass & Compass won’t un-suck it.