Week 10 Day 2: Character Sketches

These are my sketches from Wednesday's brainstorming session.  I included main characters generic fish hero, robo-shark villain, & wise old dolphin (with complementary fu manchu), though it was later decided the dolphin may just provide tips throughout the game.

Also featured are fun little gimmicks we discussed as a group, a starting screen with the angler fish standing in for the flashing light (& countdown) & a "game over" screen with smiling shark teeth & a hint of the mechanical eye.

Week 10 Day 1: Group Brainstorming Activities

Today, as a group, we did three brainstorming activities to help broaden our ideas for our video game concepts.  First was a mind map, stemming off our idea of a strategy-based, academic adventure game.  Second were these fun dice called Rory's Story Cubes; we "played" three rounds to create three different stories.  Lastly, we created a list of all the retro video games we could think of.  

Complete documentation can be found on our group's blog.

Week 9.5 Outside of Class: Video Game Concept

For our video game project, each of the group members are submitting a short proposal on the video game concept, characters, & landscape.

My concept is the journey of an older gentleman seeking his umbrella that he left behind somewhere.  Beyond the treachery of the landscape itself (a winding park trail), he faces obstacles such as trees, frogs, ducks, and maybe even a giant Monty Python-esque hand.  The scenery would include the park path, bushes, benches, stones, & the obstacles as stated above.

Week 9 Day 2: Game Design Groups

Today we broke into our groups for the game design project that we'll be working on for the rest of the semester.  First order of business was a team building exercise in which we were all on a plane that had crashed into the ocean & had to survive with 12 items from the plane on a nearby desert island.

For the rest of the class, we watched a PBS special on the history of video games.

Week 9 Day 1: End Tag Critique

Today we had full class critiques of our end tags/kinetic logos.  The biggest critique for my project was the use of sound, which I knew would be an issue.  One person suggested I cut it down to one or two separate clips, instead of three.  I'm also considering, if I redo the piece, to find or compose (I wish...) a piece of music that would fit the animation & theme.

Week 8.5 Outside of Class: Final Wired Endtag

Over the weekend I finally brought my design into After Effects & completed my endtag.  The only thing that didn't go as well as I hoped for is my audio. For whatever reason Audacity wasn't reading my audio files, so all my audio was edited within After Effects.  I definitely think it could be spliced better, so hopefully sometime I can find out what was wrong, then go back & fix the audio.

My audio contains three files.  The first plays while the circuit board grows & becomes the W.  I wanted this to be a higher pitched, almost omniscient,  yet still conveying computer or digital.  The remaining letters I wanted to come in a typed keystrokes.  Lastly, I wanted "Video" to wipe in on a kind of sparkly yet digital computer sound.  Overall, I was able to find fitting sounds, though I do feel the first one could use some editing, or maybe I just need a different (but still similar) sound.

While working on this project, I was constantly inspired by the opening credits of Inception.  Not the actual title credits, but the credits for the production companies.

There was something particularly in how the light shines through the Legendary logo I found quite fascinating & what to attempt to work with a similar concept.  Thus came my growing circuits within the rotating circuit board. 

Week 8 Day 2: Layering my Design

As I attempted to bring my design into After Effects, I realized I would need to put all the circuits in separate layers if I want to mask them for growth.  I went back to Illustrator & spent a large portion of class moving the individual circuits into their own layers. 

I also began to think about sound I want in the background.  I'm not too sure what I want at the moment, but I've been looking into free sci fi-esque & mechanical sounds.

Week 8 Day 1: Exploring Depth

I felt all class that my design looked a little flat, so I decided to explore a little.  I looked for tutorials on how to create an effect much like in the one version of the Inception promo poster.  It has such a subtle but powerful use of depth.  I couldn't find anything that specific, so I decided to play around with gradients, glows, & shadows before moving on to any heavier (& probably time-consuming) stuff.

Due to time constraints I may just settle with this.  I started looking ahead into tutorials on how to animate objects in After Effects to make it look as if they are growing.  I want to attempt to do that, having the circuitry grow or carve in & the frame follow it around the W before it fades in.

Week 7.5 Outside of Class: Completed Storyboard

Above is my pretty much completed circuit board-esque W for my WIRED kinetic logo project.  I still want to look into how to add more depth & make it more dimensional, much like the Inception logo from my last post.

Above is my completed storyboard.  It's a rather simple progression: having the circuitry grow in while the frame pans out, when it's completed have the W fade in & then continue to pan out as the circuitry fades, finally revealing the remaining letters one by one.

Jessica Hische Lecture

Thursday I had the distinct pleasure to attend Jessica Hische's Society of Design lecture at the Whitaker Center in Harrisburg.  I have been a fan of her work for the past year or so, so this was an especially exciting lecture.

While a portion of her lecture was focused on type design (& of course an obligatory portfolio showcase), she had some great things to say about life & career as well.  One of the biggest points she brought up (& something she is somewhat well known for) is procrastiworking.  Procrastiworking, she says, is a guide to your calling; not to be confused with procrastinating, procrastiworking is the work you do while putting your other work off.

Some other great points she brought up included...

• Diversify your projects to avoid burn out
• Diversify the things that satisfy you; don't put all your eggs in the same basket
• Find what you like about your job now (whether that be your actual paying job or what you do as a student) & find a way to do that more

Week 7 Day 2: A New Direction

I finally finished my robot on my storyboard!  Two whole frames down.

After talking with my professor more today on my ideas, he urged me back to the growing wires idea. I searched for images of circuit boards to get a better idea of their ornate design.  My idea would be to have these crowded pathways grow around the outline of the line, & then as it pans out, the wires will slowly fade & the letter (rather the black box) fade in.

Looking at circuit boards for a while, it started to remind me of the one Inception title design.  I hope to use this as inspiration as to how to make the wired pathways grow around where the letter should be.

Here are two sketches I worked on during class.  I prefer the second one; it uses less sharp angles.  For my actual rendition, I want the pathways tighter & maybe less of the beginning/end buttons (greater pathway to button ratio).  But maybe motion & panning out will make it look less odd.

Week 7.0 Outside of Class: Animating Storyboard

Between classes I took sometime to brainstorm any other alternatives for my WIRED logo.  Below I attempted some conceptualizing for a literally "wired" theme, in which I'd have wires or networks grows across the logo, forming the letters, & than the actual letters would fade in.  I eventually scrapped this, feeling I wouldn't have to time or skill set to make this look real good.

So last night I returned to storyboarding for my kind of "flip book" of images I feel encompass WIRED's content.  Illustrating is taking a lot longer than I expected, so it's just going to take time to churn out.

Week 7 Day 1: Sketch Critique & Further Ideation

Today we critiqued our storyboards with our rows.   I didn't get as much feedback as I would've liked, but my classmates & professor did suggest changing my idea to show the whole logo for the entire end tag, & I worked with them towards the idea of maybe portraying the history of technology as told through WIRED.  Unfortunately, WIRED has only been around since 1993, so that sort of flew out the window.

Throughout class I worked with my classmates' critiques to further my concept for my WIRED end tag, though I still feel pretty stuck.  I haven't changed the idea too drastically, still using the "flashing" images but showing the whole logo with the images flashing within the W, R, & D boxes.  The W box contains culture-related imagery; the R, computer/communications imagery; & the D, futuristic ideas.

After meeting one on one with my professor, I'm just really questioning.  I thought I knew what WIRED stood for, but now I'm not sure if I'm conveying that effectively.  To me, WIRED is about being "wired in" to what's going on--tech-wise, culture-wise, even future-wise.  It's about being tech-savvy, cutting-edge.  Again, I just feel stuck or as if I can't effectively communicate all the meaning I wish to.

I'm going to try a couple more ideations (my professor suggested a conglomeration of images making up the box around each letter), but if it doesn't yield any major improvements, I may create some ideations for the companies I originally considered.

Week 6.5 Outside of Class: Wired End Tag Sketches

After many rejected company ideas, I finally decided to create my end tag project for WIRED magazine.  I was & still am rather weary of creating for a company with an already well-established series of end tags for any of their web shows or other videos on their video page.  

I chose to focus my design on WIRED's key focuses: technology, science, politics, & geek culture.

Week 6 Day 2: Opener/End Tag Exploration

Today we began research for our next project.  As a class, we watched a few TV network bumpers, a montage of bumpers by Trollback+Company, & the projects of students from past classes.

