Quickie: Sharktopus Poster
It goes without saying I’m pretty excited about the upcoming feature Sharktopus. While I’m sure I’ll need to do some information visualization after it comes out, I thought it would be good to get another design quickie out my system and make a movie poster for it. Recently I’ve been checking out old japanese movie posters, and wanted to do something along those lines, just keeping everything minimalist. I think it sets a nice tone for how epic Sharktopus is going to be!
From start to finish took just over an hour, so not too much spit and polish on it. However at least it’s not too overworked, so there are benefits in trying to keep to a time limit.
Comments (3)
Infographic: Mega Piranha
So yes, it’s been a while.
But rather than listening to me serve up excuses, let’s get down to what really matters, that namely being: Mega Piranha. Yet another gem from the guys over at The Asylum, this was essentially the sister movie to Mega Shark vs Giant octopus, starring Debbie Gibson’s arch rival, Tiffany. The concept itself was pretty interesting. Scientists in South America genetically engineered piranha that would rapidly grow, thus providing food for impoverished nations. Now why these scientists decided to go with piranha, and not something more traditional like salmon or tuna isn’t quite clear, but as a graphic designer who am I to argue with geneticists?
Predictably, the piranha get a little out of control because as with most genetically engineered animals, there were a couple side effects. Like the fact that they become hyper aggressive, are immune to bullets and nuclear missiles, and double in size every 36 hours. It’s really that last part that puts these guys over the edge, because now we’re in the realm of exponential growth. Which means it only takes 9 days for one to go from your average sized fish to the biggest freakin’ animal in the history of EVER. Which is great if you need thousands of tons of fish to feed people with, but not so great if they escape into the ocean and head up to Florida to lay the smack down.
So of course there needed to be an infographic. While I focused mainly on the crazy growth rate, there were several other key points that needed to be illustrated. This scene in particular needed to be documented, and I almost feel like there should be a separate infographic dedicated solely on how to bicycle kick a piranha. But for now we’ll make do with this one. I may have went a little overly tropical with the colours this time, but hey it’s summer! And as usual click on the image to see the bigger version for all the details.
And all jokes aside, the movie is definitely worth a watch. At least check out the trailer
Comments (2)
On the move
It’s been a busy past couple months without any updates or fun infographics, so figured it’s worth a brief update. The biggest change over the past month has been my move from Teehan+Lax over to OgilvyOne as Interactive Art Director. It was definitely tough to say farewell to the team over at T+L because over the past 5 years I’ve made some really good friends there. However, I’m equally excited at the prospect of working with the very talented folks over at Ogilvy, and getting a taste of the big agency experience.
Meanwhile smaller things like getting a cat, working on a personal side project, and prepping for a vacation this upcoming week to Vancouver have taken up the rest of my time. Hopefully once I get back I’ll have some time for more fun design, because let me tell you, Piranha 3D left a lasting impression:)
Comments (0)
Why I love Tha ltd.
While many designers (including myself until recently) may not recognize the name Tha ltd., it’s very likely you’ve seen their work. As the design studio behind such sites as MUJI and UNIQLO, their work often makes the rounds on inspirational design sites. Ironically they’re also the creators of ffffound.com, one of the most popular design-bookmarking sites out there. It should also come as no surprise that at the helm of creative direction is Yugo Nakamura, one of THE original Flash superstars. His distinct style of mixing technically complex concepts with minimalistic and straightforward interface design can be found throughout Tha’s portfolio.
Now I admit, I struggle when it comes to putting my finger on exactly what makes Tha’s work so different. Or why I like it so much. I could go on to rave about some of their individual pieces, but they all pretty much speak for themselves. Having said that however, I think there are a handful of key ideas one could take away from their work:
1. Don’t give me so much choice
Giving me 5 ways to filter a page, or showing ‘20 related items’ doesn’t tell me how to proceed. By limiting the amount of links on screen, you’re making it much easier for me to decide where to go next.
2. Let the site play itself
It’s a small detail, but a great idea. If you’re showing me a line-up of items, you don’t need to wait for me to have it start scrolling. Just make sure it’s easy enough to stop. This site does it perfectly.
3. Great art collateral trumps cheap eye candy.
Professional and consistent photography or artwork speaks for itself. The use of gloss, gradients, bevels etc. are generally used to make up for when the aforementioned isn’t available.
4. Take a risk, make me smile
Does something like this make a lot of practical sense? No. But what it lacks in traditional usability, it more than makes up for in brand message and memorability.
5. Give me some credit
While it’s good practice to make things simple and easy to understand, trying to dumb everything down can limit the sophistication and uniqueness of the experience. Don’t assume that if you show me something different I’m going to freak out and close the window.
6. Don’t think so statically
A site like this isn’t made by drawing a site map and then designing flat layouts. Methods like story-boarding, that focus on a more holistic user experience can give a different perspective than just designing page-to-page.
And with all that said, here’s a little mash-up with some of my favourite pieces.
Comments (2)
Infographic: Anaconda
1997’s Anaconda is easily one of my favourite creature features. Mediocre story, passable special effects, and half a cast hailing from MTV, it had all the right ingredients for greatness. Throw in John Voight to bring in some real acting chops, and you got yourself one of the best snake movies of all time. But of course the snake was the real star of the movie, and what a bad-ass snake he was. Whether it was the breakneck speeds at which he could travel and climb, or his amazing resiliency to overcome explosions and being set on fire, the movie definitely gave us a creature to fear.
Now it’s pretty obvious most snakes can’t do any of those things. Even regular Anacondas can’t catch a falling man while harnessed to a tree, or scarf down Jon Voight in a matter of seconds. But we’re not talking about regular Anacondas here. We’re talking about the more elusive and mythical Giant Anaconda, which still remains somewhat of a mystery with regards to its existence. But one can dream, and the movie did a pretty good job of fleshing out this impressive beast.
Which leads to the infographic. While most people might think that Giant Anaconda is just a big-ass snake, it really goes way beyond the difference in size. I wanted to take an in-depth look at the other differentiating abilities of Giant Anaconda that makes him one of a kind.
Definitely check out the larger version of the image to see all the details, and hope you enjoy!
Comments (4)
Quickie: Crashtoshop
So while recently I’ve done some more in-depth design for fun (megashark & avp posters), something I’ve wanted to try doing is some more quick and dirty experiments. That is to say, taking a simple idea and creating something visual for it in about 2-3 hours max. So needless to say things will be a little rough on the edges, and I have no doubt there will be some wonderful typos and horribly written copy, but bear with me.
For this first one, the idea actually stems from a term coined by my co-worker who like me, has often had problems with Photoshop crapping out all the time. Enter Crashtoshop. From my own experiences dealing with Crashtoshop, I started thinking about how the process of losing work done on a PSD takes you through an emotional ride very similar to the Kübler-Ross model of grieving. Now this whole process usually takes place over a matter of maybe 5-10 minutes, but it’s pretty powerful nonetheless.
Anways, that’s the idea, and here’s what I came up within 2 hours tonight. Enjoy!
Comments (8)
Infographic: Aliens vs Predator
Let me preface this whole post with a warning that I am a total Aliens fanboy. Loved all the movies (even resurrection), and mildly enjoyed the AVP ones as well. So with that being said, about a year or two ago when some co-workers and I were debating who would win in an Aliens vs Predator match-up, it was no surprise that I got got pretty involved–to the point where I grabbed some graph paper and started plotting out the rise and fall of both combatant’s attack potentials.
Now even as an Aliens fan, I’ll admit Predator is pretty badass. His gear is just too good, and if it came to a 1-on-1 duel in an empty room between the two, I’ll give the win to Predator. For me, the Aliens’ strength comes from their ability to rapidly reproduce. So while a Predator may be able to take down a single Alien pretty easily, it’s a different story when he’s facing 10 to 20 of them. That’s why I think time is THE deciding factor for this grudge-match. If Predator finds the Alien before it has a chance to reproduce more soldiers, it’s lights out for the Alien. But if the Alien has enough time to get a cycle of facehuggers and chestbursters going, the tables are quick to turn.
Anyways, so back to the chart I sketched. I’ve had it stuck on the wall at work for a while now, and thought it was due for a more fleshed out execution. Plus it’s somewhat timely with the new AVP game coming out, so it seemed like a no-brainer to do this for my February infographic. You’ll notice I haven’t declared a specific winner or loser in the chart, and for good reason: There are so many variables, it really is impossible to declare a definitive victor.
So with all that said, hope you enjoy. Just click on the smaller image below to see the full chart in detail.
Comments (9)
Microsoft Surface Assets
It’s been just a little over a year now since we received our Microsoft Surface at Teehan+Lax. While it did sit a little idle for some of last year’s busy winter, as people started to free up, ideas for surface experimentation started to bounce around. One cool project that some of our guys came out with is the Hungry Hungry Hippos game. Seeing this had me chomping at the bit to think of another killer Surface idea, but it wasn’t until last summer that I had some time to start brainstorming. As with most design problems, I naturally started off by just sketching and story boarding out some ideas. However with the Surface, this wasn’t as simple as you’d think.
See, the first problem is that unlike websites, the Surface has a set screen ratio and size. Plus it has 4 corner zones that are generally meant to be off-limits since the Surface uses them for its own functions. (Although perhaps these can be overridden). This means that you really need to constrain yourself to these specs to make sure you aren’t designing an interface that simply won’t fit into the space. The second problem is that people will be using their hands on the surface. We’re talking multiple hands, which can get crowded especially when people need to reach over to touch things on screen. I initially found I was drawing the hands way too small, giving me a false sense of how many people could interact at once. Oh yeah, hands are also a total bitch to draw.
I was thinking it would be nice to have a library of assets that could both speed up the story boarding process, and ensure I was using the correct ratio and dimensions of the Surface screen. Much like the infamous iPhone GUI PSD I went about making some Microsoft Surface assets in vector format to address these needs:
It covers all the basics:
- A work area grid template, and complete surface tabletop. All made to the correct aspect ratios.
- Hand illustrations for 1, 2 and 5 finger touches, a blob shape, and a pointer device. Remember that the surface can distinguish between fingers and ‘blobs’ which is pretty cool.
- Gesture movements for both finger and blob touches. These can be used in conjunction with the hands to show how they are moving.
- Some different physical objects with barcodes on them, so they can be recognized by the Surface.
Now by no means should this be considered an exhaustive list of Surface assets. They’re really just a few of the basics to get you started. So with all that said, please feel free to download them in PDF format here. Have any ideas for additions or changes? Let me know, and we’ll see if we can’t work them into version 2.0!
Comments (1)
Infographic: Mega Shark
UPDATE: Ok so first let me just say wow, I never imagined this little diversionary graphic would get such a response. So to everyone who has commented, critiqued, sent emails, twittered, and generally spread it around I have to say THANK YOU! So I’ve also had a couple requests about posters and print outs, so I’ve gone ahead and put it for sale here on Zazzle. It’s pretty flexible in that it allows you to decide what size and quality print you want. So thanks again to everyone for giving Megashark such love, and I’ll let you get on to the original post:
Last year, I discovered the wonderfully cheezy and sharky movie: Mega Shark Vs. Giant Octopus. While it certainly appealed to a more straight-to-DVD niche market of creature-feature enthusiasts, it wasn’t half bad. Pretty laughable in parts…well actually, in most parts when you consider the wooden acting and crap computer animation. However the most ridiculous scene has to be when Mega Shark takes down a commercial jetliner that is cruising over the middle of the ocean. It was this moment that took the movie from being a little ho-hum to “holy shit, did that shark just eat a plane!?”. Check out the clip for yourself on youtube here.
It’s pretty incredible when you think about it. I mean, how the hell did it do that? What would it require for a shark the size of a plane to launch itself out of the water and take down a moving aircraft? After reviewing some of my basic physics calculations (thanks SUVAT!) I came up with some pretty startling figures. However, it didn’t feel like I would be doing such an epic event justice with just a basic blog post, which meant it was time to do what I love most: an infographic! I had been itching to do one for a while now, and this seemed like the perfect opportunity. So with all that said, check out the resulting design below. Oh, and just click on the image to download the full size PDF version for the smaller details.
Comments (136)
Why I love the new windmobile.ca design
There’s a new face in the local mobile scene: Wind Mobile. While there’s a whole other conversation to be had about how this affects the Canadian mobile market, I’d like to talk about why I’m loving their website design. Lets break it down:
It leaves web 2.0 cliché’s behind
No gradients. No reflections. No drop shadows. No bevels. No buttons that look like they’re made of jolly ranchers. Wind keeps things fresh and simple with single colored buttons, flat graphics, and some whimsical little doodles. The few times gradients and product shadows are used, they’re handled very tastefully. It feels like this is where the new trend in good online design is and should be going.
Care for the typography
While I might deduct a couple points just for using the very much overused Gotham Rounded, I have to give them props for using non-standard web fonts appropriately. Until font embedding becomes standard across browsers, there are some rendering solutions (my current fave being Cufon) that work great, but shouldn’t be used outside of headlines, subheads, and pull quotes/introductory paragraphs. The site is very readable, with nice contrasts in sizing and nicely opened up leading.
It breathes
A lot of designers, and clients don’t understand the importance of white space. You need, need, NEED to let content breathe. In 2010 we are very much beyond (or should be beyond) arguments about content living above the fold. Just by using white space properly, you can divide and prioritize information without the need for additional elements like keylines or coloured blockings.
It’s just plain fun
From the copy, to the bold colour scheme, to the random scribble illustrations, it feels like the designers had fun with this. A lot of the time we like to climb onto our designer high horse and write-off these sorts of ideas as too-cheezy or brazen, but really, good design isn’t always so high-brow. Sometimes you need to exchange subtlety with loudness to get the job done, and Wind has done a great job of balancing those two extremes.
Now I won’t say the site is perfect. But while there are the odd things here and there I find strange looking, overall I think Wind Mobile has made a great visual impression with their recent launch. It feels very on point with where modern web design is heading, and for that I have to give kudos!
Couple more screencaps:
