We love and support open source products!. We wanted to use it easily with React & Gatsby (Google Maps doesn’t provide a convenient React API-although there are several unofficial wrappers).We wanted it to have a realistic, satellite look without much customization effort.We wanted to save those precious kilobytes and keep our website to be as fast as possible.With a straightforward and static design, we didn’t need all the functionality of Google Maps.And Google Maps isn’t bad, but there were several reasons for us to look up for alternatives: Google Maps is the currently reigning industry standard our old website map was built using it, too. Once the design was ready, we started researching tools that could help us develop the map on the frontend side. So when a frontend developer checks out the map, they can filter the page by “frontend” and see only those events. It was also important to implement standard page filters to control the information displayed on the map. In our case, to actually start the design process though, it was sufficient to gather information about 10 or so events. Kudos to our content team and all the colleagues who gathered and categorized all the information from more than 130 events, which even included some that took place more than 10 years ago! □Īs with every data visualization tool, it’s important to gather a few samples of the data you intend to display in order to extrapolate how things will play out in the completed design. Gathering enough data to begin the design process That’s quite a bit of data, so let’s touch on that next. Our goal was to collect all the Martian conference talks with the geolocation data, the name of the speaker, and most importantly the information that may be useful to developers and designers: brief description of the event itself with slides, videos, and audio. For instance, by visiting a talk page, they would be able to flick through presentation slides or watch a recording of the talk. We envisioned a map showing the locations of notable talks we held at conferences and meetups, and we wanted users to be able to go deeper and get more resources for a particular event. Our event map was intended to show how we’re spreading our knowledge around the globe (and to give more people access to this knowledge). But before we talk about how we built the map, it’s important to know what we intended to build in the first place.Īnd, just in case you missed that link above, we invite you to check out our map on the Events page so you have a complete idea of what we’re talking about in this article! Mapping out our goals In this article, we’ll cover the entire process, the initial concept, the design, and implementing the solutions and logic to make our vision a reality. The heart of the new page is the events map-a cool visual reminder about our team’s worldwide presence. Like the site itself, the Events page is overflowing with bold and extraordinary design solutions. Evil Martians recently launched an Events page on our brand new website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |