This one stumped me in the beginning.

I browsed through the various projects on Pinterest for this one in the series and while my first thought was that the map portion was just an image added in, my second thought was that somehow, coding was involved.

And that is exactly when I said, “This is going to take a while.”

See, I haven’t coded on a regular basis for YEARS. In high school, I was leaning towards going to college for web design. In fact, when I last logged into Codecademy a few weeks ago, it said that the last time I coded was almost three years ago. Sounds about right. I always say that I should get back into it since it’s useful and I secretly like finding out why something doesn’t work. Have I, though? Clearly not.

I’m saying it now: In 2019, I will do more of the things I loved and liked years ago but abandoned because I felt that my hands were in too many pots.

But let’s get back to what we were talking about, hmmm?

The map portion didn’t involve any coding at all and I was correct in that it was a single PNG image added in. I followed this tutorial from Caler Edwards then I found this one from Angga Risky.

Once I got that first screen nailed down, I decided to take it a step further and show what the information screen would look like if you happened to click on the Info icon beside the cafe’s name. At first I only did one for Heaven’s Kitchen when I started prototyping it in Adobe XD, but it didn’t make sense for me to only have the last shop on the list with an info screen and not have anything for the ones before.

And just like that, I made a beeline for InVision to create a full interactive prototype. You can view it at this link or if you just want to check out the mockup, look below.