Level 4
The theme of the Levels was the Windows OS and to show progress it went across the various Windows platforms from 98 to the upcoming Windows 11. In order to appreciate the theme of Windows 11, an OS which currently in beta testing around the world. For this we have used some of the released information and other reviews from testing user about the webpage.
We found an image of the various backgrounds and their average color scheme.
This was the basis towards our color scheme for the level.
To show progress we have a gradient going left to right of blue (#2E76BC) to dark purple(#6A1B57).
Next Step was creating the various instances to create the feel of the Windows 11 and the glitching.
The original idea was to have three elements: the start menu, a glitching effect, and finally a wierdmaggedon-esk cross which acts as view into the computer. For reference of the wierdmageddon cross (its from Gravity Falls).
The Start menu looks has a simple rounded square with search functionality. This is how we adopted the start menu. Example:
Then the error messages will pop-up on the top left again with a rounded edge. we will adopt this to create an error effect. The repeated pop-ups is common item used to show errors. Some simple changes to the windows security to create a frightening effect. Finally we have the wierdmageddon cross filled with ones and zeros to create a computer theme. This led to the first iteration of the background.
After some user testing it was found that the glitching effect wasn't as prominent or easy to understand. Also the icons were a bit bland and was recommended to customise them. Finally the cross was considered as a little irrelevant to the theme.
So the First step in redoing the iteration was working on the glitching and I personally found it a bit bland. After doing some reason I found the effect I wanted to implement was inspired by Doki Doki Literature Club, a game which canonically breaks the game. Example of effect shown below.
To create this effect I used photo shop to create the glitching effect.
After the effect was created, we found that creating a transition effect would create a larger impact. Thus we implemented this to create a fascinating design.
This is now the final implementation. It matches the background and it user tested well.
Next Implementation were the Icons for the start menu. We took inspiration from current and existing applications but redrew them ourselves using the brush tool in Paint.net.
After creating them, we took used Image trace to vectorize them and add them cleanly to the background.
After adding the icons the background, the main concern remained with the cross. Thus we revision was to create the a broken screen but using a broken glass look.
Thus after many multiple revisions of the glass look then moving onto the broken screen look. The Final revision of the background included these changes.
This level was created to be 3000 px so expanding it to 9000 px was a difficult task. To overcome this challenge I chose the most common image attributes/most populated items and then spaced them across the large gap created by changing the artboard size. The randomness of the placement of the self created icons was to demonstrate the destruction of the laptop is its boundaries.
Due to the size of the file we had to crop it in order for it to appear so we extended the height of the art board to allow the less important aspects of the board be cut out.
