Loading...

The Basic Principles of Design

An Interactive Module

Home / e-Learning Projects / Principles of Design
laptop showing design module

Project Overview

This lesson is part of a module that introduces the basic Principles of Design; contrast, repetition, alignment, and proximity. It combines interactivity, animations, imagery, and video to increase learner motivation and engagement.

Objectives: This module explores the use of principles of design (i.e., Contrast​, Repetition, Alignment​, Proximity, etc.) in graphic design work and use appropriate design principals in creative works.

TOOLS

H5P | Illustrator | Photoshop

e-Learning

Gamification, animation and interactive content, videos, quizzes, fill in the blanks, drag and drop, progression tracking.

AUDIENCE

Higher Education (Foundational)
Photo by Lukas opens in a new tab
first screen of the design module
pop up example screen
drag and drop example screen
alignment screen of the design module
proximity screen of the design module
proximity pop up example screen
diagram about outcomes-based education

Learning outcomes applied to this module

01.  Recall the design principles in creative works.

02.  Use appropriate typography formatting in designing creative works.

03.   Identify the principles of design (i.e., contrast​, repetition, alignment​, proximity, etc.) used in the design industry.

04.  Interpret design artifacts by balancing aesthetical values and usability.

{Project Toolkit}

I employ a variety of strategies to ensure that educational projects are effective, engaging, and meet the learning objectives.

Storyboards

I use storyboards to visualize the screen layout, including text, images, multimedia elements, and interactions. They also serve as a communication tool among SME's, stakeholders, graphic designers, and developers.

Flow Charts

Flowcharts help me plan and organize content, design learning paths, and map learning objectives to content, activities, and assessments. Afterwards, I share the flowchart with team members and stakeholders for feedback.

Prototypes

I use prototypes to design, test, refine, and improve before the final development. Depending on the project, I use prototyping tools such as Adobe XD, Sketch, Figma, or Articulate Storyline/Rise.

Web Coding

I leverage HTML/CSS, Bootstrap and other web technologies, to enhance e-learning content (e.g., to embedding videos, audio files, and other multimedia content into e-learning modules).
a collage of toolkit examples
Onboarding Guide For Post-Secondary Educators module
Understanding Academic Misconduct module
Accessibility Design Guide website
Introduction to Web Accessibility project
Understanding Academic Misconduct module
Mind Mapping Infographic
Introduction to Web Accessibility overview
Onboarding Guide For Post-Secondary Educators module
Basic Principles of Design video module
moodle course set up
storyboard example
BACK TO E-LEARNING PROJECTS