Introduction
4.9
rating5000+
students1 time
paymentAnyone
can do (IT/NonIT)Simple English
Language32 hrs
content durationLifetime
course accessSelf-paced
recorded lecturesBy getting 100% of your fees back on course completion
↓
Upskill↓
100% Refund4.9
rating5000+
students1 time
paymentAnyone
can do (IT/NonIT)Simple English
Language32 hrs
content durationLifetime
course accessSelf-paced
recorded lecturesonly few seats left
Ask your doubts when you want, and get it solved within 5-10 minutes
With robust Mentor Support, experience seamless learning with personal mentorship
100% Free Learning
On the courses enrolled within the 100% Refund offer through which you earn your enrollment fee back as rewardStructured Course
Learn from our structured pre recorded courses made by experts to meet industry needsInstant Mentor Support
Personal mentors to guide and help you throughout your journey as a friend through chat, calls & screen sharingProjects & Certifications
Build major projects which makes your resume stand apart alongwith course completion certificationsInternship Opportunities
Get remote internship opportunities after the completion of the course along with dedicated assignmentsLifetime Course Access
Get liftetime course access on each course that you enroll, and enjoy the benefit of mentoring wheneve you want4.9
rating87
lectures31h 46m
total durationLifetime
accessIntroduction
Introduction to sketching
The sketching process
Sketching user flows
Sketching user flows 2
Sketching user flows 3
Sketching user flows 4
Sketching tips
How to stay inspired
How to find inspiration
INTRODUCING FIGMA
figma dashboard
figma tools
layers and pages
the top bar
design properties
prototyping in figma
Exercise creating a responsive layout
The Do's and Dont's
Speedup workflow with components
Creating own user flows.
Creating own user flows 2
Creating own userflows 3
Creating a basic sitemap
Before you start
Creating a sitemap 1
Creating a sitemap 2
Before getting started with wireframes
What is a wireframe
How to create wireframes
Wireframes in figma
Creating our homepage
Creating product page
Creating the Cart page
Prototyping basics in figma
Prototyping basics in figma 2
Prototyping basics in figma 3
Prototyping basics in figma 4
Linking a quick user flow
Working on small interactions
Why is feedback important and how to work on them
Grid
Grid Basics
Responsive Grids and Breakpoints
Creating own grid in figma
Grid Guidelines
Serif
Sans Serif
Display and mono
choosing a typeface
Creating our own type system
Color schemes
Impotant questions to ask
Creating Color Palletes
Creating a monochromatic color pallete
Applying our Color pallete
Expanding a strict color pallete
Creating our own colour pallete
What are forms and UI elements
Best practices for forms
Best practices for inputs
Best practices for inputs_2
Best practices for inputs_3
Best practices for inputs_4
Best practices for buttons
Cretaing components in figma
Using Atomic elements
Using instances in figma
Editing instances
Responsive components
Creating a registration form
Visual Assets introduction
Photos in Figma
Photos in figma 2
Working with developers
Figma plugins and icons
custom icons
Visual patterns for accessibilty
Tools to make design accessible
Visual patterns for accessibilty
What are design patterns
Why are design patterns so valuable
How to apply design patterns
Analyzing design atterens
Analyzing,Dissecting and choosing design patterns
Mobile design best practices
best practice part 2
Design fidelity
Style Exploartion
Style Exploration 2
Style Exploration 3
Style exploration 4
Importance of motion
The purpose of motion
Intro to smart animate
The power of smart animate
What is a microinteraction
Why are microinteractions important
Creating our own microinteraction
Creating our own microinteraction part2
Figmotion
Using Figmotion 2
Components Cards
Vertical Cards
Recipes Search
Recipes Order List
Using our design system
Using our design system system 2 part 1
Using our design system 2 part 2
Using our design systems 3
Final prototypes
Final prototypes 2
Final prototypes 3
Final prototypes 4
Where to host your web portfolio
How to place and export designs
Initial setup figma handoff
Build UI_Adding image assets
Build UI_Styling Image Assets
Build your first website
Developer fundamentals
HTML Tags
HTML Tags2
Self closing tags
Anchor tag
index.html
Relative vs absolute path
Html forms
Html forms 2
Submitting a form
HTML tags3
HTML vs HTML5
Copy a website
CSS INTRO
Your first css part 2
part 3
part 2 selectors
CSS properties
Selectors in css
Text and font
Images in CSS
Box model
px vs em vs rem
Critical render path
Flexbpx
CSS3
Respinsive UI
Bootsrap Introduction
Bootstrap
Boostrap Grid
Exercise: Building our startup landing page part 1+part2
Exercise: Startup landing page part3
Exercise: Startup landing page part 4
Exercise: Startup landing page part 5
Adding email subscribe form with mailchimp
Developer fundamentals
Workinfg with templates
Overview
Grid vs Flexbox Vs Bootstrap
CSS Grid1
CSS Grid2
CSS Grid3
CSS Grid4
CSS Grid5
Solution_Navigation bar
Solution_Navigation bar 2
Solution Cover
Project grid+footer
Solution prettify
Conclusion
Learn to create stunning UI/UX designs for any website
Get hired as a UI/UX designer.
Build amazing portfolio with great and extensive designs
Convert your awesome design to code with help of HTML/CSS.
Get high paying freelance projects for UI/UX.
Master Web Design and App Design both in this course.
The best part about Tutedude courses are their mentors, they actually help to the extreme. I am glad I took this course and enjoyed learning throughout. The instant 1:1 help I got is what i liked the most and will recommend everyone to go for it.
I have been a graphic designer previously but I wanted to switch to UI/UX as it has been recently more rewarding as a field. So took up this course and I am very happy that it matched all my expectations and I am now a professional UI/UX designer. Thanks Tutedude!
Explanation of the concepts is too good, many real world examples have been to used to explain the things. The course feels very interesting, throughout the course I was excited to learn new concepts and apply them. Also mentors have been a really great support for me, helping me wherever I got stuck. Thanks!
The instructor of this course is very sweet, she explains all the concepts very elaboratively. Also mentors are actually the best, if I asked something they will make sure I understand my doubt till the end. Also the assignments and projects they gave me, made sure that I get the industry exposure.
UI/UX is going to be the hottest skill of coming decade
Why I am confident about the above statement?
Just go and take a look of the initial UI/UX of Facebook, Amazon, google and you will realise that how can somebody browse those shabby looking websites and even purchase
from them. And see their UI/UX now, it's like the smoothest ever experience. And they are still continuosly improving it, you can't even imagine how the sites would look after a decade.
So it's clear that a lot of investment is being done in UI/UX and trust me it is that skill which can make people buy a bad product over a valuable product.
Let me confess one more thing. You can't learn UI/UX without actually implementing and brainstorming the things and
that's why in this course we have focused a lot on projects and live implications.
Trust me this is the only course you need to master UI/UX, enough for now I will see you inside the course.
All the best!
Why should I opt for Tutedude?
What is the validity of the courses and when can I watch them?
Will my course validity expire after I receive the 100% Refund amount ?
How will I know that 100% Refund offer has been applied ?
How will receive my 100% Refund amount ?
How can I access my Mentors?
Why don't you provide live classes and why should I prefer recorded lectures?