Design Process Book — 2015

Page 1


HELLO. My name is Ian “Rip� Van Winkle. I am, but not limited to, a graphic designer based in Seattle. I love all aspects of design and I love working with new clients. Visit my website at ianvanwinkle.com to see more work.

DHAP Project of SCLC

P 04

P 24

01 / DHAP

02 / Digital Chemical

Identity system and social media criteria created for a sub-brand of Seattle Community Law Center.

Identity system and logo animation for an independent graphic novel company called Digital Chemical.


P 44

P 54

P 64

03 / Problem Solving

04 / 21 Century Apocalypse

05 / Amos the Astronaut

A motion graphic designed to metaphorically represent how designers problem solve.

A motion graphic created to explore motion techniques and production strategies.

An interactive learning adventure for ages 6–8 and a future Van Winkle Studio IOS application.


DHAP FUTURE BRANDING

1

0


(created in 2006) which works

DHAP is committed to meet-

with disabled homeless to claim

ing clients where they are. SCLC

their due social security benefits.

makes arrangements to set up an advocacy plan that will be

Who DHAP serves: people living

successful, maintaining ongoing

with disabilities who are homeless.

partnerships with several shelters in the King County area, and serv-

PROJECT STATEMENT

When DHAP can help: DHAP

ing clients at the locations they

will help at any stage of a claim

visit for other life-giving services.

Seattle Community Law / DHAP:

for SSI/SSDI, including: applica-

Seattle Community Law has been

tion, request for reconsideration,

Project Goals: Create a brand

working with disabled homeless

hearing, and Appeals Council.

specific to one of the two pro-

and people on the poverty line

05

grams offered from SCLC: Dis-

dealing with social security issues

What services DHAP pro-

abled Homeless Advocacy Proj-

since 1997. They currently help

vides: referral, legal infor-

ect. This brand will communicate

800 people annually out of the

mation, counsel and advice,

to the public a better understand-

8000 people that need their help.

and direct representation.

ing of what SCLC does with this

One of the programs they offer

program and will help provide a

their clients is called the Disabled

Where DHAP provides services:

guide for future use in social me-

Homeless Advocacy Project

When clients lack transportation,

dia and other forms of collateral.


Target Audience: Middle income

Competitors: The “competitors”

individuals and families living in

in this field are less of competi-

urban Seattle and suburban Se-

tors, and more like others reach-

attle areas.

ing for the same goal which is to end homelessness in Seattle.

Reasons: By supporting DHAP,

06

you support the wellness and

Direct Competitors: DHAP has a

sheltering of the homeless in Se-

very specific marketplace. As a

attle. Ultimately, you are helping

result, it does not have any direct

someone get off of the street.

competitors dealing with disabled homeless seeking SSI.

“The Disabled Homeless Advocacy Project offers legal support to Seattle’s disabled homeless struggling with claiming social security benefits.”


Other Competitors (Similar Field):

07


SKETCHES

08


SKETCHES

09


COMPS

10


COMPS

ESTD.

2006

DISABLE D H OMELES S A D V O C A C Y

ESTD.

P R O J E C T

2006

DI S A B LED HOMELES S A D V O C A C Y

P R O J E C T

11


COMPS

12

DHAP

DISABLED HOMELESS ADVOCACY PROJECT


COMPS

13


COMPS

ESTD.

14

2006

DI S A BL ED H OM E L E S S A D V O C A C Y

ESTD.

P R O J E C T

2006


COMPS

15

DHAP


MOOD BOARD

16

BOLD DHAP // Identity_R1

ianvanwinkle.com

rip@ianvanwinkle.com ramey@isomedia.com


MOOD BOARD

ESTD. 2006

DI S A BLED H OME LESS A D V O C A C Y

17

P R O J E C T

ESTD. 2006

DI SA B LE D HOMELE SS A D V O C A C Y

DHAP // Identity_R1

