Level 1- Core Foundations of UI/UX
Download Certificate
Level 1- Core Foundations of UI/UX
0% Completed
Module 1: UI/UX Fundamentals + Design Basics
Lesson 1: What is UI & UX
UI (User Interface) refers to the visual elements of a digital product that users interact with. This includes buttons, icons, colors, typography, images, and layout. UI focuses on how a product looks and feels.
UX (User Experience) refers to the overall experience a user has while interacting with a product. It focuses on usability, accessibility, and how easy and satisfying the product is to use.
In simple words:
UI = Look & Design
UX = Experience & Usability
A good design always combines both UI and UX to create a smooth and enjoyable user journey.
Module 2: Figma & UI Design
Lesson 1: Figma Basics
Figma is a cloud-based design tool used for creating UI/UX designs, prototypes, and collaborative work. It allows designers to work in real-time, making it easy to share and edit designs with teams.
🔹 Key Features:
Cloud-based: No installation required, works in browser
Real-time collaboration: Multiple users can work together
Design + Prototype: Create screens and link them
Reusable elements: Save time using components
🔹 Main Interface:
Toolbar: Tools like move, frame, shape, text
Layers Panel: Shows all elements in design
Canvas: Main design area
Properties Panel: Controls colors, size, spacing
Importance:
Figma helps designers create professional UI designs efficiently and collaborate easily.
Lesson 2: Frames & Layouts
Frames are containers used to design screens in Figma. They act like artboards where you place all your design elements.
🔹 Frames:
Represent screens (mobile, tablet, web)
Help organize design structure
Allow scrolling and responsiveness
🔹 Layout Basics:
Arrange elements inside frames
Maintain proper spacing and alignment
Use grids for better structure
🔹 Auto Layout (Basic):
Auto Layout helps create responsive designs by automatically adjusting spacing and alignment.
Importance:
Keeps design organized
Makes layouts responsive
Improves consistency
Lesson 3: Components
Components are reusable design elements like buttons, cards, or navigation bars. Once created, they can be reused across multiple screens.
🔹 Types:
Main Component: Original design
Instance: Copy of the component
🔹 Benefits:
Saves time
Maintains consistency
Easy updates (change once, update everywhere)
Example:
If you create a button as a component, you can reuse it in all screens without redesigning.
Lesson 4: UI Elements (Buttons, Forms, Cards)
UI elements are the building blocks of any interface. They help users interact with the product.
🔹 Common Elements:
1. Buttons:
Used for actions (Login, Submit)
Should be clearly visible
Use contrast color for CTA
2. Forms:
Input fields for user data (email, password)
Should be simple and easy to fill
Include labels and placeholders
3. Cards:
Used to display grouped information
Include image, text, and action
Maintain proper spacing
🧠Importance:
These elements improve usability and guide users to complete tasks easily.
Lesson 5: Mobile Design Patterns
Design patterns are commonly used solutions for designing user interfaces. Mobile design patterns help create familiar and user-friendly experiences.
🔹 Common Patterns:
Bottom Navigation: Easy access to main sections
Hamburger Menu: Hidden navigation menu
Cards Layout: Content displayed in blocks
Floating Action Button (FAB): Highlight main action
Search Bar: Quick content access
🧠Importance:
Makes app easy to use
Reduces learning time for users
Improves user experience
Module 3: UX Fundamentals
Lesson 1: User Flow
User flow is the path a user follows to complete a task in an app or website. It shows step-by-step how a user moves from one screen to another.
🔹 Example:
For a login process:
Open App → Enter Details → Click Login → Go to Home Screen
🔹 Key Points:
Focus on simplicity
Reduce unnecessary steps
Make navigation clear
Importance:
Helps designers understand user journey
Improves usability
Makes tasks faster and easier
Lesson 2: Wireframing
Wireframing is the process of creating a basic layout of a design. It shows the structure of a screen without colors, images, or styling.
🔹 Features of Wireframe:
Simple shapes (boxes, lines)
Focus on layout, not design
Low-detail structure
🔹 Types:
Low-fidelity: Rough sketch (basic)
High-fidelity: Detailed structure
Importance:
Helps plan design before final UI
Saves time and effort
Focuses on usability and structure
Lesson 3: UX Thinking & Problem Solving
UX thinking is about understanding user needs and solving their problems through design.
🔹 Steps in UX Thinking:
Understand the Problem
Think from User Perspective
Find Simple Solutions
Test and Improve
🔹 Example:
Problem: Users find it hard to login
Solution: Simplify form (less fields, clear button)
Importance:
Creates user-friendly designs
Improves user satisfaction
Solves real-world problems
Module 4: Final Project & Portfolio
Lesson 1: Real App Design (4–5 Screens)
In this stage, students apply everything they have learned to design a complete app interface. The goal is to create multiple connected screens that solve a real user problem.
🔹 What to Design:
Choose any one app type:
Food Delivery
Fitness
Education
Travel
🔹 Screens to Include (Example):
Login / Signup Screen
Home Screen
Detail Screen (product/course/etc.)
Action Screen (checkout/play/start)
Profile or Menu Screen
🧠Importance:
Builds real-world design skills
Improves problem-solving
Helps understand complete user journey Lesson 2: Design Consistency
Design consistency means maintaining the same style, colors, fonts, and layout across all screens of an app.
🔹 Elements of Consistency:
Same color palette
Same fonts & sizes
Same button styles
Same spacing & alignment
🔹 Example:
If your button is blue and rounded on one screen, it should be the same on all screens.
🧠Importance:
Makes design look professional
Improves user experience
Avoids confusion
Lesson 3: Portfolio Basics
A portfolio is a collection of your design work that shows your skills to recruiters or clients.
🔹 What to Include:
Project title
Screens (UI designs)
Short description
Your design process (basic)
🔹 Good Portfolio Tips:
Keep it clean and simple
Show your best work only
Explain your design decisions
🧠Importance:
Helps in getting jobs or internships
Shows your skills and creativity
Builds your professional profile
Coclusion
Congratulations on completion of course
Access your Certificate here: