Week 9:
Final Asset Creation

Thursday 28th April 2022

WEEK 9 -

TO DO: DESIGN AND DEVELOP USER INTERFACE & REDO SNOWFLAKE DESIGN

 

PURPOSE FOR ASSET CREATION

After a series of testing and with new changes to the program, we were informed by James that we needed User Interface, specifically a 'begin' button to start gameplay as the program now requires this for the server to start. In addition to this, we evaluated the need for a 'pause' button during the game, which solved the issue for players to have to hold their hands up high in order to guide the bird throughout the entire experience. This could eventually become exhausting. As well as this, after reviewing our game versions, Kiera and I commented on the appearance of the snowflake design, being a little bit faint and too thin. Because of this, I plan to recreate the snowflake design and have a series of ideas to test with this afternoon.

WHAT WILL I BE DOING?

Today, I will be gathering mood-board inspiration for both UI icons and drawing up concepts for potential design ideas. I will also be recreating my previous snowflake design similar to how I did previously. During the Easter Holidays, I sketched some ideas for UI without an idea of how they might be used, but today I will be refining these concepts as we have found a use for them in-game. I am hoping by the end of today I have two refined and finalised User Interface Icons that I can edit on Photoshop ready for implementation into the environment on Friday 29th April. 

GOALS FOR THE DAY

Create and design two User Interface Icons, to enable players to start the game and pause whenever they need. Recreate the final design for the interactive snowflakes.

MINI PLAN

Thursday 27th April

  1. What's the purpose for the UI? / Design Choices.

  2. Inspiration mood-boards, reasons for choice.

  3. Concepts & Design!

  4. Recreate Snowflake Design.

TASK 1

WHAT IS THE PURPOSE FOR USER INTERFACE?

TO DO - Identify purpose for User Interface icons.

 

DESIGN CHOICE

One of the most important aspects of our game is that it is not challenging or requires too much thought from players. Because of this, we made the decision early on to avoid too many game elements and disregarded the need for User Interface. However, after playtesting a few weeks ago, we came to the conclusion we needed a 'Pause' button to allow players to take a break during the game if interaction became too tiring or repetitive. We didn't want players to feel as though they were forced to continue with this when they felt like they were struggling, so we concluded that giving them the opportunity to pause gameplay would be best. In addition to this, because of changes to the program, James informed us that a 'Begin' button would be necessary to start the server, so this is on the list of UI too.

UI TO DESIGN

  • Pause Button - To allow players to pause during gameplay.

  • Begin Button - To allow players to begin playing.

HOW WILL PLAYERS INTERACT WITH UI?

As our method of interaction is gesture control, it will be required for players to use their palm to guide the bird to the Pause button, similar to how they'd interact with the snowflakes. Players will be able to press play with their palm motion too.

TASK 2

DOCUMENT INSPIRATION MOOD-BOARDS

TO DO - Gather inspiration around the design for User Interface

I feel the UI would work best with a simple and clean design, as it will be layered on top of the hand-drawn environment and we'd ideally like these icons to stand out against this. I think it could be great if the design of these icons were fun and represented the idea of getting away, on holiday or a quick trip abroad! I've documented my ideas in a Pinterest board and will progress by sketching up concepts for these two icons.

INSPIRATION MOOD-BOARD: ICON INSPO

Board Link: https://pin.it/4SaRktG

Screenshot 2022-05-08 at 16.08.05.png
  • Travel icons

  • Suitcase

  • Boarding passes

  • Tickets

  • Tea-cups

  • Plane

  • Camera

  • Glasses

  • Sun

  • Globe

  • Location icon

  • Map

DESIGN CHOICE

The appearance of the button doesn't matter as much as the way players will interact with it and its purpose, but it's important to keep the art style consistent and design something that is still intuitive and relevant. Because of this, I pinned different icon ideas for the 'Begin' and 'Pause' button, being relevant to the idea of travelling or taking a trip abroad. These icons include planes, suitcases, tickets, boarding passes and cups of tea. A cup of tea represents winding down for a lot of people. A warm beverage in general symbolises this idea of having something warm, comforting and homely. This could be a good indication for taking a pause during game too - this also corresponds to our recent sticker design! We are also required to have a 'Begin' button, and I thought of the idea for a small suitcase, to represent the idea of getting away or taking a quick trip into somewhere far from reality.

