Station Screen

This design is our Design of the Week for May 6th, 2022, and a companion to Issue 30 of UI Designer Weekly. Check out the latest issue on the DetailsPro blog!

This design answers the question, “what if Maps could recommend places for you to go based on which station you’re at?” With a layered hero area, transparent buttons, and a scrolling list of place highlights, this design mixes the transportation aesthetic of NYC’s MTA with the design foundations found in Maps today.

Station Screen features interesting usage of backgrounds, overlays, and transparencies in the buttons across the top. Check out the symbols for the different train lines, each created entirely with the SF Symbols from the indexes collection. Scrolling down the list, you’ll see basic Vertical Stacks and Horizontal Stacks that emphasize clean proportions and the tried-and-true Apple-style primary/secondary headlines. Note the nice corner radius on each of the images.

Try changing this design into something entirely new, or experiment with the hero area elements to see what other looks you can find. And see you next week for the next issue of UI Designer Weekly!