Navigation / Quick Links

• Design Style and Cohesion Guidelines Introduction
• User Testing Atlantis Sinks Game
  • User Testing Summary
• Isometric and pixelated design <--You're Here
• UI Design and Typography
• Main Theme and Cohesion
• Design Style and Cohesion Appendix
  • Collected Feedback from User Testing Session

How to do isometric and pixelated design?

All teams agreed to use a unified solution such as Pixilart. Online, free pixelated art software. If you use Illustrator or any other tools, feel free to do so, however, make sure that they follow these basic guidelines.

Basic example should give you a clue what NOT to design when creating artwork for the game

Screenshot of the Pixilart starting page where you need to specify canvas size and details

Depending on your design intentions (button, single object, terrain, tile, etc.) specify the canvas size, keeping in mind that entire game is 1920x1080px. It would be a good idea to work on a smaller screen or know exact dimensions of an object. The key point however, is to keep consistent tint and shading on all objects in the game. We achieve it through color manipulation. As seen in the below image, the Pillar originally designed by Annabel Kennedy has a consistent shading. It is achieved by replacing pixels from dark to light. Think of it as a circle; starts from dark corners and slowly moves towards the center.

Pillar artwork for the game designed by Annabel Kennedy portrays an example of centered shading.

It is highly advisable to avoid drawing small and detailed elements. In its essence pixelated art is primitive and basic because you are limited to 1 square pixel. Simply put, once you introduce complex designs on to the canvas, they will become blurry and invisible. Below is a collection of different pixelated artworks designed by teams throughout the course. Note the design style - dark to light shading, 1px border surrounding the element, no blurriness.

Artwork produced by designers from different teams illustrate the correct approach towards pixelated design concepts

In conclusion, we hope that we clarified implications with the overall design direction. Next, let's take a look at the typography and UI design