Become a UI/UX Designer | Everything You need to know
3.7 (91 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
717 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Become a UI/UX Designer | Everything You need to know to your Wishlist.

Add to Wishlist

Become a UI/UX Designer | Everything You need to know

Complete guide to UI and UX basics and UI Design , Motion , Interactive Prototype and Weekly Tutorials.
3.7 (91 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
717 students enrolled
Created by HU Shahir
Last updated 7/2017
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 6 hours on-demand video
  • 2 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understanding UI and UX it self .
  • Differences between UI and UX.
  • Tools and Process of UI and UX Design .
  • Basic of Setuping workspace of Photoshop and After effect for UI Design.
  • Design of Complete UI Prototype in Adobe Photoshop .
  • Giving life to UI Elements and design motion mockup of UI in Adobe After Effect.
  • Interactive Prototype using Flinto .
  • Process to start first career as UI Designer .
  • WEEKLY Tutorials for boosting up your skills .
  • Using Sketch for UI/UX Design
View Curriculum
  • Adobe Photoshop CC (Trial or paid Version) .
  • Adobe After Effect CS6 or Newer version (Trial or paid)
  • Self Confidence and creativity.
  • Sketch App on OSX

Latest Update : 5 July / 2017 - NEW Class on Section 10 : Designing Facebook IPhone App UI in Sketch .

Update :  12 MAY / 2017   -  NEW Section : Invision App For UI / UX Prototype / User - Testing and much more .

A Big update 5/1/2017   NEW Section Added : Getting Started with Sketch app  - 

1.15 Hours of video content on Section 8 Check it out now !

Update 2016 /11/9 on WEEKLY Tutorials  02 - Music Player UI Design  in Photoshop : Check it out 

Update 2016 /26/8 on WEEKLY Tutorials  01 - Flat Button with Different states in Photoshop : Check it out 


Do you want start working as a UI  Designer ? 

Do you want understand what is UI / UX and other basic staffs to start your journey in UI / UX Design ?

Then This is course is a perfect course is for you , as you know UI / UX is the important phase of software development and when you use Udemy to learn without User Interface elements and User experience researches and information you will not able to use this web application in this way or when you browse in Website and you feel tired of using it its mean that UX researches and Backbone of that product is weak and useless or if you love working with a software or website you love colors of website or any other visual elements with good emotions that you have while working with a specific website and software or a product its mean that UI / UX is of following website or any other products or very strong and powerful .

We have 5 Section in this course and this is almost a complete course for people that want to start working as UI designer . We will focus on UI Design then UX in this course although we will talk about some basic and how to consider UX principles while creating UI for an application . 

1- SECTION | 00-Basic : in this section we will talk about some basics and must know topics before jumping to actual design process for example what is UI / UX itself ? Tools for creating Prototypes and other basic staffs with Slides for download .

2- SECTION | 01-UI Prototype Design for Mobile Application in Adobe Photoshop : in this section we will start from collecting information about our application that we want to design UI for it and we will start from icon design up to creating 5 screen with Icons and all details and UI elements .

3- SECTION | 02- UI Motion Prototype and Mockup in Adobe After Effect : in this section we take all those design from Photoshop and start creating motion for each UI Elements and transitions between screen and combine all of them put it into an IPhone screen .

4- SECTION | 03- Interactive Mock-up with Flinto : This is very cool section because we Create interactive mock-up and we will test it on our browser and on an actual smartphone using powerful UI Design tools Flinto .

5- SECTION | 04- Starting Career as a UI Designer : We will talk about where to go from here ? how to get a job with any experience ? what are must read books to read before applying to a job ? how to build portfolio  and many other staffs .

6- SECTION | 05- Sketch for Everyone :   Getting Started with Sketch App : Sketch is one of the light weight and inexpensive application for OSX that allows us to design UI / UX Design without investing to much money and time in this section we will go in depth of Sketch in 1.15 Hrs .

7-SECTION |  06- Invision App: Using invision for UI/UX Design / Prototype and Usability testing.

8- SECTION | 07- WEEKLY Tutorials : We will have tutorials on an specific  topic about UI and Graphic design once in a week to boost up your skills in this field.

9- SECTION | 08- Designing Facebook IPhone app in Sketch : Creating 5 main Screen of Facebook Application in Sketch.

Keep in mind,  that we do not  use any third party plugins on any of these application. We will use powerful built in tools of these software.

Lets get started with UI / UX :)

Who is the target audience?
  • Basic understanding of how to use Adobe After Effect .
  • A little bit understanding of Adobe Photoshop Basics .
Compare to Other User Interface Courses
Curriculum For This Course
52 Lectures
3 Lectures 04:23

  • Who should take this course and who should not ?
Preview 01:07

  • What is project file and assets contain ? 
  • How to use them ?
Preview 00:22
What is UI /UX ?
4 Lectures 08:08
  1. What is UI / UX itself? 
  2. Difference between UI and UX ?

What is UI /UX ?

  • How many process we must consider while we creating UI and UX ?
  • Is UI and UX process are the same ?
UI / UX Design Process

  • Which software should use for creating wire frames , Prototypes and Mock ups ?
UI Design Tools

Testing students for better understanding of some fundamentals that we have learnt in our first lessons . 

UI / UX fundamentals
3 questions

  • All Slides that we have discussed is attached in here whiten a zip file .
DOWNLOAD HERE - Basic Slides
01 - UI Prototype Design in Adobe Photoshop
12 Lectures 01:05:16
Download project files and assets

  • Understanding Wire framing in UI .
  • Color profile setting in Adobe Photoshop for good color collaboration between Computer Monitor and Smartphones.
Before Starting Watch This

  • All information about Mobile application that we gonna create UI for it in this course .
Preview 04:26

  • Setting up projects and creating App Icon .
01- Icon Design

  • Initial setup to design login page and watch it in our Iphone mock-ups .
02- Initial Setup for Login page design

  • Adding Different UI Elements including ( Buttons , Text Fields , Icons , Checkbox..) .
03- Adding UI Element to Login page

  • Final touch to Login page design .
04- Login Page Finalizing

  • Designing top bar with search and hamburger menu icon with keyword text fields .
05- Home Page Design

  • Creating Fragments or Place holder .
06- Fragment Design

  • Designing menu and add User photo , information .
07- Menu Design

  • Adding Different items with text and icons in our sliding menu .
08- Adding items to menu

  • How to export each one of screens .
09- Final Taught of This section
02 - UI Motion Mockup Design in Adobe After Effect
6 Lectures 39:25
  • How to setup our project in After Effect .
  • Importing PSD Compositions .
Preview 03:39

  • Giving Motion to different elements of Login page including (Buttons , Text Fields ..) . 

11 - Login Page Animation

  • Adding User writing and filling information (User name /Password ).
  • Creating Touch Button animation .
12- Login Page Animation Finalizing

  • Animating Home page .
13- Home Page Animation

  • Giving motion for different menu items .
14 - Sliding Menu Motion

  • Mixing all screens and put them all together in an IPhone mockups .
15- Final Taught (Mockup)
03- Live Prototype on your device using Flinto .
4 Lectures 13:55
  • What is Flinto and why we need an interactive prototype .
What is Flinto ?

  • Initial setup to design out prototypes.
Initial Setup

  • Adding  our already designed screens and creating transitions and links between them .
Adding Screens

  • How Test it on browser with IPhone mockup and on an actual device (IPhone) ?
Test on actual device
04 - Starting Career as UI Designer
4 Lectures 06:56
  1. Where to from here ?
  2. What to do if we want working as a UI  / UX Designer ?  
  3. What resources we have to use ?
Where to go from here ?

  • If we do not  have experience how to got accepted to job interview .
Building Protofilo

  • Before starting careers which books are best to read?
  • Is reading books help us to success in our jobs and boosting up our skills ?
Books you must read

  • How to start career as UI Designer ?
Starting Career as a UI Designer
Getting Started with Sketch App
6 Lectures 01:11:34

What is sketch ?

Why sketch is so popular among UI / UX Designers ?

What is the difference between Sketch and Illustrator ?

Preview 04:12

Overview to User Interface of Sketch 

Overview to User Interface

How to control different parameters in inspector panels?

Inspector Parameters

Using Masking , Scale , Rotate and Transform tool for advance and complex shapes.

Masking / Scaling / Transform

Designing simple and minimal login page .

Login Page Design

How to install third party plugins ?

How to create symbol from shapes ?

Plugin and Symbol
Invision App : UI / UX Design / Prototype / Community /
2 Lectures 27:26
Overview to Invision App

Syncing from Sketch to Invision
WEEKLY | UI / UX Design Tutorials
3 Lectures 24:48
  • What is WEEKLY Tutorials about ?
  • Why to check this section every week ?
Preview 00:54

  • How to create a Flat button with different states in Photoshop .
01- Flat Button with Different States

  • Creating UI Design for an Music Player based on the wire frames .
02- Music Player UI Design in Photoshop
NEW/7/2017-Designing Facebook IPhone App UI in Sketch
8 Lectures 01:49:35

Facebook App / Login screen

Facebook App/ News Feed 01

Facebook App News Feed 02

Facebook App/ News Feed Final

Facebook App / Friend Request Screen

Facebook App / Notification Screen

Facebook App / Setting Screen
About the Instructor
HU Shahir
3.8 Average rating
520 Reviews
10,220 Students
16 Courses
Motion Graphic & Visual FX Artist (Polygon Motion)

Hey, I am HU Shahir, a motion graphic and visual FX artist, based in Germany. I have six years of professional experience working with major TV, media-production and film-making companies as a motion designer, VFX artist, visual FX supervisor, graphic designer and director of motion contents and other areas.

I founded Polygon Motion in 2016 to provide online courses on various platforms (Udemy & Skillshare) and on Polygon Motion’s online-school .

I have a lot of courses on Motion Graphics, Graphic Design and UI/UX Design on Udemy and other platforms.

For further information check out Polygon Motion’s website.

Enroll in my courses and let’s start a new journey :)