design notes: May 2011

Friday, May 13, 2011

The 2011 Humber Interactive Portfolio Show

We had a great turn out on Tuesday for our Portfolio Show. A few industry people we were hoping would show up didn't end up coming, but there were lots of others who pleasantly surprised us by attending.

I had gone into the show prepping to try and sell my skills all night, but I ended up learning quite a bit too. I thought I'd tell you some of the stuff I learned.

How to Optimize My Portfolio

A long time ago, someone told me to put the best of my most recent work in the beginning of my portfolio, especially when you're a graduating student. They said that people don't like to see class projects, so put the work you've done outside the class room at the forefront. Turns out that may not have been such good advice in my case.

The nice folks from Ogilvy & Mather who attended gave me an impromptu portfolio review, which I greatly appreciated. They hit the nail on the head when they said that, judging by the pieces in my portfolio, I've recently upped my quality of design. And to tell you the truth, they were very right.

So, they said to put my most beautiful and creative pieces on my home page in my featured work. And to rearrange which pieces are at the top on my portfolio page so that these pieces are at the forefront. Just because something was recently created or was created outside of school doesn't mean it should take priority. If class projects show your skills and design ability better, then give those priority.

I had been a little nervous about doing this because I thought people liked to see a variety of skills in web development more so than the "prettier" pieces. But the folks from Ogilvy assured me that the "prettier" pieces still show that I can marry design and front-end development.

Check out the changes I made:

http://www.fiona-ogilvie.com/

http://www.fiona-ogilvie.com/portfolio/portfolio.php

And yes we joked about the fact that I am an Ogilvie... spelled differently, but whatever. They actually made a joke: "Imagine if you worked for us?"... haha! Yeah. Can I?

How to Optimize my Resume

Guillermo Acosta, the Associate Dean of Humber College's School of Media Studies and Information Technology also attended the event. He told me he comes from a marketing background and looked over my Resume and About Me section on my website.

His first suggestion to me was to add a little blurb at the beginning of my resume advertising what I can do for a potential employer. When you think about it, isn't that one of the questions most people ask in an interview? "Why you? What makes you different from everyone else?" So, tell them.

The folks from Ogilvy really liked the clean design of my online resume and suggested I apply that to my downloadable version too. So, in order to do that, I toned down the head with the stripes by making it smaller. I didn't take it out all together because when I tried that, all the life got drained out of it. So, it's still there, just smaller.

I think it's a good idea to point out something else that I've learned. A few people I have interviewed with really like that I've listed on my resume awards I have won. They say people don't emphasize that enough about themselves. Why not put yours on your resume?

Here are the changes I made: http://www.fiona-ogilvie.com/resume/resume.php

My Blog

I found that Andrew Dertinger from Carbon Ads and Inspiredology.com was probably the easiest to talk to out of everyone I talked to that night. He stressed that my blog needs to be a part of my site, not on an external blog site. Don't send people away from your site.

So, I guess that means bye bye Blogspot. I'm going to work on a Wordpress blog to my site. But I'll let you know when that happens, so you won't lose me.

My Business Card

Andrew also had some great advice regarding my business card: add my Twitter ID. As soon as he said it, it was like a light bulb turned on above my head. "Ding!" Of course you should have that on your business card, ya ninny. Andrew's reasoning makes perfect sense too. Usually, when you hand someone your business card, they're not in front of their computer. However, with your Twitter info on your card, they can start following you from their phone.

And just for the fun of it, here are a few photos of the evening. I didn't get a chance to take pictures of everybody because I was talking to people all night. And when I remembered that I brought my camera, it was near the end of the night.

The scene at Function 13

Adrian Camaroschi pointing to the abstract layout of his business cards

Jenna Hooper, Krissy Morley, Natalie Coe and me. Our teacher Linda Nakanishi called us her Super Group of Girls.

This is my little station. A great experience. Thanks, Humber!

Monday, May 9, 2011

FITC: Day Three

