We may earn an affiliate commission when you visit our partners.
Course image
Corey Leong, Muhammad Yahya, and IBM Skills Network Team

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.

Read more

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.

Enroll now

What's inside

Syllabus

Designing Intuitive Front Ends and Mockup Design Principles
The success of a system, product, or application relies on delivering a seamless and engaging user experience. The User-Centered Design (UCD) framework ensures that the final product aligns with the user’s requirements. It plays a crucial role when designing a product's User-Interface (UI) and User Experience (UX). Design thinking is a problem-solving process tailored explicitly for creating user-centric UI and UX designs. It includes various stages and strategies that assist designers and teams in creating the right product. Wireframes and prototypes help streamline the design process by visualizing and testing ideas early, saving time and resources. Visual design principles such as alignment, hierarchy, contrast, repetition, proximity, balance, and space are crucial in delivering meaningful experiences to users. As UI design focuses on the visual aspect of a digital product, various design tools are available for creating an engaging and intuitive UI. Visual design focuses on a website’s appearance; therefore, it is essential to use some basic elements as building blocks for developing a good design. These elements enhance the user experience. Certain aspects of UI have a massive impact on users. These include typography, readability, and color theory. A website or app’s UI includes its visual design and functionality. Therefore, designers must employ the best practices for developing different web and mobile interface components.
Read more
Web Design Methodologies
Web browsing on various devices is increasing rapidly. To develop an online presence, creating a website that runs on diverse screen sizes is crucial. Responsive web design is an approach that aims to create web pages that render effectively across all screen sizes and resolutions, ensuring better usability. Another approach that developers use for developing web applications is a mobile-first design. It first focuses on designing products for small screens and then progressively expanding them to larger screen sizes. Other website optimization approaches for different screen sizes include adaptive and fluid design. Media queries are filters for CSS styles to modify the appearance of a website or application according to the screen size of the user’s device. As developers widely use responsive web design, it is vital to follow its best practices. Developers should test the website or application through cross-browser or responsive testing before launching it. Progressive Web Applications (PWAs) use web technologies to provide an app-like experience to users. These use various frameworks and patterns to enable them to leverage both web and native app functionalities. Single Page Applications (SPAs) make the website more like a desktop application, offering a more fluid and enjoyable experience by reducing the lag time between succeeding pages. An integral part of PWA is Service workers. These enable offline access, rapid loading, push notifications, and other features. A website can be transformed into a PWA by adding features and altering code to make it behave like an app on mobile devices. PWA Apps can provide native app-like features and even update content in the background so that the users can view the most up-to-date content.
UI Design with Figma
Figma is a web-based design tool for creating user interfaces, icons, wireframes, and prototypes. Its unique features allow designers to create and collaborate on digital designs efficiently and effectively. The core concepts of Figma include Frames, Components, and Layers. Frames are a way to group related elements together and create sections within the design. Layers help manage the visibility and positioning of individual elements within a frame. The Component feature in Figma enables designers to construct reusable design components that can change and update in real-time across various pages and files. Components can be organized into libraries for easy access and sharing among team members. Styles can also be applied to components, such as typography, colors, and effects, to maintain consistency throughout a design. Cards and layouts are additional features within Figma that help to group related content and actions in a flexible and extensible container. Figma also offers a variety of image shapes and tools for designing, including vector shapes, images, icons, text, and plugins. To set up and configure Figma, users need to create an account, choose a plan, and customize their workspace preferences.
Final Project and Assessment
In this module, you will design and create an interactive Sales App using Figma and Thunkable. Figma is a powerful UI design tool used to create wireframes, prototypes, and high-fidelity designs for web and mobile applications. Thunkable is a web application that is well-known for visual programming concepts with a “drag and drop” style, thus making it very easy for everyone to understand and helps to create very interactive mobile-based web applications. To create the interactive Sales app, you can design the layout and features using Figma, export the Figma assets to Thunkable, build functionality using pre-built components, and test the app on a mobile device or using web preview.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
An excellent choice for those interested in starting a career in designing UI and UX experiences as well as developers who want to create web and front-end applications
Taught by industry experts Corey Leong and Muhammad Yahya, both reputable figures in the UI/UX design field
Covers key concepts, tools, and methodologies used in front-end development, building a solid foundation for learners
Includes hands-on labs and interactive materials, providing practical experience and reinforcement of concepts
Emphasizes visual design development, a crucial aspect of UI and UX design that enhances user experience
Requires familiarity with basic UI and UX design concepts and Figma, which may limit accessibility for complete beginners

Save this course

Save Designing User Interfaces and Experiences (UI/UX) to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Designing User Interfaces and Experiences (UI/UX) with these activities:
Read User Experience Design Essentials
Gain insights into the principles of user experience design, enhancing your design decision-making.
Show steps
Explore the Figma User Interface
Become familiar with the Figma interface, enhancing your design workflow.
Browse courses on Figma
Show steps
Practice Responsive Design Principles
Reinforce the fundamentals of responsive design, improving your web development proficiency.
Browse courses on Responsive Design
Show steps
Three other activities
Expand to see all activities and additional details
Show all six activities
Design a Web-based UI for a Charity Organization
Create a project to test your interface design skills and apply foundational knowledge.
Browse courses on Interface Design
Show steps
  • Research different types of charity websites
  • Create a wireframe of your proposed design
  • Develop a prototype of your design
  • Test your prototype with users
Collaborate on an Interactive Design Project
Engage in a collaborative design project to foster teamwork and enhance communication skills.
Browse courses on User Interface Design
Show steps
  • Form a team of 2-4 students
  • Choose a design challenge or problem to address
  • Brainstorm and develop ideas together
  • Create a prototype or mock-up of your solution
  • Present your project to the class
