Super Sidewalk Slam
Cagefights in the Marvel universe. The web app way.
The Challenge
As a collaborative project, I, along with another designer and some developers, were tasked with designing and building a web app that would let you simulate fights between Marvel characters. We would be pulling the pictures, information, and ability stats from Marvel's very handy online API.
Starting off, we had to make sure the app would be able to:
- Allow the user to search through Marvel's database of characters and view their picture and info.
- Queue any two characters for battle.
- Simulate a fight using Marvel's ability ratings and battle logic.
The development team began to construct a framework with Backbone.js and Node.js while the other designer and myself began the process of developing our visual identity.
Concepting & Design
For a web app about superheroes, the design didn't just need to embrace the comic book aesthetic, it needed to REVEL in it.
Bright, flat colors. Bold text. Large images to capture the eye. The last thing we would let it be was boring.
Wireframes
Thumbnails
Mockups
Main Page
Search Page
Character Page
Matchup Page
Stat Battle
Turn Battle
The landing page had to make an impact, so we chose a big picture with in-your-face text. Initially we had calls to action over the image, but since they were mirrored in the buttons at the top, we thought it was a bit redundant.
This page would be the central way of finding heroes, with the most frequently chosen characters as suggestions. It would also be the portal for viewing profiles, which you'll see next.
The full API would be leveraged here for character picture, abilities, and personal history. Initally we wanted to use some data visualization through D3 for the stats. Then, we remembered the old collectible cards in foil packs from the 90s and decided that kind of look would be a great way to present each character. Plus, it would mesh well with our overall design.
Some users would want to go straight to the fight, and this is where they set it up. The overall thought here was the selection screen for fighting video games. By clicking on an empty portrait, they could search for a character and add them. Even though they were placeholder images for the character portraits, they still needed the same energy as the rest of the site.
Finally! The fight is on! One of two types of fights, actually. The Stat Fight option runs a quick series of fights with the battle logic and records the victor. For those more interested in how a favorite hero might stand up if they had enough chances against a particular foe. Visually, this and the next page are the central pieces of the app, so the background stretches to the full width of the screen to set it apart. The shadows beneath each character provided a hint of dimensionality, and there is very little on the page to distract from the main event.
Now this is probably what you had in mind! A single turn by turn battle with one victor and one chump. Each attack (or miss!) appears at the top of the message window so the user can keep their focus on the characters and scroll through after the fact.
Markup
The meat and potatoes of code to the spice of design. We designers built out templates for each page with HTML5 and CSS3 using SASS. The developers took those and fit them into their frameworks.
There was a lot of back and forth during this process. Naturally, some things didn't work quite the same as we had built them, so we had to rework them around how the frameworks split each page into sections that were loaded separately. Not too difficult, a little tedious, and immensely educational.
Care to take it for a spin? By all means, be my guest:
LIVE SITE