In-Game - Setting Pages Redesign

[samgawaran]

Summary

The design was pre-approved by @demiculus during our 1v1. I cleaned up some of the elements used and change some assets to reflect the UI on our other pages.

The initial design was done by Huan here: https://www.figma.com/file/bgi8QryS3z1XUCNKcFotlt/Untitled?node-id=0%3A1

Comparison

• Changed the icon for controls from a Tetris icon to an adjuster_icon
• Made unselected tabs icons use less opacity
• Remove the underline to make it simpler
• Added a button for Quit game. Previous layout don't have a button for it.
• Adjusted font style/size to use our font library

Screens

In-Game Screen / Controls

• Can add/remove other shortcuts in control

Audio / Display

• Music setting will be useful once H5KY finalized the in-game music

Game Info / Quit Game

Rules

• Clicking the rulebook icon redirect to this screen. Same logic with the current one.

Related links

• https://github.com/colonistio/design/issues/172

Submission Checklist

• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewer

@demiculus

[samgawaran]

creating the implementation issue shortly after

[demiculus]

Can you go back to the initial design? Open a new submission.