Design Writeup (300 words)
Adapting Colony Not Included from mobile to tablet and desktop required a deliberate focus on layout scalability, consistent branding, and user accessibility across multiple device types. The app’s mobile-first design was established through wireframes and refined in high-fidelity prototypes using Figma. These were then duplicated and reformatted into tablet (iPad Mini 5) and desktop (16:9 aspect ratio) frames.
Rather than redesign each screen from scratch, I preserved the visual language and interaction model used in the mobile version. This ensured that returning users would experience familiar workflows regardless of platform. Navigation elements were spaced out, containers resized, and button tap areas expanded. On larger screens, layouts were adjusted to avoid excessive white space while retaining a clean, grid-based hierarchy.
The tablet layout offered a more generous touch interface, while the desktop adaptation emphasized keyboard/mouse use and broader visual separation of content areas. A consistent colour scheme and typography system was maintained throughout to unify the brand identity. The hamburger menu was retained across all platforms for consistency, but on desktop it expands into a persistent sidebar on wider layouts, reducing clicks needed to access tools.
Importantly, the larger screen sizes allowed for more visually dense storage and interaction sections. Pages like Geysers, Plants/Critters, Setups, and Duplicates include longer scrollable lists and multiple data-entry points. This is viable on tablet and desktop, as storage limitations and visibility constraints are less of a concern. The app now supports heavier data interactions while staying readable and uncluttered.
As a technical companion to Oxygen Not Included, the app avoids overstimulating visuals in favour of simplicity. The visual style appeals to users who value clarity, usability, and precision—hallmarks of the game’s own player base. Figma’s prototyping tools allowed me to test layouts and link interactions in real-time, ensuring the app adapts cleanly across contexts.
Figma Link
References (Harvard Style)
Klei Entertainment. Oxygen Not Included – Official Artwork. Available at: https://www.klei.com/games/oxygen-not-included (Accessed: 19 May 2025).
(Used as background for login/sign-up mockups.)
Klei Entertainment Wiki. Hydrogen Vent Image – Oxygen Not Included Wiki. Available at: https://oxygennotincluded.wiki.gg/wiki/Hydrogen_Vent (Accessed: 19 May 2025).
(Used in geyser detail wireframe.)
u/JosephJoestarisaG. (2024) Oxygen Not Included Promotional Fan Poster. Reddit. Available at: https://i.redd.it/5lrspc7vqcvc1.png (Accessed: 19 May 2025).
(Used in tablet login screen background.)
Leave a Reply