Designing with C.R.A.P. - Stir Trek 2015

#CRAPdesign @csteinert

Designing with

C.R.A.P. Caitlin Steinert

@csteinert Stir Trek: Ultron Edition #CRAPdesign


The Non-Designer’s Design Book Robin Williams


What is design?


“In most people's vocabularies, design means veneer. It's interior decorating. It's the fabric of the curtains and the

sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-

made creation that ends up expressing itself in successive outer layers of the product or service.”

- Steve Jobs


“DESIGN: (noun) a specification of an object, manifested by some agent, intended to accomplish goals, in a particular

environment, using a set of primitive components, satisfying a set of requirements, subject to some constraints.”

- Paul Ralph and Yair Wand


“Design is the rendering of intent.” - Jared Spool


What design isn’t:




Design is a process.


!   Contrast

!   Repetition

!   Alignment

!   Proximity


!   Contrast

!   Repetition

!   Alignment

!   Proximity


Contrast: the state of being strikingly different from something else, typically something in juxtaposition or close association.


Contrast: the state of being strikingly different from something else, typically something in juxtaposition or close association.


!   R: 200!

!   G: 40"!

!   B: 50!

!   R: 190!

!   G: 30"!

!   B: 80!


Cats

Dogs

It’s raining:


Cats

Dogs

It’s raining:


Vero Eos et Accusamus et Iusto Odio !

Dignissimos Ducimus !!Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.!


Vero Eos et Accusamus et Iusto Odio !

Dignissimos Ducimus !!Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.!

Vero Eos et Accusamus et Iusto Odio !Dignissimos Ducimus !!Qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.!








Magic Hill Apartments !1234 Boat Road, Freedom Town, OH 44222 !(555) 555-5555 Fax (555) 555-5556 !We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014. !• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if nothing is received by this date we will take and application for your unit.

• Move out at end of current lease term with 60 day written notice. !We will require 60 day written notice from the 1st of the month if you are planning to move at the of your current lease term. You will need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is to move. !


Magic Hill Apartments !1234 Boat Road, Freedom Town, OH 44222 !(555) 555-5555 Fax (555) 555-5556 !We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014.!

• 9 month lease with $25 increase and short term fee of $50 per month • Month to Month $25 rental increase and the $75 per month fee (maximum of 60 days only) • Renew 12 month lease with only a $10 increase by February 1, 2014 • Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.) if

nothing is received by this date we will take and application for your unit. • Move out at end of current lease term with 60 day written notice. !

We will require 60 day written notice from the 1st of the month if you are planning to move at the of your current lease term. You will need to give written notice by March 1, 2014. We would prefer notice as soon as possible, so we can pre-lease your unit if the decision is to move. !












Magic Hill Apartments !1234 Boat Road, Freedom Town, OH 44222 !(555) 555-5555 Fax (555) 555-5556 !We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !



Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014.!












Contrast

!   Use sparingly


Contrast

!   Use sparingly

!   Don’t be shy


Contrast

!   Use sparingly

!   Don’t be shy


Contrast

!   Use sparingly

!   Don’t be SHY!


Repetition: similar parts within a system should be expressed in similar ways












Repetition:

!   Build trust


Repetition:

!   Build trust

!   Enhance comprehension


Repetition:

!   Build trust

!   Enhance comprehension

!   Don’t insult your audience


Alignment: placement of elements such that edges line up along common rows or columns, or their bodies along a common center.







Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

“Musa, mihi causas memora, quo numine laeso, quidve dolens, regina deum tot volvere casus insignem pietate virum, tot adire labores impulerit. Tantaene animis caelestibus irae?” - Virgil

Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

“Musa, mihi causas memora, quo numine laeso, quidve dolens, regina deum tot volvere casus

insignem pietate virum, tot adire labores impulerit. Tantaene animis caelestibus irae?”

- Virgil

Quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.








Magic Hill Apartments !1234 Boat Road, Freedom Town, OH 44222 !

(555) 555-5555 Fax (555) 555-5556 !We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !







(555) 555-5555 Fax (555) 555-5556 !

•  9 month lease with $25 increase and short term fee of $50 per month •  Month to Month $25 rental increase and the $75 per month fee

•  Maximum of 60 days only •  Renew 12 month lease with only a $10 increase by February 1, 2014 •  Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)

•  If nothing is received by this date we will take and application for your unit. •  Move out at end of current lease term with 60 day written notice. !

We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014.!



Alignment:

!   Guides the user’s eye


Alignment:

!   Guides the user’s eye !   Has varying degrees of strength


Alignment:

!   Guides the user’s eye !   Has varying degrees of strength

!   Compelling when broken


Proximity


Proximity


Proximity


Proximity


FREE WATER FOOD SOLD





Order #10" $20 !4/10/14!(15) bananas! ! $10 !(10) oranges! ! $10 !

(2) apples! ! ! !$5 !

Order #11" $20 !4/11/14!(15) bananas! ! $10 !


4/10/14!

4/11/14!


(2) apples! ! ! !$5 !

Order #11" $20 !4/11/14!(30) bananas! ! $20 !


(2) apples! ! ! !$5 !

Order #11" $20 !4/11/14!(30) bananas! ! $20 !



(555) 555-5555 Fax (555) 555-5556 !



(555) 555-5555 Fax (555) 555-5556 !



(555) 555-5555 Fax (555) 555-5556 !



(555) 555-5555 Fax (555) 555-5556 !



(555) 555-5555 Fax (555) 555-5556 !


Proximity:

!   Implies relationship


Proximity:

!   Implies relationship

!   Will be inferred regardless


Let’s Review!!


!   Contrast


!   Contrast

!   Repetition


!   Contrast

!   Repetition

!   Alignment


!   Contrast

!   Repetition

!   Alignment

!   Proximity






(555) 555-5555 Fax (555) 555-5556 !

We wanted to take a moment thank you for being such wonderful residents. It has been a pleasure to have you as a part of our community. We hope that you choose to renew your lease agreement for another year. !Renew your lease early and have only $10 increase. !Please contact the leasing office if you want a different option than a 12 month renewal which is enclosed. We will prepare a different renewal and return it to you. You can sign and return current renewal by February 1, 2014 or you can give written notice by March 1, 2014. !


•  9 month lease with $25 increase and short term fee of $50 per month •  Month to Month $25 rental increase and the $75 per month fee

•  Maximum of 60 days only •  Renew 12 month lease with only a $10 increase by February 1, 2014 •  Renew after February 1, 2014, but before March 1, 2014 with increase of $25 per month (which is Market rent for your unit.)

•  If nothing is received by this date we will take and application for your unit. •  Move out at end of current lease term with 60 day written notice. !


Try it yourself!!

csteinert.com/crap


The Non-Designer’s Design Book Robin Williams

Resources!

A Proposal for a Formal Definition of the Design Concept Paul Ralph and Yair Wand

Universal Principles of Design William Lidwell, Kritina Holden, Jill Butler

Design <for> Hackers David Kadavy


Thanks!!

www.csteinert.com @csteinert

Designing with C.R.A.P. - Stir Trek 2015

Design

csteinert design

csteinert contrast

csteinert cats dogs

design isnt

meaning of design

similique sunt

dignissimos ducimus

maxime placeat facere