Designing a Pokémon Tier List UI: States, Filters, and Honest Scope

杨宗历 — Mon, 17 Aug 2026 08:48:07 +0000

A tier-list editor looks simple until the user has more than a few cards. The engineering problem is keeping the user’s question, pool, and output understandable.

Model visible states

The interface needs an unranked pool, ranked tiers, an empty state, and a saved/exportable state. Rankly visibly includes an unranked library, S–D tiers, local saving, undo/redo, sharing, and PNG export. These are interface observations, not claims about private architecture.

Treat filtering as first-class

For a 1,025-entry roster, search alone is not enough. Combine generation, type, category, and final-evolution filters, and show what pool is currently visible.

Make ranking semantics explicit

“S tier” is a display label, not a definition. A title field and custom tiers let users state “Gen 1 favorites” or “Nuzlocke viability.”

Test the transitions

Move a filtered result into and out of a tier.

Clear filters and verify the expected pool.

Add or rename a tier without losing placements.

Verify undo and redo cover advertised actions.

Verify save, share, and export feedback.

Check the primary actions on small screens.

The Pokemon Tier List Maker is a context-specific visual ranking tool, not automatically a competitive database. Expose the state, expose the scope, and test the transitions users can see.

DEV Community: 杨宗历

Designing a Pokémon Tier List UI: States, Filters, and Honest Scope