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
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
24. • Color treat your damn photos! • Presets like VSCO (vsco.co) are great! Simple Image Editing & Color Treatment
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
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
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
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.
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:
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
79. “Creativity Is Born Out Of Necessity And Constraints Are Just Needs.”
80. Thank You! Now, let’s go have a beer!