design on a budget

Design on a Budget

Wednesday, March 23, 2016

Oliver Seldman, Leah Kopperman, Jessica Teal

#16NTCdesignbudget

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

http://po.st/designbudget-16NTC

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

1.Redesigns can

be expensive

What are some potential pitfalls of a traditional design approach?

What have we been doing wrong?

1. Designing every page


1. Designing every page2. Expecting pixel perfection


1. Designing every page2. Expecting pixel perfection3. Not responsive


1. Designing every page2. Expecting pixel perfection3. Not responsive4. Unhelpful style docs


1. Designing every page2. Expecting pixel perfection3. Not responsive4. Unhelpful style docs5. One-off components


1. Designing every page2. Expecting pixel perfection3. Not responsive4. Unhelpful style docs5. One-off components6. No component library

2.LEGOs for your

website

Component-based design:

1. Encourages adherence to design standards



2. Allows for scalability & modularity




3. Content creators can focus on content




3. Content creators can focus on content

4. Saves time & money

3. Components

Components are discrete chunks of content

- Can be reused- Can have different text & images- Can have varied styles

A modular component:

For maximum modularity

Boil down your components to a versatile but limited set of common component styles

An agile design process

- Deliver in batches- Easily change direction- Can work on different pieces at the same

time

4.The component-

based design process

Sitemap & Wireframes

Structure

Sitemap example

Wireframe examples

Style tiles

Look & Feel

Style tile examples

ComponentLibrary

Combine style & structure

Component library examples

Comps

Now click the LEGOs together!

Page comp examples

ComponentDevelopment

Building a living style guide and working components

Living style guide

Components as Content

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

Drupal’s In-Place Editor (IPE)

5.The client’s

perspective

How should you approach this process at your organization?

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

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

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

6.What can you do

now?

Inventory other sites

Inventory YOUR site

Interview shops

Thanks!Any questions?

Feedback survey: http://po.st/f04wom

You can find us at @advomatic, @kopperwoman and @TealMedia

http://po.st/f04wom

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

http://www.slidescarnival.com/

https://www.flickr.com/photos/29960457@N08/

https://www.flickr.com/photos/greenplasticamy/

https://thenounproject.com/claxxmoldii/