Crys Odenkirk

Character Module Design Process: Userflows

Posted on June 20, 2012 by Crys

Userflows are the foundation from which the interface takes its form. All later parts of the project hang upon them. So what are they?

The userflow is a map of how the user interacts with the system, and how the system responds. The userflow will define what actions can or cannot be taken within the system, what happens when there’s an error, and how different types of users (for instance, this project uses Guests who aren’t logged in, Users who are logged in as registered users of the forum, and Admins, who belong to the admin group) navigate differently through the system. Note that a userflow will delineate what controls are needed but does NOT specify the form they take 99% of the time. Choosing the format of the control comes later, as part of the interface design, once you look at all the controls that are needed and how you can present them without them getting in the way.

There are a number of super programs out there that you can use to create stunning userflows. I used to use InDesign for them because I was comfortable with it from my print background but Illustrator, Visio, OmniGraffle and probably twenty or thirty other programs all have great features that can streamline your work and give you a polished presentation.

But you know what? I like drawing them in Google Docs. Besides the fact that I can access them from wherever, on my laptop, my pc or my Mac with equal ease, and share them with whoever without having to make a zillion copies, I just find it really easy to work with. Plain single-color boxes and arrows that snap to the anchor points of the boxes so I can move the box without having to reflow if I need to? Yep, that’s all I need. There’s something to be said for having a snazzy presentation for a client, and I get the arguments in favor of “sketchy” styles. I’m not knocking either approach. Personally though, I prefer to keep my flows as bare and simple as I can because when I start focusing on how to make them trendy, I’m diverting attention from making them function.

Flows available after the jump. Continue reading →

Ghorfa

Posted on June 10, 2012 by Crys

Ghorfa, Website and language

Ghorfa was a guild of people playing Sand People from Tatooine. Yes, those Sand People. They would show up in places there shouldn’t be Sand People and get bystanders involved (think, flash mob of Sand People…).

This website was built around the invision forum system, which has an interesting dichotomy — you can’t change the files directly, but you can replace every image in the default templates and insert javascript into the base that would appear on every page. So really, if you are clever about it, you have nearly total control over the site, but you have to work around what’s already there without changing it.

That’s my favorite, because it forces me to think through new ways of doing things that I might otherwise take for granted.

Of all the game sites I’ve done, I think this one might be the most visually fun. I ran around for about an hour on Tatooine to get screenshots, and then pulled elements out of them to make all of the icons, the background, the buttons, the colors.

Alongside the visual elements, I picked up the language that was considered “canon” and expanded on it as we went, giving the Sand People an actual language to communicate in that others couldn’t follow unless they learned it from us as we went.

Koroght Uli-akhu, Ootman!

“Love and Light” Knotwork – update 4

Posted on June 9, 2012 by Crys

Just a quick update to show yesterday’s progress on plotting the subdivided lines:

Drunken Alien Studios Identity Project

Posted on June 5, 2012 by Crys

Create an identity for
a brand new animation studio

There was a sense early on that we wanted to go in a direction that was fun and a little over the top (ok, maybe a lot over the top) to match the personalities of the principal artists. A brainstorming session brought forward elements culled from comic books, traditional cel animation, old kung fu movies, sci-fi and, above all, laughter.

Long before settling on a name, we verbally sketched out a mascot that encapsulated the principles we wanted to portray. Mixing sci-fi and “drunken master” themed kung fu movies, we hit on a gi-wearing, beer-and-whiskey-drinking gray alien (shown to the left is a version drawn by one of the artists at the studio).

This over-the-top, tongue-in-cheek attitude carries through the rest of the studio, showing up in strange ways, like position titles, which include “Super Villain” and “The Fixer.”

I knew the logo needed to match this approach. A simple, graceful, corporate emblem would be at odds with the studio’s identity. The logo needed fluidity, panache, and a dash of craziness. I chose a font that was reminiscent of those old movies and manipulated the letters to make them flow into each other in a wobbly stagger.

Here’s the silhouette single-color version:
Drunken Alien Silhouette Logo

The website follows the same theme. Everything has a thick cel-shading outline/flat color aesthetic, and I kept the shapes irregular:

Drunken Alien Website

Mascot illustration drawn by Anthony Pileri

“Love and Light” Knotwork – update 3

Posted on June 4, 2012 by Crys

Got about half the subdivided lines done today for plotting out: