Drawing the map of Bellhaven
How Second Semester’s city map works: one illustrated overview, a cut-out for every place, and a hover glow that tells you where you can go.
Second Semester is built around a city you move through, so the map had to feel like part of the world rather than a menu.
One image, many places
The city map starts as a single isometric illustration of Bellhaven: the river, the harbour and its piers, the beach, rooftops and blossom-lined avenues. Every place you can travel to then gets its own cut-out from that same illustration, plus a hairline outline.
At rest, each place shows only a faint outline. Hover over it and the place brightens, its outline sharpens and its name appears beside it. A setting shows every name all the time, and on touch screens the names always stay visible, so nothing is hidden behind a hover.
Twelve places, and a downtown
The city map has twelve destinations: Adrian’s home, Bellhaven Metropolitan College, Riverside Park, Fountain Square, Bellhaven Market, The Lantern Pub, Bellhaven Bank, the Fitness Club, the City Library, Seabreeze Beach, the West Bellhaven neighbourhood and Downtown Bellhaven, which opens a second map of its own.
In the prologue only some of them open; the rest say they will open in a later chapter. That is deliberate: the map grows as the story does.
In pictures
