Design System

Print, Visual, UX Design | January 2022 - May 2022

Exploring print, motion, graphic, and web design, I created a system of coordinated design work based on the work and branding of the vector illustrator ⁠and renowned designer Tom Whalen.

Display Poster | 3 weeks

Sixteen-Page Booklet | 4 weeks

Vector Animation | 3 weeks

Mobile App Experience | 2 weeks

Figma

Adobe Illustrator

Figma

Adobe Illustrator

Adobe Indesign

Adobe Illustrator

Adobe AfterEffects

Storyboarding

Figma Prototyping

Wireframing

Poster

PRINT DESIGN

Display Poster
3-Week Project | Figma, Illustrator, Indesign
19.25 inches x 31.75 inches

Final Design

Download PDF

Design Process

Exploring Designers

After looking through several pages of designers and their work, Tom Whalen, an illustrator and graphic designer with work in high-profile media caught my eye with his unique vector graphic style and relatable content.

"What I really loved seeing were the variations and colorways next to each other, and seeing those come to life during the process." "Countless sunday afternoons were spent sitting next to that squeaky old spinner rack of comics in my grandmother's candy store. i loved the stories, but it was the art that stuck with me."

Analyzing Designer's Work

Consolidated work from his website, news articles, google

Selected the most distinctive from different categories including diff medias

Left: Posters (some series, some individual with similar styles)

Right: Other Media (Pins, toys, branding, shirts) & Info Design (Spreads) w icons

Moodboards (Print vs Other Media)

Analyzing Typography

Researching the Designer
~1500 word Biography
🔗Link to full paper

Developing Sketches
Creating 11 sketches of potential avenues to pursue with the poster design

Requirements: Body copy text, timeline, portrait of designer, images of their work

Poster Initial Iterations

Drawing Initial Assets

Changes/ Decisions Made

Changed compositions of the images, made some of them vertically larger to break out o the strict horizontal row grid
Made "Tom Whalen" more dynamic, moving to the top and extending the letters downwards to sit behind the city, masked with the grid behind the letters
Drew in miniature cities for inside each of the letters - appear like a story inside the counters
Drew planets and clouds that flow off the page, breaking the boundaries of the box, match the gradient with the color scheme
Experimented with wrapping the quote around the curve on the bottom of the page
Integrated quote into the body of text instead
Drew in more buildings for the bottom of the poster to replace the location of the quote
Shortened body copy text to increase the type size and change it from a condensed typeface to normal for readability purposes
Photoshopped some of the images to have solid backgrounds and increase resolution
Reduced the body copy by half, increased type size, made it left aligned instead of justified to increase legibility and fixed the rag. Changed the quote to medium weight to decrease contrast between bold and light.
Experimented with removing objects that go out of the grid, decreasing the sizes of those objects to decrease the disorganized chaos- not take away from the geometric form, changed the colors to match better
Moved the vector art downwards to show more of the letters in "Tom"
Reduced the amount of graphics within the letters to minimize confusion
Increased resolution of images/ switched out some of the blurry ones

Final Poster with grids

Mobile App

MOBILE UX DESIGN

Mobile Experience
3-Week Project | Figma

Video of Final App Prototype

Site Map

Rough outline of what pages will be navigated to on the app

Home Page Wireframes

All Wireframes

Intermediate Iterations of each page

After finalizing my prototype, I screen recorded the prototype on Figma, and moved into After Effects to draw and animate the background scene behind the phone to make the final video more engaging. Each object had to be individually animated to move in the background after I masked out the video in the shape of the phone outline.

Booklet

PRINT DESIGN

16 Page Booklet
3-Week Project | Figma, Illustrator, Indesign
16 page booklet, Each Page: 8.25 x 10.5 inches

Final Booklet

Download PDF

Design Process

