A linear approach to Isometric.
Before we even jump into it, we need to give an honorary mention to Steve Carell and the crew at NBC, solely for this:
Alright let’s do it. Parkour!
If you’re still scratching your head, this website is dedicated to the art of Parkour if you haven’t guessed it already 😑. And we call it — Isometric.
We can imagine the Yamakasi and even Parkour aficionados (a.k.a ‘traceurs’) nodding their heads in approval, firstly because this website represents them IRL! And secondly, there isn’t another website out there dedicated to this fitness sport that just screams what Parkour-ians believe in.
For everyone else, here’s a little unorthodox explanation to our approach.
Parkour needs space, so does the website.
Not all of us are cut out for jumping around or in-between buildings when we can just walk (or hail an Uber) to get from A to B. But Parkour is different, it’s reaching your destination but with an obstacle course in between.
And herein was our obstacle: To visually represent the sport without explaining it.
There’s no reference of the word “Parkour” above the fold. It had to be pseudo self-explanatory.
We focussed on 3 things,
- The website’s function,
- Its flair, and lastly
- The sport itself.
The main function of the site, apart from its ancillaries was the fitness routes. 9 routes every day or every week curated by the administrators for their followers. Sure we could have thrown in a few maps, or a list of places nestled in a hamburger menu icon, but that’s not differentiating this from any other website out there.
What we did was resonate the uniqueness of the logo (a.k.a parts of the flair) into our ‘map’ navigation. Almost mirrored, we retained the palette of the logo blocks, mimicking them as icons for each map route. Notice how the subtext of the logo has even been duplicated but with the actual instruction of picking out a map? It’s the same only now more descriptive!
Incorporating the essence of Parkour required to encompass the intrinsic nature and location of the business itself. Since Parkour is all about space and obstacles, we needed a background that could help us achieve that look but yet make the site feel less cluttered. This being in the heart of NY, an overhead image of a New York neighborhood worked perfectly. Especially being shot in its isometric projection! (Killing it Unsplash. 📷 👍)
So we had the image, we nailed the header and navigation, the flair was working its way in nicely but, did it scream Parkour?
The obstacles obstacle course.
Initially we functioned the map icons to initiate Google Maps to display the days route. But that was so meh. Wouldn’t it be cool to have the background indicate the map picked in its isometric projection?
Hook, line and sinker!
Intricately designed, color co-ordinated path lines show your Parkour route for the day. For any challenge, one of the main goals is the finish line. Hence we decided to included the destination address (also isometrically projected of course) in the viewport. It wouldn’t be entirely possible at times to have the whole route in view but having the destination pinned gave a sense of achievement. We could imagine users just opening the site, picking a map, glancing at the address, dropping everything and just sprinting for it! The route represents the ideal path but New York itself is an obstacle course! The destination mattered in the end.
Sure if you showed this website to your 80-year old grandmother she may not get what’s going on but, to the core customer base (Yes, the Parkour-ians) this site is a win! Plus the coolness flair of the sites aesthetic is something definitely worth jumping for!