Skip to content

Clock Design Inspiration & Ideation

Ella West edited this page Sep 22, 2022 · 11 revisions

Page Navigation

Jump to a section or return to the general Day and Night Cycle page here.

Inspiration

Inspiration was taken from various images which incorporated somewhat similar features.

  • A circle clock design was opted for, all the photos incorporate a circular design, this was opted and incorporated.
  • Different colours to symbolise the different times of the day (dusk, day, daw, night)
  • The style of the sailing wheel and the believed Atlantis land design are very similar, able to easy section the quarters for each day
  • Neutral tone for the colour of the clock frame, bright and representative colours for each quarter
  • Sailing wheel could have been possibly retrieved from a shipwreck
  • Smaller circle located in the centre to clearly represent the number day
Screen Shot 2022-09-13 at 11 15 35 am

Ideation

Sketches

Sketches were completed in an effort to brainstorm potential ideas while also understanding how elements of the clock would fit together. The design aimed to encompass a effective, simple, though engaging design - while an important feature of the game, its main goal was to tell the user the time of day.

Screen Shot 2022-09-13 at 10 51 59 am

Initital Prototype Design

Following the completion of the sketches, two preferred styles of the clock were created - stopwatch and sailing wheel. These designs were used for user testing.

  • Gold colour symbolises something to be cherished - treasure.
  • Colours are placeholders to resemble the dawn, day, dusk, and night
  • Bold and large day number in the middle, catches user attention
  • Dark clock hand colour against the gold, constrasts appropriately
  • Stopwatch design may signify a sense of urgency to users depending upon their interaction with the tool, having to complete something within a certain period of time - rush
Screen Shot 2022-09-13 at 11 24 30 am

Final Prototype Design

The two prototypes of clock design (stopwatch and sailing wheel) were presented to users, the sailing wheel was preferred. Further, while the actual design did not see much change, the colour scheme was greatly influenced by the user testing completed on the initial fidelity sprites. The colour scheme allows for the clock to possess a wooden, aligning with the material of an old sailoring wheel which could have been retirved from a ship wreck. A black border was applied to the clock to allow for it to align with the design guidelines, sucessfully matching the other UI elements. The most signifiant addition included a sprite for the boss enemy night, increasing user experience as they try and defeat the enemy in hopes of winning the game. This was something that users expected to happen.

More details of testing, key kindings, and result analysis from all testing completed may be found here: Clock Design User Testing

Colour Scheme

Screen Shot 2022-09-13 at 9 22 21 am

Font

  • Newspaper, size 16 on Pixilart

Day and Night Cycle Sprite(Day 1)

  • Wood texture chosen as a result of user testing
  • Colours changed - Dawn: Yellow, Day: Light Blue, Dusk: Orange, Night: Dark Blue
  • The dailing wheel design was implemented, users preferred this design in comparision to the stopwatch.
  • Sprites are the same except the day number changes: 1, 2, 3, 4
Screen Shot 2022-09-12 at 11 00 51 pm Screen Shot 2022-09-13 at 11 34 16 am

Boss Enemy Night

  • Dark and threatening design, pixel skull in the middle
    • User testing shows that users expect the clock to change for the final boss night - adds to user excitement
  • Red colour symbolises danger, blood, war
Screen Shot 2022-09-12 at 11 03 10 pm

Image Inspiration References

Table of Contents

Home

How to Play

Introduction

Game Features

Main Character

Enemies
The Final Boss

Landscape Objects

Shop
Inventory
Achievements
Camera

Crystal

Infrastructure

Audio

User Interfaces Across All Pages
Juicy UI
User Interfaces Buildings
Guidebook
[Resource Management](Resource-Management)
Map
Day and Night Cycle
Unified Grid System (UGS)
Polishing

Game Engine

Getting Started

Entities and Components

Service Locator

Loading Resources

Logging

Unit Testing

Debug Terminal

Input Handling

UI

Animations

Audio

AI

Physics

Game Screens and Areas

Terrain

Concurrency & Threading

Settings

Troubleshooting

MacOS Setup Guide

Clone this wiki locally