DIGITAL

3D Modeling & Printing

GREY trophy 3D print

GREY trophy 3D print +

Brief: 3D model and print an object to be the trophy for an internal design competition.

Process: Using a series of photos from various angles of an existing art piece for reference, model a series of 3D objects in Autodesk Tinkercad. Export each object seperately to insure proper 3D printing. Convert the file for 3D printing using the Makerbot Replicator 2. Assemble the 3D printetd pieces into the final trophy and house in a clear plexiglass case.

“The making influences the thinking.”

words work: Otl Aicher

Front-End Development & Responsive Design

Harvey Nichols digital ad

Harvey Nichols digital ad +

Brief: A personal project, and a personal challenge, to recreate a print ad as a responsive html page.

Process: Convert an image of a print design into responsive HTML and CSS. Publish online and save the working code on github.

View HTML Ad

Website Design & Front-End Development

pkbookids.com homepage

pkboo kids +

Brief: Design and code an e-commerce site for a stylish baby accessories company, using the branding previously designed.

Process: Layout in Adobe InDesign with retouching in Photoshop. Convert approved designs into HTML and CSS. Handoff final coded layouts to back-end developer to incorporate Shopify ecommerce functionality.

View HTML Website

Rich Media Banners

Canon Beyond the Still Rich Media Banner (initial state) Canon Beyond the Still Rich Media Banner (open state)

Canon “Beyond the Still” +

Brief: Create a series of expanding banner ads with the ability to play two alternating videos in a variety of sizes. Create the layout with stills of the first frame of the video. Work with the photo retouchers to extend the initial still art as necessary and match the print campaign. Work with the trafficing company to code the Flash banner in their custom Actionscript code for delivery.

Process: Layout in Adobe InDesign with retouching in Photoshop. Final layout included type kerning, video formatting, animation and coding in Flash. Files provided as custom-coded SWFs via vendors’ custom application for testing and approval.

Result: A total of 16 banners were produced with 8 videos in 2 sizes a-piece within a tight deadline. The client was happy with the results and the campaign won a Cannes Silver Lion in the Promo and Activation category.

View Flash Banner

Front-End Development

red lobster - go lobster fishing

Red Lobster "Go Lobster Fishing" +

Brief: Code the design of an illustrated parallax-scrolling infographic microsite.

Process: Convert approved designs into HTML, CSS, and Javascript, working with the brilliant Russel Weiss who made the parallax scrolling work across all the browsers that would allow it. Uploaded final designs to the Red Lobster server for deployment.

View HTML Website

Parrallax-animated HTML5 website

DIRECTV: Anomaly

DIRECTV “Anomaly” +

Brief: Create an online comic book that continues the story of the DIRECTV "Ice Cream" spot. Make the online experience immersive, viewable on mobile devices, and shareable on social networks. Work with a small team to write, plan, design, illustrate, and code. Include auto-play, interactivity, animation, and sound design. Project needs to be completed in a week and a half to submit to online awards shows.

Process: Planned with creatives. Managed teams of Illustrators and Developers. Writen on the go using Evernote. Layout in Adobe InDesign with retouching and original art in Photoshop. HTML and CSS presentation coding done with Panic Coda. Final files uploaded to FTP server. Tested on desktop, iPad, and iPhone devices.

View HTML Website

New York Times Homepage Takeover

Canon New York Times homepage takeover

Canon "Project Imagina10n" +

BRIEF: After repeated failed attempts to get the text-descructive animation just right, I was approached to finess the animation, working with the Art Director, and finalize the custom ad server code, working directly with the ad publisher and nytimes.com.

PROCESS: Animation created and coded in Adobe Flash coding in the vendor's custom ad server code. Files uploaded to FTP server for delivery to outside vendor for deployment.

View Video (.mov)

Facebook Contest Page

Wonder Bread Facebook Contest Page

Wonderbread +

