studio.leopoldopirela@gmail.com
Contact information
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
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.
Bringing all together
The Process
Here are the steps I took to ensure the vision of the project matched the final product.
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.
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.
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.