UI Design and Typography
- Design Style and Cohesion Guidelines Introduction
- User Testing Atlantis Sinks Game
- Isometric and pixelated design
- UI Design and Typography <--You're Here
- Main Theme and Cohesion
- Design Style and Cohesion Appendix
Dealing with buttons or text can be a cumbersome task. This section is useful to designers who are working on a user interface for the Atlantis Sinks game. In the essence, when designing a button or introducing a new feature into the game, ensure your artwork is:
- Flat 2D view and pixelated
- Contains black bordering
- Not placed directly on the edge of the screen (Design is a living organism, it needs to breathe. Give it some space around)
- Contains some form of pixelated shading (Use this as a reference)
- Follow the sizing and exporting guidelines
- Tiny objects such as coins, stone, health, wood (main gameplay screen) should be aligned vertically on the left side of the screen on other pages (i.e. amend shop pages)
Let's start with the basic example of the correct shading. As discussed here, it's essential to maintain consistency, thus when designing, for instance an icon, ensure that it adheres to the discussed guideline requirements. As seen in the image below, when producing artwork try to avoid solid coloring and block style design.
When designing an artwork for the UI ensure it adheres to the "pixel standard". Avoid solid colors and block designs. When entities are simply block coloured, the pixelated style is not clear when implemented in game, hence why this is important.
When a new feature is introduced, first identify who is the parent of that particular feature? For instance, icons that allow player to return or exit the page belong to the system, thus they must be consistent no matter of the location. This is because randomly generated color palette can confuse audience and people may interpret the meaning of an icon differently than initially expected. To avoid such interruptions in the experience, use the yellow pixelated back button as a foundation for your design. In addition, always thing about location, the very same "return to main menu" button should be placed in the top right corner of each page. However, it can also be used in other locations where "exit action" is necessary. Keep in mind, that there should be a small space around the button (adding space to breathe).
As originally proposed by Team-10, to produce a design you need to:
- Create a square 64px by 64px canvas in Pixilart
- Draw 1px border using Pencil tool
- Add background color (ensure proper colors are used! remember the "family & child")
- Using the same background color, add shades and tints by darkening and lightning
- Finally add an icon that best depicts its intention
Go back button belongs to the same parent - system design (start, exit, save, return, restart - all belong to one category), thus it is paramount to ensure consistency for an entire family (parent & child inherit the same style).
The above step by step approach on how to design a UI element (originally proposed by Team-10) is highly relevant, it best fits the purpose of designing a new feature. However, if you want to introduce additional element into the existing functionality, that has already been designed, it's best to use existing .pixil files. That way you ensure consistent UI across the game.
Pixilart folder under core\assets\images\uiElements\ contains all source files that can be used to maintain design consistency
As the title entails, primary buttons are main buttons that must be clicked by the player to perform an action (confirm purchase, start the game). In our case the primary buttons in Atlantis Sinks game are menu buttons - usually located in the main menu. They are used to allow player to communicate with the game such as load it, start a new or exit the game. They are comprised of the following elements:
- Black borders
- Contain pixelated shading
- Are one of the following shapes shown below (oval or square)
- Always placed in the center on a brown background
Screenshot of the main menu with "primary style" buttons centered on the brown canvas
Although they do look alike, there are 2 primary style buttons that you need to remember about. As seen in the image below, first is used for the main menu screen. For example, when a new functionality is introduced into the game (Save, Load, Exit, etc.) use the first option. The second option, however, can only be used during the actual gameplay. For instance, when you need to "confirm" the player's choice.
Different "primary style" buttons for both in game and off game screens.
When it comes to color palette ensure that the background of any newly introduced design concept follow the yellow, tan and brown colour scheme only if it belongs to the same category of UI elements. If, however, you are working on a new concept or a feature that has no relationship with other UI elements, then shading and coloring is flexible; however, it should aesthetically fit in with all other pages. As seen in the image below (derived from Jucy UI Sprint 4 by Team 10), artwork produced by Olivia Leighton (Team 10) is consistent with the main UI guidelines (border, size, shading), however the color palette is different. This is because they belong to another category / parent and have nothing in common with "system icons - save, load, go back".
Icon concepts designed by Olivia Leighton adhere to the established guidelines in terms of consistency and cohesion
We adapted the font style guidelines originally developed by Team-10 and updated the requirements based on the current design flaws discovered during the user testing session. Although all adhere to the exact same font style guide, still there are implications in relation to the Textual Hierarchy.
Ensure all headings follow the Textual Hierarchy:
- Not fully capitalised words. All headings begin with a capital letter, followed by lowercase letters.
- Ensure that your texts are one of HI, H2 or Body. All headings should be standard H1 size, all subheadings should be standard H2 size, and any other content needs to be under body (including button text). This is important, as seen in the screenshot below, bad UI can cause frustration and emotional response that would lead to leaving the game. Our job is to offer joyful and memorable experience in the game.
To avoid confusion and bad experience, always ensure to design elements with the proper alignment of the text, as well as correct styling
- H1: Style name; “Title” and .setFontScale(2f) Example of H1 is the ‘Settings’ title on the settings page.
- H2: Style name; “Title” and .setFontScale(1f) Example of H2 is the old ‘Inventory’ heading
- Headings need to be centre aligned.
- Texts that are not buttons need not be in an enclosed box. (isolated texts that are enclosed in boxes appear to look like buttons from user testing)
Screenshot contains example of a situation when appropriate font was used in the wrong style.
In conclusion, now that we've covered high priority design implications that we should try to avoid, let's dive into a final part of the guidelines - ensuring cohesion and theme appropriateness in the Atlantis Sinks game.