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.

Transcript

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

   View Slide

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

   View Slide

3. A Bit About Me
   

   View Slide

4. Design @ThinkShout
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Why Talk About Money?
   

   View Slide

9. Comparison. Expectations.
   Reality Check.
   

   View Slide

10. Apple
    

    View Slide

11. (Cr)Apple
    

    View Slide

12. Google Design
    

    View Slide

13. 60 UX Design Job Openings
    

    View Slide

14. Charity: Water
    

    View 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
    

    View Slide

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

    View Slide

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

    View Slide

18. Good Ideas Are Free.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View 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
    

    View Slide

23. View Slide

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

    View Slide

25. View Slide

26. View Slide

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

    View Slide

28. Budget Killers & How To
    Avoid Them
    

    View Slide

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

    View Slide

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

    View Slide

31. Example:
    Responsive Design & HTML
    Source Order
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. Example:
    Know your CMS or Platform
    

    View Slide

37. View Slide

38. h1
    h2
    Article Header
    Article Content
    

    View Slide

39. Solution:
    Talk To Your Developers.
    

    View Slide

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

    View 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
    

    View 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
    

    View Slide

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

    View Slide

44. Example:
    Image Thumbnail Sizes
    

    View Slide

45. View Slide

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

    View 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
    

    View Slide

48. Solution:
    BE. VERY. CONSISTENT.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. Different clients require
    different deliverables.
    Accept and embrace this.
    

    View Slide

53. Process Is More Important
    Than Deliverables.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

57. Bad Communication
    Like a wrecking ball to your budget
    

    View Slide

58. Assumptions Cost Money.
    

    View Slide

59. When We Don’t Communicate
    Problems Snowball.
    

    View Slide

60. View Slide

61. No Room For Iteration
    

    View 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:
    

    View Slide

63. View Slide

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

    View Slide

65. Final Thoughts & Time Savers
    

    View 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
    

    View 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
    

    View 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
    

    View Slide

69. usepanda.com
    

    View Slide

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

    View 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
    

    View Slide

72. Free Stuff:
    Save budget by not buying shit.
    

    View Slide

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

    View Slide

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

    View Slide

75. thestocks.im
    

    View Slide

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

    View Slide

77. refills.bourbon.io
    

    View Slide

78. View Slide

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

    View Slide

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

    View Slide