Project 2 Process Book

PROJECT 2

PROCESS BOOK 01 02 03 04 05 06

William Golden The man behind the CBS eye and brand identity.

Who he was and how his work changed advertising and corporate identity forever.

Rogue Stoppard Digital Media Design 1 CONtent breakdown 01 02 03 04 05 06

Biography CBS Portfolio

Early Life Corporate Identity Work before CBS

Early Work Advertising CBS

Wife - Cipe Pineles Impacts Other

Organization

Some sort of timeline in a non-conventional way

Slideshow for work goals & strategIES 01 02 03 04 05 06

Visual Goals User Goals Strategies

Clean layout Digestable quickly Demonstrate Golden’s:

Simple information delivery Easy to use Style & Simplicity

Bold style Quick scroll through AND his impact BRAIn- storming 01 02 03 04 05 06

Free Write William Golden pratically invented coporoate identity through his design and advertisement crossover work with CBS. Television was a booming industry at the moment and it was important to create a recognizeable system for a brand or company. Through his black and white, bold imagery with complimentary text in small columns interacting with the images he creates a very unique and bold look. His eye logo and the feeling it gives viewers and consumers is essential to the brand. This sense of voyeurism and sort of hypnotic trance that television seems to put people in is absolutley communicated through his logo design. Not only does he use the logo professionally he also made a huge impact on the word of television, design, and advertisement. BRAIn- storming 01 02 03 04 05 06

William Golden Loud Submarine Negative CBS Dark Fan White Corporate Spy Sound & Color Television Black & White Circle Morning Professional Bold Elipse Cartoons Illusion Branding Draining Radial Vision Advertising Couch Shopping Cart Twilight Zone Eye Stare Glasses TV Business Screen Clouds News Revolutionary Watching Grey Hypnotic Impactful Gawking Handsome Vintage Simple Vouyer Large Zoned out Target

DEMographic 01 02 03 04 05 06

Designers Fans Advertisors

Looking to learn about Fans of William Golden Advertismenet inspiration

Golden or draw inspiration and/or the CBS logo and ideas for identity

from his work and life. and brand identity. or strong communication. STRATEGY

STATEMENT 01 02 03 04 05 06

Original Strategy Statement

Deliver information, quickly & effectively while grabbing the users atten-

tion trough Golden’s bold imagery and style. User should know right away

how to navigate website and digest information on site quickly. MOODBOARD 01 02 03 04 05 06

Highlights:

-Black and White -One color -Strong typography -Strong imagery -Draw from Golden’s work as well -Interesting layout COMPEtitive

Research 01 02 03 04 05 06

www.theinlay.com simple layout is very attractive

little hard to navigate and un- derstand

heavy white makes it interesting

lines and boxes

www.year0001.com heavy white with black and white imagery is very clean

glitchy ish effect is really dope

nav and typography are super well executed

overall super easy and clean COMPEtitive

Research 01 02 03 04 05 06

www.stories.readymag.com use of imagery is essential

typography is clean, simple

heavy black and white with one single color is nice

scroll is nice

https://www.agauchedelalune.com/roster/ scroll is amazing

off white color??

typography is very successful

hover aspects make it feel very interactive COMPEtitive

Research 01 02 03 04 05 06

https://readymag.com/shuffle/dieter-rams/ simple imagery and typography is successful

red with black and white is nice

scroll again is very successful

interactive feeling without alot of work

Overall Inspirations and Takeaways

-Heavy white and black looks very successful and interesting for web.

-Use of imagery should be well executed and complimentary to type

-Perhaps use of some color, maybe a scroll effect or glitch effect. Preliminary

Sketches 01 02 03 04 05 06 Preliminary

DESIGN 01 02 03 04 05 06

William Golden…

A Pioneer in Corporate Identity and Design

William Golden

Skate ipsum dolor sit amet, Skate ipsum dolor sit amet, Skate ipsum dolor sit amet, Biography 360 axle boardslide Rick 360 axle boardslide Rick 360 axle boardslide Rick Howard sponsored. Hugh Howard sponsored. Hugh Howard sponsored. Hugh Bod Boyle switch sketchy Bod Boyle switch sketchy Bod Boyle switch sketchy feeble roll-in. Opposite feeble roll-in. Opposite feeble roll-in. Opposite footed 270 freestyle rad. footed 270 freestyle rad. footed 270 freestyle rad. Slide powerslide half-flip Slide powerslide half-flip Slide powerslide half-flip helipop. Tail Elissa Steamer helipop. Tail Elissa Steamer helipop. Tail Elissa Steamer

Skate ipsum dolor sit amet, 360 axle boardslide Rick Howard sponsored. Hugh Bod Boyle switch sketchy feeble roll-in. Opposite footed 270 freestyle rad. Cipe Pineles Slide powerslide half-flip Biography Skate ipsum dolor sit amet, helipop. Tail Elissa Steamer �� axle boardslide Rick invert airwalk 900. Pivot Howard sponsored. Hugh Kevin Harris ollie hole Bod Boyle switch sketchy hanger. Goofy footed axle feeble roll-in. Opposite 1080 grab. Hard flip pop footed �� freestyle rad. shove-it rock and roll indy grab Daggers. Risers finger Skate ipsum dolor sit Cipe Pineles flip handplant Sidewalk amet, �� axle Surfer cab flip. Hang-up boardslide Rick goofy footed judo air Renowned Designer & Wife of William Golden Howard sponsored. melancholy. Slap maxwell Hugh Bod Boyle switch sketchy feeble roll-in. Opposite footed �� freestyle rad. Slide powerslide half-flip helipop. Tail Elissa Steamer invert airwalk ��. Pivot Skate ipsum dolor sit amet, Kevin Harris ollie 360 axle boardslide Rick hole hanger. Goofy footed axle �� grab. Howard sponsored. Hugh Bod Boyle switch sketchy feeble roll-in. Opposite footed 270 freestyle rad. Slide powerslide half-flip helipop. Tail Elissa Steamer Skate ipsum dolor sit amet, invert airwalk 900. Pivot snake bruised heel lip Kevin Harris ollie hole hardware pivot Operation Ivy hanger. Goofy footed axle Skate ipsum dolor sit 1080 grab. Hard flip pop amet, �� axle nosegrind. Nose grab manual shove-it rock and roll indy boardslide Rick stalefish crail slide lien air 1940 Howard sponsored. slide. Tic-tac kickflip hip grab Daggers. Risers finger Hugh Bod Boyle sponsored pogo helipop. switch sketchy feeble Half-cab berm Kevin Harris roll-in. Opposite slam nose grab pump. Mongo footed �� freestyle Mike York axle set grab pop rad. Slide powerslide half-flip helipop. Tail shove-it slam varial. Downhill Elissa Steamer invert stoked quarter pipe Girl airwalk ��. Pivot powerslide layback Tracker. Kevin Harris ollie Vert invert lien air wall ride hole hanger. Goofy Omar Hassan pogo disaster. footed axle �� grab. Poseur transfer launch ramp Hard flip pop shove-it impossible tailslide John rock and roll indy Carbis locals. Rock and roll grab Daggers. Risers finger flip handplant nose grab melancholy no comply �� Vans Calfornia Daze ollie hole. Goofy footed wax slappy nose betty bone air Jeff Phillips. Snake crail CBS grab deck transfer birdie. Skate ipsum dolor sit amet, snake bruised heel lip hardware pivot Operation Ivy nosegrind. Nose grab manual stalefish crail slide lien air slide. Tic-tac kickflip hip sponsored pogo helipop. Half-cab berm Kevin Harris CBS slam nose grab pump. Mongo Skate ipsum dolor sit amet, Mike York axle set grab pop snake bruised heel lip hardware shove-it slam varial. Downhill pivot Operation Ivy nosegrind. stoked quarter pipe Girl Nose grab manual stalefish crail powerslide layback Tracker. slide lien air slide. Tic-tac Vert invert lien air wall ride kickflip hip sponsored pogo Omar Hassan pogo disaster. helipop. Half-cab berm Kevin Poseur transfer launch ramp Harris slam nose grab pump. impossible tailslide John Mongo Mike York axle set grab Skate ipsum dolor sit pop shove-it slam varial. amet, �� axle Downhill stoked quarter pipe boardslide Rick Girl powerslide layback Tracker. Howard sponsored. 1950 Vert invert lien air wall ride Hugh Bod Boyle CBS switch sketchy feeble Omar Hassan pogo disaster. roll-in. Opposite Poseur transfer launch ramp footed �� freestyle impossible tailslide John Carbis rad. Slide powerslide locals. Rock and roll nose grab half-flip helipop. Tail melancholy no comply �� Vans Elissa Steamer invert airwalk ��. Pivot Kevin Harris ollie hole hanger. Goofy footed axle �� grab. Hard flip pop shove-it rock and roll indy grab Daggers. Risers finger flip handplant Sidewalk Surfer cab

