UI/UX Designing

Complete course to master Mobile and Web Design, UI/UX, HTML, and CSS

Premium Courses

Lifetime Access

1:1 Live Doubt Solving

Personal Mentorship

Certificate

31 hours

Curriculum

✔15section ✔ 87lectures ✔ 31h 46m total length

  • Introduction

  • 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

  • Creating a basic sitemap
  • Before you start

  • 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

Offers By Tutedude

Customized pack

Get any 4 courses at 1499Rs.

Apply now

All access pack

Get all 21 courses at 4499Rs

Apply now

Course Overview

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.

About this Course

Read more

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!

Have Some Query ?

Tutedude provides you the professional curated content by Indian instructors along with live doubt solving and personal one to one mentorship which you won't find anywhere else.

You will have lifetime access to the courses and can watch the lectures anytime you want. So it is totally flexible and provides you the comfort of learning anytime anywhere. Also as the technologies progress we keep on updating our courses so you get the access to them too.

Your doubts will be solved on a live chat, as soon as you get a doubt just ping your mentor through the chat option and within 5-10 minutes you will be connected to him to solve your doubts.

Tutedude doesn't believe in the idea of teaching 100 students in 1 class where the student sometimes feels hesitant to ask some doubts and where the other student feels that this student is wasting his time by asking silly doubts. Moreover in this busy world it becomes difficult to attend the classes on a specific schedule. So we combined the benefits and provide you interactive video lectures and live one on one doubt solving to learn at your own pace and comfort.

Tutedude

OR









Already have an account?

Otp confirm

Enter the 5 digit otp sent to your mobile number.

Forgot Password

Enter Your registered Email your account is associated with and we will send you otp to your email

Tutedude

OR





Forgot password?

New user?Register