P R O J E C T

ianvanwinkle.com

rip@ianvanwinkle.com ramey@isomedia.com


MOOD BOARD

18

DHAP

DHAP // Identity_R1

ianvanwinkle.com

rip@ianvanwinkle.com ramey@isomedia.com


COMPS

ESTD. 2006

DI S A BLED H OME LESS A D V O C A C Y

P R O J E C T

1.

ESTD. 2006

DI SA B LE D HOMELE SS A D V O C A C Y

2.

P R O J E C T

3.

DHAP

19


FINAL

FULL IDENTITY

RESPONSIVE

20

DHAP Project of SCLC

DHAP SCLC


FINAL

21


FINAL

22


FINAL

23


2

0

DIGITAL CHEMICAL BUSINESS IDENTITY


illustrators, and developers

1964. A graphic novel, put sim-

working together to make kick-

ply, is a book-length comic. Will

ass work. Digital Chemical expects

Eisner’s A Contract With God

to release their first product for

was one of the first. Other defini-

the iPad by the end of 2016.

tions define the term “graphic novel” as “a fictional story that is

Project goals: Define brand for

presented in comic-strip for-

Digital Chemical. Create identity

mat and presented as a book.”

to visually communicate said brand. Provide brand style guide

PROJECT STATEMENT

to further define brand. Provide

Client Background: A startup

brand aesthetics to consumers.

collateral as discussed in this proposal to visually represent

company specializing in the entertainment industry,

Graphic Novels/ Comic Books:

specifically graphic novels and

Humans have been telling stories

games. Digital Chemical differs

with pictures for thousands of

from its competitors by provided

years. However, the term “graphic

each piece to the puzzle. Authors,

novel” was first introduced in

25


Top Print Competitors:

26

DC Comics 1934 - 2015

Other Print Competitors:

Marvel Comics 1939 - 2015


Graphic Novels for the iPad: Most iPad apps concerning graphic novels and comics are more like reading platforms than applications or individual novels. Digital Chemical strives to provide content, art, and application all in one.

iPad Competitors w/ Independent Publishing:

27

The Carrier $5.99


Other iPad Competitors:

28

Marvel Comics Free

IDW Comics Free

iVerse Comics Free


SKETCHES

29


SKETCHES

30


SKETCHES

31


SKETCHES

32


SKETCHES

33


COMPS

34

D


COMPS

35


COMPS

36


COMPS R1

Dc

37


COMPS R2

D 38

I

G

I

T

A

L


MOOD BOARD

39

Senior Project Preproduction // Project 1 // Week 4

ianvanwinkle.com

rip@ianvanwinkle.com


MOOD BOARD

D I G I T A L

40

ABC Senior Project Preproduction // Project 1 // Week 4

ianvanwinkle.com

rip@ianvanwinkle.com


MOOD BOARD

41

Senior Project Preproduction // Project 1 // Week 4

ianvanwinkle.com

rip@ianvanwinkle.com


FINAL

D 42

I

G

I

T

A

L


FINAL

LOGO ANIMATION

43

http://www.ianvanwinkle.com/digital-chemical/


3

0

PROBLEM SOLVING MOTION GRAPHICS


PROJECT STATEMENT Background: Being a designer in any creative field is about solving a problem. Sometimes, the solution to a problem is not so apparent and can leave us creatives stumped. “Problem Solving // Try A New Perspective” plays metaphorically toward a designer’s ability to solve a problem by seeing from a different perspective. Tools Used: After Effects, Cinema 4D, Audition

45


SKETCHES

46


SKETCHES

47


SKETCHES

48


SKETCHES

49


SKETCHES

50


SKETCHES

51


SKETCHES

52


FINAL

53

http://www.ianvanwinkle.com/problem-solving-try-a-new-perspective-2/


4

0

21 CENTURY APOCALYPSE MOTION GRAPHICS


PROJECT STATEMENT Background: 21 Century Apocalypse is a motion graphic inspired by Tom Clancy’s The Division 2015 trailer. It was written in light of a present day coffee addiction and an apocalyptic obsession. The project was utilized by exploring current motion techniques and production strategies. Tools Used: After Effects, Cinema 4D, Plexus, Particular

55


SCRIPT

Twenty-First Century Apocalypse VO Script (The narrator is recounting the events of a modern apocalypse. The voice will play over animation depicting these events. The tone should be serious and slightly ominous without being melodramatic.) December 16, 2015. International conflict brings global trade to a halt. January 2016. 56

As supplies run dry, the first signs of a widespread infection begin to emerge. (Mood change - slightly more urgency) February 2016. The infection spreads. Evolves. And kills millions. (Mood change – quieter, more contained, reflective) Something was holding back the infection. And no one expected it to be in our hands all along.


STORYBOARD

Twenty-First Century Apocalypse Vocal 1. December 16, 2015.

Visuals Dark textured screen, text animate on Transition: Zoom in and out-of-focus text

57

2. International conflict brings global trade to a halt.

Globe plexus, lines imulating trade routes. Trade route lines snap and contract like tentacles. Transition: Zoom in and blur on USA

3. January 2016.

Text animate over deserted coffee shop BG.


STORYBOARD

3. January 2016.

Text animate over deserted coffee shop BG. Transition: Twitch cut

58

4. As supplies run dry,

Coffee Dispensing Transition: Twitch cut


STORYBOARD

5. the first signs of a widespread infection

Text animate over scene of cloned molecules When “infection� said, molecule in center pulses. Transition: Twitch cut

59 6. begin to emerge.

Center molecule festers and spreads from center to outer. Transition: Twitch cut

7. February 2016.

Text animate Transition: Twitch cut


STORYBOARD

7. February 2016.

Text animate Transition: Twitch cut

60

8. The infection spreads.

Text animate and parallax. “Spreads” fills with molecules. Spore disinegration. Transition: Twitch cut


STORYBOARD

9. Evolves.

Snap zoom, Molecule splitting Transition: Twitch cut

10. And kills millions.