Skate ipsum dolor sit amet, snake bruised heel lip hardware pivot Operation Ivy nosegrind. Nose grab manual stalefish crail Skate ipsum dolor sit slide lien air slide. Tic-tac amet, �� axle kickflip hip sponsored pogo boardslide Rick helipop. Half-cab berm Kevin 1960 Howard sponsored. Harris slam nose grab pump. Hugh Bod Boyle switch sketchy feeble Mongo Mike York axle set grab roll-in. Opposite pop shove-it slam varial. footed �� freestyle Downhill stoked quarter pipe rad. Slide powerslide Girl powerslide layback Tracker. half-flip helipop. Tail Elissa Steamer invert airwalk ��. Pivot Kevin Harris ollie hole hanger. Goofy footed axle �� grab. Hard flip pop shove-it rock and roll indy grab Daggers. Risers finger flip handplant Sidewalk Surfer cab flip. Hang-up goofy Skate ipsum dolor sit er ollie 540 bank. 540 bank. Gnarly Kevin amet, pivot bail nollie Gnarly Kevin Jarvis Jarvis hardware flail Alternative Sports alley hardware flail nose nose slide slap max- oop bluntslide. Gator slide slap maxwell. ast well. ast plant Tommy fakie out nose-bump plant Tommy Guerrero Guerrero 540 tuna-flip mongo skate key body 540 tuna-flip bigspin bigspin hospital flip. varial. Pool late regular hospital flip. Hospital Hospital flip goofy footed Omar Hassan flip goofy footed mini footed mini ramp axle spine camel back. ramp axle set nose- set noseblunt slide Gnar bucket nosepick- blunt slide Willy Willy Santos. Smith

Santos. Smith grind grind grab Christ air grab Christ air transi- transition wax. Skate tion wax. Skate or die or die airwalk ance airwalk ance Moun- Mountain nosebone tain nosebone lien air lien air tic-tac. tic-tac. Opposite footed Vans Opposite footed Vans fakie out front foot im- fakie out front foot impossible chicken wing. possible chicken wing. Hip alley oop sick Hip alley oop sick shoveit. Tracker fron- shoveit. Tracker frontside Jason Jesse

1940

cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Pushead. Pressure flip grab camel back base- plate. Dude Arto Saari 1950 Skate ipsum dolor sit er ollie 540 bank. 540 bank. Gnarly Kevin amet, pivot bail nollie Gnarly Kevin Jarvis Jarvis hardware flail Alternative Sports alley hardware flail nose nose slide slap max- oop bluntslide. Gator slide slap maxwell. ast well. ast plant Tommy fakie out nose-bump plant Tommy Guerrero Guerrero 540 tuna-flip mongo skate key body 540 tuna-flip bigspin bigspin hospital flip. varial. Pool late regular hospital flip. Hospital Hospital flip goofy footed Omar Hassan flip goofy footed mini footed mini ramp axle spine camel back. ramp axle set nose- set noseblunt slide Gnar bucket nosepick- blunt slide Willy Willy Santos. Smith

cane. Casper China Santos. Smith grind grind grab Christ air Banks slam lip finger grab Christ air transi- transition wax. Skate flip. Japan air The tion wax. Skate or die or die airwalk ance Wedge gnar bucket 720 airwalk ance Moun- Mountain nosebone durometer. Skate or tain nosebone lien air lien air tic-tac. die rail slide wall ride tic-tac. Opposite footed Vans egg plant Slimeballs. Opposite footed Vans fakie out front foot im- Bail backside rip grip fakie out front foot impossible chicken wing. ledge Animal Chin. possible chicken wing. Hip alley oop sick Wax flail chicken wing Hip alley oop sick shoveit. Tracker fron- Chris Buchinsky shoveit. Tracker frontside Jason Jesse Nose-bump poseur kickturn frontside air Pushead. Pressure flip grab camel back base- plate. Dude Arto Saari ollie hole slappy sick. Coffin kidney smith grind bearings. Slap maxwell OJ IIs Saran 1960

tside Jason Jesse kick-nose cab flip. Crooked grind boardslide face plant hurrit- cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. 1940 Bail backside rip grip ledge Animal Chin. Wax flail chicken wing cane. Casper China Chris Buchinsky Banks slam lip finger flip. Japan air The Nose-bump poseur Wedge gnar bucket 720 kickturn frontside air durometer. Skate or Pushead. Pressure flip die rail slide wall ride grab camel back base- egg plant Slimeballs. plate. Dude Arto Saari Bail backside rip grip ollie hole slappy sick. ledge Animal Chin. Coffin kidney smith Wax flail chicken wing grind bearings. Slap Chris Buchinsky maxwell OJ IIs Saran Wrap boardslide soul Nose-bump poseur skate. Kingpin stoked Refined kickturn frontside air concave risers. 720 Pushead. Pressure flip nose bump switch nose slide. Boned out fakie out wall ride ollie.

cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 01 02 03 04 06 DESIGN durometer. Skate or die rail slide wall ride 05 egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Pushead. Pressure flip 1970 grab camel back base- plate. Dude Arto Saari

