Devlog 02 — First UI Mockups

With the game’s core loops defined in the last post, the next logical step is to design the User Interface. Before any code is written, a solid UI blueprint is essential to ensure the game is intuitive and the core mechanics are presented clearly to the player.

Design Rationale and First Wireframes

I started by analyzing several successful idle clicker games to identify common patterns in their UI/UX. The consistent principle across the best examples is a clear information hierarchy: the most critical information and actions are always immediately accessible, while secondary systems are tucked into menus.

Based on that research, I created the first wireframes for the main screen of TapTech Tycoon.

TapTech Tycoon's gameplay UI mockup

The layout is designed to directly support the game’s core mechanics:

  1. Top HUD: This area displays the primary resources: Cash, Practice Points (PP), and Reputation (Rep). Directly below is the Focus Bar, the game’s stamina mechanic. Its prominent placement ensures the player can always track their ability to perform actions. Tapping the bar when it’s low is the intended shortcut to the refill menu.

  2. Central Action Button: The large “Click” button is the primary method for earning PP. Its size and central placement make it the clear focal point for the core tapping loop. The label is designed to be contextual, changing from “Fiddle” to “Code” as the player progresses.

  3. Bottom Navigation Bar: The four main progression verbs—Upgrade, Learn, Freelance, Build—are located in an accessible bottom bar. This gives the player a constant, clear view of their primary strategic options for spending resources and advancing in the game.

  4. Ancillary Systems: A stage selector on the right provides a clear indicator of macro-progression (Bedroom → Garage). The slots on the left are reserved for dynamic elements like temporary boosts or special offers, without cluttering the core interface.

Key Takeaway

The primary lesson from this exercise was the importance of designing the UI to directly reflect the game’s core loops. Every element on the main screen has a specific function tied to a key mechanic, which should reduce player confusion. I also picked up some standardized terminology for UI components like “Quips” and “Toasts,” which will be useful when working in the engine.

Next Steps

These wireframes cover the main gameplay screen, but the secondary panels for the Upgrade, Learn, and Freelance sections still need to be designed. The immediate next task is to complete these mockups to create a comprehensive UI flow for the entire Stage 1 experience. Finalizing this blueprint now will prevent costly rework during the development phase.