User Interface Design with Figma and Material UI (UI / UX)

User Interface Design with Figma and Material UI (UI / UX), available at $49.99, has an average rating of 4.5, with 158 lectures, based on 14 reviews, and has 90 subscribers.

You will learn about Become a UI Designer You will be able to add UI Designer to your CV Build a full design for an app Build a prototype for Desktop and Mobile device with micro interactions You will be able to share your ready and polished prototype straight to Behance or Dribble This course is ideal for individuals who are Frontend developers or Backend developers or UX Designers or UI Designers or Graphic designers or Software Architects It is particularly useful for Frontend developers or Backend developers or UX Designers or UI Designers or Graphic designers or Software Architects.

Enroll now: User Interface Design with Figma and Material UI (UI / UX)

Summary

Title: User Interface Design with Figma and Material UI (UI / UX)

Price: $49.99

Average Rating: 4.5

Number of Lectures: 158

Number of Published Lectures: 158

Number of Curriculum Items: 158

Number of Published Curriculum Objects: 158

Original Price: zł79.99

Quality Status: approved

Status: Live

What You Will Learn

Become a UI Designer
You will be able to add UI Designer to your CV
Build a full design for an app
Build a prototype for Desktop and Mobile device with micro interactions
You will be able to share your ready and polished prototype straight to Behance or Dribble

Who Should Attend

Frontend developers
Backend developers
UX Designers
UI Designers
Graphic designers
Software Architects

Target Audiences

Frontend developers
Backend developers
UX Designers
UI Designers
Graphic designers
Software Architects

UI stands for User Interface Design, so anything that involves the visual representation of an application, the so-called components that build the user interface.

But what UI Design really is? That’s what you will learn in this course. I built it in order to:

systematise knowledge about UI components
show good practices of UI and UX
improve communication and understanding between Users, Designers and Developers
boost your productivity and improve your Figma skills

In summary, at the end of the course:

you will have an in-depth knowledge of user interface components
you will develop your own Design System with variants in Figma
you will make your own portfolio project (for share on Dribbble or Behance)
you will work more productively
you will be able to design your projects according to good UI/UX practices
you will be able to apply for your first job as a UI Designer

My name is Kacper Sarama. I am a Senior UI Designer. I’ve worked in SAP industry, medical industry and am currently I’m working in the Fin-tech industry. I’ll be your instructor in this course, where I’ll teach you UI Design from the ground up, step by step, deeper and deeper by building a realistic and good looking project.

So that you will learn not only theory but also practice, having fun at the same time. At the end you will call yourself a UI Designer and have a solid foundation in this area. Let’s not waste time and let’s start!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Hello and welcome

Lecture 2: Design industry (context)

Lecture 3: Modules overview

Lecture 4: Summary

Chapter 2: Module 1 – MUI (Material UI)

Lecture 1: Overview

Lecture 2: Inputs / Autocomplete

Lecture 3: Inputs / Button

Lecture 4: Inputs / Button group

Lecture 5: Inputs / Checkbox

Lecture 6: Inputs / FAB (Floating Action Button) Button

Lecture 7: Inputs / Radio Group

Lecture 8: Inputs / Rating

Lecture 9: Inputs / Select

Lecture 10: Inputs / Slider

Lecture 11: Inputs / Switch

Lecture 12: Inputs / Text field

Lecture 13: Inputs / Transfer list

Lecture 14: Inputs / Toggle button

Lecture 15: Data Display / Avatar

Lecture 16: Data Display / Badge

Lecture 17: Data Display / Chip

Lecture 18: Data Display / Divider

Lecture 19: Data Display / Icons

Lecture 20: Data Display / Material Icons

Lecture 21: Data Display / List

Lecture 22: Data Display / Table

Lecture 23: Data Display / Tooltip

Lecture 24: Data Display / Typography

Lecture 25: Feedback / Alert + Snackbar

Lecture 26: Feedback / Backdrop + Dialog

Lecture 27: Feedback / Progress

Lecture 28: Feedback / Skeleton

Lecture 29: Surfaces / Accordion

Lecture 30: Surfaces / App Bar

Lecture 31: Surfaces / Card

Lecture 32: Surfaces / Paper

Lecture 33: Navigation / Bottom Navigation

Lecture 34: Navigation / Breadcrumbs

Lecture 35: Navigation / Drawer

Lecture 36: Navigation / Link

Lecture 37: Navigation / Menu

Lecture 38: Navigation / Pagination

Lecture 39: Navigation / Speed Dial

Lecture 40: Navigation / Stepper

Lecture 41: Navigation / Tabs

Lecture 42: Layout

Chapter 3: Module 2 – UX (User Experience)

Lecture 1: Module intro

Lecture 2: Module intro [VIDEO]

Lecture 3: Let's plan and design the flow

Lecture 4: Login / Register module – User Story [VIDEO]

Lecture 5: Login / Register module – Flow [VIDEO]

Lecture 6: Movies module / Intro

Lecture 7: Movies module / User Story [VIDEO]

Lecture 8: Movies module / Flow [VIDEO]

Lecture 9: Cinemas module / Intro

Lecture 10: Cinemas module / User Story [VIDEO]

Lecture 11: Cinemas module / Flow [VIDEO]

Lecture 12: Account module / Intro

Lecture 13: Account module / User Story [VIDEO]

Lecture 14: Account module / Flow [VIDEO]

Lecture 15: Tickets module / Intro

Lecture 16: Tickets module / User Story [VIDEO]

Lecture 17: Tickets module / Flow [VIDEO]

Lecture 18: Offers module / Intro

Lecture 19: Offers module / User Story [VIDEO]

Lecture 20: Offers module / Flow [VIDEO]

Chapter 4: Module 3 – Design System

Lecture 1: Intro

Lecture 2: Create Typography component

Lecture 3: Define colors

Lecture 4: Create Tabs component

Lecture 5: Create Alert component

Lecture 6: Create Button component

Lecture 7: Create Input Field component

Lecture 8: Create Chip component

Lecture 9: Create Switch component

Lecture 10: Create List Item component

Lecture 11: Create Card component

Lecture 12: Create Stepper component

Lecture 13: Create Radio Button component

Lecture 14: Create Pagination component

Lecture 15: Create Divider component

Lecture 16: B.E.M. (Block > Element > Modifier) methodology

Chapter 5: Module 4 – UI / Desktop / Login module (part 1)

Lecture 1: Login Module / Intro

Lecture 2: Login module / Basic structure

Lecture 3: Login module / Buttons and Tabs rework

Lecture 4: Login module / Search input rework

Lecture 5: Login module / Login form

Lecture 6: Login module / Tabs

Lecture 7: Login module / Input rework

Lecture 8: Login module / Down section

Lecture 9: Login module / Aartboard setup

Lecture 10: Login module / Register tab

Lecture 11: Login module / Last fixes + Wireframing

Lecture 12: Login module / Presentation

Chapter 6: Module 4 – UI / Desktop / Movies module (part 2)

Instructors

Kacper Sarama
User Interface Designer

Rating Distribution

1 stars: 0 votes
2 stars: 0 votes
3 stars: 1 votes
4 stars: 6 votes
5 stars: 7 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu