Josh Riggs Senior Lead UX Designer @ThinkShout @joshriggs Ballin - - PowerPoint PPT Presentation

▶
josh riggs
SMART_READER_LITE
LIVE PREVIEW

Josh Riggs Senior Lead UX Designer @ThinkShout @joshriggs Ballin - - PowerPoint PPT Presentation

Oct 23, 2022 246 likes •1.07k views

Josh Riggs Senior Lead UX Designer @ThinkShout @joshriggs Ballin On A Budget How to create great design at nearly any cost. A Bit About Me Design @ThinkShout I Take Abstract Ideas And Create Something A Human Can Use The Twist: We Work

slide-1
SLIDE 1

Josh Riggs

Senior Lead UX Designer @ThinkShout @joshriggs

slide-2
SLIDE 2

Ballin’ On A Budget

How to create great design at nearly any cost.

slide-3
SLIDE 3

A Bit About Me

slide-4
SLIDE 4

Design @ThinkShout

slide-5
SLIDE 5

I Take Abstract Ideas And Create Something A Human Can Use

slide-6
SLIDE 6

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

slide-7
SLIDE 7

Designing On A Budget:

  • Why Talk About Money?
  • Ideas Are Free*
  • Budget Killers & How to Avoid Them
  • Final Thoughts & Resources
slide-8
SLIDE 8

Why Talk About Money?

slide-9
SLIDE 9
  • Comparison. Expectations.

Reality Check.

slide-10
SLIDE 10

Apple

slide-11
SLIDE 11

(Cr)Apple

slide-12
SLIDE 12

Google Design

slide-13
SLIDE 13

60 UX Design Job Openings

slide-14
SLIDE 14

Charity: Water

slide-15
SLIDE 15
  • 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

Great Design Costs Time &

  • Resources. What If We Have

Neither?

slide-17
SLIDE 17

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

slide-18
SLIDE 18

Good Ideas Are Free.

slide-19
SLIDE 19

“Gear Is Good, Vision Is Better”

  • David DuChemin
slide-20
SLIDE 20

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

slide-21
SLIDE 21
  • Good Typography
  • Simple image editing

Design Skills: Quick Investments That Pay Back:

slide-22
SLIDE 22
  • Good typography creates a high-end, elegant feel
  • Proper line-height / leading makes reading easy
  • Hierarchy of text (headings, body copy, quotes, etc.) will

effortlessly lead users to where we want them to go.

Good Typography

slide-23
SLIDE 23
slide-24
SLIDE 24
  • Color treat your damn photos!
  • Presets like VSCO (vsco.co) are great!

Simple Image Editing & Color Treatment

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

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

slide-28
SLIDE 28

Budget Killers & How To Avoid Them

slide-29
SLIDE 29
  • Technical underestimation
  • Inconsistencies in design
  • Misguided design deliverables
  • Bad communication

4 Breeds Of Budget Killers

slide-30
SLIDE 30

Technical Underestimation

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

slide-31
SLIDE 31

Example: Responsive Design & HTML Source Order

slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34

1 2 3 4 1 2 3 4

slide-35
SLIDE 35

1 2 3 4 1 2 3 4

slide-36
SLIDE 36

Example: Know your CMS or Platform

slide-37
SLIDE 37
slide-38
SLIDE 38

h1 h2 Article Header Article Content

slide-39
SLIDE 39

Solution: Talk To Your Developers.

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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

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

Inconsistency

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

slide-44
SLIDE 44

Example: Image Thumbnail Sizes

slide-45
SLIDE 45

16 x 9

slide-46
SLIDE 46

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

slide-47
SLIDE 47

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 16 x 9

slide-48
SLIDE 48

Solution:

  • BE. VERY. CONSISTENT.
slide-49
SLIDE 49

Misguided Design Deliverables

Burning yourself out, and your budget too.

slide-50
SLIDE 50
  • Designing the wrong things
  • Creating too many design deliverables
  • Not designing enough
  • Jumping into designs too quickly

Examples:

slide-51
SLIDE 51

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

slide-52
SLIDE 52

Different clients require different deliverables. Accept and embrace this.

slide-53
SLIDE 53

Process Is More Important Than Deliverables.

slide-54
SLIDE 54
  • 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

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

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

slide-57
SLIDE 57

Bad Communication

Like a wrecking ball to your budget

slide-58
SLIDE 58

Assumptions Cost Money.

slide-59
SLIDE 59

When We Don’t Communicate Problems Snowball.

slide-60
SLIDE 60
slide-61
SLIDE 61

No Room For Iteration

slide-62
SLIDE 62
  • 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
slide-64
SLIDE 64

Solution: Be in constant communication with engineers, PMs and

  • clients. Don’t be afraid to ask

for clarity.

slide-65
SLIDE 65

Final Thoughts & Time Savers

slide-66
SLIDE 66
  • 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
  • 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
  • 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

usepanda.com

slide-70
SLIDE 70
  • Your design skills need to be exercised
  • Daily Sketches
  • Daily Treehouse lessons

Daily Exercises

slide-71
SLIDE 71
  • 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

Free Stuff:

Save budget by not buying shit.

slide-73
SLIDE 73
  • Google Fonts: google.com/fonts
  • League of Movable Type: theleagueofmoveabletype.com
  • Lost Type: losttype.com
  • Font Squirrel: fontsquirrel.com

Typefaces:

slide-74
SLIDE 74
  • The Stocks: thestocks.im
  • Unsplash: unsplash.com
  • Death To The Stock Photo: deathtothestockphoto.com

Free Photos

slide-75
SLIDE 75

thestocks.im

slide-76
SLIDE 76
  • Codrops: tympanus.net/codrops/
  • CodePen: codepen.io
  • Bourbon Refills: refills.bourbon.io

Code Snippets

slide-77
SLIDE 77

refills.bourbon.io

slide-78
SLIDE 78
slide-79
SLIDE 79

“Creativity Is Born Out Of Necessity And Constraints Are Just Needs. ”

slide-80
SLIDE 80

Thank You!

Now, let’s go have a beer!