Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Josh Riggs

January 21, 2015
Tweet

More Decks by Josh Riggs

Other Decks in Design

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. 1
    2
    3
    4
    1
    2
    3
    4

    View Slide

  35. 1
    2
    3
    4
    1
    2
    3
    4

    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