Top Left: Experimented with collaging round shapes with his work and contrasting colors in each of the shapes.
Bottom Left: Experimenting with city and rigid shapes including parallelograms and squares, heavy contrast
Top Right: Experimenting with different schemes for every page- using inspiration from the specific pieces of work
Bottom Left: Space, circular orb themed, where each circle contains a different work, use a triangle grid to create shapes

Booklet Rough Sketches

Initial Iterations 1: Blocking images with solid shapes

Iterations 2: After Feedback

simplified cover to contrast detailed inside, removed all the objects, blow up the one cityscape, incorporated timeline of clients in the center, need to find a better way to incorporate top and bottom of city

Space orb theme, have text curve around the work it corresponds to, integrate page numbers into the circles

Made this page simpler by making all the text horizontal instead of facing different directions, made the shapes have 90 degree angles, incorporate quote in top left

Inserted work according to color gradient, have inspirations across the page, each of the 3 boxes discusses a different influence

Incorporate quote into the images of the work on the left. The only page with text written out. Wanted to have a page that doesn't have crossover between spreads

Use parallelograms to separate categories of work to refer to in the timeline

Iterations 3: Inserting images, editing spreads, After Feedback, inserting body copy

Inserted work that corresponds with the text for each section of the timeline, added triangles to the background to highlight the shapes and cluster sections together

Design Style: Experimenting with text and image colors (splitting image in half) and adding bright circles as light

Inspirations: Changed background colors, size of text and rag

Inserted work on the left side, created a grid for the caption system in the bottom left, wrote quote using colors from the work. Two iterations- one has text in white with white lines in between the work

Removed the top city to simplify the cover, tried incorporating a drop quote, changed the client timeline to the ToC instead so that it makes more logical sense

Inside back and Inside front should parallel each other, one light mode one in dark colors. Made 2 versions with one including circles of solid color in the background to cluster objects

3 versions one with grid, one with outline and solid color, and one with split color. Leaning towards grid one since the pullouts can be in the color of the work

Iterations 4: After Studio Feedback Revisions & Moving to InDesign

Redid the cover going back to a previous version
Removed the quote since it doesn't seem like a cover
Scaled down the letters, moved "Tom Whalen" to be on the front cover so it doesn't read Whalen before Tom
Experimented with different placement and sizes of the letters,
Drew another city for the top that fades from red to orange to complement the bottom cityscape

Moved all of the text to InDesign to properly curve along the circular shapes
Shifted the constellations and companies text to not overlap with the center gutters
Fixed page numbers inside the circles
Changed background color to better match the other page

Shifted text to not overlap with center gutter
Experimented with triangle shapes in the background
Reduced the size of the text in InDesign
Fixed rag on text
Made the quote much larger (same size as the next page) and take up more space

Minor changes in placement of title along line
Redrew line in Indesign to prevent being fuzzy
Fixed rag on text
Added more circles for the background
Page numbers and folios in white

Decided on this shapes gridded background version over the others for consistency and because of the heavy contrast between the two different colored ones and the outline appearance of the other version
Decreased size of headings and text when inserted into Indesign
Fixed placement of text boxes and lines to avoid overlap with the center gutter
Added smaller shapes around the larger blob to make the page less center heavy

Decreased size of text to match the other pages in InDesign
Changed the text back to left aligned for consistency and breathing room
Moved the dates from the center gutter
Made the diagonal colors in the text boxes line up with other images around it

Changed captioning system to take up 4 boxes rather than half of 2 boxes so that it is more easily visible
For the future, incorporate other designers work into some of the boxes and reduce the size of the text in captioning system
Edited the colors of the quote (chose version 2 that has lines in between the boxes) so that I can make the quote the same cream color as the background and blend in

Removed page numbers/ folios and added copyright in the bottom right corner (might be too small?)
Shifted timeline so that the constellations don't overlap with the center gutter
Added portrait of Tom Whalen to the back inside cover so that it appears like the "story is ending"
Chose version with colored circles in the background to increase visual interest versus plain version

