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

3da2285e3aff61848ae49c2b3aa3063f?s=47 Josh Riggs
January 21, 2015

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

After spending several years designing large-scale responsive websites for Fortune 500 companies with mega-budgets, I now specialize in design for progressive non-profit organizations. The good news is that we can still create kick-ass design for any budget as long as we utilize solid design fundamentals, great communication, and a few tricks up our sleeves.

3da2285e3aff61848ae49c2b3aa3063f?s=128

Josh Riggs

January 21, 2015
Tweet

Transcript

  1. Josh Riggs Senior Lead UX Designer @ThinkShout @joshriggs

  2. Ballin’ On A Budget How to create great design at

    nearly any cost.
  3. A Bit About Me

  4. Design @ThinkShout

  5. I Take Abstract Ideas And Create Something A Human Can

    Use
  6. The Twist: We Work Almost Exclusively With Non Profits Who

    Watch Their Budget Carefully
  7. Designing On A Budget: • Why Talk About Money? •

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

  9. Comparison. Expectations. Reality Check.

  10. Apple

  11. (Cr)Apple

  12. Google Design

  13. 60 UX Design Job Openings

  14. Charity: Water

  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
  16. Great Design Costs Time & Resources. What If We Have

    Neither?
  17. If Time = Money, How Can We Work More Efficiently

    And Still Create Great Design?
  18. Good Ideas Are Free.

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

  20. Having A Solid Design Vision Will Help You Keep Things

    In Perspective.
  21. • Good Typography • Simple image editing Design Skills: Quick

    Investments That Pay Back:
  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
  23. None
  24. • Color treat your damn photos! • Presets like VSCO

    (vsco.co) are great! Simple Image Editing & Color Treatment
  25. None
  26. None
  27. Good, Creative Ideas Are Free. Implementing Those Ideas Can Be

    Expensive!
  28. Budget Killers & How To Avoid Them

  29. • Technical underestimation • Inconsistencies in design • Misguided design

    deliverables • Bad communication 4 Breeds Of Budget Killers
  30. Technical Underestimation Might as well just punch your programmers and

    your budget in the face. Repeatedly.
  31. Example: Responsive Design & HTML Source Order

  32. None
  33. None
  34. 1 2 3 4 1 2 3 4

  35. 1 2 3 4 1 2 3 4

  36. Example: Know your CMS or Platform

  37. None
  38. h1 h2 Article Header Article Content

  39. Solution: Talk To Your Developers.

  40. On a scale of 1 - 10, how hard will

    it be for you to build this?
  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
  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
  43. Inconsistency Like a swarm of angry little bees that slowly

    devour the budget.
  44. Example: Image Thumbnail Sizes

  45. None
  46. 16 x 9 16 x 9 Really Fuckin’ Wide 1

    x 1 1 x 1
  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
  48. Solution: BE. VERY. CONSISTENT.

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

  50. • Designing the wrong things • Creating too many design

    deliverables • Not designing enough • Jumping into designs too quickly Examples:
  51. Design deliverables have to make both clients and developers happy.

    This is not easy.
  52. Different clients require different deliverables. Accept and embrace this.

  53. Process Is More Important Than Deliverables.

  54. • Content Slice Diagrams • Wireframes • Prototypes Deliverables at

    ThinkShout: • Style Tiles • Visual Inventories • Visual Design in Browser • Visual Design in Sketch • Codepens
  55. Process at ThinkShout: • Start broad, then work down to

    details. • Turn business goals and content into something a human can use.
  56. Solution: Focus on objectives, not specific deliverables. Create a plan

    before starting.
  57. Bad Communication Like a wrecking ball to your budget

  58. Assumptions Cost Money.

  59. When We Don’t Communicate Problems Snowball.

  60. None
  61. No Room For Iteration

  62. • Front loading design only at the beginning of a

    project • What happens if something needs design, and your design budget is gone? Example:
  63. None
  64. Solution: Be in constant communication with engineers, PMs and clients.

    Don’t be afraid to ask for clarity.
  65. Final Thoughts & Time Savers

  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
  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
  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
  69. usepanda.com

  70. • Your design skills need to be exercised • Daily

    Sketches • Daily Treehouse lessons Daily Exercises
  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
  72. Free Stuff: Save budget by not buying shit.

  73. • Google Fonts: google.com/fonts • League of Movable Type: theleagueofmoveabletype.com

    • Lost Type: losttype.com • Font Squirrel: fontsquirrel.com Typefaces:
  74. • The Stocks: thestocks.im • Unsplash: unsplash.com • Death To

    The Stock Photo: deathtothestockphoto.com Free Photos
  75. thestocks.im

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

    Code Snippets
  77. refills.bourbon.io

  78. None
  79. “Creativity Is Born Out Of Necessity And Constraints Are Just

    Needs.”
  80. Thank You! Now, let’s go have a beer!