Become A Ui Designer

Tags: User Interface

Complete guide to UI and UX basics and UI Design , Motion , Interactive Prototype and Weekly Tutorials.

Last updated 2022-01-10 | 3.8

- Understanding UI and UX it self .
- Differences between UI and UX.
- Tools and Process of UI and UX Design .

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

* Requirements

* 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

Description

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

10 sections • 53 lectures

Introduction 3 lectures

Introduction Preview 02:54

Who can take this course ? Preview 01:07

Who should take this course and who should not ?

Project file and assets Preview 00:22

What is project file and assets contain ?
How to use them ?

What is UI /UX ? 5 lectures

What is UI /UX ? Preview 02:57

What is UI / UX itself?
Difference between UI and UX ?

UI / UX Design Process Preview 03:29

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

UI Design Tools Preview 01:38

Which software should use for creating wire frames , Prototypes and Mock ups ?

UI / UX fundamentals

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

DOWNLOAD HERE - Basic Slides Preview 00:03

All Slides that we have discussed is attached in here whiten a zip file .

01 - UI Prototype Design in Adobe Photoshop 12 lectures

Download project files and assets Preview 00:04

Before Starting Watch This Preview 02:25

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

Information about Mobile Application Preview 04:26

All information about Mobile application that we gonna create UI for it in this course .

01- Icon Design Preview 07:52

Setting up projects and creating App Icon .

02- Initial Setup for Login page design Preview 07:19

Initial setup to design login page and watch it in our Iphone mock-ups .

03- Adding UI Element to Login page Preview 07:50

Adding Different UI Elements including ( Buttons , Text Fields , Icons , Checkbox..) .

04- Login Page Finalizing Preview 06:49

Final touch to Login page design .

05- Home Page Design Preview 08:46

Designing top bar with search and hamburger menu icon with keyword text fields .

06- Fragment Design Preview 05:50

Creating Fragments or Place holder .

07- Menu Design Preview 08:43

Designing menu and add User photo , information .

08- Adding items to menu Preview 03:58

Adding Different items with text and icons in our sliding menu .

09- Final Taught of This section Preview 01:14

How to export each one of screens .

02 - UI Motion Mockup Design in Adobe After Effect 6 lectures

10- Setting up project in After Effect Preview 03:39

How to setup our project in After Effect .
Importing PSD Compositions .

11 - Login Page Animation Preview 10:46

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

12- Login Page Animation Finalizing Preview 07:24

Adding User writing and filling information (User name /Password ).
Creating Touch Button animation .

13- Home Page Animation Preview 05:50

Animating Home page .

14 - Sliding Menu Motion Preview 06:52

Giving motion for different menu items .

15- Final Taught (Mockup) Preview 04:54

Mixing all screens and put them all together in an IPhone mockups .

03- Live Prototype on your device using Flinto . 4 lectures

What is Flinto ? Preview 02:09

What is Flinto and why we need an interactive prototype .

Initial Setup Preview 04:03

Initial setup to design out prototypes.

Adding Screens Preview 04:52

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

Test on actual device Preview 02:51

How Test it on browser with IPhone mockup and on an actual device (IPhone) ?

04 - Starting Career as UI Designer 4 lectures

Where to go from here ? Preview 02:07

Where to from here ?
What to do if we want working as a UI / UX Designer ?
What resources we have to use ?

Building Protofilo Preview 01:52

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

Books you must read Preview 01:25

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

Starting Career as a UI Designer Preview 01:32

How to start career as UI Designer ?

Getting Started with Sketch App 6 lectures

What is Sketch ? Preview 04:12

What is sketch ?

Why sketch is so popular among UI / UX Designers ?

What is the difference between Sketch and Illustrator ?

Overview to User Interface Preview 13:39

Overview to User Interface of Sketch

Inspector Parameters Preview 14:26

How to control different parameters in inspector panels?

Masking / Scaling / Transform Preview 13:14

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