TARGET AUDIENCE

Taking our target audience into consideration as well as the purpose for the game, it would be easiest to use an icon that clearly represents its use, and may also have to use text to do so too. This is because during moments of anxiety or stress, understanding the most simple things can sometimes be too difficult and require too much from people, so our game shouldn't require too much thought or understanding from players in any sense. Our player experience revolves around this, and was designed in a way that keeps all these factors in mind. That being said, I've considered the appearance for our UI and have begun to sketch a series of concepts to further visualise this.

TASK 3

CONCEPTS & DESIGNS

TO DO - Use inspiration to create concepts and final designs for the UI!

TO DESIGN:

  • A Begin Button

  • A Pause Button

USER INTERFACE DESIGN

SOFTWARE USED:

  • Adobe Illustrator

  • Adobe Photoshop

PROCESS:

During the Easter Holidays, I began to sketch potential UI designs which I think will work great with what we are trying to achieve. I then experimented with different typefaces as I believe using text to indicate what the button does will work better rather than leaving it purely to representation. I refined these designs and began to edit them on Adobe Illustrator. Kiera kindly scanned the drawings in for me, alongside the final environment designs, and I was able to adjust the brightness and contrast of my drawings to make them appear cleaner and more refined. I edited the tint of the buttons too which I plan to test with overlaid on top of the environment, to judge its appearance and see what works best. After doing this, I used our dedicated typeface and essentially turned my designs into User Interface! I cut them out in Photoshop and forwarded them to Kiera

CHOSEN UI DESIGN

IMG_3397.HEIC
IMG_3399.HEIC
Screenshot 2022-04-29 at 11.24.02.png
Beginbutton.png
pausebutton2.png
beginbutton2.png
finalUIpause.png
finalUIbegin.png
pausebutton.png
IMG_3398.HEIC

NEXT STEPS

To complete asset creation, I am set to recreate and refine the snowflake design, taking a different approach to last time.

TASK 4

TO DO - Recreate and Refine the interactive snowflake design.

 

WHAT WILL I BE DOING?

Using my inspiration documented from my theme research and previous asset creations, I will be re-designing the snowflake which will essentially be the interactive elements in-game, which players must hover past in order to collect and trigger music. I plan to recreate this design with a different approach, this time, using Illustrator!

SOFTWARE USED:

Adobe Illustrator

PROCESS:

I started to create different snowflake designs on illustrator using and combining different geometric shapes. I then adjusted the colours of these snowflakes, experimented with gradients and adjusted the opacity. This left me with a good range of different snowflake designs which I plan to test with on top of the environment to decide between which works best. I adjusted the position of the gradient, which resulted in darker outlines and lighter centres, which I think could work nicely. I also experimented with contrasting colours, and made the centre of some snowflakes different to the outline, which I liked the look of too.

snowflakerecreate.png

REFLECTION

The final verdict will come down to asset testing and reviewing what they look like overlaid onto the environment however, with an understanding of its appearance already, I feel the more greyer toned snowflakes will work best to tie everything together nicely. Our environment is purely hand-drawn, with a traditional greyscale art style, therefore, one of these designs I believe would look most effective.

SNOWFLAKE FINAL.png

NEXT STEPS

Next steps for User Interface design and my new snowflake design, will be to review the design alongside the other assets we have produced, to evaluate the consistency of our chosen art style and review its overall appearance in the space. As I have made a handful of UI designs, it'll be best to experiment with these before choosing the final one. Once we have done this, Kiera will take hold of the icons and implement them into the servers, programmed with their dedicated purpose.

 

To finish the day, I will be reviewing the assets in the space and taking note of which works best.

 

Asset Review

  • Instagram
  • Twitter
  • LinkedIn