BRIEF: Create the layout of the various pages for a Facebook contest page from the copy provided. Work with the art buyer to select images that evoke the Wonder Bread brand consumer as well as the possible winners of the contest. Work with the User Experience team to create the optimal Facebook-specific Information Architecture for the end users.

PROCESS: Layout created in Adobe InDesign, then converted to layered art in Photoshop. Files uploaded to FTP server for delivery to outside vendor for development.

View Layout Images

Mobile Web App

Paperdoll web app

Paperdoll +

BRIEF: Create a simple web game for mobile devices that recreates the fun of dress-up paperdolls.

PROCESS: Layout created in Adobe InDesign. Interactivity coded in Panic Coda using jQuery. Files uploaded to FTP server and tested on iOS and Android devices.

View Mobile Web App

Rich Media and Standard Flash banners

Hawaiian Tropic Banner Ad (stages)

Hawaiian Tropic +

Brief: Create two versions of an animated banner to promote Hawaiian Tropic’s new line of lotion. A Rich Media banner that incorporates video and an version that conveys the effect of the video in the size restraints of a regular Flash banner. Animate the “drawing-on” of the headline text and match the timing to the video.

Process: Layout and animation in Adobe Flash with retouching in Photoshop. Replay button and click-through coding in Flash. Files provided as SWFs with accompanying video.

View Rich Media Banner View Standard Flash Banner

Expandable Rich Media Banner

Sarah Dessen Banner Ad (closed) Sarah Dessen Banner Ad (open)

Penguin Books “Along for the Ride” +

BRIEF: Create an expandable rich media banner ad to create interest in the latest Sarah Dessen novel. The rich media execution needs to match and expand upon the back list books campaign that was running previously. The concept requires a user initiated "kinetic type" animation with audio and interactive functionality for restarting the animation and muting the sound. Work with the sound designer to combine the animation and the audio and format the animation also for use on video sites like YouTube.

PROCESS: Layout in Adobe Illustrator with raster art prepared in Photoshop. The animation and interactivity was created in Flash, combined with the provided audio track. Final files provided as web-ready Flash rich media.

RESULT: The project was well received by the client and achieved the goal of making the book top the charts in the initial week of its release.

View Flash Banner

Interactive Mixer

earwormsMBT mixer

earwormsMBT “Rapid Spanish” +

BRIEF: Create an audio video tool for learning languages that can be used on mobile devices (iPod, PSP, mobile phones) as well as online. Combine the audio language lessons of the Earworms Musical Brain Training company with animations, imagery and color to use the different ways in which people learn.

PROCESS: Create art in Adobe Illustrator and Photoshop and animate using the earworms audio in AfterEffects. Create a series of demo animations and provide to the client as both Flash video online and as downloadable MP4 files. Compress files for quality and quick download time.

RESULT: The client used the resulting proof-of-concept in partnership presentations and added the online component to their website and social media initiatives.

View Flash Microsite

Standard Flash Banners

Smucker's Web Banners

Smucker’s “Orchard’s Finest” +

BRIEF: Design and animate online banner ads for Grey Worldwide's client, Smucker's to match existing print ads.

PROCESS: Created using Adobe Photoshop, Illustrator, and Flash. The final designs were provided as web-ready Flash files via FTP and e-mail.

RESULT: The banner ads achieved the goal of conveying the messages of the print ads while adding a bit of life to the product through animation.

View Flash Banner

Portfolio Site and Blog

Grey Vision Site Redesign 2010

Vision @ GREY.com +

BRIEF: Design a complete site for Grey NYC's Interactive Department working with the Flash designers and company tech support. The site must be easily updateable and expandable while being compact enough to show the work in a variety of sizes.

PROCESS: Created using XHTML and CSS, Adobe’s Spry AJAX framework, Photoshop, Illustrator, and Flash. The blog was created using WordPress. The final designs were uploaded to the company server as a combination of HTML, CSS and SWFs via FTP.