How to Create More, Better, Different

Jason Theodor is from Blast Radius. I thought it was cool that he did his entire presentation on his iPad.

His definition of creativity is that it's the act of connecting things in unexpected ways. He wants to make creativity more accessible to everyone.

His presentation was very interesting because I had never looked at the creative process or creativity in this way.

IBM's consensus revealed that 1500 CEO's surveyed think that creativity is the number one trait in a potential employee.

Creativity is broken down into three parts: Action, Connection, and Deviation. Or in other words, "do, glue, skew". When you have all three of these in balance, you can create magic.

Jason's formula for creative method: .<#>!
What does that mean?
Period (.): Focus
Greater Than Symbol (<): Induction (get all your ideas out there)
Number Sign (#): Analysis/Synthesis (analyzing and realigning)
Less Than Symbol (>): Deduction/Differentiation
Exclamation Mark (!): Evaluation

CREATIVE TYPES
We all have creative kryptonite. It's the part of us where we have a creative weakness that we need to improve on. It might be Action issues, such as procrastination, where we have lots of ideas, but never get around to creating anything. It might be Connection issues, where we have trouble getting our message across. Or it might be Deviation issues, where we have difficulty expressing our self.

The Consumer: Their Action, Connection and Deviation never overlap. They simply consume what others output.

The Empath: This is the student. They understand how things work, but they don't have a lot of experience yet.

The Mimic: They have very strong Action, but they are weak on the Connection and Deviation.

The Crazy: They are fresh out of school, are full of big ideas, but they aren't usually able to Connect or Act on them.

The Dreamer: They have trouble getting started, they don't have much creation.

The Outsider: They have lots of ideas and Action, but no one can relate to them. An example of someone like this is Henry Darger. He worked as a custodian during the day and wrote the longest fantasy story ever in his spare time. It was discovered only after his death.

The Producer: They have lots of experience, they know how to Connect, but they might not Act.

The Creator: They have a balance of all three - Action, Connection and Deviation.

There are different paths you can take to become a Creator type.

The Action Path: They are a Taker first, then become a Mimic, then become a Creator. Andy Warhol is an example of someone who took this path.

The Connection Path: They also begin as a Taker, then move on to being an Empath, then a Dreamer and finish off as a Creator. Albert Einstein is an example of someone who took this path.

The Deviation Path: Again, they start off as a Taker, move on to being a Crazy, then an Outsider and eventually a Creator. Wile E. Coyote is an example of someone who took this path.

ACTION TOOLKIT
Common barriers for people are time, fear and procrastination. The best way to fix this is with picks and dynamite.

Picks are used for slow, long term changes. It's about building it into your routine so that you end up enjoying and it's no longer just a part of your routine. Create a 10 minute wedge, which is wedging 10 minutes of practice into your routine everyday.

Dynamite is used for immediate change, say, if you have a major deadline coming up fast. Try streaming, which is just getting all your ideas out. Story dice work well too. They're dice with little pictures on them. You can make up a story based on the pictures that show up when you roll them. Make sure you write down your bad ideas as well as your good ideas. If you write down your bad ideas, your brain automatically starts to try to solve that bad idea. Also try the Law of 1%, which is getting all of your bad ideas out of the way so you can eventually get down to that 1% of good ideas.

CONNECTION TOOLKIT
This is about finding focus. In advertising it's the creative brief. What's the key message? What is the problem or goal we are trying to solve? Who is your audience? What is the purpose? This one is fixed with lassos and mortar.

Lassos are the temporary superficial fixes. Pick a random work and connect the thoughts that go with it, like brainstorming. Try tangentometry, which is making connections that loop to make a story, then double check to see if it relates to your focus. Have boxes or moleskins in which you can capture your ideas in the moment.

Mortar is the longer lasting, deep fix. Do a lot of research on your focus! This will help you understand your purpose/goal and audience. Immerse yourself in experience. Go to conferences. Practice, practice, practice!

DEVIATION TOOLKIT
Break your default and get out of your groove. This is fixed with lenses and blindfolds.

Lenses are about experimentation, testing, listening to a different voice. Try content on content. For example, what would a certain song sound like if you could only use 8 bit sounds. An example of this is Lego. They take the same pieces and little people, but they apply it to pirates, or Star Wars, or outer space. Try the Through the Looking Glass method. Try making it awful on purpose. It makes your brain work to try and fix it. Also try recombining your lists. You might find new ideas.

Blindfolds are about expressionism and being free. Try working in a darkroom. It can be enlightening and scary. Try sleepworking. If you hit a wall, just sleep on it. When you relax, you let your true self express itself. Try the fail budget. Work on things you're passionate about that has nothing to do with your work.

Jason's entire presentation can be found here: http://www.slideshare.net/jted/jason-theodors-creative-method-and-systems

Making Contrast With Details

McBess is a French illustrator. He graduated from Supinfocom for 3d animation, then went to London to work with the Mill, an Oscar-winning VFX company. He created a fictitious band called The Dead Pirates, for whom he created a music video/short. CH + CH loved the short and wanted McBess to create another one for them. Here it is:

The whole idea blew up and the band even has fans. Threadless got them to make some t-shirts even. And there's even a Dead Pirates iPad app. So, McBess decided to put together an actual band called the Dead Pirates to go with all the merchandise he created. haha. He says they're not very good, but they're fun.

Here is some advice McBess gave us during his presentation:
Know your audience.
He uses a grid for his isometric drawings.
If you work to perfection, you'll never get anything done.
Keep your stroke width consistent throughout.

MCBESS' INSPIRATION

Kid Acne

Dave Cooper

Chris Ware

Wednesday, May 4, 2011

FITC: Day Two

I've edited the formatting and some of the content. It was pretty ugly and I couldn't just leave it. So there.

Integrating Flash and HTML5
Yeah, so, I think I like last year's FITC venue more than this year's. I clearly went to the wrong presentation this morning because I didn't see the sign to walk up the stairs to the other room. I was looking for "Advanced Blitting" with Jesse Freeman, but I accidentally sat in on "Integrating Flash and HTML5" with Mike Chambers. I think a few others did the same thing because about 10 minutes into it a bunch of people got up and left. Why didn't I? ... No idea. Anyway, for anyone who's interested, Mike Chambers will be posting his entire presentation up on github.com/mikechambers.

Also, here are some reference sites he gave out at the end:

html5rocks.com

caniuse.com

diveintohtml5.org

Interactive on Readers and Tablets with Ted Patrick

Ted Patrick works for Barnes & Noble.

2 years ago, Barnes & Noble Digital was established to reinvent the book. They've created the nook color, which is a cross between a reader and a tablet. He emphasized, though, that it's a reader first, with tablet capabilities.

History of tablets:

The problem with Flash was that it made interactivity free. Previous to 2000, people paid for interactivity on CD ROMs.

2008 - Anybody could create an app. There was a business model shift.

2009 - nook came out.

2010 - iPad came out. It's a very fast optimized computer for looking at content.

2010 - nook color came out.

In the end, content is king. Consumers will pay for good content.
Now is a good time for us in the app industry because cost is low for creation and distribution.
PPI basically, it means how clear the text is.
The iPad actually has the lowest PPI at 132 PPI. The nook color has a PPI of 160.
The evolution of technology seems to be that devices keep getting more powerful, while their cost keeps getting lower.

Device Problems:

480x800 is now the industry standard for tablet screen, but you have to take into account the physical touch space in inches. A fingertip is about a half inch square.
In the future, we'll be above 2000px wide or high and 200PPI.
You have to produce buttons and content that are 4x bigger than before (than on the web). Therefore, you need to keep in mind the CPU usage and hardware acceleration.
Design for today, but take tomorrow's abilities into consideration.
"Write once, use many". Be able to generate pixel density between devices. Aim for the highest quality or pixel density on the first creation so all you're doing is scaling down for the other devices.
They have nook kids tablet too.
Make sure you design and code for dynamic positioning and dynamic scaling. Some devices do this automatically, but not all.
GPU Hardware Acceleration allows you to throw a ton of info at the tablet and keeps rendering.
Use a Framework. Android JDK uses Java, Android NDK uses C/C++.
nook color ships with Adobe AIR installed, so it runs your Flash creations.
nook kids is written in AIR and allows you to create in Flash/Flex/Catalyst.
Barnes and Noble only utilizes high quality apps. It's difficult to get a book into Barnes and Noble and it's the same for developers and their apps. However, there is a way: nookdeveloper.com

Cause and Effect with Robert L. Peters

Robert is the founder of Circle. His personal site is definitely worth checking out too.

Change threatens the status quo, that's why there are so many who protest it.

Practice whole brain thinking: creative and strategic.

Plan ahead. "A stitch in time saves nine".

Act on your goals.

Listen. We express ourselves too much, we forget to listen. We're being bombarded with messages. I noticed Robert said this while half the audience was on its cell phones.

Designers have become very powerful influencers. Keep that in mind.

A mime is a visual equivalent of a virus.

"Logos have become the closest thing to an international language." - Naomi Klein, Logos

Question everything, then question the answers.

Collaborate. We're all in this together.

Assume nothing.

Study the past. Don't reinvent the wheel. Concern yourself with the meaning of symbols.

K.I.S.S. - Keep it simple stupid. Less is more.

Communicate. The 6 W's (Who, What, Where, When, Whom, Why) point to the How. Understand the culture of the viewer.

Draw a diagram. Always sketch first.

Never sell out. Keep the bar high.

Use a contract. Robert helped put together a contract template that is available at the Graphic Designers of Canada website. Check out no-spec.com! We finally have some backup. haha.

Say what you mean, mean what you say.

Be open. Let go of anal perfectionist traits and accept the flaws. (I need to work on this one.)

Dream.

Welcome change. (I need to work on this one too... Working in the real world, to school, back to working in the real world in 2 years... Freakin' me out!)

Add value.

Aim higher.

Foster intuition. Don't forget the feeling in things. Re-engage with nature.

Do more with less.

Laugh. (This one is super important.) ;)

Innovate.

Think sideways. Be unconventional.

Focus.

Take it to the edge.

Relax. If you work hard, then play hard. Remember, in a rat race only the rats win.

Tron GFX with Bradley Munkowitz from GMUNK

GMUNK are the ones behind all the cool holographic-looking stuff in "Tron". Bradley Munkowitz went through some of the different elements of the movie that GMUNK created, from the opening title sequence to the scoreboard when Sam is fighting the other programs, to the holograms that are part of the discs and more. If you haven't seen Tron, you really should. The visuals are very well done. If you're not sure, here's the trailer:

Here are a few things I pulled away from the presentation:

Do a ton of research before you begin and reference that research frequently during your creation process.
They had their programmer create apps that generated cool geometric forms. They took PNG's of what the apps generated and used those in their comps.
These apps allowed them to control what each app output.
Their inspiration for scene where Clue defragments Flynn's disk were images of bars which represent how data is visualized.
They found some open source code that they repurposed to look like explosions of particles to use when Clue is looking at Sam's disk to see what he's been up to.
The Clue's globe was created using open Frameworks.
All the open Frameworks they used had no motion blur or depth of field, so they had to import it into Houdini to add them.

Monday, May 2, 2011

FITC: Day One

I went to FITC today. Today kicks off the first day of presentations. The first thing I noticed today was that I actually understand everything that everybody is talking about, as opposed to last year when I was still doing timeline code. haha!

Anyway, I thought I'd put together a blog of the stuff I take note of at FITC this year. Now, I look at everything through the eyes of a designer, so I tend to take in presentations that are less techie and more visually inspiring. I'm sure I'm not the only one. Here's what I took away today... In point form... Because I'm basically just typing up the notes I took today.

Adobe Keynote Speaker

with David Wadhwani

Mobile is growing at an alarming rate.
Apps and app stores are also growing ridiculously fast.
Flash has gone from being a tool to create cool animations to creating programs. Did you know that it was used to create some interfaces in cars?
HTML5 is the answer to bridging the gap between Flash and HTML.
Adobe is contributing to new versions of jQuery and W3C.
Adobe has a newsletter geared towards web designers and developers called Adobe Edge. You can check it out and subscribe here.
Dreamweaver and InDesign can export HTML, SWF's and PDF's.
InDesign now allows you to export interactive magazines. (I'm actually working on one of these things right now.)
HTML5 (I think... I was writing something while he was talking quickly) has better text capabilities. It allows you to wrap text around an image or a shape more easily and effectively.
Did you know that some Facebook games are Flash-based? (ex: Farmville)
People spend an average of 79 minutes per day on games on their mobile devices.
Flash Player 10.2 allows for better playing, no lagging, uses less CPU power and displays superior quality video. The quality is so good, you can play something on your tablet, plug it into your TV and there is no loss of quality.

Richard Galvan: Flash Improvements

When you change the stage size, all frames, movie clips, etc. scale with it. This is fantastic when creating different versions of an application for different devices.
We used to use Cache as Bitmap to rasterize our vector symbols so our file size wouldn't force the device to lag. However, doing this would turn your easily-resizable vector symbol into a rasterized bitmap. Now, you can use Export as Bitmap instead. This allows you to continue to work with your symbol as a vector object, but it is exported as a bitmap when the project is published.
You can now do on-device debugging. This is useful for testing things like the accelerometer that you can't test easily on a desktop.

Deepa Subramaniam: Flash Builder Improvements

Flash Builder lets you build better workflows for Flex or pure Actionscript. It's kind of like what Dreamweaver is for HTML and CSS.
It now has better Quick Assists for common coding functions such as for loops, getter and setter functions, etc.
It intuitively reminds you when you need to add related code. For example, if you add an event listener, it reminds you to create the function for it.

How do you turn this thing on? with MK12
For anyone who doesn't know, MK12 is a motion graphics company based in Kansas City, Missouri. They were the ones behind the opening credits for .007 "Quantum of Solace". Not sure which that is? Here you go:

What actually happened was that they created the title sequence for "The Kite Runner" and the director loved what they did. When he became the director on "Quantum of Solace" he asked them to do the opening credits then too.

I didn't realize, but Kansas City has a great community of artists, which is where the founders of MK12 come from. It explains why their work is so artistic and beautiful. Check out their demo reel.

Their first short was "The Terrible Cosmic Death".

MK12 was also one of several design companies that designed a bottle for the 2005 Coca Cola campaign. Theirs is on the far left.

MK12 are actually designers first. They're also type nerds and design their own fonts based on what they need it to look like. For example, they designed the typeface for "Quantum of Solace".

They have found that you can get ideas off of someone without even talking to them. This is why they keep their studio cubicle-free and very open-concept.

They created the short "The History of America", which is super cool. Check it out. Here's the trailer:

MK12 continues to make shorts/self-promos to help attract new clients. A lot of the time, clients have difficulty expressing what it is they want. MK12 has found that their shorts act as great bases for clients to say "I want something like that."

And that's what I've learned today. I'll keep you posted for tomorrow.

My Graduating Class

Check out our Portfolio Show reel created by Chris MacDougal and Michelle Demelo.

Finally, after 2 long, very long years in the Humber College Multimedia Design and Production Technician program, I've graduated! One of the things that impressed me the most about this program is its emphasis on networking and making connections with your class mates. They become your life line during assignment creations, and I'm sure we'll find we'll help each other out now that we're stepping foot in the work force. On that note, I wanted to present to you my graduation class.

You can see our Humber Interactive 2011 website here.

Rob Alonzi