It's Biznass Time! - Business cards and the importance of a developer's identity

We're going to GDC! Come hell or high water, we booked the tickets, marked the calendar and laid out our nerd uniforms for GDC 2008. Now what? Maybe we're missing something...

Business cards!

As a soon-to-be card-carrying graphic designer--and by "card-carrying" I mean diploma-carrying--why not create our own identity, or any such materials we may need to promote ourselves? Really that's what graphic design is all about, visual communication for some end, and in a lot of cases that end has something to do with money. The identity system can be a very complex task, and cost a great deal of money to get it done right. This kind of work is reserved for large business who can hire a firm to overhaul their look completely, but being an indie dev, that just isn't going to happen. Devs are smart enough to figure this stuff out on their own, right? So I offer you this:

A cake! Baked with logos and typography. But really, this is just a rough recipe for that cake. There are always exceptions to these guidelines, but I'm going to assume that the reason you're reading this is because you need guidance, and if that's the case, then follow the guidelines. Get it? I know dev teams are made up of a variety of creative people, so if you have an artist, that will be a big help when designing the logo and just general aesthetics along the way.

1. A logo.
This needs to come first above anything else. The logo can be just text, a simple circle or illustration. The logo (sometimes called a "mark" or if it's text, "logotype") will inform every other decision you have about the identity, the typeface (font) you choose and the way it's applied to different applications (letterheads, business cards, stickers).

I'm sure you have all seen logos, and they seem simple enough, they are for the most part... However, since you're a developer, mainly promoting your stuff on the internet, the idea of doing a bad ass full-color raster (bitmap) logo illustration may seem like a really good idea. It's not. Most of the time. When it comes time to translate over to the printed page, you'll be faced with a disaster, and with little to no print experience, and even less budget for professional printing and file preparation assistance things will get messy. That being said, if a simpler logo can't express your indie spirit then so be it, go with the tattered warrior illustration scaling a dark and smoky mountain. Just remember the Aqua Teen Hunger Force episode when Master Shake assumes the role of "The Drizzle" and has those t-shirts made with his "logo."

2. Color
Colors should usually be limited to 2-3. Our identity uses one color (pantone 297U) along with black. Again if you do the full-color illustration, at least leave one dominant color, in order to give your identity some direction when you design other applications. If you don't choose a color for the logo, then you'll have to decide on colors at some point, when you design the website and etc. so it may as well be now.

3. A typeface (font)
Typography separates professional from amateur design. It is the easiest thing in the world to slap some text down on a page, but if you do that, your identity may look like a middle-aged crafty housewife printed something out from her word processor. Don't make that mistake and pay attention to details!

A typeface should reflect the feeling and structure of the mark it will sit beside. If your mark is an oak tree, then perhaps a serifed font (times new roman, baskerville) would be best to complement the shapes of the branches. [Serif fonts have horizontal bars often terminating the vertical strokes of a typeface by linking the two with curves. Zoom in on the Baskervile or Times "T", and you'll see what I mean. If your mark is simpler, with less decoration or intricate shapes, maybe a sans-serif font (helvetica, verdana, univers) would be better due to its simpler shapes. If a shape-to-shape relationship doesn't do it for you, then perhaps what a typeface "says" would be more your style. Blackletter fonts (lucida blackletter, isn't the best, but it gives you the idea of what I mean by blackletter) can give a more medieval tone, or even a Latin or tattooed sort of look. Engravers, a font with very wide letter forms, can reference the early part of the 20th century. Even serif fonts in general can make things more traditional or older looking, while a sans serif can communicate a modern or clean feeling.

4. Setting the type
After selecting the typeface, it's important to continue scrutinizing the details. In graphic design, there are a few simple terms with weird words that refer to the layout of a typed word or group of words.

Leading:
The value assigned to the vertical space between two lines of text.
Tracking:
The value assigned to the width between a group of letters, for instance: a sentence.
Kerning:
The value assigned to the width between two letters. This allows for really detailed tweaking of letter-spacing.

When setting your logotype (the title of your company that will accompany your mark, if you have one) you can either convert the type to outlines and use a vector-editing program to maneuver the letters left and right, or you can use the kerning option in your chosen program. Most of the time, every word that is typed out based on the default settings of any program will not be optimal. Evaluate the spaces between letters and kern them so they appear even. Problems can arise with different letter combinations like "WL" or "AT." It's best to do this by hand and use your discerning eye, instead of with a mathematical process.

Finally, decide where that logotype is going to go in relation to your logo. Sometimes this can be really easy and logical, and others it can be a huge pain. Use your eye, maybe find a natural point of alignment running through your mark. Be open to alternative relationships, such as side-by-side instead of just below the mark, or even off-center.

4. Hierarchy and grids
Now you have your colors, your finished mark, logotype and everything ready to go. Now how do you put it on your business card?

Grids.

Yes, a grid can save you a lot of trouble. Instead of pushing elements like the block of contact info around incessantly, put down some straight grid lines, and decide on some conventions for the layout. For a business card, there aren't many options for layout, since you want things to be legible and your brand to be dominant. Hierarchy built into your grid in a business card can solve a lot of confusion when first laying things out. If you put section off a piece larger than the rest, that'll be where the logo goes. Then the remaining section can be divided once more to separate things once again, and that can be where the name, title and contact info will go respectively.

This is a completely oversimplification of grid systems. They are the foundation of any layout, and bad ones are easy to come by. Overall, err on the side of large margins, even spacing, and points of alignment. If your grid isn't working start over, maybe try some pre-made grids, like the golden section which I used for a layout of Intuition's business card.

5. Other applications
With other types of promotion, such as brochures, letterhead, posters and etc. things can get a lot more complicated. Frankly, with the knowledge imparted to your here, I would suggest not attempting anything without first doing more research. There are publications out there that can provide a great deal of inspiration. One such periodical, Before&After magazine is designed for novice to intermediate designers and provides electronic .pdf tutorials and will mail you a binder-buddy type issue as they are made available. Other than that, there is always the internet, but if you find yourself in dire need of a brochure, perhaps either need to evaluate that need, or find the money to hire someone to lay it out. There are plenty of starving graphic design students out there that would get wide-eyed with a chance to add a line to their resume.

Dinowaurs Website Launched

The Dinowaurs website has officially launched. There's a brief description of the game, a note about the release, and some of our early concept art.

More will be added as we go along. Enjoy!

Dinowaurs the First of Six Games for Kongregate's Premium Developer Program

Finally the day has come! Kongregate announced our game Dinowaurs among the first set of games for their Premium Developer Program. So far, we've been mentioned on Gamasutra, TechCrunch, next-gen.biz, and Gamezebo, and interviewed by IGN. It has been an amazing experience so far. As I've alluded to before when I talked about Indie Bootstrapping Opportunities, we think Kongregate offers a really good deal for indie developers looking for funding so they can bootstrap a game company.

After three or so months of holding it in, we can finally unleash the flood gates of development sharing upon the public. So stay tuned for frequent updates on the development of Dinowaurs.

Below is a snippet of a press release we sent out. Mike's quote is my favorite part. :)

Dinowaurs is a multiplayer strategic combat game where two innocent dinosaurs, armed to the teeth with bombastic weaponry, are forced to partake in a kill-or-be-killed fight to the death, where only one will survive. Because the dinosaurs are only focused on food, like cows grazing in a pasture, they are oblivious to the surrounding battle and are inadvertently causing their own extinction.

"We've always loved dinosaurs ever since we were kids," said Josh Larson, Intuition's Chairman of Markerboard Doodling. "We are excited by the idea that we could express that love through video games, one of our generation's most popular art forms." Mike Boxleiter, Vice Chair of the Wheat Advisory Committee for Intuition added, "As children, our knowledge of dinosaurs was limited to our imaginations. But as we grew older and learned the stories of our parents' youth, we were able to gain deep insight through their first-hand accounts of the terrible lizards that roamed the land in those days. Now, we've finally been able to pass those on."

Intuition Games formed around the idea of the game, when in May 2007, Ted Martens and Greg Wohlwend had an idea for a dark and humorous cartoon dinosaur fighting game. The dinosaurs were actually unaware of the fact that they were fighting since they only cared about food. Josh and Mike had been brainstorming game ideas on an internet forum and met with friends Ted and Greg to hear about the idea. The group hit it off and developed the Dinowaurs idea into a multiplayer combat game with a unique strategy element of villages that produced the weapons for the dinosaurs.

“Dinowaurs is a fantastic concept that plays off the incongruity of innocence in a dark and violent setting,” said Chris Pasley, Director of Games at Kongregate. “We’re really excited to be working with Intuition to develop this as one of our first premium games.”

Skeletal Animation Tools for Flash Games: A Prime Opportunity for Software Developers

The Opportunity

Like many who pay attention to such things, I've become convinced that web-based games centered around 2d, interactive vector graphics platforms like Flash and Silverlight are here to stay - at least for the next 5 years or so. Sites like Newgrounds and Kongregate are growing huge communities of both developers and players. You just can't deny it - Flash games are popular. It would therefore be easy to assume that there will continue to be growth in both the number of games and the complexity of games for these platforms. If the complexity of games continues to grow, you can be certain that there will be a growing need for 2d character animation tools. I think this represents a perfect opportunity for a startup agile software developer with a keen design sense to come in and disrupt the market.

The Context

In video games (as of right now, mostly 3d games), character animation is usually accomplished using a technique referred to as "skeletal animation." The idea is that game developers use a software tool, often developed by a third party, to create a skeleton and match up the character to that skeleton. This process of matching up the character to the skeleton is called "skinning." When it's done right, game developers can move the bones and bone helpers (collectively a "rig") of the skeleton and the character will follow. Because the character rig can be created to match the proportion and arrangement of skeletons found in living things, this technique can lead to very life-like animations.

When planned correctly, this process, although complicated, actually saves time compared to the sweatshop-like manual labor of traditional cel animation "perfected" by Disney in the 60s. In fact, this is one of the main reasons why CG animation is so popular these days - all the animation houses can save labor, and therefore money, by using skeletal animation.

The Current Choices

So then if Flash games are so popular, there must be a lot of good tools that can do this, right? Well, what was surprising to us is that there aren't a lot of tools that can do this. In fact, there are currently only two known tools that can do this: Animé Studio Pro and Toon Boom Digital Pro, retailing for $200 and $3000, respectively. After dropping a few grand on licenses for the Adobe Creative Suite, spending another $3000 per user isn't that appealing. For many Flash game developers, it's really Animé Studio Pro or nothing.

Now some could blame a lack of demand as a reason for this, which is a good guess. Many Flash games developers make games on a nickel-and-dime budget - like the cost of one license of Toon Boom Digital Pro! However, with the recent popularity of web-based MMOs, and the recent announcement of Kongregate's premium games program, I think this is going to change. Flash games will start making money and growing in complexity, necessitating character animation tools that offer skeletal animation. Even before that happens, there's plenty of room in the animation tools market for more competitors. And by that I mean more than two competitors.

The Solution

I challenge a struggling startup agile software developer to create a character animation tool that is targeted specifically to Flash/2d vector game developers. Here's a list of things to keep in mind:

1. Include skeletal animation (preferrably support IK skeletal animation). For anything more than the really basic stuff, skeletal animation will save time and give a better result. It's kind of the whole point of this post anyways. IK skeletal animation can be a big help for speeding up the animation process, so it would be very good to have that.
   
2. Look to established 3d software for inspiration. Skeletal animation for 3d characters has been 20+ years in the making. There's a lot to be learned from existing 3d software - including what not to do.
3. Allow animators to edit their animation curves. Most animation can be expressed in software through curves and splines, referred to as "F-curves" by the animation community. The average walking animation will have the hand moving left and right in a cyclical fashion, which can be expressed with a sinusoidal wave. It's common sense to allow animators to edit this curve directly so they can express different behaviors in characters. Despite that, Animé Studio Pro does not support this.
   
4. Keep the interface simple, stupid (KISS). Keep the interface simple and pleasant. Workflow is one of two main determining factors for how fast someone works, and making the software too complicated can ruin that. Painful to use not only means pain for the user, but also expense for the user's company.
   
5. No drawing tools needed. Assume that a Flash game developer is going to use Adobe Flash, Adobe Illustrator, or a huge array of other well-established vector drawing tools, including several free ones. All you have to do is support importing vector files (and do it well). Anime Studio and Toon Boom can be painful in part because they have the burden of supporting drawing features.
6. No scene management needed. Scene management will need to take place within the game itself. Focus on awesome character animation and management first. Anime Studio and Toon Boom can be painful in part because they have the burden of supporting scene management features.
7. Export Flash-friendly SWFs. Ideally, the animation that is exported would include some Flash-friendly tweens, and wouldn't just be a long series of individual frames, which Flash would treat as a separate object per frame. This would be really hard for skinned characters, since the end result would have to be tweened shape hints. It would be nice to at least support moving and rotating objects around, though.
8. Open part of the software up to the community. Animé Studio Pro, formerly known as Moho, is a perfect example of this. The community can write plugins for the software using the Lua scripting language. And the community seems more than willing to do so. Free development help is always a good thing. :)
   

Final Thoughts

Ironically, adding character animation tools to Adobe Flash itself would be one of the best solutions. The interface is already pretty friendly and well-designed, especially for those familiar with Adobe software, like most artists and designers in game development. Obviously, the output would be Flash-friendly, and the workflow would be simpler since there are less apps to juggle.

Still, it would be great for someone to make what would essentially be a Flash plug-in outside of Flash. And that way you could even support other vector platforms and allow community participation, too.

Taking it even farther, you could make the app in Flash itself, so that the character animation would be in-engine. In fact, someone's already doing that. His name is Jim Armstrong and he's working on some character rigging software as part of the Singularity library. It's just one small step for man, but his work could definitely lead to a giant leap for Flash game development. Please don't be mad at me for that one, I just had to...