Design on a Budget
- 1. Design on a Budget Wednesday, March 23, 2016 Oliver Seldman, Leah Kopperman, Jessica Teal #16NTCdesignbudget
- 2. Hello!We are: Oliver Seldman from Advomatic @otseld/@advomatic Jessica Teal from Teal Media @TealMedia Leah Kopperman The Jewish Education Project @kopperwoman/@JewishEd Collaboration notes: http://po.st/designbudget-16NTC
- 3. Definitions Component: - Discrete chunk of content - Responsive: - Flexible design that accommodates different device widths - Wireframes: - Skeletal layout of your site - only structure, no design Comps: - Short for “composition design” - Mockups of the pages of your site - Agile: - Iterative project management style MVP: - Minimum viable product
- 4. 1. Redesigns can be expensive What are some potential pitfalls of a traditional design approach?
- 5. What have we been doing wrong? 1. Designing every page
- 6. What have we been doing wrong? 1. Designing every page 2. Expecting pixel perfection
- 7. What have we been doing wrong? 1. Designing every page 2. Expecting pixel perfection 3. Not responsive
- 8. What have we been doing wrong? 1. Designing every page 2. Expecting pixel perfection 3. Not responsive 4. Unhelpful style docs
- 9. What have we been doing wrong? 1. Designing every page 2. Expecting pixel perfection 3. Not responsive 4. Unhelpful style docs 5. One-off components
- 10. What have we been doing wrong? 1. Designing every page 2. Expecting pixel perfection 3. Not responsive 4. Unhelpful style docs 5. One-off components 6. No component library
- 12. Component-based design: 1. Encourages adherence to design standards
- 13. Component-based design: 1. Encourages adherence to design standards 2. Allows for scalability & modularity
- 14. Component-based design: 1. Encourages adherence to design standards 2. Allows for scalability & modularity 3. Content creators can focus on content
- 15. Component-based design: 1. Encourages adherence to design standards 2. Allows for scalability & modularity 3. Content creators can focus on content 4. Saves time & money
- 17. - Can be reused - Can have different text & images - Can have varied styles A modular component:
- 18. For maximum modularity Boil down your components to a versatile but limited set of common component styles
- 19. An agile design process - Deliver in batches - Easily change direction - Can work on different pieces at the same time
- 22. Sitemap example
- 24. Style tiles Look & Feel
- 26. Component Library Combine style & structure
- 28. Comps Now click the LEGOs together!
- 32. Component Development Building a living style guide and working components
- 35. Components as Content With Drupal’s In-Place Editor, Content Creators can add components as needed.
- 38. 5. The client’s perspective How should you approach this process at your organization?
- 39. Stakeholder Buy-in ● Spend more money upfront to build a more flexible website ● Iterative process leaves room for modifications throughout the design and build process ● “Final” product is not really final ● Change in mindset from website as a one-time capital investment to ongoing operations investment
- 40. Planning for the Process ● Take the time to understand current pain points ● Think about your audience experience and NOT your internal structure ● Set clear functional requirements for your site
- 41. Managing the Process ● Two scopes of work: ○ Design ○ Build ● Early steps of the process are abstract ● Expectation management ● Fear of commitment ● Continuous education around how the process works
- 42. 6. What can you do now? Inventory other sites Inventory YOUR site Interview shops
- 43. Thanks!Any questions? Feedback survey: http://po.st/f04wom You can find us at @advomatic, @kopperwoman and @TealMedia
- 44. Credits Special thanks to all the people who made and released these awesome resources for free: ▣ Presentation template by SlidesCarnival ▣ Photographs by misschristi1974 and amy ▣ Lego Icons by Jon Trillana / The Noun Project ▣ IPE examples from Annenberg Foundation