Complete Web & Mobile Designer Course: UI/UX, Figma, +more | SCRATCH TO ADVANCED
Self Paced Course | No Prior Knowledge Needed.
Current Price: Rs. 399 Rs. 2950/- | Limited Period Offer
Become a UX/UI Designer! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS
MICROSOFT CERTIFIED COURSE (scroll bottom to see sample certificate.)
Course is available in Hindi as well as English : After Enrolment you may choose the Language
JUST PAY & LEARN: User id and password will be mailed post enrolment to access the all materials.
Course Description
Just updated with all modern Design tools and best practices! Join a live online community of over 10,000+ students and a course taught by industry experts that have actually worked for top companies. A great Designer is becoming harder and harder to find and it isn’t rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish.
The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!
The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.
English Demo Lecture by Mr. Andrew.
Hindi Demo Lecture by Mr. Abhinav.
English Demo Lecture by Mr. Derangi
- Introduction to sketching
- The sketching process
- Sketching user flows
- Sketching tips
- How to stay inspired
- How to find inspiration online
- Plans and Signup
- Where to use Figma
- Figma Ui – Structure
- Figma Ui – Files
- Figma Ui – Toolbar
- Figma Ui – Left Sidebar
- Figma Ui – Right Sidebar
- Figma Ui – Structure
- Shapes and Tools – Frames
- Shapes and Tools – Groups
- Shapes and Tools – Basic Shapes and Boolean Operations
- Designing in Figma – Images
- Designing in Figma – Getting Started with Texts
- Designing in Figma – Constraints
- Designing in Figma – Using Auto Layout
- Designing in Figma – Auto layout Properties
- Designing in Figma – Community Files
- Designing in Figma – Community Plugins
- Designing in Figma – Sharing and Comments
- Designing in Figma – Creating a logo with basic shapes
- Designing in Figma – Auto layout buttons
- Designing in Figma – Creating a responsive navigation
- Responsive text
- Imagery and Gradients
- Strokes and Shapes
- Layout and Responsiveness
03 User Flows
- Getting Ready for this section
- The DOs and DONTs
- User Flows in Figma – Onboarding
- User Flows in Figma – Search
03 Sitemaps
- Introduction to Sitemaps
- Create a basic Sitemap
- Reusable Sitemap Assets
- Figma Check in – Basic componenets and Variants
- Sitemaps in Figma – The top layer
- Sitemaps in Figma – Digging Deeper
Tips for Creating Great Sitemaps
EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback
01 Wireframes
- What is Wireframe?
- How to create a Wireframe?
- Figma Check In-Basic Button Componenet
- Figma Check In-Basic Variants
- How to use our wireframe componenets
- Wireframe – Home
- Wireframe – Cart
- Wireframe – Profile
01 Prototyping
- Figma Check In-Prototyping in Figma
- Prototyping in Figma – Flows and Starting points
- Prototyping in Figma – Connections
- Prototyping in Figma – Interactions
- Prototyping in Figma -Animations
- Prototyping in Figma – Prototype Settings
- Prototyping in Figma – Prototype Settings
- Prototyping in Figma – Prototype Presentation
- Project – Navigation
- Project – Removing an item from your wishlist
- Project – Finding a Product
01 Getting Feedback
- Why is Feedback Important
- Constructive Feedback
Visual Design – Design Theory + Accessiblity
01 Spacing and Grids
- What is a GRID?
- Grid Basics
- Figma Check In – Fixed and Fluid Grids
- Figma Check In – Breakpoints
- Figma Check In – Grid Style
- Figma Check In – Mobile Layout Grid
- Figma Check In – Desktop Layout Grid
- Simple Rules to Follow
Typography
Color
Imagery and Iconography
Forms + UI Elements
Accessiblity
Design Exploration – Applicaiton Design + Design Systems
01 Design Patterns
- What are Design Patterns?
- Why are Design patterns valuable?
- How to Apply Design patterns?
- Analysing Design patterns
- Dissecting and choosing Design patterns
- How to create a Wireframe?
01 Mobile Design
- Mobile Design Best Practice
01 Visual Design and Exploration
- Design Fidelity
- Visual Exploration – Navigation
- Visual Exploration – Buttons
- Visual Exploration – Effects Styles
- Visual Exploration – Product Cards
- Visual Exploration – Text Cards
- Visual Exploration – Home
- Visual Exploration – Product Page
01 Motion and Microinteraction
- The important of Motion
- Why Micro Interactions are important?
- What is a Micro Interaction?
- Figma Check In- Intro to smart animate
- Figma Check In- Smart Animate Properties
- Exercise – Parallex
- Exercise – New Message
- Exercise – Overlays
- Exercise – Interactive Componenets
- Exercise – Interactive Buttons
- Project – Parallex Welcome Screen
- Project – Drag onboarding
- Project – Cart Overlay
- Project – Button Micro Interaction
PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
01 Design System
- Foundation Styles and Components vs. Product Specific Components
- Building Fidelity and Org Potential Components and styles
- Foundational Styles and Components
- Components – Buttons
- Components – Cards
- Components – Headers
- Components – Inputs
- Components – List Items
- Components – Navigation
- Components – Misc. Elements
01 Execution
- Working towards Our final Designs
- Execution – Introduction Screen
- Execution – Onboarding Screen
- Execution – Registeration Screen
- Execution – Home Screen
- Execution – Wishlist Screen
- Execution – Profile Screen
- Execution – Cart and Checkout
- Execution – Registeration
- Execution – Adding to Cart
- Execution – Checkout
- Execution – Lotte Files Plugin
- Execution – Search and Filters
FROM Figma To Website (take a Figma design and convert it into LIVE website using HTML and CSS)
HTML + HTML5
CSS + CSS3 – CSS Basics, CSS Grid, Flexbox, CSS Animation
Putting Your Website Online
- Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023
- Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
- Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
- Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
- Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
- Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
- Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
- Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
- Learn best practices that takes years to learn in the design industry
- Learn to make professional logos and design choices for all branding needs
- Learn UI/UX best practices using the latest trends in the industry
- Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!
- Anyone who wants to start a Web or Mobile Design business on the side as a freelancer, or work as a designer at a company
- Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
- Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
- Anyone who wants to learn about the latest CSS3 features like Flexbox, CSS Grid and CSS Variables as well as HTML5
Course Completion Certificate
A course completion certificate will be provided over your registered email address.
Please note: The Signatures and logos are hidden for sample certificates.
Recent Course Reviews
Vishal Kumar
Placed In Accenture
A good and straightforward course. I appreciated having assets to work with so I could make my own websites. The projects covered here were also beneficial. Highly Recommended!
Key Highlights
- 10 Week Program
- 40+ hours of Live Lectures
- Doubt Solving Session on every Weekday
- 60+ hours of Recorded Content
- 10+ Projects covering HTML, CSS, JavaScript, and React
- Full Stack Real-World Project Building
- 200+ Questions to Practice
- 10+ Contests to assess your Full Stack Skills
- Build industry recognized resume
Frequently Asked Questions (FAQs)
A computer generated user id and password will be sent over your registered email id to access all the enrolled materials. Dashboard link: https://knowledgeup.co.in/dashbaord/
- No requirements. We teach you and show you everything from scratch! From Zero to Mastery
- Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!
To Enrol in the course, Kindly click on the Enrol Now button above and enrol in the course. If you have any difficulties you can contact our support team on the number provided.
After you have completed your course, and answered quiz based on your marks obtained you will receive your e-certificate.
Yes the certification is valuable and you may use it for all kind of interviews.
The course is available in Hindi as well as English languages. You may switch the language inside the course.
Offer Expires In:
₹ 399/-
Rs. 2950/-