keslensky_raid

Battle Camp EndGame Screens

These screens were done as mockups for Battle Camp, a match-three mobile game available on iOS  and Facebook, to demonstrate proposed future functionality and improvements common in other social, casual games to this game, including:

  • A “Double Down” feature that would allow players to continue for added bonuses in the next (and subsequent) games,
  • A “Save Me” feature that would allow players to continue without losing everything after losing one game.

The screens were also improved by customizing the header text to provide bolder, clearer silhouettes to help players further distinguish between the various screens.

keslensky_save_me keslensky_double_down keslensky_raid

Carbon Age Systems Revamp

Carbon Age Systems

Most small businesses need a website, but only a fraction of them require a significant backend.

Carbon Age Systems is a manufacturing, fabrication, and design company in Atlanta, GA that specializes in engineering challenges and prototype development.

Before Redesign

What Carbon Age Systems used to look like

The site in its previous incarnation is serviceable, but with no clear call to action — and in fact no real way for clients to contact Carbon Age aside from actively phoning or visiting in person (via the “Contact” link).

This is best referred to as A Website for the Sake of Having a Website — again, not every site needs to be like Amazon.com, but at minimum the site should have some end goal in mind, even if that goal is little more than “get people to fill out the email form at the end of the rainbow.”

There’s a reason for this though (besides the original owner’s ease in maintenance) — the site not only has to serve as a touchpoint, it should also convey a certain sense of competence, trust, and professionalism, especially when it comes to attempting to pick up government contracts. In short, the less the site looks like a fly-by-night, the better.

As an added complication, the header image changed — and since that header image was the only source of branding on the previous site, this meant that some pages had no brand reinforcement at all!

 

After Redesign

Design for Carbon Age Systems

Changes made to the website:

  • Unified color scheme to use just white + the three colors in the Carbon Age logo — improves visual branding and reinforces logo.
  • Added more information to the front page — specifically, the footer, which included bringing that hidden contact information into the footer (so no matter which page the reader came to, they knew where to go and who to find)
  • Added social media profile information to the footer
  • Included a non-dropdown menu in the footer as an alternative interface
  • Brighter, cleaner navigation (and elimination of that search bar — at this point, it’s faster to just click through all the pages than it is to search!)
  • Clear call to action with the “Request a Quote” page, which contains a contact form that allows for direct email contact with leads to help qualify them
  • Removed “page border” in favor of a wider responsive design, both to make better use of smaller real estate as well as providing more useful white space.

 

Balsamiq Mockups Web Demo

S.I.M.O.N. Cleaned Wireframes

A quick exercise in Balsamiq to clean up what had been sketched out earlier — especially after discussing the app with another programmer friend required some clarification that I just wanted rectangular buttons with the images in them, as opposed to some edge-finding trickery! Will need to write up some better project specifications…

The idea is still the same as before, it’s just cleaned up a little more.

(I know it's an iPhone in the mockup -- it's just a phone frame, get over it!)

Binding of Issac item - Gish Slippers

Binding of Issac Item – Gish Slippers

The Challenge:

Design a new item for the indie game The Binding of Issac.

  • The item must be drawn in the game’s style.
  • The item should fit in with the game’s overall item themes, a list which includes (but is not necessarily limited to):
    • Dungeons and Dragons (D&D), including the d20 system
    • Christian biblical references
    • childhood mishaps
    • throwbacks to other Edmund McMillen games
    • horrific creepy crawlies
    • jokes about Issac’s mother
  • The item should have some thought behind how it would be used and visually expressed in the game after Issac picks it up.

Closeup of the Gish SlippersA closeup of the slippers prior to being picked up by Issac.

The Concept:

Issac while wearing Gish SlippersGish is a both an alternate boss in The Binding of Issac as well as an indie game in its own right. Gish Slippers are thus an item unlocked after beating Gish, similar to Little Gish.

The Gish Slippers are an equippable item, so once Issac picks them up, Issac will now appear to be wearing the slippers. As Issac runs around levels, black Gish Goo will appear on the floor, lightly damaging any enemies that step in the goo behind him (making it a great item to have while facing pursuing enemies such as the Gemini series of bosses or Lust / Super Lust)! After a few seconds, the goo then recedes and disappears.

