Case Studies & Process

The Chopping Block, Inc.

This presentation is an HTML page.

Press → key to advance.

Toggle notes with the 2 key.

Zoom in/out: Ctrl or Command + +/-

Having issues seeing the presentation? Read the disclaimer

This presentation was printed from an HTML page.

A fully interactive version of these slides containing examples and links to further resources can be found at:
http://choppingblock.com/presentations.

This page is based on the HTML5 Slideshow by Marcin Wichary, Ernest Delgado, Alex Russell and Brad Neuberg:
http://apirocks.com/html5/html5.html

Intro

Chopping Block

World Domination Through Graphic Design

Since 1996

choppingblock.com, portfolio

Intro

Chop Shop

Shirts For Designers, And Nerdy Designers

Since 2004

chopshopstore.com

Notes:

With Shirts Like This, Who Needs Pants.

Intro

Teaching

NYC @ School of Visual Arts

Since 1998

Take exceptionally talented creative professionals.

Teach them how to work digitally.
Teach them how to build for & communicate online.

Work

Storytelling

Once Upon A Time

Gulp

What Is A Print - MoMA
No Album - They Might Be Giants
Mousetrap - Virginia Center for Policing Innovation

Process

The Challenge

How Do You Design For This?

Hesitation

Common frustrations & fears:

Learning takes time, time takes money.
Web design gets awfully complicated.
Do you expect me to mock up three different versions of that insanely complex layout?
Complicated takes time, time takes money.
How do you get a design approved?
How do you know if it's going to work?

Process

Solutions

The Chopping Block Way

Power

Structure (Wireframes)

Separate the function & content from the design.
Wireframes are a BIG part of the creative process.

Functionality

Build a prototype. Talk about it.

Look & Feel (Concept Boards)

Allow the design (and the designer) to run free.
Reduce the complexity & capture a feeling.

Bring everything together

Play on the strengths of the medium itself.

Notes:

Essentially, we divide and conquer.
There is nothing worse than a client not looking at the design because they are caught up on the functionality or content.
If your information architecture team is not creative, you are most likely not going to have a creative product.
If your information architecture team does not understand how to build what they are drawing, you are going to have a problem building what they drew.

Process

Structure

This Is Not A Wireframe

Whoa

That's a sketch (an idea), you can work from here.

Notes:

Sketches are handy, they are the single most effective way to convey an idea. We share them with clients all the time. Once some ideas take hold, we incorporate them into our wireframes.

Process

Structure

Neither Is This

Ouch

This does not help anybody, this is just an idea.

Process

Structure

This Is A Wireframe

Much Better

Chopping Block Wireframe Examples

Process

Wireframes

Create & Iterate Where It Is Fast

Flexibility

A wireframe is a blueprint, blueprints have standards.

You can measure it - you can build it.
Sample copy - word count and content approval.
Pixel perfect width, ad's, video and Flash embeds.
Yes, wireframes have grids. - 960.gs
Adobe Illustrator, save time & design over top of it.

A wireframe can/should establish the functionality.

A wireframe can be creative.

The freedom to think visually. Sans final design.

A wireframe is a discussion document.

Notes:

There are many 'wireframe tools' out there, but nothing as powerful as Adobe Illustrator.
Create an Illustrator file containing re-usable wireframe parts and you can easily best the features within many stand alone wireframe tools.

Design

Look & Feel

Be A Designer, Not A Martyr

Create

Chopping Block Concept Board Examples

Design

Look & Feel

Concept Boards Keep Projects Fresh

Explore

Lessen the content, increase the exploration.

Pick 4 to 6 relative sample elements.
(navigation, images, sample feature, etc...)
Explore the formal design possibilities.
Keep multiple versions on each page (as a catalyst).
Make compositions, present well, react quick.