On my own I continued to look at bumpers from more TV networks, as well as music festivals, publications, non-profits, & research & development firms.  I considered doing my project on AK72, my fictional cafe I did branding for last year, the Long's Park summer concert series, or the Bowery Mission.  

Week 6 Day 1: Kinetic Quote Final Critique

Overall my critique went very well.  I got many good comments on how I was able to bring meaning to all my motions.  Someone did suggest that at the end my reflected "REALITY" should be slightly lighter to allude to a reflection, which I thought was a great idea.  My professor also suggested repeating some of my specialized elements, such as the underline that leads from "PROGRESSION" to "ILLUSION."  If I add back in the clause about each choice leading to a new path ["to go to work, to stay home..."], I could most definitely use that there as well.

If I could do anything else different, given more time, I would apply that former comments of course, but I'd also want to make that reflected "REALITY" swing down, rather than fade in, & "ILLUSION" vanish in a puff of smoke, rather than zoom & fade.  Additionally, I think I'd want to give my "general" transitions more meaning; right now they just kind of enter stage right & exit stage left (or vice versa...it's been a few years since my theatre days).  Perhaps I could allude more to the technique of the actual opening, with the words coming in from the foreground & disappearing into the background.  I think that really deepens the atmosphere.  The only problem would be some of my effects work best on a "flat" atmosphere, but if I could learn to translate them into the 3D it would work wonders.

Week 5.5 Outside of Class: After Effects Kinetic Quote Final

After a long weekend of countless hours spent in the lab, I finally have the final product for my quote in motion project.  Overall, I'm very pleased with how it turned out & how much I was able to do with only 4 weeks' knowledge of After Effects.

Week 5 Day 2: Bringing the Quote to After Effects

Today in class I worked on bringing all my elements together into After Effects--my quote, the typography, & my background--to begin animating.  I did end up adding a little vignette within After Effects to add a little more depth & dimension.  I only got about 10 of my 49 estimating key frames done, but I'm really excited to buckle down & complete it this weekend.

Week 5 Day 1: Creating the Background

Following the tutorial I previously referred to, I was able to make a Fringe-inspired background that I am quite happy with.

And just for kicks, I did a little practice with my type as well, adding a little opacity to better match the title sequence.

Week 4.5 Outside of Class: Storyboarding in Illustrator

Here is the digital version of my storyboarding.

I am currently also working on a background, based on the title sequence of the show this quote comes from, Fringe.

I was unable to find a texture online I was happy with, but I did find a tutorial on Cute Little Factory to create my own in Photoshop.  It's not perfect, but it's pretty close.

Week 4 Day 2: Beginning Storyboarding

Thursday in class I began my storyboarding sketches for my quote.

I had also done some research on kinetic typography & found some really effective & dynamic examples, one from the movie The Dark Knight & the other from Lock Stock and Two Smoking Barrels.  These served as a huge inspiration to me as I was storyboarding.

Week 4.0 Outside of Class: Quote in Illustrator

I finally decided on the Fringe quote, "Most of us experience life as a linear progression, but this is an illusion, because every day, life presents us with an array of choices; each choice leads to a new path: to go to work, to stay home... And each choice we take creates a new reality." 

Week 4 Day 1: Brainstorming Quotes for Motion

"It is time for us all to decide who we are.  Do we fight for the right to a night at the opera now? Have you asked of yourselves what's the price you might pay? Is it simply a game for a rich young boy to play?  The colors of the world are changing day by day."

Enjolras, "ABC Cafe/Red and Black" Les Miserables

"Most of us experience life as a linear progression, but this is an illusion, because every day, life presents us with an array of choices; each choice leads to a new path: to go to work, to stay home... And each choice we take creates a new reality." 

Walter Bishop,"The Road Not Taken" Fringe

"Tracked you down with this. This is my Timey-Wimey detector. Goes ding when there's stuff."

The Doctor, Doctor Who

"People assume that time is a strict progression of cause to effect. But actually from a non-linear, non-subjective viewpoint it's more like a big ball of wibbly-wobbly timey-wimey ...stuff."

The Doctor, "Blink" Doctor Who

"Thing about me, I'm stupid. I talk to much. Always babbling on. This gob doesn't stop for anything. Wanna know the only reason I'm still alive? I always stay near the door."

The Doctor, "Forest of the Dead" Doctor Who

"I've been a fool and I've been blind. I can never leave the past behind.  I can see no way, I can see no way. I'm always dragging that horse around.  Our love is questioned, such a mournful sound.  Tonight I'm gonna bury that horse in the ground, cuz I like to keep my issues drawn.  It's always darkest before the dawn."

Florence Welch, "Shake It Out"

"I took the stars from my eyes, and then I made a map.  I knew that somehow I could find my way back.  Then I heard your heart beating, you were in the darkness too, so I stayed in the darkness with you."

Florence Welch, "Cosmic Love"

"I took the stars from my eyes, and then I made a map.  I knew that somehow I could find my way back.  Then I heard your heart beating, you were in the darkness too, so I stayed in the darkness with you."

Florence Welch, "Cosmic Love"

Week 3.5 Outside of Class: Flash Rhythm

This iteration (in Flash rather than After Effects) follows a ta ta ti-ti rhythm with its slide slide pulse-pulse.

Week 3 Day 2: Further Rhythm Iterations

While reworking my After Effects project & brainstorming for my Flash project, I decided to look at some official lyric videos with a good typography & rhythm for inspiration.  The first from one of my favorite bands, Muse, off of their new album, & the second I found from a youtube search.


Muse's Madness does a great job during the recurring "M-m-m-m-m-m-m mad-mad-mad" concisely visualizing the rhythm.  I think that's really what makes it effective--the conciseness of that visual rhythm with its aural counterpart.


Calvin Harris' Drinking from the Bottle is a bit more involved than the Muse example.  It works with a more constant beat, but I found the geometric details really exciting.


This is my second iteration of the project.  I was able to give a more concise rhythm by adding small pauses between before & after stressed beats & making the "ti-ti" eighth notes clearer.


I still feel as though there are changes I want to make.  First off, the alignment of the letters; they're a little more raised than I'd like, but that's just a minor detail.  It still feels as though it's missing something.  I may add another measure or two & introduce a subtle background beat underneath this one..

Week 3.0 Outside of Class: Rhythm Iteration 1

Between classes I worked more on my After Effects RHYTHM iteration.  My first completed iteration follows.
It doesn't quite yet have the beat or rhythm I was going for, so I plan on tweaking it: switching around letters, adding pauses, maybe being a little less conservative.

Week 3 Day 1: Rhythm

Monday I began a project in After Effects using the word "RHYTHM" & animating it to convey rhythm.  I'm still in the middle of animating it, but it will be based on the rhythm notation at the bottom right of the top photo.

Week 2 Outside of Class: Dreamscape

Using one of the dreams I mentioned last week, I made a sort of dreamscape using After Effects.  The goal was to recreate the feeling of that dream using singular words, combined with textures & abstract imagery.

The premise of my dream was that I was in a dark, empty house looking for something. I go up the stairs, there is a light, & then an open room.  While sifting around, I discover some old portraits, one with a face, & suddenly I have an epiphany (of what I'm not too sure).  Somehow I realize I've been detected & that whoever is looking for me is hot on my trail.  I take off & hide in another small room upstairs.

Here is the final product...

Right now it feels not unlike a Powerpoint presentation.  I hope as I learn more about the program, I'll be able to make a more dynamic video.   I may do some tweaks, doing more with typography & using jerks & movement, really just emoting more through actual motion rather than just through words & images.

Weekend of Design

This past weekend I attended 3 local design events--two here at the MU Design lab & one at Penn State Harrisburg.

Thursday I went to Stefan Sagmeister's lecture at Penn State Harrisburg.  He talked a lot less about his designs then I had expected, discussing mostly the psychology of happiness, leading up to a little plug about his film The Happy Film, which was largely filmed during his one year hiatus from his firm's work.  (His firm famously takes a yearlong hiatus once every seven years to avoid exhaustion.)  The film itself did include some nifty experimental typography for the titles.  You can check them out here.

Sagmeister did talk later a little into his designs, mostly his exhibit The Happy Show, which was exhibited in the area last year at the Institute of Contemporary Art in Philadelphia.

But the main takeaway for me was his advice on remaining happy & unbored in design.  His eight key points included...

Thinking about ideas & content freely--with deadlines far away

Traveling to new places

Using a wide variety of tools & techniques

Working on projects that matter to you

Having things come back from the printer well done

Getting feedback from people who have seen your work

Designing a project that feels partly brand new & partly familiar

Working without interruption on a single project--losing yourself in it 

Friday our local Central PA AIGA president Joshua Buckwalter stopped by the MU design lab to give a talk on user experience design.  Buckwalter previously worked for Harrisburg design firm andCulture & now works as creative director for Elizabethtown's Inovāt.  I found his case studies to be very informative & telling of how much research goes into a good user experience.  I was surprised how much research & interviewing was actually done within the company--from description cards to a scale of formality--to ensure they got a website that accurately portrayed the company, followed by the usual wireframes, moodboards, & mock-ups.  Overall, Buckwalter's presentation was an interesting & practical extension of a course I took last year, Introduction to Experience & Interactive Design.


Saturday some of MU Design's recent alumni returned to the lab to talk about their post grad experiences & to give some advice to us still in school.  The alumni had lots of helpful tips on interviews, internships, networking, & finding the company that fits you.

Week 2 Day 2: Dreams

Before starting our next project, we were asked to remember back to dreams we remember clearly.  Here is my list of ones I recall...

Prom in my house & on patio

Zombie blood drive

Crystal skyscrapers in Canada

Metropolitan Museum of Art with tall spiral staircase

Teleportation during lightning storm--looking for friend

Ship ride to England

Yellow brick building/skyscraper--running across ledge of roof 

Cow/serpent hybrid hiding behind bushes in the park 

Finding portraits in second floor room/attic of mysterious house--being chased

Hotel turned shopping plaza turned subway

Old mysterious death house with clothing shop inside 

Water park/Ren Faire

Friend lives in neighborhood of luxurious tree houses 

Science museum--being chased by Aztecs 

Week 2 Day 1: Introduction to After Effects

Tuesday I got an extensive introduction to After Effects watching Lynda tutorials.  Watching the tutorials before exploring the program makes me feel I will be significantly less overwhelmed diving into After Effects.

Week 1.5 Outside of Class: Representative Line Flash Animation

Over the weekend I brought my storyboarding ideas to Flash & completed my animation.  It took a little while to get the hang of Flash, but once I did, I found doing the animation to be pretty simple & even fun.  Shortly after beginning in Flash, I decided to make my line pink instead of the default black to allude to the sneakiness (& humor) of the Pink Panther. 

Here are a few screenshots referencing my storyboard from before...

And the final product... 

Week 1 Day 2: Motion to Create Meaning & Intro to Flash

We opened class by exploring motion as a means of creating meaning or narrative with some modified 18th century toys. We were told to pick a social issue (I chose gender issues) & create two designs using the toys.

For the first, we used a thaumatrope, which has an image on both sides of a card, which is attached to two pieces of string.  The card is twirled & combines the two images into one.  For my thaumatrope, I wrote the word "EQUAL" on one side, removed the Q, instead making it a composite of the popular male & female symbols derived from the Classical symbols for Mars & Venus.  If I could make one change, I would have kept the full word "EQUAL" on both sides of the card, one using the male symbol as the Q & the other using the female symbol.  I realized after the fact that the conglomerate symbol was already associated with intersex & transgender.

The second was a praxinscope, which uses a series of pictures, a round-based contraption, & a mirror to create what appears to be a moving animation. For mine, I decided to symbolize the struggle for power between the genders, in the end providing a solution.

After completing our projects, we learned about the animating program Adobe Flash & began a short project using a short continuous line to represent some character or personality.  I decided to evoke sneaky.

Storyboarding for sneaky representative line animation

Week 1 Day 1: Introduction to Motion Design

Tuesday served as an introduction to motion design, the art of bringing graphic design to life.  We watched a couple videos that introduced us to some really great examples of the power of motion design.  

The first was Motion Plus Design Center's What is Motion Design?, which is full of stunning imagery & past--& some timeless--gems from the surprisingly long history of motion design.

The second video was a contemporary example of effective motion design.  Office & home furniture manufacturer Herman Miller's This is You uses abstracted illustrations, typography, animation, & audio to support their message.

Lastly, we looked at motion design's role on the web, one of which being hover effects.  We checked Tympanus.net for some pretty modern hover effect samples (some more effective than others).