Designing User Interfaces and Experiences (UI/UX)

Designing User Interfaces and Experiences (UI/UX) course at uxuiguide. UI and UX design is a thriving industry with numerous prospects for anyone with the right skills. This…

Designing User Interfaces and Experiences (UI/UX) course at uxuiguide. UI and UX design is a thriving industry with numerous prospects for anyone with the right skills. This course is designed for those who are interested in starting a career in designing UI and UX experiences as well as developers who want to create web and front-end applications. It emphasizes the key concepts, tools, and methodologies used in front-end development.

Web and mobile-accessible devices are transforming the world. Nowadays, everyone has a smartphone, tablet, smart TV, and/or laptop, which they use for communication and data searching. Companies are increasingly turning to front-end developers, mobile app developers, and UI/UX designers to assist them in producing user-friendly products. Therefore, it is crucial to provide users with a robust yet intuitive user interface and experience.

In this course, you will learn about the best practices of visual design development and identify the differences between well-designed and poor user interfaces. You will explore typography, readability, and colour theory in UI design.

You will gain insight into key methodologies in visual design like Responsive Web Design (RWD) and Progressive Web Design (PWD).

You will gain exposure to tools like Figma, a collaborative cloud-based app used for interface design. You will discover the steps to set up a Figma account and learn about its configuration. In addition, you will explore the various components, styles, libraries, and layout grids used in Figma that are essential for design.

Throughout this course, you will learn through videos, readings, activities, and quizzes designed to teach you the fundamentals of visual web and mobile design and development. You will gain a range of technical and practical knowledge and get insights and guidance from experts in the field.

The practical knowledge you will gain from the hands-on labs will further strengthen your base and enable you to perform better.

This is a beginner’s course, intended for learners with basic computer operating skills who have a fundamental knowledge of visual design development and are familiar with Figma.

To be successful in this course, you should have a basic understanding of User Interface (UI) and User Experience (UX) design as well as website wireframes, familiarity with the different kinds of layouts and tools used for visual design in various devices, and familiarity with the Figma application.

What Will You Learn?

  • Course Introduction
  • What is Design and UI/UX?
  • Importance of UI/UX
  • Design Thinking
  • UX Design and Strategies
  • Wireframing and Prototyping
  • Design Methodologies and Approaches
  • Visual Design Principles in UI Design
  • UI Design in Figma
  • Designing a User Interface
  • Typography, Readability, and Color Theory in UI Design
  • Best Practices in UI Design for Web and Mobile
  • How to Make the Most Out of This Course
  • Key Qualifications and Certifications Required
  • Introduction to Responsive Web Design
  • Mobile First Design
  • Adaptive Layouts and Fluid Layouts
  • Working with Media Queries
  • Responsive Web Design Best Practices
  • Cross-Device Validation and Testing
  • Introduction to Progressive Web Development
  • Progressive Web Development Technologies
  • Single Page Applications
  • Service Worker, Push Notifications, and Caching
  • Converting Existing App to PWA
  • Progressive Web Applications in Action
  • No Code & Low Code Tools
  • Practice Quizzes and Graded Assessments
  • Hands-on Labs
  • Design a Progressive Web App
  • View in Responsive and Non-Responsive Emulator
  • Do’s and Don’ts of Mockup Design
  • What is Figma?
  • Essential Concepts of Figma
  • Setup and Configure Figma
  • Images, Shapes, and Tools
  • Working with Figma
  • Getting Started with Components
  • Styles and Libraries in Figma
  • Cards and Layout Grids in Figma
  • Getting Started with Figma
  • Design a Landing Page for a Travel Website Using Figma
  • Module Summaries

Taught by

Muhammad Yahya , Corey Leong