TECHNICAL ASSIGNMENT

Design of the player control panel for the slot game

1. General Information

2. Purpose and Context

It is required to develop the design of the control panel for the slot game. The control panel is the bottom (or bottom-center) area of the screen where the player manages bets and spins the reels.

A key requirement for the visual: the panel should take up minimal space, leaving maximum room for the game field (reels, symbols, animations), while remaining well-readable and easy to click.

The visual style, color palette, and theme are at the designer's discretion. An original approach is encouraged.

3. Target Resolutions

The panel must be adapted for three resolutions. Separate layouts are needed for each:

4. Mandatory Panel Elements

Below are all the elements that must be present in the control panel. Placement is at the designer's discretion unless explicitly stated otherwise.

4.1 Spin Button

• Central and largest button on the panel

• Must visually stand out from other elements

• Standard state + active/pressed state

4.2 Bet Control

• “+” button (increase bet)

• “−” button (decrease bet)

• Field displaying the current bet: accommodates 7 digits + 3 currency symbols (total ~10 characters, example: “1 000 000 FUN”)

4.3 Autospin Button

• Located next to the Spin button

• When pressed, opens a tooltip/drop-down panel with a selection of the number of automatic spins

• Options: 10 / 25 / 50 / 100

• Active state (autospin on) must visually differ from inactive

4.4 Speed Button

• Located next to the Spin button

• Two states: standard speed and fast mode

• Recommended iconography: one lightning bolt — standard, two lightning bolts — fast mode (designer may suggest an alternative)

• Both states must be illustrated

4.5 Menu Button

• When pressed, opens a panel/tooltip with three nested buttons:

• Info — game information / payout table

• Sound — toggle sound on/off (two states)

• Home — return to the main screen

💡 All nested buttons must also have their icons and on/off states where applicable.

4.6 Balance Field

• Displays the player's current balance

• Accommodates 10 digits + 3 currency symbols (example: “1 000 000 000 FUN”)

• Must be well-readable against any background

4.7 Total Win Field

• Located above the Balance field

• White font

• Displayed only when winning (at other times can be hidden or empty — at the designer's discretion)

• The frontend will implement the animation: when winning, the number from the Total Win field “drops” down into the Balance field and is summed. The designer only needs to show both fields in the correct placement — the animation is implemented programmatically.

5. Work Process and Stages

The work is carried out in two stages:

Stage 1 — Conceptual Options (wireframe / schematic)

• The designer proposes several layout options for the panel (schematic, without final visuals)

• Options must differ in the placement of elements and/or visual concept

• One resolution (Desktop) is sufficient for each option

• Following the discussion, the client selects one option

Stage 2 — Final Design

• Based on the selected option, the designer creates final layouts for all three resolutions

• All button states (normal, pressed, active, inactive)

• Tooltips / Autospin and Menu panels in the open state

• Total Win + Balance fields in the correct placement

6. Work Result

Upon completion, the designer delivers:

6.1 Layouts

• Source files in Figma (preferably) or PSD / XD / Sketch

• Layouts for each of the 3 resolutions

• All states of elements shown on separate frames or using components

6.2 Ready Assets

• PNG sprites of all buttons and icons (by states) on a transparent background

• SVG versions of icons where applicable

• File names — clear and structured (example: btn_spin_default.png, btn_spin_active.png)

• Recommended scale: @2x for mobile

7. Reference

https://www.figma.com/design/HTx30nGQpsmuEAEiyRUpO5/Slot-Machine-Button-Panel-Test--Copy-?node-id=0-1&t=eCzDU3osbdDpM3PT-1

A screenshot of the previous successful version of the control panel is attached to the assignment. It demonstrates the overall layout principle and set of elements. The new design is not required to copy the reference — it serves as a guideline for composition and logic, not for visual style.

Key observations from the reference:

• The Spin button is large and centered

• The Autospin and Speed buttons are located on either side of Spin

• Bet (−/field/+) is compactly on the left

• Balance is on the right

• Menu is a separate icon that opens additional buttons

• On mobile versions — simplified layout with icons without labels

8. Additional Requirements

• The panel must not overlap the game field — maximum space is given to the reels

• Buttons must be large enough for comfortable finger pressing on mobile (minimum 44×44px as recommended by Apple HIG)

• Color palette and theme are at the designer's discretion. Original solutions are preferred

• All text fields (bet, balance) must be readable against any background (outline, background, or shadow if necessary)

• Intermediate communication in messenger / on the marketplace is welcome

9. Response Procedure

In response to the task, please indicate:

• Approximate timelines for completing both stages

• Any questions regarding the assignment

The budget is fixed: $100 for both stages.