Course Learning Outcome (CLO) 3:
Create a basic wireframe with at least three connected screens that represent the layout and user flow of their app.
Module Title: Week 3 – Foundations of Layout Design
Module Learning Objectives (MLOs):
By the end of this module, learners will be able to:
1. Identify at least three key app screens and determine their sequence within a user flow. (Aligned with CLO 3)
2. Explain the concept of user flow and how users navigate between screens. (Aligned with CLO 3)
3. Create a basic wireframe layout for at least three connected screens using a template or design tool. (Aligned with CLO 3)
4. Demonstrate user flow by linking screens to show navigation between them. (Aligned with CLO 3)
Content & Activities:
Content:
-
Wireframing Templates - Supports learners by providing structure for creating layouts (aligns with MLO3)
-
Video Tutorial: Introduction to Wireframing - Supports learners by explaining key concepts like user flow (aligns with MLO2)
-
Video Tutorial: Using Design Tools (e.g., Figma) - Supports learners by demonstrating how to build and connect screens (aligns with MLO3 and MLO4)
Activities:
-
Interactive Wireframing Quiz – Learners answer questions about layout design and user flow concepts. (Aligns with MLO 1 & 2)
-
Video Demo and Practice Assignment (Create your wireframe) – Learners follow a guided tutorial to create a wireframe with at least three connected screens. (Aligns with MLO 3 & 4)
-
Discussion Forum – Learners share their wireframes and briefly explain their screen flow and design choices. (Aligns with MLO 1, 2 & 4.)
Assessment Strategies:
-
User Flow Identification Quiz (Objectives 1 and 2) - Learners will go through a short quiz to identify correct screen sequences and basic navigation flows.
-
Wireframe Draft Submission (Objective 3) - Learners will submit an initial draft of their wireframe (3 screens minimum). Feedback will be provided by the instructor (me) and/or a peer.
-
Linked Screen Navigation Task (Objective 4) - Learners will demonstrate their user flow by connecting screens within their wireframe (e.g., showing button navigation).