Goo only appears while Issac is running, so Issac will not generate a puddle of goo under his feet when standing still. However, the faster Issac runs (including “Speed Up” increases), the more Goo will appear behind him.

Issac is immune to his own Goo.

 

Closeup of the Gish Slippers as worn by IssacA closeup of the slippers once Issac has picked up the item.

Beginning Work on S.I.M.O.N.

Wireframes for S.I.M.O.N. App

Working on an Android App — but why make a simple “Simon” clone when half the fun is designing a new twist?

Simon is a well-known children’s toy — the pieces light up, and players repeat the patterns as they become increasingly complex to follow. As a result, most Simon clones follow a simple, time-honored interface, where four (or more) options are available from the beginning, just like the real-life interface.

S.I.M.O.N. (Signal Increasing Memory Order Novelty) operates a little differently. Options are introduced as more “rounds” are completed, based on factorial numbers – 1! = 1, 2! = 2, 3! = 6, 4! = 24, and 5! = 120, so…

  • The First Round has only one option (trivial!)
  • The Second Round introduces a new option (two options).
  • The Third Round introduces a new option (three options).
  • The Seventh Round introduces a new option (four options).
  • The Twenty-Fifth Round introduces the last option (five options).
  • After completing the 120th round (!), the game is “won”. Otherwise, the game is over whenever the player messes up.

S.I.M.O.N., all sketched up

The options are featured in a random order — so a possible “improvement” would be to offer unlockable character options as a reward for reaching certain milestones in the game (e.g. reaching Round 25 / 50 / 75 / 100, playing a certain number of games, “checking in” multiple days in a row) to provide additional variety and incentive to keep playing the game.

Why an Android App?

This isn’t an app with user delight built in mind (because then we’d have to actually have a discussion about whether or not it’s worth coding / porting for iOS, or Windows Phone 8 XD, or whatever the “sexy” mobile OS of the week is, just so users won’t feel left out). This isn’t an app designed to make money (because then I’d have to consider the above in addition to how I’d monetize the app, and whether it involves in-app purchases, or ads, or something else entirely, and how I’d design to deal with piracy so I can gain some degree of benefit from pirates). It’s an app to prove I can code apps.

Since I have an Android phone, at minimum I want the ability to be able to pull out said phone and demo the app right in the interview. That means I need to code an app that runs on Android. (Whether or not I use something like PhoneGap to try and make something that can also be taken to other devices is another issue entirely.)

Even in its purest form, the app saves a certain amount of data, even if it’s just saving a high score or which characters have been unlocked. Since I don’t have accounts of any kind set up on the comic site (or want to tie them into twitter / facebook), the simplest, “cheapest” route is to make a native app of some kind that allows me to store this information on the user’s phone and not worry about the rest. If it didn’t save this data, making a website for the game would be more plausible.

Site Map for lastres0rt.com

lastres0rt.com Site Map

It’s a rough map (I’m not about to draw in 300+ circles for 300+ comics!), but this covers the general site architecture for lastres0rt.com.

Mostly, I wanted to see if there were any pages that no longer made sense to include inside the site navigation (which is important, as removing just two pages would simplify the mobile navigation by a row!) and figure out where things could be simplified or improved.

If nothing else, simplifying the site navigation would reduce the number of potential dead-ends in the site, as well as showing off more of the comic itself!

While I’m not sure about removing the links page entirely (especially as the site navigation uses it as a way to link to social media accounts) I found two pages I could remove — namely, the slightly redundant “about” pages! (Having an “About the Artist” page is valuable enough, but the other two pages in that branch? Cruft.)

The Rough Site Map

Sketchups of the Last Res0rt Mobile Wireframe

lastres0rt.com Wireframes

Personal projects never die!

The mobile world moves fast, so a year after redesigning lastres0rt.com is enough time to go back and see what can be improved upon let again — yes, the comic itself is always going to be front and center, but the better the site’s interface is, the more likely I can convince folks at conventions to start reading the comic right away (because they can go on their smartphones and tablets!), rather than causing them to decide “Oh, I’ll do it when I get home” and losing that initial interest.