Snap zoom out, molecules spreading (initially not viewed as map, but then shows USA. Transition: Twitch cut

11. Something was holding back the infection

Text animate and parallax. Word “infection” pulsing and twitching w/ virus On sentence end, push word “infection” to BG and blur with a scratched glass overlay (glitchy style animation).

61


STORYBOARD

11. Something was holding back the infection

Text animate and parallax. Word “infection” pulsing and twitching w/ virus On sentence end, push word “infection” to BG and blur with a scratched glass overlay (glitchy style animation). Transition: Twitch cut

62


STORYBOARD

12. And no one expected it to be in our hands all along.

Steam rising without coffee in view (?)

13. (On screen text) Supressing the apocalypse since 1971.

White Starbucks nockoff logo spin on green BG Text animate on

Transition: Rewind twitch cut (rewind sound)

Fade out

63


AMOS THE ASTRONAUT SENIOR PROJECT

5

0


Target Audience: Families,

About Amos: Amos is a daring

Kids Ages 6–8, Parents

astronaut whose galaxy quests are the stuff of legend! Okay,

Concept Statement: Amos the

well, maybe he’s only a legend

Astronaut is the second planned

in his own mind, but that wont

interactive story for Van Winkle

stop him. He still has a heart of

Studio, following The Adventures

gold and travels to unknown

of Pete and Mike. Similarly to Pete

reaches of the universe for

and Mike, it is the first of a series

the thrill of the adventure and

of stories that will be created in

to make new friends. He is a

PROJECT STATEMENT

a similar format. In it, will be all

bit clumsy with his spaceship,

improvements that were tested,

though, which results in many

evaluated and proven from The

unscheduled stops to unknown

Background: Amos the Astronaut

Adventures of Pete and Mike in-

planets. In this adventure, Amos

is a future Van Winkle Studio

cluding speech bubble driven text,

crash-lands on a lush, mysterious

IOS application expected to

more intuitive hints system, better

planet teaming with wildlife. Join

launch early 2016. Being un-

logic flow, aesthetic improve-

Amos and explore the planet,

der the interactive books and

ments, larger tap zones, drag and

gather items, solve puzzles,

games categories, the app is

drop item interaction, and more.

make new friends, and repair his

perfect for kids and parents.

ship for the next adventure!

65


Crash Zone

LOGIC FLOW

Start

Yes

First Entry?

No

Entered village?

Yes

Check for fin items (Bamboo, Vines, Planks)

2 of 3?

1 of 3?

Yes

3 of 3?

Yes

Yes

Waiting for menu tutorial to play

Fin Acquired?

Yes

AMOS: Alright! Lets get that new fin on the ship!

No No

Say Nothing

No

No

Fin on ship?

Yes

Waiting Fin drag to ship

No

No

66

Menu Tutorial Played?

AMOS: We still need 3 more items to build my ship fin.

AMOS: We still need 2 more items to build my ship fin.

AMOS: We still need 1 more items to build my ship fin.

Fin dragged on ship?

No

Yes Yes

Play End Movie

AMOS: We have all of the items! I wonder if we can find a workbench to put these items together.

AMOS: Oh, no! My ship fin broke clean off! Lets explore and see what we can find around here.

Waiting End Movie complete

No

Waiting for user to tap ship

Movie Complete?

Go to Ship Zone

Yes

See Amos the Astronaut Process Book

Ship Tapped?

No

Yes


ASSET LIST

Amos_Assets Visual/Audio V V V V V A

Category Animation Animation Background Background Background Voice

Page 1 1 1 1 1 1

Device n/a n/a iPad iPad @2x iPhone @3x n/a

Target App App App App App App

Asset Villager Villager n/a n/a n/a Villager

Status Not Started Not Started Not Started Not Started Not Started Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Villager

Not Started

A

Voice

1

n/a

App

Amos

Not Started

V V V A

Background Background Background Voice

2 2 2 2

iPad iPad @2x iPhone @3x n/a

App App App App

n/a

Complete

n/a Amos

Complete Not Started

%Complete

Description Villager 4 Casual Villager 4 Celebrating

NPC: Welcome to the workshop. This is where we will build your new ship fin. To build the fin, we are going to need 3 items: bamboo, vines, and planks. Try helping the villagers and exploring to get some.

Background Size n/a n/a 1024x768 2048x1536 1024x576 n/a

Frame Range/Seconds

n/a n/a n/a

NPC: We are going to need 3 n/a items: bamboo, vines, and planks. Try helping the villagers and exploring to get some. n/a NPC: That s all of the items! Lets get to building! Go ahead and put the items on the table. NPC: You found some bamboo! Great! NPC: You found some vines! Fantastic! NPC: You found some planks! Super! NPC: You did it! Great job! Now you can go put that new fin on your ship! AMOS: Thank you for helping me make my repairs!

See Amos theComplete Astronaut Process Book n/a AMOS: Ahh, this must be the workshop. We might be able to make our fin in there.

67

n/a n/a n/a n/a

n/a

1024x768 2048x1536 1024x576 n/a

n/a n/a n/a


BG SKETCHES

68


BG SKETCHES

69


BG SKETCHES

70


BACKGROUNDS

71

page_12.png

page_12@2x.png

page_12@3x.png


BACKGROUNDS

+

72

Bottom Layer

=

Top Layer

Combined


BACKGROUNDS

73


BACKGROUNDS

74


BACKGROUNDS

75


SKETCHES

76


SKETCHES

77


SKETCHES

78


SKETCHES

79


SKETCHES

80


SKETCHES

81


SKETCHES

82


ITEMS

83


THANK YOU.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.