Game UI& mapsfor Roblox

1. Brief and referencesDefine what the screen has to achieve and collect references from shipped games in the same genre.
2. StructureGroup the content, choose one primary action per screen and set the spacing scale before any styling.
3. Visual directionExplore several style directions, choose the one that fits the project and lock it into reusable tokens.
4. Review in contextJudge the screen inside the game at the size players see it, not as an enlarged mock.

In practiceReviewing a shop screen, I found the layout lacked whitespace and the spacing was inconsistent, so nothing stood out. The fix was a consistent spacing scale and fewer elements per screen, before any change to colour or size.

1. Player goalState what the player wants from this screen and how few steps it should take.
2. Flow and statesMap the flow and every state the screen can be in, including empty and error states.
3. Responsive testingTest each screen across a size matrix, from a small phone to a wide desktop.
4. IteratePlay it, note where it causes friction and fix the cause instead of the symptom.

In practiceScreens were being signed off on a single desktop window while most players are on mobile, where layouts clipped and overlapped. I made cross-resolution testing a requirement before any screen counts as done.

1. PurposeList what the space has to hold and what the player should do first.
2. Top-down planPlace spawn, sightlines and zones on a labelled plan before anything is built.
3. Block-outBuild it rough and render it to judge scale, lighting and readability.
4. Review in gameWalk it in the running game and fix what only shows up there.

In practiceMost layout problems were invisible in renders and only appeared once the map was running. Every map is now reviewed in game before it counts as finished.

1. Core loopDefine what the player does minute to minute and why it should feel good.
2. PrototypeBuild the smallest playable version of the idea.
3. Evaluate the feelCheck that the feedback reads as the intended action and material.
4. CutRemove systems that add complexity without adding to the experience.

In practiceIn CLEANRUST, rust removal read as blocky layers instead of worn metal, so it was reworked into eight gradual wear stages. A collectible chip system was removed because it added complexity without value.