I recently had the great opportunity to help Flighty with their maps. Flighty is a flight tracking app, but what sets it apart from the rest is a beautiful design, unbelievably fast push notifications, and awesome terminal/gate data.
Improving on the already great design, Flighty’s new maps implement many updates, most notably:
- place names: better scale dependent rendering with an updated class based rank.
- elevation points: improved scale dependent rendering
- bathymetry: beautiful natural earth bathymetry using a subtle color palette
- airports: class based rendering of airports using flight count ranking
An all new dark-mode basemap design was also created. Building upon Mapbox’s Dark basemap, updated dark mode (not black) colors were implemented across the design to include all the improvements from Flighty’s standard basemap. One major difference was using a contrasting (almost crayola) yellow from their app color palette for the airports. This created a cool call out for airport locations when using dark-mode. Ryan Jones, the product lead at Flighty, summed up how hard dark mode map design is with this tweet/video:
Dark maps are suuuper hard becuase you need contrast (like water vs land) but can’t use the darker blacks (loses dimension). Look how perfectly @jonahadkins nailed it there and as you zoom in. pic.twitter.com/MpgvMf5ZBx— Ryan Jones (@rjonesy) September 16, 2019
The dark-mode basemap flows seamlessly with Flighty’s gorgeous app design.
Got questions or comments? Feel free to email me or hit me up on twitter.