Create an Interactive Map with Adobe XD

Students create an interactive map to demonstrate understanding
0:53

About This Strategy

In this 4- to 5-hour strategy, students will create an interactive map that describes details of a given area. The goal of this project is to create a simple immersive interactive map.

Adobe XD allows users to create polished interactive UX/UI experiences that are easy to view and share. Students will build an interactive map using core techniques in XD using features like overlays and component states. This strategy can be easily adapted to any discipline, making it a great fit for any course where you want students to dive deeper into events or locations on a map. This strategy can also be adapted for use with other Adobe products, such as Adobe Photoshop.

Supporting Tools and Resources

  • Student Sample
  • Adobe XD
  • Adobe Photoshop
  • Editable Resource Bundle
  • PDF Resource Bundle 

Outline for Teachers

250 minutes

Learn.

Students are introduced to the topic area on which they will be creating an interactive map based on the needs of the class and given additional guidance from their instructor. They then take a look at the student sample and review the Getting Started with XD Tutorials to learn the skills needed to create basic prototypes in XD. (60 min)

Evaluate.

Students research their chosen topic, collect any material needed to support their map, and write out any additional map details in a document to make it easy to transfer into XD. (90 min)

Create.

Students create their map in XD, with the template provided if desired, using the basic techniques they learned in the Getting Started with XD Tutorials. They can examine an example here. If they want to go further, additional tutorials are available here. (90 min)

Share.

Students share and publish their prototype files and links as directed by their instructor. (10 min)

Steps for Students

You will create an interactive map that covers the given topic of a chosen subject. The goal of this project is to create an easy-to-share, interactive map and learn the basics of prototyping using Adobe XD.

Because Adobe XD allows you to create polished interactive UX/UI experiences that are easy to view, it is a great starting point to get introduced to interactive design regardless of discipline.

Steps:

1. Your instructor will  introduce the topic area you will be creating a map on based on the needs of the class and provide additional guidance. 

To get started, take the following steps to get up to speed on XD:

  •  Take a look at the student sample, noting the interactions and presentation:

    • What worked well for you?

    • What would you have done differently?

  • Review the Getting Started with XD Tutorial to learn the skills needed to create basic prototypes in XD, paying particular attention to overlays and component states, as you will be using them regularly in this XD project. (You can also open up XD and follow along with these tutorials if you want to!) (60 min)

2. With a few XD basics under your belt, do research on your chosen topic and collect any material needed to support your interactive map like photos, graphics, logos, or charts and graphs you would like to share. 

  • Write out additional content for your map highlights in a document to make it easy to transfer into XD. 
  • When writing out the map details, be sure to keep them uniform, like the different pages of an app or web page. Here is an example of written out map highlights for the student sample project. 
  • The things you may want to add to your map location highlights may vary depending on the nature of your assignment, but along with your necessary information, try to find a few fun facts to throw in. (90 min)

3. Create your interactive map  in XD, with this template provided if desired, using the basic techniques you learned in the Getting Started with XD Tutorials. You  can review an example here, if you want a frame of reference.

Here are a few tips that can help you out as you are building your prototype in XD:

  • Design mode and Prototype mode have different tools. If you are not seeing a tool you need, be sure to check that you are in the right mode. Learn more here!

  • Consistency is key when designing a digital interface. Keeping your design uniform will save time. Duplicate pages whenever you have pages that have similar structure. 

  • Positioning overlays properly and consistently with your interactive map will make the design feel cohesive and uniform. Learn more here.

  • If you want to use some premade design elements,  Adobe provides a resources page for XD that has UI kits, icon sets, plugins, app integrations, and more that are free to use.

  • Feel free to change the format! While you have a template, you do not have to use it as is; change the size, colors, and shapes, or create a whole new format. If you want to go further, LetsXD.com has tons of tutorials and inspiration showing all amazing things you can do with Adobe XD! 

  • Try to build the map so that the user can navigate it without assistance. The user should be able to tell, just by looking at it, what the map is for and how to navigate it. To test this, consider sharing your prototype with friends and family to get their opinions of how easy it is to navigate prior to submitting the assignment! To learn how to do so, review these steps. You will get good feedback and should be impressed by your creations! (90 min)

4. Share and publish your prototype files and links as directed by your instructor. (10 min)

Rubric for Successful Analysis