DIGITAL

Rich Media Banners

Canon “Beyond the Still”

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

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

Website Design & Front-End Development

pkboo kids

pkbookids.com

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 shpify ecommerce functionality.

View HTML Front-end site development

Interactive Experiment

Viral Vinyl “Covers: My Philosophy”

Viral Vinyl “Covers: My Philosophy

Brief: A personal challenge to incorporate HTML animation and audio into an interactive experience. This is the first of a series.

Process: Layout in Adobe InDesign with retouching in Photoshop. Final layout includes cloud-based fonts from google.com, a link to a youtube video, animation and coding in HTML.

View HTML Interactive Animation

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

Facebook Contest Page

Wonderbread

Wonder Bread Facebook Contest Page

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

Paperdoll web app

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

Hawaiian Tropic Banner Ad (stages)

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

Customized WordPress template

viral vinyl

viral vinyl blog

Brief: Customize a standard WordPress template to make it fit the viral vinyl branding and create an HTML animated banner to serve as the title graphic.

Process: Layout in Adobe Illustrator. Animation prototyped in Adobe Flash and finalized in Adobe Dreamweaver. A local host environment set-up through MAMP. Files uploaded to server for production hosting.

Go to viralvinyl.com

Expandable Rich Media Banner

Penguin Books “Along for the Ride”

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

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 “Rapid Spanish”

earwormsMBT mixer

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 “Orchard’s Finest”

Smucker's Web Banners

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

Vision @ GREY.com

Grey Vision Site Redesign 2010

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
View Original HTML & Flash Site

Interactive Learning Game

HamletSafety Project

Hamlet Safety Interactive Learning Game

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.

View Flash Site

Animated Header Graphic

Sk8 Dudes

Sk8 Dudes Header Animation

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

MENU

DESIGN

Logo Design

pkboo kids accesories

pkboo Logo

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.

Magazine Ads

Procter & Gamble Pantene

P&G Pantene "Always Smooth" ad

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

Chili Systems “The Chili Box”

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

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

NYC Host Committee brochure

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

Community Service Society of NY

CSSNY invitation cover

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

MENU

& MORE

Integrated Campaign Concept

JC Penney

JC Penney Strut Your Struff Campaign

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

Viral Vinyl "mmHome" Promo

viral vinyl Promo Video

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.

View in Flash
Download MP4
DJ Omni - Invitation 2 Dance - CD packaging

"Invitation 2 Dance" music playlist at MixPod.com

Motion Graphic

“Instructions” audio-video-book

Instructions  audio-video-book

BRIEF: An experiment in visual audio books. Animating the audio book version of the short story collection Fragile Things by Neil Gaiman, narrated by the author himself. Adding visual content to encourage reading on mobile devices.

PROCESS: Photos cut apart and retouched in Adobe Photoshop. Sound editing in Apple GarageBand. Animation and compositing in Adobe After Effects.

View in Flash
Download MP4

CD packaging

The Killrrr Mix

DJ Omni - The Killer Mix - CD packaging

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

Nu-Jazz Foundation

DJ Omni - Nu-Jazz Foundation - CD packaging

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

seantaneous

DJ Omni - Seantaneous - CD packaging

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 party

Tryst day3

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.

View in Flash

Illustration

Tha Rub

Tha Rub (light) Tha Rub (dark)

BRIEF: Illustration {with alternate}.

PROCESS: Sketched art colored and manipulated in Adobe Photoshop.

View Full Image (light)
View Full Image (dark)

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. Dreamer L.L. Dreamery

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.

MENU

ABOUT ME

Name: Ornette Coleman
Current Location: Brooklyn, NY
Career: 15+ years as a Graphic Designer & Front-End Developer

PROFESSIONAL EXPERIENCE:

GREY NYC

New York, NY – 2008 to present

SENIOR INTERACTIVE DESIGNER & TECH LEAD (Ally):

  • • Oversee a growing team of developers, producers, and QA staff.
  • • Created development and QA process and support documents.
  • • Conduct internal code checks and consult on digital strategy.
  • • Conduct regular tech check-ins with the client’s tech team.
  • • Front-end design and development of standard and rich-media banner ads, web sites, and blogs

CLIENTS:
Ally, Procter & Gamble: Pantene and CoverGirl, Canon, UPMC, Penguin Books, E*Trade, Red Lobster, etc.

EARWORMS LEARNING

London, UK – 2007 to 2008

CREATIVE DIRECTOR / MOTION DESIGNER / INTERACTIVE DEVELOPER:

  • • 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 / FLASH DEVELOPER:

  • • 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, etc.

KNOWLEDGE BASE:

TOOLKIT

ADVANCED:

  • • Adobe Dreamweaver
  • • Adobe Flash
  • • Adobe Illustrator
  • • Adobe InDesign
  • • Adobe Photoshop
  • • CSS
  • • HTML
  • • Panic Coda
  • • Sublime Text

INTERMEDIATE:

  • • Actionscript
  • • Adobe After Effects
  • • Adobe Soundbooth
  • • Apple Final Cut Pro
  • • Javascript / jQuery
  • • Microsoft Office

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

CONTACT

MENU