Ballin' On A Budget: How to create great design an nearly any cost

Slide 1

Slide 1 text

Josh Riggs Senior Lead UX Designer @ThinkShout @joshriggs

Slide 2

Slide 2 text

Ballin’ On A Budget How to create great design at nearly any cost.

Slide 3

Slide 3 text

A Bit About Me

Slide 4

Slide 4 text

Design @ThinkShout

Slide 5

Slide 5 text

I Take Abstract Ideas And Create Something A Human Can Use

Slide 6

Slide 6 text

The Twist: We Work Almost Exclusively With Non Profits Who Watch Their Budget Carefully

Slide 7

Slide 7 text

Designing On A Budget: • Why Talk About Money? • Ideas Are Free* • Budget Killers & How to Avoid Them • Final Thoughts & Resources

Slide 8

Slide 8 text

Why Talk About Money?

Slide 9

Slide 9 text

Comparison. Expectations. Reality Check.

Slide 10

Slide 10 text

Apple

Slide 11

Slide 11 text

(Cr)Apple

Slide 12

Slide 12 text

Google Design

Slide 13

Slide 13 text

60 UX Design Job Openings

Slide 14

Slide 14 text

Charity: Water

Slide 15

Slide 15 text

• Creative Director • Senior Graphic Designer • Graphic Designer • Product Designer • UI Designer • Production Designer • Videographer • Copywriter • 3 Front End Engineers 11 Full Time Design-Ish Employees

Slide 16

Slide 16 text

Great Design Costs Time & Resources. What If We Have Neither?

Slide 17

Slide 17 text

If Time = Money, How Can We Work More Efficiently And Still Create Great Design?

Slide 18

Slide 18 text

Good Ideas Are Free.

Slide 19

Slide 19 text

“Gear Is Good, Vision Is Better” - David DuChemin

Slide 20

Slide 20 text

Having A Solid Design Vision Will Help You Keep Things In Perspective.

Slide 21

Slide 21 text

• Good Typography • Simple image editing Design Skills: Quick Investments That Pay Back:

Slide 22

Slide 22 text

• Good typography creates a high-end, elegant feel • Proper line-height / leading makes reading easy • Hierarchy of text (headings, body copy, quotes, etc.) will eﬀortlessly lead users to where we want them to go. Good Typography

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

• Color treat your damn photos! • Presets like VSCO (vsco.co) are great! Simple Image Editing & Color Treatment

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Good, Creative Ideas Are Free. Implementing Those Ideas Can Be Expensive!

Slide 28

Slide 28 text

Budget Killers & How To Avoid Them

Slide 29

Slide 29 text

• Technical underestimation • Inconsistencies in design • Misguided design deliverables • Bad communication 4 Breeds Of Budget Killers

Slide 30

Slide 30 text

Technical Underestimation Might as well just punch your programmers and your budget in the face. Repeatedly.

Slide 31

Slide 31 text

Example: Responsive Design & HTML Source Order

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

1 2 3 4 1 2 3 4

Slide 35

Slide 35 text

1 2 3 4 1 2 3 4

Slide 36

Slide 36 text

Example: Know your CMS or Platform

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

h1 h2 Article Header Article Content

Slide 39

Slide 39 text

Solution: Talk To Your Developers.

Slide 40

Slide 40 text

On a scale of 1 - 10, how hard will it be for you to build this?

Slide 41

Slide 41 text

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. - Martin Golding

Slide 42

Slide 42 text

Always design as if the guy who ends up coding your designs will be a violent psychopath who knows where your desk is. - Me

Slide 43

Slide 43 text

Inconsistency Like a swarm of angry little bees that slowly devour the budget.

Slide 44

Slide 44 text

Example: Image Thumbnail Sizes

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

16 x 9 16 x 9 Really Fuckin’ Wide 1 x 1 1 x 1

Slide 47

Slide 47 text

16 x 9 16 x 9 Really Fuckin’ Wide 1 x 1 1 x 1 16 x 9 16 x 9 16 x 9 16 x 9

Slide 48

Slide 48 text

Solution: BE. VERY. CONSISTENT.

Slide 49

Slide 49 text

Misguided Design Deliverables Burning yourself out, and your budget too.

Slide 50

Slide 50 text

• Designing the wrong things • Creating too many design deliverables • Not designing enough • Jumping into designs too quickly Examples:

Slide 51

Slide 51 text

Design deliverables have to make both clients and developers happy. This is not easy.

Slide 52

Slide 52 text

Different clients require different deliverables. Accept and embrace this.

Slide 53

Slide 53 text

Process Is More Important Than Deliverables.

Slide 54

Slide 54 text

• Content Slice Diagrams • Wireframes • Prototypes Deliverables at ThinkShout: • Style Tiles • Visual Inventories • Visual Design in Browser • Visual Design in Sketch • Codepens

Slide 55

Slide 55 text

Process at ThinkShout: • Start broad, then work down to details. • Turn business goals and content into something a human can use.

Slide 56

Slide 56 text

Solution: Focus on objectives, not specific deliverables. Create a plan before starting.

Slide 57

Slide 57 text

Bad Communication Like a wrecking ball to your budget

Slide 58

Slide 58 text

Assumptions Cost Money.

Slide 59

Slide 59 text

When We Don’t Communicate Problems Snowball.

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No Room For Iteration

Slide 62

Slide 62 text

• Front loading design only at the beginning of a project • What happens if something needs design, and your design budget is gone? Example:

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Solution: Be in constant communication with engineers, PMs and clients. Don’t be afraid to ask for clarity.

Slide 65

Slide 65 text

Final Thoughts & Time Savers

Slide 66

Slide 66 text

• Wireframes and prototypes can be ugly • Obsessing over pixels in responsive design is futile • Shipped is better than perfect Let Go Of Pixel Perfection

Slide 67

Slide 67 text

• Zurb Foundation, Bootstrap, etc. • Usually includes a lot of shit you don’t need • Great for using out of the box, but a giant pain to customize • Can be a nightmare to use with a CMS like Drupal • I recommend for prototyping only. Beware Of The Framework

Slide 68

Slide 68 text

• Set aside some non-billable time to keep up with trends and inspiration • An hour here and there on a project really adds up • Be proactive on research and inspiration • Chrome Panda Plugin Stay Inspired & Knowledgeable

Slide 69

Slide 69 text

usepanda.com

Slide 70

Slide 70 text

• Your design skills need to be exercised • Daily Sketches • Daily Treehouse lessons Daily Exercises

Slide 71

Slide 71 text

• Sketching quick ideas before jumping into code or Photoshop saves you time • Show quick sketches to your clients or your team to get quick feedback • You can even make your sketches interactive using Invision (invisionapp.com) Sketch Like A Mofo

Slide 72

Slide 72 text

Free Stuff: Save budget by not buying shit.

Slide 73

Slide 73 text

• Google Fonts: google.com/fonts • League of Movable Type: theleagueofmoveabletype.com • Lost Type: losttype.com • Font Squirrel: fontsquirrel.com Typefaces:

Slide 74

Slide 74 text

• The Stocks: thestocks.im • Unsplash: unsplash.com • Death To The Stock Photo: deathtothestockphoto.com Free Photos

Slide 75

Slide 75 text

thestocks.im

Slide 76

Slide 76 text

• Codrops: tympanus.net/codrops/ • CodePen: codepen.io • Bourbon Reﬁlls: reﬁlls.bourbon.io Code Snippets