Building a Digital Magazine

2014-11-11_13-45-49    2014-11-11_13-50-23

This week’s ELH Challenge was to create a digital learning magazine. I was excited about this for a few reasons, but mainly because I had wanted to mock up something similar to this for a while now to show as a sample of how interactive documents can be created pretty easily with Storyline.

The Concept

I am not sure where this concept came from, but I decided to create a magazine that could be used to help introduce new hires to a company and also double as a nice informative piece for current staff.

I decided to mock this up as if it could be used for my office. The company I work for does a lot of work with USAID so I chose “Water” as the issue topic, probably because I was thirsty, and gained some inspiration for the fake articles from USAID and The Water Project.

Picture1

The Build

Since this was an “internal” company magazine, I kept the style pretty traditional. I used some magazines that I had on hand for layout inspiration – National Geographic and ASTD’s td magazine – and was able to find some really great pictures for free on Pixabay. I used a combination of three fairly simple fonts: Adobe Garamond Pro (large headlines), Century Gothic (secondary headlines and the header), and Palatino Linotype (body text).

When I thought of the concept, I immediately had some ideas of what I wanted to include, like Meet the Team, Q&A, and a Resources section.  I felt like these topics would do well in a “learning magazine” format where some quick information could be presented on the page in an easy to read format and layers, downloads, and links could be used to give the user more information as wanted/needed.

2014-11-11_13-46-45   2014-11-11_13-47-01

Meet the Team makes good use of layers and the Resources section has some “downloads” and a layer that enlarges the floor plan image. (This is actually the floor plan for Graceland!).

The Q&A was the last slide I built so it isn’t as interactive but includes some fake links that in theory could take you to forms or information on a company intranet. I also had an idea to build out the Q&A as a list of questions that you could click on to see the answers, but it was may more fun to create this as a Dear Abby-esque set up.

2014-11-11_13-49-04   2014-11-11_13-49-33

The articles on water each have some layers that include additional information. In a way these layers act like the sidebars in a traditional magazine layout. But one of the cool things about having a digital format is that you can also include videos.  Be sure to check out the Health H2O article to see the video I included.

2014-11-11_13-48-28   2014-11-11_13-47-37

In order to navigate through the magazine you have 2 choices.  You can use the turned up page corners at the bottom or click the arrow at the top to “pull down” the menu page.

2014-11-11_13-49-56

An Extra Special Extra
For the first time I decided to try my hand at using a texture for the page background. This isn’t tough to do but does require fiddling with the html code once the project is published. David Anderson created a great screencast on how to do this. And I pulled my background texture from the wonderful Subtle Patterns site.

2014-11-11_13-50-23Check it Out!

Click on any image above to view the demo or go ahead and download the source file.

And leave a comment below to let me know what you think!

Advertisements

10 comments

  1. Another excellent piece. I’d like to chat with you about possible use of the digital magazine format for part of the Global Workforce Development Strategy I’m writing. ________________________________

    Like

  2. This is nice. Thanks Allison for sharing this idea! I’m just starting out with learning storyline and creating my elearning portfolio. With the source file, I can play around the features and learn more about using storyline. Thanks so much! 🙂

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s