online

UI/UX and Product Design

The UI/UX and Product Design course is a comprehensive program designed to equip learners with the skills to excel in user interface and user experience design. Starting with foundational concepts, students will explore essential tools like Figma and Notion, dive deep into visual design principles, and master the art of creating user-centric designs. The course also covers mobile app design, product development, and culminates with practical projects and career-building sessions, including portfolio creation and freelancing tips.

Instructors: Md Shahadat Hussain

Enroll Now

Duration

5 Month

Class

Class Duration

1.5 Hours

Description

The UI/UX and Product Design course at weDevs Academy is crafted to transform beginners, freshers, junior designers into proficient professionals. The course begins with a deep dive into the core principles of UI and UX design, helping you understand the importance of creating intuitive, user-friendly interfaces. You’ll learn how to differentiate between UI and UX, and how each plays a crucial role in the overall design process.

You’ll get hands-on experience with industry-standard tools like Figma and Notion, mastering everything from basic layer organization to advanced features like Auto Layout and Figma plugins. The course also explores fundamental visual design principles, including color theory, typography, and iconography, ensuring that your designs are not only functional but also aesthetically pleasing.

As you progress, you’ll delve into mobile app design, learning the differences between native and cross-platform development. You’ll explore Apple’s Human Interface Guidelines and Google’s Material Design, equipping you with the knowledge to create seamless mobile experiences. Through practical projects, you’ll apply what you’ve learned by designing both web and mobile applications, with a focus on user-centric design and real-world usability.

The course also emphasizes the importance of product design, covering the entire product development life cycle from ideation to execution. You’ll learn how to balance business goals with user needs, ensuring that your designs are both effective and feasible for development. By the end of the course, you’ll be able to build and manage a design system, creating consistent and scalable design solutions.

Finally, the course concludes with essential career-building modules. You’ll learn how to create a compelling portfolio, craft a professional resume and CV, and navigate the job market—whether you’re aiming for a local position, remote work, or freelancing. With practical advice and industry insights, this course prepares you to launch a successful career in UI/UX and product design.

Course Content

Introduction to UI Design and UX Design

[Class -01] Introduction to UI & UX
Orientation – get acquainted with each other
What is design? Why do we need design
What is UI (User Interface)
What is UX (User Experience)
Differences between UI and UX design
How design can make things easy or tough for us
How good is “UI/UX Designer” or “Product Designer” as a career

[Class -02] Introduction To Necessary Tools – Notion and Figma
Notion – for project management
Figma
- UI3 (New UI of Figma)
- Organizing layers, files and teams in Figma
- Preview, share, comment
- Use of Figma plugins

UI (User Interface)/Visual Design Principles

[Class -03] Color, Typography, Imagery
Color – Sampling color, creating color palettes
Use of brand colors
Color contrast, color consistency
Typography – Typeface categories, choosing font, font pairing
Typography hierarchy – H1, H2, H3…paragraphs etc.
Understanding legal aspects of third party assets (font, image, copy etc.)
Font search, legal use of fonts
Imagery – usage of photos, picking right photos
Iconography – use of icons

[Class -04] Grids, Guides, Alignments
Use of grids
Use of guides, applying correct alignments
Understand use of a design for various types of screens/devices
Understand breakpoints
Figma Auto Layout: part – 1

[Class -05] Spacings, Visual Hierarchy, Consistency
Figma Auto Layout: part – 2
Spacings and proximity
Visual hierarchy
Scale and proportion
Consistency in design

[Class -06] Important and Major UI Elements: Part – 1
Breadcrumbs
Buttons, Links
Alerts
Avatars
Badges, Tags
Tabs, Steps

[Class -07] Important and Major UI Elements: Part – 2
Cards of various types
Input Fields, Text Areas
Checkboxes, Radios
Dropdowns
Forms

[Class -08] Important and Major UI Elements: Part – 3
Modals, Popups, Tooltips
Paginations
Toggles
Accordions
Basic Tables
Progress Bars

UX (User Experience) Design Principles: Part – 1

[Class -09] Planning A Project
Use of pen & paper
Research & analysis
Understand target audience
User centric design
User persona
Information architecture
Low-fidelity wireframes