Iterations on the Front/ Back Cover

Initially too crowded, too much going on with the background grid and the multiple buildings so reduced the illustration to only 2 cityscapes on the bottom and top
Large space in the middle so included a timeline with Tom Whalen's clientele

The list of clients doesn't belong on the front cover so removed it and drew more of the illustration on the bottom o it takes up 3/4th of the page.
Moved "Tom Whalen" to be sitting on top of the buildings to better integrate with the illustration
Added a quote to fill in the space on the top of the front cover using different weights and colors

Increased contrast between the background and the illustration
Decreased some of the styles in the text
Chose a blue to orange gradient for the text
Feedback that the quote is out of place, doesn't belong on front cover, and too much going on

Best Iterations for the cover

Captioning System Iterations

Need to increase the size of the box- maybe expand to take up the bottom 6 modules
Don't combine similar work with a series of letters, make separate lines for each letter

Increased size of box to work with the grid
Increased size of text, separated work
Added more letters

Added other designers' work not Dave Perillo
Added more letters and decreased font size (since the number of lines doubled since designer name is labeled)
Changed colors of the diagram to match the work

Final panel, shifted to fill the ending an used space at beginning to add title
Cut out bottom modules from the diagram

Grids

Similar modular grid applied throughout the pages with consistent margins

Animaton

MOTION DESIGN

Animation
3-Week Project | Figma, Illustrator, AfterEffects
1920 x 1080 pixels, 1-2 minutes long

Final Video

Design Process

Listening to Audio

I began by listening to several of Tom Whalen's interviews, including podcasts and drawing videos. After compiling my favorite audio pieces, I thought about what story I wanted to portray with my animation. Since I've already created many pieces on his biography and life, I wanted to try something different where I capture his unique style and technique in the animation. Since he is a vector illustrator, the bulk of his work is done in Adobe Illustrator. One of the videos details him walking through drawing one of this pieces, which would be interesting to create a storyline along. I also hope to incorporate the bulk of work he has done through his career into the animation.

These are the top 4 videos I listened to for audio and hope to incorporate pieces from.

Picking Audio & Noting Scenes

This audio piece has the most relevant information for the storyline I mentioned about his drawing process using Illustrator. The audio is also fairly clear and in the video, there are some nice snippets of when he is actually editing his work in real time in Adobe Illustrator which would be interesting to incorporate.

The audio includes Tom Whalen demonstrating his process for his Robocop drawing and I found some scenes from the video nice to include from the animation. I screenshotted some of them for future reference and for time stamps.

12 minutes long- need to also clean audio

Day 2: Transcribing Audio and Narrowing Script

The original audio is quite long- 12 minutes. I began with transcribing the audio to create a script

Get 5 second interval transcript from Youtube, Paste into Google Sheets, Use a formula to merge alternate rows together, Then use formula to merge all the lines together vertically

Initial transcript of the recording, I bolded all the quotes that I think were useful for my video. Had 5 rounds of shortening audio until it was about 1 minute long and created a compelling storyline.

Creating an initial storyboard

Bright colors, vector illustration style, interactive with a cursor

Editing/ Consolidating Audio Clips

Combed through the audio and trimmed out the clips that correlate with the script. Shortened the audio from 12 minutes to 3 minutes of the best audio. Still need to shorten the script more.

Background Music Search

Searching for Background Music; I'm looking for something more upbeat and friendly to go along with the vector illustration feel with bright colors. Something with lots of beats/ somewhat dramatic so that each step can align with the music

Sliding Scale - BROMELIAD Music Library (1)

Good Game - BROMELIAD Music Library

Summer Melt - BROMELIAD Music Library

3 Minute Whalen Audio Compilation

Integrating Audio with Music (Chose Sliding Scale)
- Music is repetitive so try to integrate some other noises to it (mouse clicks, dings)
- Cut the audio from 3 minutes to 1 minute (take out the details about the layer organization/ more tutorial like things)

