Skip to content

Win Screen Design

Noland edited this page Oct 3, 2022 · 5 revisions

Sprint 3

Overview

The idea behind the victory screen is to show the player winning (having successfully completed the game) when the character jumping from the manhole cover in level 2. And asking whether the player want to replay the game or quit.

Inspiration of the initial design

Inspiration 1:

https://dribbble.com/shots/3378170-UI-Win-Screen#

inspiration1

Inspiration 2:

https://www.freepik.com/premium-vector/pixel-game-win-screen-retro-8-bit-video-game-interface-with-you-win-text-computer-game-level-up-background-vector-pixel-art-illustration_26840031.htm

inspiration2

Inspiration 3:

https://www.123rf.com/photo_103826176_game-over-pixel-art-design-with-city-landscape-background-colorful-pixel-arcade-screen-for-game-desi.html

inspiration3

First stage: Sketching

Win screen design concept: With wrench and hose elements plumber, water represents skin Atlantis, the hanging chains are designed to represent prisons, clouds represent of the sky (the sky that emerged after Atlantis was successfully skinned).

sketch

Second stage: coloring

According to the original design concept and the color scheme of the whole game, the color is located in blue and purple. Also change the position of the middle circle to the center.

draft

Thrid stage: Transfer to pixel art

Two pixel drawing drafts are available for user testing (Outline version and no Outline version). The final design needs to be refined based on the results of user testing.

No Outline version:

win screen

Outline version:

w2

Four stage:Font style

Three font styles are prepared for the user to choose which font style will be rendered on Win Screen. https://www.dafont.com/bitmap.php?text=VICTORY

Font Style 1:

https://www.dafont.com/camellina.d3583?text=VICTORY

1

Font Style 2:

https://www.dafont.com/hewett-tsoi.d4888?text=VICTORY

2

Font Style 3:

https://www.dafont.com/david-fens.d5063?text=VICTORY

3

Fifth stage:The final version of win screen

Iterate and refine win screen designs based on user test results. And, after discussing with the team, we decided to change "VICTORY" into "YOU WIN". This will give us a more bang effect.

final version

Win Screen Sound

To be tested in sprint 4, added a flush sound, similar to what you would hear when the final plug is pulled. This is under the creative commons 0, no copyright.

Flush Sound

Clone this wiki locally