Project – 1: Let’s Design A Saas Web Application

[Class -10] Research, UX
Understand the niche, target audience
Create 2-3 user personas
UX research
Create information architecture
Gather inspirations – create Moodboard

[Class -11] Sign Up, Login Steps
Wireframe the sign up page
Wireframe login page
Design the sign up page
Wireframe the login page

[Class -12] Design The Home/Dashboard Page
Wireframe the Home/Dashboard page
Design the Home/Dashboard page – learn designing various types of sections

[Class -13] Wireframe Inner Pages
Identify inner pages based on information architecture
Wireframe inner pages – use sections from Home + design new sections

[Class -14] Designing Inner Pages: Part – 1
Design inner pages – learn designing more sections

[Class -15] Designing Inner Pages: Part – 2
Design inner pages – learn designing more sections

Mobile Apps (Applications) Design

[Class -16] Introduction To Mobile Apps Design
What is a mobile app? What is its purpose?
Difference between native and cross-platform app development
Human Interface Guidelines by Apple
Material Design by Google
Designing for native (iOS, Android) development
Designing for hybrid/cross-platform development

[Class -17] Basics Of Mobile Apps Design
App icon – design and best practices
Layout – grids, guides and safe areas
Device sizes and orientation
Typography (for iOS and Android)
Different parts of a mobile app interface

Project – 2: Let’s Design An eCommerce Mobile App

[Class -18] Research, UX

Understand the niche, target audience
Create user personas
UX research
Create information architecture
Gather inspirations – create Moodboard

[Class -19] Splash, Onboarding, Sign Up, Login – Wireframes

What is a splash screen?
Wireframe the splash screen
What is onboarding?
Wireframe onboarding steps
Wireframe the sign up screen
Wireframe the login screen

[Class -20] Splash, Onboarding, Sign Up, Login – UI Design

Design the splash screen
Design onboarding screens
Design the sign up screen
Design the login screen

[Class -21] Home Screen Design

Wireframe Home screen
Design Home screen
Design the tab bar

[Class -22] Inner Screen Design: Part – 1

Wireframe + design the menu
Wireframe major inner screens (shop, categories, product single)

[Class -23] Inner Screen Design: Part – 2

Wireframe shopping cart/my cart screen
Wireframe checkout flow

[Class -24] Inner Screen Design: Part – 3

Design major inner screens (shop, categories, product single)

[Class -25] Inner Screen Design: Part – 4

Design shopping cart/my cart screen
Design checkout flow

[Class -26] Inner Screen Design: Part – 5

Wireframe rest of the inner screens (my orders, shipping, card, profile, settings etc.)

[Class -27] Inner Screen Design: Part – 6

Design rest of the inner screens based on the wireframes

UX (User Experience) Design Principles: Part – 2

[Class -28 (Partial)] Testing, Iterations

Usability study
Iterate designs
Identify when a design is complete
Naming your design files, layers, folders properly
Clickable prototypes
Document and share the design
Hand off the design for production

Product Design

[Class -29 (Partial)] Introduction to Product Design

What is product design
Differences between UI/UX design and product design
Major responsibilities of a product designer
Collaboration with stakeholders, teams
Product development life cycle

[Class -29 (Rest)] Important Aspects of Product Design

Achieve business goals, stakeholder goals
Conversion centric design
Maintain retention and growth
Decision making, ownership, cost effectiveness
Development friendly, feasible design

[Class -30 (Partial)] Brand Guidelines

What is a brand? What is brand identity/guideline
Properly use brand guidelines in a project

[Class -30 (Rest)] Advanced UI Elements and Aspects

Data visualization elements
Examples of good design and bad design (do and don’t)

[Class -31] Design Systems, Design Hand off

Build a basic design system
Build your asset library
Introduction to design systems
Benefits of design systems
Explore popular design systems
Use of existing design systems

Project – 3: Let’s Design A Job Portal: Part -3 (Web Application)

[Class -32 (Partial)] Research, UX

Understand the niche, target audience
Research, gather some inspirations
Create 2-3 user personas
Create information architecture
Analyze brand guidelines

[Class -32 (Rest)] Wireframes

Wireframe sign up, login pages
Wireframe onboarding pages
Wireframe Home/Dashboard page

