Educational Media Design I - App Wireframing

Designed by Chase L. Way

To efficiently structure the self-paced learning experience and ensure instructional continuity, all tutorials are divided into a suggested series of study sessions. The modules build on one another, so learners are strongly encouraged them to complete them in the recommended sequence. If you haven't yet had the opportunity to complete Tutorials #1-6, please consider doing so before exploring this tutorial.

Why should my students learn about educational media design?

The next three tutorials are my absolute favorite, because we get to talk about educational media design! As we all know from personal experience, digital content creation is near the top of the "marketable skills" list - and that won't change anytime soon. This makes media design a wonderful WBL opportunity.

Helping our students understand how they might restructure the knowledge they have gained in your class for consumption as educational media has several benefits:

It depends their understanding of the material. We've all heard that the best way to learn something is to teach it to others. Having your students design a piece of media is an amazing way to help them learn by "teaching" - or preparing to teach - a digital audience.
It gives your students a concrete project which they can upload to their digital portfolio (hello Portfolium!), and discuss on their LinkedIn page, cover letters, job interviews. etc.
It may make your students aware of career pathways which they might enjoy pursuing in the future.

To prepare ourselves to teach our students how to do an educational media project, we will use this week to practice designing a small project ourselves! Specifically, we will focus on wireframing and/or prototyping a website or "app."

Wireframing is a fancy way to refer to a digital mock-up or "storyboard" or a media experience. A wireframed website or app is not the same as a working website or app: it is an example of what these things will be like once they're built. When media and technology design professionals wireframe a project, they create a series of images which give potential industry partners a "quick and dirty" understanding of what it would look and feel like once built. Often, the designer or design team which makes the mock-ups doesn't do the actual coding needed to bring the project to life; in other words, they don't build the educational media tool or experience themselves. But they use wireframes to express what they want that creation to convey, which in turn gives the digital architects and artists the information they need to get started.

In this context, prototypes are experimental versions of a website or app. They are often "usable" in the sense that they are built up enough to allow you to navigate between screens. However, they have not yet been published or sent to market.

Tutorial Session A

There are many app- and website building/wireframing/prototyping tools out there, which have different pros and cons. In my experience, Balsamiq and Appypie are two of the most intuitive tools available for educators with no coding experience. Balsamiq lets you create wireframes for websites or apps. Appypie lets you prototype apps. Let's get started!

Create a free account for yourself with Balsamiq and Appypie.
Read the following article on educational app design: Olga Yatskevich, "How to Create an Educational App in Three Easy Steps."
- For the purposes of this training, we aren't trying to prepare something which is market-ready. So, don't get too overwhelmed by all the details Yatskevich discusses. Just take what you can from the article and consider how its "big ideas" might be useful in the context of doing an "app design" project with your students.
Watch this video on the purpose of wireframing.

Tutorial Session B

Watch the below playlist.
- You should definitely review the first four videos. The fifth video is a more in-depth take on the information conveyed in the fourth video, so viewing it is not a requirement (but might be helpful if you find yourself drawn to Appypie).

Decide whether you'd like to create an example website or app.
- If you would like to wireframe a website or app, use Balsamiq. If you would like to prototype an app, use Appypie.

Tutorial Session C

Write a one-paragraph description of the educational website or app you'd like to build.
Complete one of the following prompts:
- Use Balsamiq to wireframe at least three example screens in your hypothetical website or app. If you would like to save your work, export your work as a PDF document.
- Use Appypie to prototype several screens in an app experience. If you would like to save your work, take screenshots.

Tutorial Session D

Write instructions for an educational website or app project which your students could complete in a current or upcoming course. As always, make sure you plan this assignment to end before the student's free trial access to the educational technology ends!