Designers and developers have been pushing the boundaries of how MapBox is used in websites and applications. Over the past few weeks I had a chance to pull together some of the freshest designs that use maps in innovative and surprising ways. Together they show a growing trend of using maps as a fully integrated and critical design element, not just as embedded media.
Git Merge
Git Merge is a conference this spring for Git users and developers. The conference site by Jason Long uses bold typography against a muted dark map of Berlin. The map header is the visual centerpiece of the site, highlighting the venue (Radisson Blu Berlin) and subtly informing viewers of the urban surrounding of the conference. This functional and straightforward responsive design informs potential attendees with extreme efficiency.
Bakken & Baeck
Bakken & Baeck is a design firm in Norway that crafts great user experiences with their partners. Their site shows off the best of their product and UX design, introduces their talented team, and makes the case for their quality over quantity culture. Using a bold map as a footer is not new but few pull it off with as much class as Bakken & Baeck. The custom map crafted in TileMill with bold white markers for B&B’s office, the nearest train stop, and pub for drinks exudes confidence and poise.
Foursquare
Foursquare continues to innovate and pioneer new ways of seeing our interactions with location. Every Foursquare check in has an immediate and distinct visual experience thanks to a full screen map that acts as a unique signature of place. A check in downtown is visually distinct from a check in vacationing in the tropics or out on the folks’ farm. The map sets the tone and context for venue photos, social interactions and more.
Moves
Moves for iPhone is a new app that uses the continuous input of your phone’s location, sensors and more to pull together a timeline of your day’s activities. Its report view uses maps to show the locations you’ve been that day. The brilliant timeline design that shows a longer or shorter map viewport depending on the length of your stay is an awesome and noteworthy detail.
voxel.js
The web has been abuzz about voxel.js, a project by fellow javascript and node.js mad scientists Max Ogden and substack (James Halliday). Voxel.js brings Minecraft-like voxels, or “volumetric pixels,” into your web browser. Ogden’s voxel-city experiment takes terrain data from MapBox and builds a voxel landscape with heights based on values in the imagery.
Pushing the envelope
There’s no wrong way to use MapBox. These examples show that we’re only at the tip of the iceberg for finding new and exciting ways to integrate MapBox with websites and applications. If you’re working on something great let us know, and keep an eye on our blog for upcoming posts on how maps can be integrated into your design process.