RESULT: Vision@GREY NYC’s Interactive Department uses the site as a marketing tool as well as for internal moral. Though not in the brief, the added bonuses of a department blog and banner ad size templates became invaluable. The client has since requested a redesign incorporating a Content Management System as well as adding more departments to the site.

View Redesign Layout PDF

Interactive Learning Game

Hamlet Safety Interactive Learning Game

HamletSafety Project +

BRIEF: Create an animated interactive tool to convey meaning as part of a Masters thesis. This game compares the language of Shakespeare with contemporary music lyrics.

PROCESS: Art created in Adobe Illustrator and Photoshop, imported to Adobe After Effects and Flash for motion design and interactivity coding.

Animated Header Graphic

Sk8 Dudes Header Animation

Sk8 Dudes +

BRIEF: Create an animated header graphic as part of the website design of sk8dudes.com, a company that teaches young children to skateboard. The animation had to be eye-catching and interactive but not distract too much from the page content. It also had to convey what the brand was all about.

PROCESS: Logo and Art created in Adobe Illustrator and Photoshop, imported to Flash for motion design and interactivity coding.

View Flash Header

“Work smarter. Not harder.”

words work: Scrooge McDuck

DESIGN

Logo Design

pkboo Logo

pkboo kids accesories +

BRIEF: Create a logo design for a babies clothing and accessories company. The logo needs to convey the brand's aesthetic of stylish usability, while being clearly read when used on cloth labels as well as mobile websites.

PROCESS: Created in Adobe Illustrator with Pantone Swatches and alternate color versions. Provided files as Illustrator PDFs for print and High Quality JPGs for online use via e-mail.

RESULT: Clients loved the logo and have used it on their business cards and all of their promotional materials. The clients have since commissioned a website design using this logo.

“The job of graphic design is to inform and delight.”

words work: Milton Glaser

Magazine Ads

P&G Pantene "Always Smooth" ad

Procter & Gamble Pantene +

BRIEF: Create comp page and spread layouts for a new P&G Pantene product launch for Grey Worldwide working from Art Director’s sketches. Create page and spread versions of signature “wave” art to be used on all subsequent ads. Retouch and extend provided beauty art as necessary. Create quick clipping paths and masks for product shots. Combine all elements into a cohesive page and spread layout with multiple photos, products, and copy versions.

PROCESS: Layout in Adobe InDesign with retouching in Photoshop and the logo and “wave art” done in Illustrator. Provide files as Lo-Res PDFs via e-mail for approval and print in-house for presentation.

RESULT: Art Director was very pleased with the layouts and commissioned two other versions. The “wave” art was used in subsequent print ads.

View Print Ad PDF

Packaging

The Chili Box package front and right The Chili Box package back and left

Chili Systems “The Chili Box” +

BRIEF: Create illustrations, retouch photography, design layout, and create packaging mechanical for Chili Systems “the Chili Box” product. Work with Art Director to create the final look of the product art and design.

PROCESS: Created in Adobe InDesign and converted to Illustrator EPS format for printer. Art created in Photoshop and Illustrator.

RESULT: Not much is known about this project other than the fact that the client was satisfied and the product was on shelves in select stores.

View Print Mechanical JPG

Brochure

NYC Host Committee brochure

NYC Host Committee +

BRIEF: Create the layout and mechanical for a brochure from the existing outdoor banner ad art to promote The NYC Host Committee’s 2004 Republican National Convention “Experience NYC” themed days for Grey Worldwide. Format provided text into a schedule of events. Create art for the back of the brochure.

PROCESS: Created in QuarkXPress with duotone and 4-color art created in Adobe Photoshop. This print-ready, 4-color, two-sided, tri-fold brochure was collected to disk for print production.

RESULT: This brochure achieved the goal of creating awareness and being an informative addition to the RNC’s week of events in NYC. It even garnered favorable reviews from the then sitting President of the United States.

View Back Page PDF

Invitation Package

CSSNY invitation cover

Community Service Society of NY +