Removing background music from audio
- Using Adobe Audition, watching videos on Youtube, tried to edit out the background music
- First clip too loud, Langston helped me capture noise clips to reduce the sound

Choosing new music (Chose Summer Melt)
- As I started to animate, I realized that I wanted the beat of my music to be faster and for it to have more variety so I tried integrating new music and cutting down the script

First attempt with the new music: Still have too much audio script, need to add more pauses to just hear the music, remove bg noises, increase levels during speech

Final audio track

Finalizing Script - with the audio, the script is now 1 minute and 3 seconds

My recording 95Artist Name

00:00 / 01:05

buildings intro_2Artist Name

00:00 / 01:04

Animation Process

Scene 1: Cityscape Illustration
For the first scene, I wanted to introduce the illustrator with a drawing of a vector illustration cityscape slowly being drawn on the screen. I started by drawing the cityscape in Illustrator. Then I separated all of the shapes into different layers. Layers for the background buildings, the curved buildings, the mountains, and each of the lights. I then exported these 80 layers into after effects and staggered when they would appear based on the music. This scene was only 5 seconds long so in hindsight I shouldn't have made so many different layers.

Drawing cityscape on Illustrator, Seperating shapes into 80 layers

Animating layers on Adobe After Effects, synced with the music beats and rings

Scene 2: Mouse Click & Name Shapes
Wanted to create a vector interactive style to the animation so included transitions animating cursor using motion sketch with clicking noises. Began with breaking apart the name and emphasizing "art and illustration"

Drew shapes to make up the name Tom Whalen in Illustrator, making each shape a different layer and then toggling each one to turn it on

Animate the layers in After Effects to form the name, then draw away, and rearrange to create a new composition. The word "art" then pops up composed of the same shapes synced with audio "artist."

Scene 3: Login Screen
Before introducing the different concepts he discusses, I wanted to have a quick intro login scene to Illustrator since this is the platform Whalen uses the most and often mentions techniques for. I used the colors from the adobe cloud logo palettes to draw these scenes.

Illustrations for login and computer drawn on Adobe Illustrator

Scene 4: Illustrator Screen & Pencil Sketches
I redrew the Illustrator interface in a simplified, more animated, and colorful way to imitate a step one would do in illustrator to upload their pencil sketches. I drew windows for each of these sketches to imitate this concept.

Illustrations or the AI Interface drawn in Illustrator. Made different sized and color windows for the sketches. Drew several different versions of the AI interface (each on 1 layer), chose the colorful one in the end for its simplicity

Scene 4: Illustrator Tools

I chose what I thought were the top 14 most important tools in Illustrator. Created different colored versions to later animate switching between them. The sphere city illustrations served as polka dots.

Layers in Illustrator- 60 layers where there is one for each tool of each color to easily switch between them

Animation clip of the tools changing colors and moving in a line

Clip of entire tools scene in AE with the city polka dots

Scene 6: Illustrator Windows & Live Video
I wanted to find a way to incorporate live video into the animation, so had it appear in the white box that expands. While that plays, to make it more interesting I abstractly animated all of the illustrator windows I drew.

Illustrator, creating layers to change tabs and windows in the graphic

After Effects animation of the AI window with the live video

Scene 7: Color Palettes & Work Examples & Door Illustration
Whalen often creates different colored versions of the same work. I wanted to zoom into 2 pieces of work, reveal their color palettes, then zoom out and compare it against other of his work that consists of multiple colored versions. He mentions "[he's] never done with work, until its out the door" which is why I illustrated a door for the work to go through.

Door illustration and frames drawn in Illustrator

Scene 8: Live Video & CMYK Window Illustration
Trying to incorporate more live video including a clip of his face this time, through the door enters a video clip. In order to make the clip more interesting, I drew a simplified CMYK panel with 4 toggles that will move while he is talking.

