Sonic's Web Publication

Class – Advanced Interface Des.
Teacher – Jennifer Schanen Rider
Timeline – 14 weeks
Date – Fall24

Brief
I was presented with a design challenge to pick a topic and create a web publication around that topic which would feature a deliberate. And my choice was Sonic!
My Role
This was a solo personal project
Tools Used
Aseprite, Figma
Problem
What would Sonic the Hedgehog's web publication look like?

Approach

History & Archive

  • Interactive look into the past, offering both detailed information and multimedia elements
  • A data-rich resource with abstract graphical visualization of the data
Preview of the UI

Features

Timeline & History

Learning about the timeline of the franchise, where it started, and what were the
impactful milestones. After my research I decided to divide this section into the three decades.

Timeline Page

In this page you would basically have the milestones of that timeline and the main important things that happened to the franchise.

Archive

Comprehensive list of all the games and the characters that have been out there related to this
franchise. This page is more of a data-viz section which I thought had a place to be since the game
had a lot of variations, versions and also side characters that were featured in them.

Research

Digging the web and the forums

I spent most of my time exploring the history of the franchise, the weird websites and discussions, watching videos of all the games and trying to figure out SEGA's visual language approach.

Process/Iterations

Iterations and variations

Exploring various different directions for visual language. After the research and explorations I realized
that there is too much of a variety between the visual language of all the games, that was my biggest
insight and "aha!" moment to be able to break free and move on from the iteration phase.

Low fidelity screens

Conclusion

  • Designed a web publication concept for Sonic the Hedgehog as a franchise
  • Defined a visual language for the web publication through various iterations and topic research

Learning Outcome

  • From this project I learned a different and more in-depth approach towoards visual language creation