Skip to main content

Basic Building Blocks of the User Interface


Department of Information and Communications Technology
Enrollment in this course is by invitation only

Course Overview

This course emphasizes the use of basic building blocks of a user interface to create or design different parts of the user interface. By understanding the concepts and ideas, you will be able to create or design an effective user interface for a web application, mobile application and desktop application. This course targets people with little knowledge about the user interface but other people who already have knowledge in this are welcome to take this and it could also serve as a refresher course.

What You Will Learn

At the end of this course, you will be able to:

  • build an effective user interface
  • understand the basic parts of the user interface

Course Content

Week 1:Introduction

13 Videos | 1 Activity

13 Videos

  • Welcome to the course!
  • The User Interface
  • Transition to GUI
  • Evolution of GUI
  • Elements of a GUI
  • The Benefits
  • What is Building Blocks?
  • Summary

1 Activity

  • Exit Assessment

Week 2: The Basic Building Blocks

6 Videos | 1 Activity

6 Videos

  • Lines and Shapes in the User Interface
  • What are Text and Typography and the uses of it?
  • Example of Fonts
  • Icons in Computing and User Interface
  • Colors and Color Theories
  • Summary

1 Activity

  • Exit Assessment

Week 3: Building a User Interface pt. 1

9 Videos | 1 Activity

9 Videos

  • The Components in the User interface
  • Setting up Figma Draft Project and Creating an Icon
  • Creating Button
  • Creating Button Groups
  • Creating Badge, Input, and Spinner
  • The Patterns in the User Interface
  • Creating a Card
  • Creating a Header with Navigation
  • Summary

1 Activity

  • Exit Assessment

Week 4: Building a User Interface pt. 2

5 Videos | 1 Activity

5 Videos

  • What is a Page?
  • Home Page
  • Contact Page
  • Making a Flow
  • Key Takeaways

1 Activity

  • Exit Assessment
  1. Course Number

    DICT-MAD007
  2. Classes Start

    TBA
  3. Estimated Effort

    2 hrs./week (8 hours)
  4. Price

    Free