Fuguo's
Media Space

Week 6: Game Refactoring and Naming, UI Design, Midterm Demo, and more Readings

Mar 10, 2025

Blog series: Bazaar.log (IDM Thesis Project)

Based on my revised game storyboard created last week, I modified my game structure this week, created more UIs for some key moments in the Internet and open-source history, and started working on my midterm demo, which will consist of UI for two eras: 1970s to 1990s, and 1990s to 2000s. I named my game 'Bazaar.log' for its open-source theme and history-based storyline. Lastly, I read more interesting articles during my research and have some interesting observation to share.

Link to updated UI design
Link to demo

UI Updates

Slide 1

Pre-Internet age UI design, bootup screen imitating a CRT style screen. Users can only interact with the program by typing any of the available commands.

Slide 2

Pre-Internet age UI design, frame 2. Access list of available commands via 'list' command.

Slide 3

Pre-Internet age UI design, frame 3. Read news of the year by typing 'news' command.

Slide 4

Pre-Internet age UI design, frame 4. In the calendar, player will be able to change the year to previous or next, moving back and forth in time.

Slide 5

1990s UI design, blue screen boot up.

Slide 6

1990s UI design, adopting the UI styles of early browsers and online services. Black, white, and grey are most commonly seen in these early browsers.

Slide 7

UI design for 1995. Microsoft Bob was a short-lived program with a colorful pixelated UI that intended to help first-time computer users familiarize themselves with computer functions. While it was a commercial failure, I decided to include this interface in my game to show the vitality, messiness, and bravery of the 1990s' experiments with the Internet.

Slide 8

UI design for 1995, with marks of hidden tabs. When player flips the calendar to 1995, the interface will turn into the Microsoft Bob version, with function tabs hidden in the colorful scene.

Slide 9

UI design for the 2000s, frame 1. Stepping into the 2000s, more people have PCs at home, and more experiments are happening on the web. This UI adopts Windows XP style, as this is a classic and memorable OS design among people I interviewed. This UI will use Tahoma, the same typeface as Windows XP's.

Slide 10

UI design for the 2000s, frame 2. Some characteristics of websites at that time are: 1) neon-color text accompanied with highlight, 2) images and other multimedia content became available on webpages together with text, and 3) tile layout of images as website background.

Slide 11

UI design for the 2000s, frame 3. Player needs to find the calendar in the UI to move back and forth in time.

Slide 12

UI design for the 2010s. In the 2010s, Internet culture quickly evolves. Memories of that time include memes, slang, bright colors, pixel art, low-quality images, and more. As for web design, many websites preferred text and images in grid layout with borders, which make a webpage look like a digital copy of newspaper. Also, Flash was applied almost everywhere on the Internet for interactive content creation display.

Slide 13

UI design for the 2020s. Websites became minimal in style. We see everything centered, with less text, more images, and smooth interactions by clicking and scrolling. Cookies became prevalent. Online accessibility matters.

Thumbnail 1
Thumbnail 2
Thumbnail 3
Thumbnail 4
Thumbnail 5
Thumbnail 6
Thumbnail 7
Thumbnail 8
Thumbnail 9
Thumbnail 10
Thumbnail 11
Thumbnail 12
Thumbnail 13

Game Updates

I added WinBox component to the 1990s interface. It is very flexible for showcasing the game content.Available functions in this interface: 1) open windows by clicking the buttons on top right corner, 2) read content in each window, including working on code in the dashboard window and browsing through calendar, and 3) after turning the calendar from 1990 to 1989, the interface will change to CTR mode.

I also name my game as "Bazaar.log". This name comes from the book title, The Cathedral and The Bazaar, in which "Bazaar" refers to open-source environment. The ".log" might remind the viewer of the type of file that records events in a computer. "Bazaar.log"nicely summarizes the theme of my game and its history-based story.

Link to demo

Readings

Next Steps

  • Finish the logic from 1970s to 2000s (two eras).
  • Have some pseudo content in the UI to present the game story idea.
  • Prepare materials for mid-term demo.