• Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps
Let's Talk
  • Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps
  • Home
  • Customer Reviews 🎉
  • Work
  • Resources
    • 📗 Blogs
    • 💻 Tutorials
    • 🎥 Youtube Videos
    • 🧰 Recommended Tools and Apps

studio.leopoldopirela@gmail.com

Contact information

Interactive Website Project for the UNDP built in Webflow

Project Brief

The UNDP worked closely to the Government of Grenada to layout a plan for a Smart State of the island.

In order to bring their point forward on how it can help the island in many aspects, they seek a designer and developer to help them create an Isometric design of the island of Grenada, as well as, the elements that would make the island become a smart state.

In this project, I worked with them to design an isometric map that is 100% a resemble of the island, the design of the different elements, and develop this into a fully functional Webflow website.

The Team & Tools Involved

Credits

Here is a list of people involved in this project.

Sera-Leigh Ghouralal
Leopoldo Pirela
Adobe XD for UI and Website Design Adobe illustrator for isometric and map design Webflow - For Web Development
Click here
The End Result

Solutions

The idea of the final product was to have a website that is engaging, but also animates through the map that was to be created.

I decided to go with an Isometric Design, as it will allow to better display elements like drones, machinary, tools, people, etc. In order to get the most out of the space, we focused on 8 - 10 points that would be display within the map.

To make the map a bit more realistic to the island, I used certain elements that are found in the island.

Below, are the steps I took from the start to the end.

Interactive isometric website in Webflow
Bringing all together

The Process

Here are the steps I took to ensure the vision of the project matched the final product.

process-01
1 Discovery

Kick-off

For the kick-off meeting of this project, we asked the UNDP head of projects to join us, as well as, the consultants they have throughout the Caribbean and in the island of Grenada to help us brain storm. During this meeting we were able to come up with the idea of the map, the points, and what a clear brief and vision for this project was. Together, we left the meeting a defined goal, and dead-line for this project.

2 First Draft

Creating the map of Grenada

The island of Grenada has a very unique shape. In order to be able to make it Isometric and able to use the space the best way possible, we turned the map is if it was being seen from the east side of the island. By doing this, and adding some depth, I was able to get the exact shape of the island.

process-02
process-03
3 Elements

Creating Isometric Shapes

Isometric shapes are becoming very useful, they allow us to shape websites and bring scenes to live on the web. To be able to bring the story on to the map, I created each point into a section or a scene on the map. This gave me enough space to ensure the elements were visible and the story unfolded on the map.

4 Connecting Elements

Putting them together

I created a small city within the map. This way, elements were connected by an isometric road system and vehicles that would move around. I also ensure to use a 3-color-pallete to make the elements unified throughout the map. In this step, I also used Adobe XD to design the website for mobile and desktop. One of the best ways to display what the map would look like as a live website, was by using Adobe XD prototyping tools. This way, I was able to enhance everything on the map itself, before I began to develop the website.

process-04
process-03
5 Animations

Bringing the map to life

Using Webflow, and lottie animations I was able to give elements on the website movement. In order for the map to not be crowded with elements moving, I worked towards simplifying the number of elements, and assigning their movements in only specific locations.

6 Webflow

Developing the website

The deadline for this entire project was only about 11 days and 3 days for revision. So WebFlow was my best option to develop this amazing website, while ensuring I can have all the features and deliver it on time. Using Webflow, I was able to make interactions with the elements and create zoom interactions with the map, so the user could see the map closer to their screen. Webflow, also allowed the animations to be smooth and light, this was key so people could interact with map without any glitches. If you'd like to see how I brought together map into Webflow let me know. I can make a tutorial on it.

process-04
Lets work together

Need to start a design project?

Schedule a 30-mins Call
Or email me studio.leopoldopirela@gmail.com

Copyright © 2021 L & S Company Group Inc. - 💪 Built and Designed by Leopoldo Pirela

  • Terms of Use
  • Privacy Policy

Want more content like this in your inbox? 🖖

Every week, I am sharing the latest tools I am using, deals I have found online, tutorials, and tips to help you improve the look and feel of websites and brands. 👇

I hate spam probably more than most people, so I promise to not send you an insane amount of emails. Only where there is something important to share. Remember, you can also opt-out at any time!