Become a UI/UX Designer | Everything You need to know
3.2 (234 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,277 students enrolled

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.2 (234 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,277 students enrolled
Created by HU Shahir
Last updated 7/2017
English [Auto]
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 6 hours on-demand video
  • 2 articles
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
  • 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 this course is for:
  • Basic understanding of how to use Adobe After Effect .
  • A little bit understanding of Adobe Photoshop Basics .
Course content
Expand all 52 lectures 06:11:25
+ Introduction
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:07
  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