[Class -33] Design Initial Pages

Design sign up, login pages
Design onboarding pages
Design the Home/Dashboard page
Create part of the Design System
Create necessary components, build asset library

[Class -34] Wireframe Inner Pages

Wireframe inner pages – job listing, job details, apply to job
Wireframe inner pages – my jobs, my account etc.

[Class -35] Design Inner Pages

Design inner pages – job listing, job details, apply to job
Design inner pages – my jobs, my account etc. (assignment)
Complete the design system
Complete the components and the asset library

Project – 4: Let’s Design A Job Portal: Part -4 (Mobile App)

[Class -36] Research, UX, Wireframes

Use research part from the “web application” project
Wireframe splash, sign up, login pages
Wireframe onboarding pages
Wireframe Home/Dashboard page

[Class -37] Design Initial Pages

Design splash, sign up, login pages
Design onboarding pages
Design the Home/Dashboard page
Create part of the Design System
Create necessary components, build asset library

[Class -38] Wireframe Inner Pages

Wireframe inner pages – job listing, job details, apply to job
Wireframe inner pages – my jobs, my account etc.

[Class -39] Design Inner Pages

Design inner pages – job listing, job details, apply to job
Design inner pages – my jobs, my account etc. (assignment)
Complete the design system
Complete the components and the asset library

Build Your Career

[Class -40] Resume, CV, Portfolio

What are resume and cv?
Build your resume and cv
What is a portfolio? The importance of portfolio
Build a professional portfolio

[Class -41] Job Guidelines

Internship – should you do it
Local job guidelines
The art of applying & negotiation
Foreign (local + remote) jobs – tricks and techniques

[Class -42] Freelancing Guidelines

What is freelancing? Should you go for it
Freelance marketplaces
Publish your profile & portfolio in marketplaces
The art of applying & negotiation
Important skills to have for freelancing
Find clients outside of marketplaces

Instructor

Md Shahadat Hussain

CEO at DroitLab

37 Reviews

4.8 Rating

170+ Students

Since 2014, I’ve been running a successful design agency specializing in conversion-oriented designs and strategies. I help businesses boost sales by enhancing their sales funnel, user experience, and visual design. Whether you’re an established business or just starting out, I provide tailored UX strategies, professional UI designs, and performance-optimized websites.

Career Opportunities

UI/UX design is a rapidly growing field that focuses on creating intuitive, user-friendly, and visually appealing digital interfaces. As businesses increasingly rely on digital platforms to engage with customers and drive growth, the demand for skilled UI/UX designers continues to rise. Here are some potential career opportunities related to UI/UX design:

Open Job Positions

With practical advice and industry insights, this course prepares you to launch a successful career in UI/UX and product design.

UI Designer

UX Designer

Product Designer

Interaction Designer

User Experience Researcher

Visual Designer

Not only amazing course

Not only industry standard curriculum, we have other career
oriented features just for you.

Job Placement

Expert Support System

Mock Interview

Industrial Visit

Hear from our learners

Be one of them who became successful in their career. Start learning today
to shine tomorrow.

Asad Nur

Software Engineer, weDevs

The course content was well-structured, and easy to follow. I appreciate the practical approach of the course, which allowed me to learn by doing.

Ratul Hasan

Software Engineer, weDevs

The learning experience at weDevs Academy is unparalleled. From the curriculum to the community, everything exceeded my expectations.

Asif Hossain Nadim

Software Engineer, weDevs

“Thanks to weDevs Academy, I transitioned into a career I love. The courses are comprehensive, and the instructors are top-notch!”

Abul Hasan Aunshon

Software Engineer, weDevs

The course was transformative, imparting deep plugin development knowledge and vital lessons in professional ethics, behavior, and resilience under pressure.

Certification that Makes a Difference

Stand out with a certificate from weDevs Academy. Recognized by industry leaders
worldwide, our certifications boost your profile,

Some questions, some answers

Here are our most frequently asked questions

Questions 1

Ans 1

Questions 2

Ans 2

~~BDT 10000~~

BDT 8,500

9 Days left!

Batch Start

Skill Level

Admission

For details about the course

Call Us: +8801308697766