Course Content
What Is Design
0/3
First of All – Introduction
Design
Are You Excited About This Journey?
Introduction to UI and UX Methodologies
0/1
UI/UX Methodologies
UI and UX Design
0/3
User Interface (UI) Design
User Experience Design (UXD or UED)
Let Me Ask You A few Things
Golden Rules of User Interface Designs
0/6
Make user interfaces consistent
Allow users to navigate easily via shortcuts
Design dialog to yield closure
Prevent error as much as possible
Allow users ways to reverse their actions easily
Let’s test your knowledge!
Principles of UI design
What then are the fundamental design tenets of a high-performing user interface? Let's look at them now.
0/7
Familiarity
User Control
Clarity
Hierarchy
Negative space
Flexibility
Let’s test your knowledge!
Element of UX Design
0/1
5 Elements of UX Design
User vs End User
0/4
What is the difference between a customer and an end user?
Types of End Users
How to Improve Your End User Experience
Let’s test your knowledge!
The Product Life Cycle
0/6
Stages of Product Development Life Cycle
Idea Generation
Idea Screening
Marketing Strategy
Commercialization
Let’s test your knowledge!
Design Thinking
0/5
What is Design Thinking?
The Four Principles of Design Thinking
The Five Phases of Design Thinking
What is the purpose of Design Thinking?
Let’s test your knowledge!
Data Analysis
0/2
Why should you analyze data?
How do you conduct analysis when interviewing: Thematic analysis
What is UX Research
0/7
The history of UX design
UX design disciplines
The work of a UX designer
What tools do UX designers use?
What kinds of projects do UX designers work on?
The benefits of UI design
How to become a UX designer
Types of UX Research
0/2
Qualitative research
Quantitative research
Analysing Data from UX Research
0/5
Defining analysis objectives
Organizing data
Investigation
Clusterization
Results and insights identification
Research Methodologies and Analysis
0/2
Quantitative research data analysis
Qualitative research data analysis
Information Architecture
Jared Spool, a well-known UX designer, once quipped: "Good design, when done correctly, becomes invisible. We only pay attention to anything when it is done incorrectly. Similar rules apply to information architecture (IA). When everything is in place, it disappears. It's interesting to note that there isn't a single definition for this "science of order" that specialists can all agree upon. But they all concur that, in one way or another, good content organization is the profession of information architecture. IA's past dates back to the time of ancient Egypt. The Alexandrian Library's collection was cataloged by librarians on a 120-scroll bibliography. The idea was the same; it was just common sense at the time and wasn't known as information architecture. People were clearly paying attention and stood up, as was evident. The role of information architects, UX designers, interface designers, and content managers is more crucial than ever in the so-called information age. The web would fall into disarray without them. So, where do you start?
0/6
8 Principles of information architecture
How to design the information architecture of your site
What are the main information architecture processes?
WIREFRAMES
Wireframe Elements
How Can a Wireframe Be Created?
Introduction to Figma
0/14
Getting started with figma
How to download figma
Projects, Files & Sharing
The Editor
Commenting
Frames, Pages, Layers & Exporting
Prototyping
Shape & Color
Text & Links
Images & Masking
Boolean Groups & Alignment
Effects
Pen tool
Practice zooming in and out
Design Proper – Color Theory
0/3
What is color theory?
How to Choose a Color Scheme
Resources for selecting a color scheme
Typography
0/4
What is typography?
UI best principles for font usage
What typeface should you use for your website?
Typography Practical
08:46
The Grid System
0/3
What Is A Grid?
Guidelines and Rules For Grids
Setting up your grid
04:47
Auto Layout
0/5
What is Auto-Layout?
Resizing
11:09
Vertical and Horizontal Direction
01:43
Alignment and Spacing
01:09
Padding
02:40
Advance Features of Auto-Layout in Figma
Other advanced Auto Layout options, referred to by Figma as "Advance layout," can be accessed by clicking the (...) three-dot icon in the Auto-Layout panel. Let's quickly go over their features.
0/3
Spacing Mode
01:09
Strokes Include or Exclude
01:33
Canvas Stacking
02:52
Prototyping
Mockups are sometimes mistaken for prototypes by designers, which can be perplexing to people who know better. Prototypes are also neither a collection of sketches or a prelaunch interface with every pixel in place. Let's have a dive!
0/9
What is Prototype and it’s Categories
Advantages of prototypes
Create a connection in Figma (Prototype)
Create an interaction
Trigger, Action and Destination
Adjust the animation
Animation and Easing
Prototyping Practical Part 1
05:00
Prototyping Practical Part 2
05:59
Design System
0/4
What is Design System?
Building a Design System
Examples of design systems Part 1
02:30
Examples of design systems Part 2
02:17
Let’s Design an App
0/4
App Design Practical – Part 1
16:00
App Design Practical – Part 2
16:00
App Design Practical – Part 3
11:00
App Design Practical – Part 4
14:11
Let’s Design A Website
0/3
Website Design Practical – Part 1
16:00
Website Design Practical – Part 2
16:00
Website Design Practical – Part 3
17:48
Examinations, Project and Certificates
0/3
Final Project
Complete UI/UX Design Examination
Congratulations on completing your Design Course
Complete UI/UX Design Course for Beginners
About Lesson

What is Auto-Layout?

Making intelligent components is easy using Auto-Layout. What I mean by “smart components” is when one or more components are designed in such a way that they can change in response to the information contained inside them or may perform tasks that regular components are unable to.

What are Parent and Child Components?

To create an Auto-Layout you need one or more Parent and Child components and you need to know how both of them work to learn the basics of Auto Layout designing in Figma. and the basics things to know about them are:

  • The Parent component is the component that includes Child components.
  • You can create a parent component using Shift+A which is basically a shortcut to create Auto-Layout that will create a parent component behind the selected items.
  • Parent components can include multiple Child components but not the other way around.

Previous
Next
0% Complete
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.