Scene 9: Biking & City Illustration
To incorporate some of my own illustration style and break out of the Illustrator theme, I drew and animated a cityscape where the small shapes float around, and a bike that will ride through the city.

Drew illustrations of a cityscape and a bike in Adobe Illustrator

Animating the cityscape by putting all the shapes on different layers in Adobe Illustrator

Animating the bike illustration so the wheels/pedals spin and the seat rises

Clip of the animated city in After Effects before adding the bike

Final clip of the cityscape and the bike in AE

Scene 10: Bouncing Balls & Bird Flying Animation
This scene discusses the details in Whalen's work which I hoped to emphasize by isolating all of the circle animals and then having them interact with each other like bubbles. I also drew frame by frame of a bird flapping coming out of the bubble.

Illustrator, Isolating the circular animal illustration and drawing 10 frames of an owl flying to animate

Bouncing circles animation in AE

Illustrator layers with the bubbles and bird

Flapping owl animation compositionin AE

Full clip in AE of the scene

Scene 10: Night City Illustration & Bird Flying
For the conclusion scene, I wanted something more cohesive and memorable so I drew a more colorful cityscape illustration with shapes that also move around slowly as the bird flies through the sky.

Cityscape Illustration

Each shape gets it's own layer in illustrator

Final clip of bird + background in After Effects

Design System

Print, Visual, UX Design | January 2022 - May 2022

PRINT DESIGN

Display Poster 3-Week Project | Figma, Illustrator, Indesign 19.25 inches x 31.75 inches

Final Design

Design Process

Exploring Designers

Analyzing Designer's Work

Moodboards (Print vs Other Media)

Analyzing Typography

Researching the Designer ~1500 word Biography 🔗Link to full paper

Developing Sketches Creating 11 sketches of potential avenues to pursue with the poster design

Poster Initial Iterations

Drawing Initial Assets

Changes/ Decisions Made

Changed compositions of the images, made some of them vertically larger to break out o the strict horizontal row grid

Made "Tom Whalen" more dynamic, moving to the top and extending the letters downwards to sit behind the city, masked with the grid behind the letters

Drew in miniature cities for inside each of the letters - appear like a story inside the counters

Drew planets and clouds that flow off the page, breaking the boundaries of the box, match the gradient with the color scheme

Experimented with wrapping the quote around the curve on the bottom of the page

Integrated quote into the body of text instead

Drew in more buildings for the bottom of the poster to replace the location of the quote

Shortened body copy text to increase the type size and change it from a condensed typeface to normal for readability purposes

Photoshopped some of the images to have solid backgrounds and increase resolution

Reduced the body copy by half, increased type size, made it left aligned instead of justified to increase legibility and fixed the rag. Changed the quote to medium weight to decrease contrast between bold and light.

Experimented with removing objects that go out of the grid, decreasing the sizes of those objects to decrease the disorganized chaos- not take away from the geometric form, changed the colors to match better

Moved the vector art downwards to show more of the letters in "Tom"

Reduced the amount of graphics within the letters to minimize confusion

Increased resolution of images/ switched out some of the blurry ones

Final Poster with grids

MOBILE UX DESIGN

Mobile Experience 3-Week Project | Figma

Video of Final App Prototype

Site Map

Rough outline of what pages will be navigated to on the app

Home Page Wireframes

All Wireframes

Intermediate Iterations of each page

PRINT DESIGN

16 Page Booklet 3-Week Project | Figma, Illustrator, Indesign 16 page booklet, Each Page: 8.25 x 10.5 inches

Final Booklet

Download PDF

Design Process

Booklet Rough Sketches

Initial Iterations 1: Blocking images with solid shapes

Iterations 2: After Feedback

simplified cover to contrast detailed inside, removed all the objects, blow up the one cityscape, incorporated timeline of clients in the center, need to find a better way to incorporate top and bottom of city

