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 full-size slide

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

    View full-size slide

  3. A Bit About Me

    View full-size slide

  4. Design @ThinkShout

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Why Talk About Money?

    View full-size slide

  9. Comparison. Expectations.
    Reality Check.

    View full-size slide

  10. Google Design

    View full-size slide

  11. 60 UX Design Job Openings

    View full-size slide

  12. Charity: Water

    View full-size slide

  13. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Good Ideas Are Free.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  23. Budget Killers & How To
    Avoid Them

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Example:
    Responsive Design & HTML
    Source Order

    View full-size slide

  27. Example:
    Know your CMS or Platform

    View full-size slide

  28. h1
    h2
    Article Header
    Article Content

    View full-size slide

  29. Solution:
    Talk To Your Developers.

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

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

    View full-size slide

  34. Example:
    Image Thumbnail Sizes

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

  37. Solution:
    BE. VERY. CONSISTENT.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Process Is More Important
    Than Deliverables.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Bad Communication
    Like a wrecking ball to your budget

    View full-size slide

  47. Assumptions Cost Money.

    View full-size slide

  48. When We Don’t Communicate
    Problems Snowball.

    View full-size slide

  49. No Room For Iteration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  52. Final Thoughts & Time Savers

    View full-size slide

  53. • 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 full-size slide

  54. • 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 full-size slide

  55. • 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 full-size slide

  56. usepanda.com

    View full-size slide

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

    View full-size slide

  58. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. thestocks.im

    View full-size slide

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

    View full-size slide

  64. refills.bourbon.io

    View full-size slide

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

    View full-size slide

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

    View full-size slide