How to Create Interactive Stories with Adobe XD

Create Interactive Stories

Turn your print journalism pieces into engaging interactive prototypes.

Learn how to use Adobe XD — the UI/UX design tool — to create prototypes for interactive journalism articles.

If you are a journalism student or work for a campus publication, you’ve probably written the typical print story. With Adobe XD, it’s easy to spice up a predictable article with interactive features like audio clips or a photo carousel. Add your prototype to your collection of clips to help you stand out from the crowd as you explore job opportunities.

Here are some suggestions for cool elements you can include in your stories:

  1. Add Audio
    Bring voice and energy to a static story by inserting sound bites of interviews, like powerful quotes, into your piece. Simply add a component wherever you want on the artboard, such as a speaker icon. Then, in the prototype window, link the component to an audio file by choosing “Action > Type > Audio Playback.” From there, you can link the mp3 file.

    Image
  2. Insert a Photo Carousel
    Encourage readers to engage with your writing by including eye-catching photos — as long as they belong with your story, of course. Using XD, you can arrange the photos in a slideshow so your readers can swipe, tap, or click through photos and you can include more than one without taking up too much space.

    Check out this page for details on how to animate the design.

  3. Create Sections
    Organize a long-form article by simply dividing it into sections. Not only will it be easily navigable, but it’ll give the audience a sense of agency and choice while reading your work. Create sections by adding button components to your story’s homepage, then linking the buttons in the prototype window to new artboards housing the different story sections.
  4. Include a Quiz
    Include a quiz readers can take to encourage involvement in the content. First, layout the artboard with the question and multiple choice answers. Then, create new artboards for the correct answer and each wrong answer. To generate user interactivity, link the possible choices on the question artboard to their respective answer artboards. You can specify the trigger, action, destination, and animation that will get the user to the answer.

These are only a few examples of interactive elements provided by XD that you can include in your journalism pieces. Download Adobe Creative Cloud to get access to XD to explore other ways you can enhance your writing.

Are you a student? See how you can save up to 60% with Adobe Creative Cloud for students.