About ASTV: Game Concept

In June 2023, the sequel to Spiderman: Into the Spider-verse (ITSV) is released, re-igniting my obsession with Miles Morales. Across the Spiderverse captivates me with its diverse art styles and storytelling techniques. I craft a few screens—character selection, title, loading—with the goal of sticking to each universe’s unique style.

Skills: Visual Design, Prototyping, Figma Animations

Approach
Visual Design professor tasks me with designing a prototype showcasing visual elements like font, color, and animation

Solo Project

Tools
Autodesk Sketchbook, Figma, Pen and Paper

Title Screen (2).png
Main Menu (1).png
Miles (1).png
Miguel.png
Spiderpunk.png
Pav.png
Location Selection - 1.png
Loading Screen (1).png

CAUTION: There is flashes of light and graphics used in video

Understanding ASTV

The first step to creating a prototype inspired by ASTV is to understand the inspiration. It goes beyond merely watching the movie or reading the synopsis; it involves grasping the rationale behind the visual decisions made by the creators. What sets the film apart is its use of six distinct art styles to evoke different universes' atmospheres. This bold approach, normally avoided by animators and designers, surprisingly results in purposeful, beautifully chaotic visuals. Each universe's textures and colors serve a unique purpose, adding depth to the characters' personalities and stories.

Sketches and Brainstorming

To begin bringing these screens to life, I gathered references and sketched out my ideas with pen and paper. While sketching the character selection screen, I experimented with the layout and positioning of elements, aiming for a standard yet unique design reminiscent of screens from games like Injustice and Valorant. However, I encountered my first challenge during this process, which persisted into my first iteration—finding the balance between convention and the distinctive styles of ASTV.

Challenges and Iterations

ASTV: Game concept went through three iterations with more screens added during the final one. 

First Iteration

My first iteration had potential but it did not keep the original story’s intentions in mind. I gave all universes the same font and style for uniformity. This takes away from the character’s backstories, personalities, and lifestyle. As I said before, ASTV did something most designers may shy away from–taking risks by combining a variety of textures, colors, and other visual elements. Each universe had a uniqueness to it and this iteration zapped the original feel out of it. For this reason, I decided I needed to go in a different direction. 

​The Issues:

  • Originally, gave all universes same font and elements for consistency -- alters narrative portion of design

  • No personality, too conventional

Second Iteration

In this iteration, I decided to take a bolder approach by incorporating elements from each character's story into their respective screens. I changed the typography and style of each character's name to reflect their narrative better. I also experimented with using power icons from Insomniac’s Spider-Man game, but they seemed out of place in their original state. Feeling that something was missing to truly enhance the design, I began exploring animations and audio to convey the story better and engage players. With these considerations, I proceeded to my next iteration.

Key Changes:

  • Gave each character name a different font, as well as altered the style of their screen

  • Added elements that showcased their personality/lifestyle such as spray paint, torn pages, stickers, etc.

  • Added power icons from Insomniac’s Spider-Man game

  • Painted the missing part of Spiderpunk’s hair and arm to complete his character in Autodesk Sketchbook

Third (and Final) Iteration

For this iteration, I focused on improving the character selection screens by adjusting the layout to strike a better balance between convention and the movie's ambiance. I also enhanced player feedback with hover effects and animations. Redrawing the power icons in Figma with the pen tool, I added a glowing effect to enhance their visual impact. Additionally, I introduced a title, main menu, and loading screens featuring immersive audio. The main menu offers simplicity with a player card indicating their progress level. The loading screen provides helpful tips for upcoming fights. Music on the title and loading screens enhances user immersion and excitement. The location selection screen utilizes typography to convey the distinct vibes of each universe. Overall, these enhancements aim to heighten the user experience and excitement as they immerse themselves in the spider-verse and select their characters.

Key Changes:

  • Rearranged layout of character selection screens

  • Added more player feedback such as hover effects and animation

  • Redrew the power icons with the pen tool in Figma

  • Added a location selection screen with a countdown

  • Added a title screen, main menu screen, and loading screen

  • Added audio to title screen and loading screen 

Lessons Learned🤯

Overall, I had a lot of fun crafting this and learned a lot about storytelling through visual design. It’s amazing how much the feel and tone of a story can change based on something as simple as color or font decisions. 

I Learned…

  • That understanding the “why” behind decisions is essential to creating enjoyable visuals and experiences

  • To know when it’s necessary to abandon ideas and when to iterate on what you’ve done

  • Some new animation sequences and effects within Figma

  • I still need to purchase a PS5 to play Spider-Man 2…