Capabilities Deck

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:
https://github.com/html5rocks/www.html5rocks.com

Intro

Chopping Block

World Domination Through Graphic Design

Since 1996
Edge Link 03 01 ChopMain

choppingblock.com, portfolio, stories

Intro

Chop Shop

Shirts For Designers, And Nerdy Designers

Since 2004
Edge Link 03 Chop Shop Store Main

chopshopstore.com, samples

Notes:

  • With Shirts Like This, Who Needs Pants.

Sample Chop Shop Tees

  • Chop Shop Tees
  • Chop Shop Posters
  • Chop Shop Tees: Radiolab Collection
  • Chop Cards Mobile - For UX Sketching

Intro

Teaching

NYC @ School of Visual Arts

Since 1998
  • Edge Link 03 01 SvaTriptic01 A01 03 Mfai
  • Edge Link 03 01 SvaTriptic01 A01 05 Mpsdp
  • Edge Link 03 01 SvaTriptic01 A01 07

Take exceptionally talented creative professionals.

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

Basics

We Make Things

Or we make things better...

Agile
Edge Link 03 Sketchbook
  • We have been a 'Pod' since day one.

We are big fans of process & efficiency...

Design

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.

Design

Structure

This Is Not A Wireframe

Yup
06 Sketch1 A01
  • 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.

Design

Structure

Neither Is This

More Yup
06 Sketch1 A01
  • Still an idea, you can not commit to this.

Design

Structure

The Functional Spec

Kinda Yup
06 Function Spec A01
  • Also helpful, but not by itself.

Design

Structure

This Is A Wireframe

Much Better
06 Wireframe1 A01

Chopping Block Wireframe Examples

Sample Chopping Block Wireframes

  • 06 WireStack 01 Bravo
  • 06 WireStack 02 Dmb
  • 06 WireStack 03 Havaianas
  • 06 WireStack 04 Havaianas

Design

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
06 Concept1 A01

Chopping Block Concept Board Examples

Sample Chopping Block Concept Boards

  • 06 ConceptStack 01 ChildrensMuseum
  • 06 ConceptStack 02 CosmoGirl
  • 06 ConceptStack 03 IVillage

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.

Wireframes are there to field the content questions.

Concept board design work is scalable.

  • Bring in another designer.

Design

Look & Feel

Build Your Own Reference Library

Crank
06 Concept2 A01
  • It's ok to steal your own ideas...

Design

Merge & Build

Divide, Conquer, & Skin The Wireframes

Happiness
06 Merge1 A01

Chopping Block Full Project Examples

Sample Chopping Block Concept Boards

  • 06 ProjectStack A01 Bcm Wire
  • 06 ProjectStack A02 Bcm Concept
  • 06 ProjectStack A03 Bcm Design
  • 06 ProjectStack B01 Hpt Wire
  • 06 ProjectStack B02 Hpt Concept
  • 06 ProjectStack B03 Hpt Design
  • 06 ProjectStack C01 Oprah Concept
  • 06 ProjectStack C02 Oprah Design
  • 06 ProjectStack D01 Coa Wire
  • 06 ProjectStack D02 Coa Concept
  • 06 ProjectStack D03 Coa Design
  • 06 ProjectStack E01 Phish Wire1
  • 06 ProjectStack E02 Phish Wire2
  • 06 ProjectStack E03 Phish Design
  • 06 ProjectStack E04 Phish Build

Design

Merge & Build

The Sum Of All Parts

End Game

Move forward with project design (with a safety net).

  • Merge the approved wireframes with the approved look & feel.
  • Tedious at times yes, but you should have a really solid direction and blueprint.
  • Keep the wireframes up to date as scope shifts.

Depending on the project, development can start now.

  • Once things are approved, sometimes it's faster to build out full design using CSS.

Case Study: Lifebook

luluromer.com

Dad
Edge Link 03 Lulu Romer

Case Study: Lifebook

Wireframes

Variations
Lifebook Wires 1

Notes:

Case Study: Lifebook

Wireframes

Variations
Lifebook Wires 2

Case Study: Lifebook

Wireframes

Final
Lifebook Wires 3

Case Study: Lifebook

Moodboards

Scrunch
Moodboard

Case Study: Lifebook

Moodboards

Scrunch
Moodboard

Case Study: Lifebook

Moodboards

Scrunch
Moodboard

Case Study: Lifebook

Minor Variations
Modules

Case Study: Lifebook

Editor Wireframes
Modules

Case Study: Lifebook

Editor Wireframes
Modules

Case Study: Lifebook

Editor Wireframes
Modules

Web App

Lifebook

Parents Connect

Link Lifebook image

YouTube Series

  • Branding, Design, UX, Development, Animation

site

dgree.org

LENS Ventures

Link dgree.org image

Envisioning the Future of Higher Education

site

LENS Ventures

LENS Ventures

Link LENS Ventures image

Bringing the Future Into Focus

  • Design, UX, Development

site

Photoshop dot com

Adobe Systems

Link Photoshop dot com image

Photoshop is the Power to...

  • Design, UX, Copywriting, Consulting

exhibition

Elect Next

National Constitution Center

Elect Next image

Interactive Museum Exhibit

  • Design, UX, Animation, Support
  • Touch screen exhibition installation

mixed

Address America

National Constitution Center

Link Address America image

Interactive Museum Exhibit and Website

  • Design, UX, Animation, Support
  • Touch/tablet exhibition installation

site

Fred Figglehorn

Ad hoc Inc.

Fred Figglehorn image

YouTube Series

  • Design, UX, Development, Animation

Mobile

HeyZooka

Clickatell Inc.

HeyZooka image

Soon-to-launch mobile app

Branding

Dilbert

United Media

Link Dilbert image

Official Logo & Style Guide for Dilbert

  • Branding, Design

Identity

Qelavi

Oilily Rebranding

Qelavi image

Upscale Clothing Store Identity

  • Branding, Design

Site

Spiderwick

Simon & Schuster

Link Spiderwick image

Website for the Spiderwick Book Series

  • Design, UX, Development, Animation

Site

Bad Kitty

Macmillan

Link Bad Kitty image

Website & Games for the Bad Kitty Series

  • Design, UX, Development, Animation, Games

Site

uRule

Scholastic, Inc.

uRule image

Scholastic Web Portal for kids

  • Design, UX, Animation

Mixed

No!

They Might be Giants

No! image

Kid's Album for They Might Be Giants

  • Design, UX, Animation, Concept

UX

Time for Kids

Time, Inc.

Link Time for Kids image

Redesign for Time, Inc.

Design

FasttMath

Scholastic, Inc.

Link FasttMath image

Next Generation Math fluency software

Design

MATH 180

Scholastic, Inc.

Link MATH 180 image

Revolutionary New Math Intervention Program