Leveraging component-based design to save money on your web project, by Oliver Seldman from Advomatic, Leah Kopperman from The Jewish Education Project, and Jessica Teal from Teal Media.

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

11. 2.
LEGOs for your
website

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

16. 3.
Components
Components
are discrete
chunks of
content

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

20. 4.
The component-
based design
process

21. Sitemap &
Wireframes
Structure

22. Sitemap example

23. Wireframe examples

24. Style tiles
Look & Feel

25. Style tile
examples

26. Component
Library
Combine style & structure

27. Component
library examples

28. Comps
Now click the LEGOs together!

29. Page
comp
examples

30. Page comp examples

32. Component
Development
Building a living style guide
and working components

33. Living style guide

34. Living style guide

35. Components as
Content
With Drupal’s In-Place Editor,
Content Creators can add
components as needed.

36. Drupal’s
In-Place Editor
(IPE)

37. Drupal’s
In-Place Editor
(IPE)

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