The Secret of Monkey Island:SE powered by InstantAction

Since InstantAction technology allows games to be played inside a web browser, why not integrate one of our popular games with Facebook’s extensive social network?

The Facebook integration of PlayLegions was much more in depth than the version on PlayLegions.com. Users could navigate through a tutorial and many different maps, and routes. Also, the game is integrated with Facebook’s user accounts and social feed system. Our goal was to make it simple for users to invite and challenge their friends in Legions racing mode. Check out some of the screenshots on the right – or add the app in Facebook.

Here are some of my other Garage Games web projects:

• Instantaction.com (My portfolio link.)
• PlayLegions (My portfolio link.)

PlayLegions is a single player version of the popular InstantAction game Fallen Empire: Legions. One of our key goals with PlayLegions was to streamline our design and help users get directly into a game without having to register.

Any game powered by InstantAction technology first requires a user to install a browser plugin. PlayLegions was designed to make this process as straightforward for the user as possible. For instance – the home page was designed with a clear call to action, a simple plugin install process, and no account registration or login requirement.

One key change from InstantAction was switching from a fixed dimension site window – to a design that could support extended vertical pages, similar to more traditional websites. Each major part of the page is broken into modules. This allowed us to work on these pieces individually, while making them easy to rearrange to fit a pages specific needs.

Here are some of my other Garage Games web projects:

• Instantaction.com (My portfolio link.)
• PlayLegions Facebook (My portfolio link.)

The first project I worked on for Garage Games was (and is) InstantAction. InstantAction is basically a game console, similar to Microsoft’s XBOX, or Nintendo’s Wii, that you can load up in your web browser. Launching in early spring of 2008, InstantAction now boasts more than 2 million registered users from all around the world.

The InstantAction console is a complex AJAX web application. Though the application is built upon many technologies – I worked primarily with HTML, CSS, Javascript, and some PHP. I worked between the web design and the development teams to integrate our designs into the web application.

One of my first projects was applying the styles to the InstantAction messaging system panels. From there I moved on to build the layout and styling for the various game interfaces. Each game had it’s own interface in the web where the user could configure the game settings (such as level and game mode) and chat with other members of their party, before launching and playing each game.

I also helped build and integrate InstantAction’s store, game leaderboards, as well as social media and community features.

Though I primarily worked building HTML and CSS structures, I also had the opportunity to illustrate an avatar set which users could purchase.

InstantAction was a great opportunity to work directly with other designers and developers to pioneer a cutting edge web 2.0 game platform.

Here are some of my other Garage Games web projects:

• PlayLegions.com (My portfolio link.)
• PlayLegions Facebook (My portfolio link.)

With a company motto like “Refuse to Follow”, BowTech’s website ought to reflect a step forward into the unknown for the archery industry. Their new website utilizes many cutting edge web technologies that help overcome some common web design issues.

One of the first challenges was finding a way to tie all of BowTech’s websites together into a cohesive family. I came up with the idea of a universal navigation bar that would be included at the top of every page. Each bar would have many similarities but also have a sub menu that was brand specific. This way, users would become familiar with a universal navigation scheme, but it would present them with relevant options dependent on their location. I also included a way for the a user to preview where some of the main links would direct them.

Another challenge was finding a way to present a large amount of information without cluttering each page and dramatically increasing load times. To solve this problem I implemented a slick javascript plug in called Thickbox. Thickbox allows content to be loaded when a user chooses to view it (click this link to see Thickbox in action. I upgraded this site with FancyZoom) rather than on the initial page load. Also, Thickbox presents the information in an aesthetically pleasing overlay format that helps a user to focus on the content they are requesting. This dramatically cuts down on the loading time for users.

I also helped design and deploy a new weblog for BowTech called BowTech Live. (You can read more about that project here.) BowTech Live was designed with the idea that it would help drive repeat visits to BowTech’s website as well as allow us an easy and organized format for posting information. The best advantage of BowTech Live is that it allows users who have little experience with HTML to actively contribute content to the web.

Currently, BowTech has four major brands, each with their own website:

• Bowtecharchery.com
  
• Diamondarchery.com (My portfolio link.)
  
• Strykerxbow.com (My portfolio link.)
• Airowgun.com (My portfolio link.)

During the planning stages for the new BowTech website, I thought that a powerful way for us to reach our community of bow-hunters would be through the use of a blog. What draws people to websites is changing content, and that is exactly the functionality that a blog allows for. Plus, a blog also keeps a large amount of information organized. This is helpful because any of BowTech’s websites can link to a specific category of information. Also, blog interfaces (here I used Wordpress) offer very user friendly CMS‘ so that people on staff can update the site with content without having to know a great deal about HTML and web programming.

In the end, the BowTech Live blog brings back a lot of returning traffic to the BowTech website.

Diamond Archery is one of BowTech’s brands. This website was designed to convey a sense of value similar to a jewelry commercial. Similar to the BowTech website, the Diamond site incorporates

some fancy design elements. The universal navigation is present at the top of this site, tying it to the BowTech family. Also, many of the bow pages include the AJAX loading feature that strips down the loading time of each page while reducing clutter in the design.

Stryker is the name of BowTech’s crossbow line. The new Stryker website accomplished many technical achievements. I wanted to design a site that had the advanced animation and features of a Flash site, but only use standard XHTML (with a little help from JavaScript libraries).

Initially I used the script.aculo.us library, but at some point I discovered the jQuery library had several more desirable features, so I switched the site over to it. Using jQuery allowed me to animate parts of the user interface as well provide a clean way to view image galleries using the Thickbox plugin.

With the Stryker site, I introduced BowTech to the advantages of using some of the power of current Web 2.0 services. For instance, BowTech is now using Google Video to host and stream video content on their websites. This provides visitors with quick and simple access to advanced multimedia features, while reducing the amount of back end work that BowTech needs to do in house.

The Airow Gun website was the first site that I created for BowTech. We had a new product and we needed a site up quickly that showed off both versions of the Airow Gun (Paintball and Pellet).

A lot of effort went into the illustration and creation of the graphics for this site. I even created a new technique for painting/illustrating custom paint-ball splats in Photoshop for this site.

The Airow Gun site incorporates javascript libraries for animation and Google Video for embedded video content. I am currently working on an exciting new update for this site. I will post the new site information as soon as it goes live.

The Disciplines of Grace blog was designed to coincide with the launch of a book/journal of the same name.

I designed a journal for First Baptist Church were people would be writing daily about certain things they had read and I thought it would be interesting if people had a way to see what the church staff were writing about. The perfect solution was a blog where they could have multiple staff people posting entries throughout the week.

I created the design to look similar to the book and to have an old vintage letter look.