BRIEF: Create an eye-catching illustrated cover and layout the invitation, reply cards, and envelopes for the Community Service Society of New York’s “CSS Associates” Cocktail Reception. Coordinate print production for all of the designs. Limit the design to 2-color for cost.

PROCESS: Illustration created in Adobe Illustrator and layouts done in InDesign. The final files were collected to disk for print production.

RESULT: The invitation package received rave reviews for CSSNY and continued a long working relationship with the organization.

View Invitation PDF

“The concept is always the most important.
Then it is all trial and error.”

words work: Daito Manabe

& MORE

Integrated Campaign Concept

JC Penney Strut Your Struff Campaign

JC Penney +

BRIEF: Create an integrated marketing campaign for the established JC Penney brand. Reposition JC Penney as a hip, current, and desirable but budget-conscious option for the fashion minded.

PROCESS: The concepts were written on the go using Evernote. The layouts were created in Adobe InDesign with original art and retouching done in Photoshop and the logo created in Illustrator. The final concepts were saved as a PDF file for distribution.

View Integrated Campaign Concept PDF

Video Edit

Red Bull Music Academy NYC +

BRIEF: Create an audio / video edit of an event for use as a blog entry for viral vinyl.

PROCESS: The photo and video content was shot on an iPhone 3Gs and was edited with Adobe Soundbooth and After Effects. The final edit was saved as a QuickTime file and then uploaded to YouTube for distribution.

Video Edit

Quantic and his Combo Barbaro in The Frying Pan +

BRIEF: Create an audio / video edit of an event for use as a blog entry for viral vinyl.

PROCESS: The photo and video content was shot on an iPhone 3Gs and was edited with Adobe Soundbooth and After Effects. The final edit was saved as a QuickTime file and then uploaded to YouTube for distribution.

Motion Graphic

DJ Omni - Invitation 2 Dance - CD packaging

Viral Vinyl "mmHome" Promo +

BRIEF: An animated promotional piece for DJ Omni's "mmHome" mix.

PROCESS: Art created in Adobe Illustrator and Photoshop. Animation and sound editing in Adobe After Effects.

Download .MOV

CD packaging

DJ Omni - The Killer Mix - CD packaging

The Killrrr Mix +

BRIEF: Create the mixtape and the CD packaging as DJ Omni. Create illustrations for the cover, tray card, and CD label. Layout the tracklisting information.

PROCESS: Illustration created in Adobe Photoshop. Layout in InDesign.

Download PDF

CD packaging

DJ Omni - Nu-Jazz Foundation - CD packaging

Nu-Jazz Foundation +

BRIEF: Create the mixtape and the CD packaging as DJ Omni. Create illustrations for the cover, tray card, and CD label. Layout the tracklisting information.

PROCESS: Illustration created in Adobe Photoshop. Layout in InDesign.

Download PDF

CD packaging

DJ Omni - Seantaneous - CD packaging

seantaneous +

BRIEF: Create the mixtape and the CD packaging as DJ Omni. Create illustrations for the cover, tray card, and CD label. Layout the tracklisting information.

PROCESS: Illustration created in Adobe Photoshop. Layout in InDesign.

Download PDF

Promotional Piece

Tryst day3

Tryst party +

BRIEF: Create a week-long series of illustrated story e-mails to promote a party. Write the story in conjunction with the party hosts.

PROCESS: Art created in Adobe Photoshop and Illustrator. Files were also used as an interactive presentation.

Illustration

Tha Rub (light) Tha Rub (dark)

Tha Rub +

BRIEF: Illustration {with alternate}.

PROCESS: Sketched art colored and manipulated in Adobe Photoshop.

Illustration

Passionara

Passionara +

BRIEF: Illustration and short story.

PROCESS: Sketched art colored and manipulated in Adobe Photoshop.

Illustration

Natural Buddy

Natural Buddy +

BRIEF: Illustration.

PROCESS: Pen and ink sketch colored in Adobe Photoshop.

Illustration

L.L. Dreamer L.L. Dreamery

L.L. Dreamer +

BRIEF: Illustration.

