Creating Device Mockup Templates and Placeholders for E-Learning #161

Mockup Templates for E-Learning #161: Challenge | Recap

Device mockups and templates are essential design elements every course creator should have in their e-learning toolkit.

The templates can be created from real photos of devices or with simple vector graphics using programs like PowerPoint or Articulate Storyline.

Here are a few common ways to use device mockups in your courses:

Whether you’re looking to spruce up your portfolio or grow your asset library, device mockups are a course designer’s go-to resource.

Creating Vector Mockups

If you’re comfortable creating basic shapes such as squares, circles, and rounded rectangles, you have what you need to create your own custom mockups.

Check out the video below for a quick overview on how to create simple iPad and MacBook mockups in PowerPoint.

Click here to view the screencast

Challenge of the Week

This week, your challenge is to share one or more device mockups for e-learning.

You can use any program you like this week, but if you share your source files, consider using PowerPoint or Storyline so your files benefit the greatest number of users.

Ideas for Your Mockups

You can create whatever you want for your mockups. Below are some ideas to get you started.

  • Mobile phones
  • iPads and tablets
  • Laptops
  • Monitors and iMacs

Related Challenges

We’ve hosted several DIY graphics challenges. Feel free to share your examples in one or more of the following:

Last Week’s Challenge:

Before you mock up some designs for this week’s challenge, take a look at the flipped perspectives your fellow community members shared in last week’s portrait orientation challenge:

E-Learning Examples Designed with Portrait Orientation

Vertical Layouts in E-Learning RECAP #160: Challenge | Recap

Wishing you a great week, E-Learning Heroes!

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

NOTE: Please don’t use Google Drive or Dropbox to host your projects. Both companies have announced that they’re no longer going to support HTML projects.

You can use our Dropbox file request link to send me your zipped output: https://www.dropbox.com/request/jrqHXAxWwbts234Y4xak. Please include your first and last name and challenge number in the file name: DavidAnderson_122.zip.

58 Comments
yogesh rathore
David Anderson
Rema Merrick
David Anderson