Space orb theme, have text curve around the work it corresponds to, integrate page numbers into the circles

Made this page simpler by making all the text horizontal instead of facing different directions, made the shapes have 90 degree angles, incorporate quote in top left

Inserted work according to color gradient, have inspirations across the page, each of the 3 boxes discusses a different influence

Incorporate quote into the images of the work on the left. The only page with text written out. Wanted to have a page that doesn't have crossover between spreads

Use parallelograms to separate categories of work to refer to in the timeline

Iterations 3: Inserting images, editing spreads, After Feedback, inserting body copy

Inserted work that corresponds with the text for each section of the timeline, added triangles to the background to highlight the shapes and cluster sections together

Design Style: Experimenting with text and image colors (splitting image in half) and adding bright circles as light Inspirations: Changed background colors, size of text and rag

Inserted work on the left side, created a grid for the caption system in the bottom left, wrote quote using colors from the work. Two iterations- one has text in white with white lines in between the work

Removed the top city to simplify the cover, tried incorporating a drop quote, changed the client timeline to the ToC instead so that it makes more logical sense

Inside back and Inside front should parallel each other, one light mode one in dark colors. Made 2 versions with one including circles of solid color in the background to cluster objects

3 versions one with grid, one with outline and solid color, and one with split color. Leaning towards grid one since the pullouts can be in the color of the work

Iterations 4: After Studio Feedback Revisions & Moving to InDesign

Redid the cover going back to a previous version

Removed the quote since it doesn't seem like a cover

Scaled down the letters, moved "Tom Whalen" to be on the front cover so it doesn't read Whalen before Tom

Experimented with different placement and sizes of the letters,

Drew another city for the top that fades from red to orange to complement the bottom cityscape

Moved all of the text to InDesign to properly curve along the circular shapes

Shifted the constellations and companies text to not overlap with the center gutters​

Fixed page numbers inside the circles

Changed background color to better match the other page

Shifted text to not overlap with center gutter

Experimented with triangle shapes in the background

Reduced the size of the text in InDesign

Fixed rag on text

Made the quote much larger (same size as the next page) and take up more space

Minor changes in placement of title along line

Redrew line in Indesign to prevent being fuzzy

Fixed rag on text

Added more circles for the background

Page numbers and folios in white

Decided on this shapes gridded background version over the others for consistency and because of the heavy contrast between the two different colored ones and the outline appearance of the other version

Display Poster
3-Week Project | Figma, Illustrator, Indesign
19.25 inches x 31.75 inches

Researching the Designer
~1500 word Biography
🔗Link to full paper

Developing Sketches
Creating 11 sketches of potential avenues to pursue with the poster design

Mobile Experience
3-Week Project | Figma

16 Page Booklet
3-Week Project | Figma, Illustrator, Indesign
16 page booklet, Each Page: 8.25 x 10.5 inches

Design Style: Experimenting with text and image colors (splitting image in half) and adding bright circles as light

Inspirations: Changed background colors, size of text and rag

Shifted the constellations and companies text to not overlap with the center gutters

Animation
3-Week Project | Figma, Illustrator, AfterEffects
1920 x 1080 pixels, 1-2 minutes long

Integrating Audio with Music (Chose Sliding Scale)
- Music is repetitive so try to integrate some other noises to it (mouse clicks, dings)
- Cut the audio from 3 minutes to 1 minute (take out the details about the layer organization/ more tutorial like things)

Scene 2: Mouse Click & Name Shapes
Wanted to create a vector interactive style to the animation so included transitions animating cursor using motion sketch with clicking noises. Began with breaking apart the name and emphasizing "art and illustration"

Scene 3: Login Screen
Before introducing the different concepts he discusses, I wanted to have a quick intro login scene to Illustrator since this is the platform Whalen uses the most and often mentions techniques for. I used the colors from the adobe cloud logo palettes to draw these scenes.