PROCESS: Pen and ink sketch colored in Adobe Photoshop.

Illustration

The Flight

The Flight +

BRIEF: Illustration and short story.

PROCESS: Sketched art colored and manipulated in Adobe Photoshop.

Download PDF

Illustration

Argumentation

Argumentation +

BRIEF: Illustration.

PROCESS: Created entirely in (what is now Corel) Painter with a Wacom tablet.

“There is a difference between having a job
and having a career.”

words work: me

ABOUT ME

Name: Ornette Coleman

Contact:

Career: 15+ years as a Graphic Designer, Front-End Developer, & Creative Technologist

KNOWLEDGE BASE:

TOOLKIT

ADVANCED:

  • Adobe Flash
  • Adobe Illustrator
  • Adobe InDesign
  • Adobe Photoshop
  • CSS
  • HTML
  • Sublime Text

INTERMEDIATE:

  • Actionscript
  • Adobe After Effects
  • Adobe Soundbooth
  • Github
  • Javascript
  • JQuery
  • Markdown
  • Microsoft Office
  • Terminal

EDUCATION:

MASTER OF ARTS:
DESIGN STUDIES

The University of the Arts London: Central Saint Martins College of Art and Design

BACHELOR OF FINE ART:
GRAPHIC DESIGN

Howard University,
Washington, D.C.

AWARDS:

CANNES SILVER LION

Promo & Activation category,
Canon, 2010

ADWEEK AD OF THE DAY

Canon, May 24, 2011

PROFESSIONAL EXPERIENCE:

GREY NYC New York, NY – 2008 to present

SENIOR INTERACTIVE DESIGNER, TECH LEAD (Ally), & Creative Technologist:

  • Develop creative strategy and functional prototypes for presentation
  • Provide Front-End Development expertise, working directly with clients.
  • Creating timelines and problem-solving with account teams, producers, creatives, IT and developers.
  • Design and animate rich media banner ads, web sites, mobile web apps, and blogs

CLIENTS: Gillette, Ally, Procter & Gamble: Pantene, CoverGirl, and Nice ’n Easy, Canon, UPMC, Penguin Books, E*Trade, JM Smucker’s, and others

EARWORMS LEARNING London, UK – 2007 to 2008

CREATIVE Technologist / MOTION AND INTERACTIVE DESIGNER:

  • Created a concept and an execution to enhance an existing product
  • Created animated demos of concept for client presentation
  • Converted demo movies to online content and DVD presentations
  • Planned timing and cost for production

CLIENT: earwormslearning.com

COMMUNITY SERVICE SOCIETY OF NEW YORK NEW YORK, NY – 2001 to 2007

GRAPHIC DESIGNER:

  • Designed calendars, brochures, invitation packages, and recruitment posters from comp (scamp) stage through to final print mechanicals
  • Coordinated with clients, contractors and printers
  • Planned timing and cost for production

CLIENT: Community Service Society of New York and the Retired & Senior Volunteer Program

GREY WORLDWIDE NEW YORK, NY – 1999 to 2006

GRAPHIC DESIGNER / PRODUCTION ARTIST:

  • Designed print magazine ads, outdoor, and packaging from comp (scamp) stage through to final print mechanical
  • Retouched photos and created illustrations for internal presentation as well as final art
  • Created animated Flash banners and Micro-sites from concept to completion with Actionscript coding

CLIENT: Procter & Gamble: Pantene and CoverGirl, M&M/Mars, Canon, Nokia, Frontier Airlines, Panasonic, and others

S4 DESIGN MINNEAPOLIS, MN – 1997 to 1999

GRAPHIC DESIGNER:

  • Designed logos, identity packages, brochures, magazine ads, posters, billboards, and packaging from comp (scamp) stage through to final print mechanical
  • Retouched photos and created illustrations for internal presentation as well as final art

CLIENT: General Mills, Target, Dayton Hudson Corporation, IntraNet Solutions, and Penumbra Theatre.

follow me