{"id":562,"date":"2022-07-11T10:40:00","date_gmt":"2022-07-10T23:40:00","guid":{"rendered":"https:\/\/studios.nomoss.co\/blog\/?p=562"},"modified":"2023-12-13T15:22:21","modified_gmt":"2023-12-13T04:22:21","slug":"making-shops-look-good-sea-monkeyszen-aquarium-ui-design-process","status":"publish","type":"post","link":"https:\/\/noblesteedgames.com\/blog\/making-shops-look-good-sea-monkeyszen-aquarium-ui-design-process\/","title":{"rendered":"Making Shops Look Good: Sea-Monkeys\u00ae:Zen Aquarium UI Design Process"},"content":{"rendered":"\n

It\u2019s always exciting to unveil new versions of our game and all the new content we\u2019ve created for it! We recently released V1.8 Sea-Monkeys\u00ae: Zen Aquarium<\/a>, chock full of new games, features and content, as well as a full revamp of its UI design!<\/p>\n\n\n\n

We thought to share a little bit about our process as we did a major overhaul of the game\u2019s interface. Read on if you\u2019d like a peek into how we revamped the game\u2019s UI!<\/p>\n\n\n\n

Step 1: Research<\/h2>\n\n\n\n

The first steps were to do a little bit of research on games that already exist. I recommend checking out Interface In Game<\/a> or Game UI Database<\/a> for examples! Beyond this, I downloaded a few games that were similar in genre, that being pet or aquarium simulators on mobile. I\u2019d like to use this moment to shout out to the gem of a game that is Old Friends <\/a>by Runaway games<\/a>, a studio based in Dunedin, New Zealand! If you\u2019d like to play with old rescue dogs and actually support real-life rescue dogs with games, check it out! Some other games I took some time to play and try out were Neko Atsume, Adorable Home, My Little Aquarium and more.<\/p>\n\n\n\n

\"\"\/<\/a>
Jon’s wonderful video about Sea-Monkeys racing! Who knew brine shrimp swimming along a canal could be so entertaining. <\/figcaption><\/figure>\n\n\n\n

Besides that, I researched the Sea-Monkey brand\u2019s history, aesthetic, and what exactly makes Sea-Monkeys so wonderful. The brand\u2019s franchise is rife with charming oddities: special syringes to pick up Sea-Monkeys, special themed tanks, racetracks (Do check out Jon\u2019s hilariously entertaining video about it<\/a>), friendship lockets for sea-monkeys, and more! Throughout all this, I picked out that the main theme was that Sea-Monkeys, as plain and simple brine shrimp, could be anything<\/em> to the wildest of imaginations.<\/p>\n\n\n\n

With that in mind, I decided that our UI update had to be fun, cute, colourful and reference as much of the Sea-Monkey brand\u2019s silliness and joy! Picking and choosing references to the brand I could make, I set off to set up the base game\u2019s style, with hopes to iterate and improve on it even further in future updates.<\/p>\n\n\n\n

Step 2: Initial sketches of the interface<\/h2>\n\n\n\n

My preliminary sketches were all done quickly on paper, starting with the new shop page as my first feel for the game\u2019s overall style. This is because it\u2019s one of the most complex interfaces in the entire game! These sketches were made to prompt discussion with my team about how \u201cwild\u201d the UI could be in the current alpha version, and were how I went on to decide the rest of the UI\u2019s appearance. <\/p>\n\n\n\n

\n
\"Initial<\/figure>\n\n\n\n
\"Initial<\/figure>\n
Early sketches on paper! These are always helpful to quickly plan out what you’ll be making! <\/figcaption><\/figure>\n\n\n\n

We decided to go with simpler designs, with some decoration in the title sections of each interface. After picking out some themes to work with, I continued to make more refined sketches in Photoshop! You can check out a past blog on the tools we use here<\/a>. The below image shows three different ideas for the long-scroll format of the shop: Wave wall, sunny tent, and hanging boards. The shop awning is a small\/very vague reference to a sea-monkey ad, and we decided to go with it!<\/p>\n\n\n\n

\"Screenshot
Three different themes applied to the shop! We already had a design document to detail the button elements within the shop, so these were an exploration into different “skins”.<\/figcaption><\/figure>\n\n\n
\n
\"An
An old Sea-Monkey Ad! The shop awning design was a very minor reference to this.<\/figcaption><\/figure><\/div>\n\n\n

Next, I had to go about style explorations for buttons within the shop. My aim was to figure out a set and style that would work across all screens and different use cases\/contexts. My line of thinking was balancing ease of use and clarity of information, taking into consideration future updates that would result in special in-game events or deals. (If you’re interested in a brief tutorial on UI principles, check out this guide<\/a>) In essence, I made lots and lots and lots of buttons\u2026<\/p>\n\n\n\n

\"Screenshot
Buttons of different shapes, scale, textures and colours!<\/figcaption><\/figure>\n\n\n\n

With the basic style of the UI established, I continued to create sketches of the UI designs for other screens. I wanted to balance the needs of a mobile game with the retro look\/elements from the sea-monkeys brand, and make the whole game look and feel the same across all screens. <\/p>\n\n\n\n

\"Sketches\/mockups
Sketches\/mockups of all the interfaces in the mobile game!<\/figcaption><\/figure>\n\n\n\n

Step 3: Finalisation and export of UI assets<\/h2>\n\n\n\n

With everything planned out now, I went ahead to create these new buttons and interfaces in Adobe Illustrator! All the buttons, lightboxes and icons were made in Illustrator, heavily referencing the rough sketches I made in Photoshop.<\/p>\n\n\n\n

Some of the more decorative header artwork were hand painted however! For these, I kept the style relatively simple to fit the rest of the UI, with some light imperfections here and there to not look too \u201cplastic\u201d. All three illustrations were constrained by the same colour palette used to make the rest of the game\u2019s UI, keeping the same look and feel as the other vector icons.<\/p>\n\n\n

\n
\"The
Decorative header artwork! Keeping things clean but also slightly handmade.<\/figcaption><\/figure><\/div>\n\n\n

To conclude, UI design is all about balancing aesthetic and accessibility. I hope you\u2019ve picked up something new from this peek into my (rather chaotic) process of redesigning Sea-Monkeys: Zen Aquarium\u00ae! <\/p>\n\n\n\n

\n\n\n\n

We hope this guide has helped! Have a question or want to chat more about game development? Reach out to us!<\/strong><\/a><\/p>\n\n\n\n

Other places you can find us:<\/p>\n\n\n\n