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
- identify the basic parts of the user interface
Course Instructor
Mark Luis Sablan
Subject Matter Expert
Course Content
Week 1: Introduction
9 Videos | 2 Activities
9 Videos
- Welcome to the course!
- The User Interface
- The Early Era of User Interface
- Transition to GUI
- Evolution of GUI
- Elements of a GUI
- The Benefits
- What is building blocks?
- Summary
2 Activities
- Recall Activity
- Exit Assessment
Week 2: The Basic Building Blocks
6 Videos | 2 Activities
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
2 Activities
- Recall Activity
- Exit Assessment
Week 3: Building a User Interface pt. 1
9 Videos | 2 Activities
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
2 Activities
- Recall Activity
- Exit Assessment
Week 4: Building a User Interface pt. 2
5 Videos | 2 Activities
5 Videos
- What is a page?
- Home Page
- Contact Page
- Making a Flow
- Key Takeaways
2 Activities
- Recall Activity
- Exit Assessment