1950 cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Pushead. Pressure flip grab camel back base- cane. Casper China plate. Dude Arto Saari Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. Bail backside rip grip Skate ipsum dolor sit er ollie 540 bank. 540 bank. Gnarly Kevin ledge Animal Chin. cane. Casper China amet, pivot bail nollie Gnarly Kevin Jarvis Jarvis hardware flail Wax flail chicken wing Banks slam lip finger Alternative Sports alley hardware flail nose nose slide slap max- Chris Buchinsky oop bluntslide. Gator slide slap maxwell. ast well. ast plant Tommy flip. Japan air The fakie out nose-bump plant Tommy Guerrero Guerrero 540 tuna-flip Nose-bump poseur Wedge gnar bucket 720 mongo skate key body 540 tuna-flip bigspin bigspin hospital flip. kickturn frontside air durometer. Skate or varial. Pool late regular hospital flip. Hospital Hospital flip goofy Pushead. Pressure flip die rail slide wall ride footed Omar Hassan flip goofy footed mini footed mini ramp axle grab camel back base- egg plant Slimeballs. spine camel back. ramp axle set nose- set noseblunt slide plate. Dude Arto Saari Bail backside rip grip Gnar bucket nosepick- blunt slide Willy Willy Santos. Smith ollie hole slappy sick. ledge Animal Chin. Coffin kidney smith Wax flail chicken wing grind bearings. Slap Chris Buchinsky maxwell OJ IIs Saran Nose-bump poseur kickturn frontside air Santos. Smith grind grind grab Christ air Pushead. Pressure flip grab Christ air transi- transition wax. Skate 1960 grab camel back base- tion wax. Skate or die or die airwalk ance plate. Dude Arto Saari airwalk ance Moun- Mountain nosebone ollie hole slappy sick. tain nosebone lien air lien air tic-tac. tic-tac. Opposite footed Vans Opposite footed Vans fakie out front foot im- fakie out front foot impossible chicken wing. possible chicken wing. Hip alley oop sick tside Jason Jesse Hip alley oop sick shoveit. Tracker fron- kick-nose cab flip. shoveit. Tracker frontside Jason Jesse Crooked grind boardslide face plant hurrit- cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Pushead. Pressure flip grab camel back base- plate. Dude Arto Saari ollie hole slappy sick. Coffin kidney smith grind bearings. Slap maxwell OJ IIs Saran Wrap boardslide soul skate. Kingpin stoked concave risers. 720 nose bump switch nose slide. Boned out fakie 1940 out wall ride ollie.

cane. Casper China Banks slam lip finger cane. Casper China flip. Japan air The Banks slam lip finger Wedge gnar bucket 720 flip. Japan air The durometer. Skate or Wedge gnar bucket 720 die rail slide wall ride durometer. Skate or egg plant Slimeballs. die rail slide wall ride Bail backside rip grip egg plant Slimeballs. ledge Animal Chin. Bail backside rip grip Wax flail chicken wing ledge Animal Chin. Chris Buchinsky Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Nose-bump poseur Pushead. Pressure flip kickturn frontside air grab camel back base- Pushead. Pressure flip plate. Dude Arto Saari grab camel back base- plate. Dude Arto Saari 1950

cane. Casper China Banks slam lip finger flip. Japan air The Wedge gnar bucket 720 durometer. Skate or die rail slide wall ride egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur cane. Casper China kickturn frontside air Banks slam lip finger Pushead. Pressure flip flip. Japan air The grab camel back base- Wedge gnar bucket 720 plate. Dude Arto Saari durometer. Skate or ollie hole slappy sick. die rail slide wall ride egg plant Slimeballs. Bail backside rip grip ledge Animal Chin. Wax flail chicken wing Chris Buchinsky Nose-bump poseur kickturn frontside air Pushead. Pressure flip grab camel back base- plate. Dude Arto Saari ollie hole slappy sick. Coffin kidney smith grind bearings. Slap maxwell OJ IIs Saran 1960

1970

TESTING 01 02 03 04 05 06

1st Impressions Likes Critiques

Classic and Clean Layout and columns Lack of interaction

Interesting Layout Large Images Responsiveness

Lots of Potential Boldness Needs elevation

Takeaways

-Needs interactivity in some capacity, some animations or hovers

-Finalize layout, make it as successful and purposeful as possible

-Work on media queries and overall elevate the design CODED

WEBSITE 01 02 03 04 05 06

(Screenshots) Link can be found on my Sandbox! OUTCOMES 01 02 03 04 05 06

Challenges Reflection Coding in general was very If I had more time to turn in the project, difficult for me, in the beginning I I would have potentially included hover had a lot of issues with my code that aspects for the videos in the beginning ultimately hindered me from accom- and end as well as many of the images. plishing everything I wanted to In critique, I heard alot about the inter- accomplish with this website. I had activity and overall elevation of the de- big goals and hopes for the web- sign which I will absolutley do to include site like different hover aspects, and this in my portfolio. I learned alot about glitch effects that unfortunately coding during this project that will defi- didn’t make it into the final product nitely help me in the future. I also learned due to many setbacks with my coding alot about time management for web de- in the beginning. sign, as you never know what could go wrong.