Part of the work is done as the site is still responsive (and I went through some of my rationale for that before), but issues still remain, especially when I get feedback like:

  • “What is this?!” Advertising around campus (and elsewhere) still reveals that a certain level of confusion is high as to what Last Res0rt IS, before folks even go to the site (and sometimes even when they do), because the were expecting a band, or a tv show (certain military dramas aside) instead of a comic. I’m not sure how much of this is a certain level of difficulty with reaching people in general, or…
  • “I don’t know what it is, but it doesn’t look like something I’d like!” There’s always that delicate balance between what people are familiar with (and won’t reject for being too weird) and what is TOO familiar (and thus looks like a “ripoff” and ends up similarly repulsive). I hate to go back to the old “furry” well, especially with the recent success of My Little Pony: Friendship is Magic proving that the right work will get past these concerns — but it has to reach a certain level of critical mass first!

So, some changes I’m keen on making to the system:

  • Improving the Comic Navigation to make larger targets for touchscreens — I’m debating whether or not “Comments” needs to be included in the same line with the navigation vs. below the navigation, even if it does tidy things up.
  • Doing more with the “Title” Header — either to better explain the site or to provide some level of additional navigation / customization. This is more for the purposes of a desktop redesign vs. a mobile redesign, but since the site is responsive, we still have to consider it in light of how that might affect the mobile experience.
  • Design / Branding Review — the site’s changed a bit on even a slight level in terms of how colors are arranged on the site, which parts of the site are what color, etc. — and some of that has to be re-evaluated while we’re making all these changes. The site is usable, clean, and fast-loading, but not necessarily “pretty” in the typical web-design sense. It gets the job done, and not much else.

1" Buttons of Last Res0rt's logo, "Cha0s"

Last Res0rt’s “Cha0s” logo

Even when starting Last Res0rt, one of the earliest things I did with the comic was designing a logo for it — which made sense, as even at that point there was some understanding that the show within the comic, if not the comic itself, would need a logo in the long run.

What’s followed from there is one of my most enduring images, with the logo itself having a surprising following — fans at conventions would be more than happy enough just to get merchandise with the logo on it — to the point that one fan has already has a tattoo of it!

I’m still wrapping my head around that one.

The main construction of the logo — besides the Cha0shead itself — is a series of concentric circles and arcs, with segments where certain parts jut out a little more / less than others, giving the illusion of an impact crater from ammunition, or a global city with skyscrapers jutting out.

Inspiration

Cha0s is slightly inspired by the logo for the video game series Gears of War, featuring a skull inside of a cog, and the chao from Sonic the Hedgehog, with a pointy head / skull.

Process

The original logo was drawn up in Flash MX — my primary vector software at the time — which meant the original was soon lost and I ended up retracing it over again in Illustrator.

The logo was revised in 2011 to clean up some initial “mistakes” made with that retrace, including some off-kilter arcs and a recentering of the Cha0shead within the logo.

Variants

In the webcomic, the Players Mob wears a version on their suits that consists of a cog ring around the Cha0s symbol.

The New "Clouds and Trees" Logo

Clouds and Trees logo

Clouds and Trees is a consulting blog; the site’s name is a reference to the analysis “Cloud” and “Tree” charts that make up much of the problem-solving process.

The logo uses a more literal combination of images rather than incorporating aspects of these charts, in the interest of providing a cleaner logo.

Initial Prototypes

Prototype "Clouds and Trees" Logos

Three distinct versions of the logo were developed as prototypes; of the three, the last one was given the green light to go ahead and refine, keeping the “handwritten” look but with a less “scribbly” overall feel.

Second Round Prototypes

Refined Prototypes with Different Fonts

This round was “closer, but not quite” — the words weren’t supposed to touch the  “art” sections, and the curlicues from the original sketch had to be removed to further distinguish them from the words and clarify the logo. Along with a change in font face, these edits made their way into the final version (shown above).

The Online Portfolio of Rachel Keslensky