Participate in a UI Design Contest
Challenge yourself by participating in a UI design contest, showcasing your skills and gaining feedback.
Browse courses on User Interface Design
Show steps
  • Find an appropriate design contest or competition
  • Study the contest guidelines and requirements
  • Brainstorm and develop your design concept
  • Create your design entry
  • Submit your entry to the contest

Career center

Learners who complete Designing User Interfaces and Experiences (UI/UX) will develop knowledge and skills that may be useful to these careers:
Product Designer
As a Product Designer, you will be responsible for designing and developing the overall user experience of products, including websites, mobile applications, and physical products. This course will help you build a strong foundation in user-centered design principles, visual design principles, and prototyping. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Mobile App Developer
As a Mobile App Developer, you will be responsible for designing and developing mobile applications for smartphones and tablets. This course will help you build a strong foundation in visual design principles, mobile app development methodologies, and responsive design. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
UX Designer
As a UX Designer, you will be responsible for designing the user experience of websites and mobile applications. This course will help you develop a strong understanding of user-centered design principles, wireframing, and prototyping. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
UI Designer
As a UI Designer, you will be responsible for creating the visual design of websites and mobile applications. This course will help you develop a strong understanding of visual design principles, typography, readability, and color theory. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Web Designer
As a Web Designer, you will be responsible for designing and developing the visual appearance of websites. This course will help you build a strong foundation in visual design principles, web design methodologies, and responsive design. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Front-End Developer
As a Front-End Developer, you will be responsible for designing and developing the user interface of websites and web applications. This course will help you build a strong foundation in visual design principles, UI design, and web design methodologies. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Art Director
As an Art Director, you will be responsible for overseeing the visual aspects of a wide range of projects, including advertising campaigns, marketing materials, and product packaging. This course will help you build a strong foundation in visual design principles, typography, readability, and color theory. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Graphic designer
As a Graphic Designer, you will be responsible for creating visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. This course will help you build a strong foundation in visual design principles, typography, readability, and color theory. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Creative Director
As a Creative Director, you will be responsible for leading and managing a team of creatives, including designers, writers, and photographers. This course will help you build a strong foundation in visual design principles, user-centered design principles, and prototyping. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
UX Engineer
As a UX Engineer, you will be responsible for designing and developing the user experience of websites and mobile applications. This course will help you build a strong foundation in user-centered design principles, visual design principles, and prototyping. You will also learn how to use Figma, a popular design tool, to create prototypes and mockups. These skills will be essential for success in this role.
Interaction Designer
As an Interaction Designer, you will be responsible for designing the way that users interact with websites and mobile applications. This course may be useful in helping you build a foundation in user-centered design principles, prototyping, and visual design principles. Additionally, you will learn how to use Figma, a popular design tool, to create prototypes and mockups.
Visual Designer
As a Visual Designer, you will be responsible for creating the visual appearance of websites and mobile applications. This course will help you build a strong foundation in visual design principles, typography, readability, and color theory. Additionally, you will learn how to use Figma, a popular design tool, to create prototypes and mockups.
Information Architect
As an Information Architect, you will be responsible for designing and organizing the structure and content of websites and mobile applications. This course may be useful in helping you build a foundation in user-centered design principles, wireframing, and prototyping. Additionally, you will learn how to use Figma, a popular design tool, to create prototypes and mockups.
Content Designer
As a Content Designer, you will be responsible for creating and managing the content of websites and mobile applications. This course may be useful in helping you build a foundation in typography, readability, and user-centered design principles. Additionally, you will learn how to use Figma, a popular design tool, to create prototypes and mockups.
Web Developer
As a Web Developer, you will be responsible for developing the underlying code for websites and web applications. This course may be useful in helping you build a foundation in web design methodologies and responsive design. Additionally, you will learn how to use Figma, a popular design tool, to create prototypes and mockups.

Reading list

We've selected 12 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Designing User Interfaces and Experiences (UI/UX).
Provides practical guidance on how to create user interfaces that are easy to use and understand. It classic in the field of UX design and is highly recommended for anyone who wants to learn more about the subject.
Seminal work on the subject of design and usability. It provides a comprehensive overview of the principles of good design and is essential reading for anyone who wants to design products that are both useful and enjoyable to use.
Comprehensive guide to web design and development. It covers everything from the basics of HTML and CSS to more advanced topics such as responsive design and accessibility.
Practical guide to user interface design for web and mobile applications. It covers the latest trends and best practices in UI design, and valuable resource for anyone who wants to create user interfaces that are both beautiful and functional.
Classic in the field of UX design. It provides a comprehensive overview of the principles of UX and is essential reading for anyone who wants to learn more about the subject.
Practical guide to designing interfaces for web and mobile applications.
Collection of mobile design patterns that can be used to create user-friendly and engaging mobile applications.
Practical guide to sketching user experiences. It covers techniques for sketching wireframes, prototypes, and other UX artifacts.
Comprehensive guide to UX design. It covers everything from the basics of UX to more advanced topics such as user research and information architecture.
Practical guide to adaptive web design. It covers techniques for creating websites that look and work great on all devices.
Practical guide to UI design for developers. It covers techniques for creating user interfaces that are both beautiful and functional.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Designing User Interfaces and Experiences (UI/UX).
Figma UI UX Design Essentials
Most relevant
UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Most relevant
Web Design: Strategy and Information Architecture
Most relevant
Prototypes in Figma: Creating an Initial Low Fidelity...
Most relevant
User Experience Design - Learn UI UX App Design with Figma
Most relevant
UX Design Fundamentals
Most relevant
Web Design
Most relevant
Visual Elements of User Interface Design
Most relevant
UI Design using Material Design 3: Designing a Reminder...
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser