Screenshots
Click any image to enlarge; long images scroll within the viewer.
Key points of this project
- Search and voice entry fixed above the fold
- Horizontally swiping campaign banner with paging dots following below
- Four quick entry categories: Top Chart / Cards Game / Puzzle / Fighting
- Horizontally swiping chart cards with cover art, title, publisher, and star rating aligned in four rows
- Bottom three-tab navigation: Square / Games / Profile
The Paths Visible in the Interface
Opening the app lands on the Games page. At the top is a search bar with a voice button, its placeholder copy stating that the library holds 6,887 games. Below it is a horizontally swipeable campaign banner, then four circular category buttons: Top Chart, Cards Game, Puzzle, and Fighting. Charts repeat by category, each card carrying cover art, title, publisher, and star rating, with a Square / Games / Profile tab bar at the very bottom.
Laying Out Horizontal Lists Without Wobble
Both the campaign banner and the game charts scroll horizontally; the two gesture layers must stay separate, or a slightly angled swipe triggers the wrong one. Card covers are uniformly cropped to squares, and title, publisher, and rating rows have fixed heights; images show placeholders while loading so the list never jumps mid-swipe. Section titles carry a small vertical tick mark with fixed spacing to the cards.
Mobile Details
Top and bottom margins respect the status bar and safe area, and the bottom navigation stays visible while scrolling. Chart data loads in batches, with the next batch prefetched before the user reaches the end, so nobody stares at a blank screen.
