Making the Mark: Print and Web Specs for Beginners
A Reusable Learning Object
Target Audience: Nonprofit development and communication professionals (e.g., visual communication coordinators)
Terminal Objective: Create, alter, and save files according to designated web and print specifications.
Responsibilities: Instructional design, e-learning design and development
Tools Used: Mindmeister, Microsoft Office, Adobe Illustrator, Adobe Photoshop, Adobe XD, Vyond, Adobe Audition, Vyond, Adobe Audition, Screencastify, LOVO AI voiceover, Amara subtitle editor, Articulate Storyline
Development Time: 6 weeks
Project Overview • ID Approach • Process
Design Document • Storyboard
Project Overview
Informed by ID best practices and learning theories, “Print and Web Specs for Beginners” offers learners a short introduction to web and print file specifications. Through interactive chunked lessons, learners acquire the basics of image resolution, color modes, units of measurements, and file formatting as well as how to save and create files that adhere to these designated print and web specifications. This RLO also includes two animated videos of an on-the-job scenario in which this knowledge must be learned and applied. The first video introduces the importance of adhering to these file specifications while the second showcases their real-world application and a software demonstration screencast. The RLO concludes with a knowledge check that expands on the videos’ narrative and challenges users to apply their new KSAs. The core target audience possesses above-average technical knowledge and intermediate graphic design and web design knowledge.
ID Approach
Interactivity, Andragogy, and Transformative Learning
The design of this RLO is informed by explorative learning and constructivist learning theories. As part of efforts to better involve the learner and invite deeper engagement, learners must browse topic carousels, flip flashcards, and click accordion menus to glean new knowledge. Both the freedom to explore and the self-directed pace reflect key assumptions about adult learning. Including animated video narratives that illustrate the real-life application and importance of this knowledge also invites more of the “aha” moments that live at the heart of transformative learning theory. All in all, this level of interactivity aligns well with the terminal objective and promotes long-term integration.
Horton’s Absorb-Do-Connect Activities
My instruction structures activities through William Horton’s “absorb-do-connect” methods, as outlined in his 2006 book, E-Learning by Design. In “absorb” activities, learners “absorb” new information (Horton, 2006, p.51). On the whole, these activities may sound passive, but they actually require learners to remain “mentally active” (Horton, 2006, p.51). Incorporating “connect” activities and interactivity into “absorb” activities helps learners better comprehend introductory knowledge and connect it to prior experience. Additionally, including “connect” activities at the beginning of the course and following the knowledge check helps learners gauge their current KSAs and reflect on their in-progress learning. By asking learners to reflect on and connect their past experiences and knowledge, they will hopefully recognize the value of their new learning and better integrate it into their long-term memories.
Sequenced together, these activities help transition new KSAs from working load into long-term memory, scaffold learning, and align instruction, providing learners with a clear path to success.
Mayer’s Multimedia Principles and Universal Design
Mayer’s multimedia principles were especially helpful for creating the animated videos featured in this RLO. Though close captions are available, I included voiceover rather than on-screen text to adhere to temporal contiguity, modality, and multimedia principles. Conversational dialogue and the use of a narrative also helped bolster conformance to personalization and voice principles. The sequencing of these videos adhered to the pre-training principle to reinforce these new concepts. Although my target audience includes learners who do not possess any vision or hearing impairments, I still followed best practices in web accessibility by including customized focus orders for text, so that learners with screen readers could easily follow the content. I also provided alternative text for images and visual objects.
Microlearning
Like chunking, microlearning breaks down learning into smaller, digestible chunks to reduce cognitive load and invite deeper knowledge retainment. While guidelines for print and web files could encompass a myriad of complex and diverse topics, this RLO focuses on providing learners with a basic and practical foundation. The RLO is also flexible and affordable for a broad range of sponsoring organizations, whose needs and resources vary wildly.
Process
Analysis (Action Mapping)
I first began analyzing the core target audience as well as the instructional need to develop the overall instructional goal. Understanding the learners, goals, and resources ensured the course would stir measurable results and be relevant to the learners’ goals and motivations. I also developed and organized the topic analysis into a mind map on Mindmeister to better visualize how to reach and measure these goals. Action-mapping helps align future course development with the true instructional gap. You can read about the full analysis here.
Design
I designed this RLO by chunking it into six key topics from my mind map. I also developed and relied on a course design document (CDD) to plan my process and outline my course. My CDD ensures my RLO aligned well with my objectives and the overall instructional need. During this process, I also developed the branding, colors, and font combinations.
You can view my full course design document here.
Development
Storyboard
For me, drafting goes hand in hand with visual design brainstorming. I created rough visual mock-ups using my overall course style and color theme. Alongside the visual mockups, I wrote a text-based storyboard. Part of this process involved scripting a fictional narrative for two animated videos that would illustrate the importance of this course and how it can be applied in design software. Creating all these elements concurrently helped me chunk the content and design visual representation of key concepts.
View the full storyboard here.
Adobe XD Prototype
I then created a working prototype of the RLO in Adobe XD. This prototype helped me learn the key foundations of programming and wireframing a course, and I used components, groups, and other triggers to build links, on-click pop-up windows, and other interactive elements.
Animated Video Creation
After I received feedback and buy-in from my storyboards and prototypes, I took the scripts and created two animated videos in Vyond. I also recorded a Photoshop demonstration using Screencastify to embed in the narrative. I used LOVO AI to personalize the voiceover dialogue, then edited it in Audition, and created corresponding closed captions in Amara.
Articulate Storyline
The final step included programming the course in Storyline. Although custom designed, this RLO is still SCORM-compliant. I used timed animations, advanced states, triggers, variables, and slide layers to create an interactive user experience.
Implementation & Evaluation
Users appreciated the simplistic yet engaging design and cogent text. This user-friendly RLO allowed them to finally grasp the basics of file formatting and see exactly how key concepts could be applied in the real world.