UI / UX

Posted on by admin
0

COURSE : UI /UX | ONLINE TRAINING | DURATION : 30 HOURS

ABOUT COURSE

The UI, “User Interface” is the graphical layout of an application. UI designers create the look and feel of an application’s user interface including screen layout, transitions, interface animations, and every single micro-interaction. The UX, “User Experience” of the app is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created. User interface and user experience design are in great demand and are applicable across products and industry domains. With customer experience being the centerfold of product marketing, companies are focussing on enhancing the interface that their customers have access to. By ideating the branding, design, utilization and the function of the product, UX designers set the tone of the user experience. It is about creating a product that meets the need of the user and minimizes/eliminates inconsistencies and glitches.

UI-UX design has a direct impact on business outcomes, with UI/UX design-driven companies outperforming their competitors by up to 228%.

Benefits:

UI-UX Design course offers numerous benefits to both individuals and organizations. The course will benefit aspirants who would like to build their skill set in UI or UX for the app and web design. Prior knowledge or experience in graphic or visual design is recommended for the course.  Anyone with experience in front and back-end web development or human-computer interaction can also enhance their visual design capabilities and analytical skills with a UI/UX Design Certification.

Individual Benefits:

You can reap the following benefits by taking up UI-UX design course:

  • The expected rise in market demand for job seekers by 2025 is more than 15%.
  • UI-UX Designer Average Salary in the USA is $73303 as per PayScale.com.
  • Get an opportunity to work in a creative, fun, and challenging environment.
  • Expand your opportunities by working with amazing individuals.
  • Moreover, you don’t need to learn to code.

Organisational Benefits:

UI/UX Design training offers benefits to organisations in the following way:

  • Research shows a customer conversion rate of 400%
  • UX increases Business Intelligence and eases decision making
  • Results in better user experience leading to productivity improvement
  • Finally, the implementation of UI/UX reduces development time.
  • Major players like Amazon, ESPN.com, Bing, etc have adopted UX/UI design to improve customer experience

An Adobe survey found that 87% of managers have made hiring UX designers as the top priority of their organization, while 73% wanted to double their population of UI-UX designers in their organization in the next five years.

As a UI-UX designer, you’ll be shaping the world around you, influencing and improving how people experience it. So, part marketer, part designer, part project manager; the role is complex, challenging and multifaceted and is taking the market by storm.

UI/UX design course- Adding value to your career

  • According to research and statistics- ”every dollar spent on UX brings between $2 and $100 dollars in return.”-one of the significant reasons companies have huge demand for UI/UX designers
  • It increases the scope of UI/UX designers in contributing to the company’s bottom line.
  • Recent findings from Forrester Research suggest that a well-conceived, frictionless UX design could potentially raise customer conversion rates up to 400%., which is why UX is the mainstream career option.
  • 48% of users say they feel frustrated and annoyed when on sites that are poorly optimized for mobile
  • 52% of users said that a bad mobile experience made them less likely to engage with a company
  • 88% of the users are less likely to return to a website after a bad user experience
  • Average User Interface Designer Salary is Rs 400/per hour in India

Course Syllabus

Introduction to UI / UX

  • Roles of UI Developer
  • Roles of UI Designer
  • Difference between UI Developer & UI Designer
  • Technologies required for UI Development

Tools Used for UI / UX

  • Notepad++, Atom, Sublime Text, Brackets
  • Visual Studio Code, WebStorm IDE
  • Live Server using npm
  • All tools installation and usage

Basics of UI

  • Introduction to Web

Introduction to HTML 5

  • How it works
  • Structure of an HTML Doc
  • HTML First Application
  • Rules of HTML coding
  • Header Tags, Paragraph tag
  • DIV tag, Span Tag, Text Formatting
  • Unordered List, Ordered List
  • Images, Tables, Links, HTML Entities, Iframes
  • Mini Project (The Great India Website)

Forms in HTML 5

  • Introduction, Form Elements
  • Input Types, Attributes
  • Mini Project (Online Job Application)

Semantic Elements in HTML 5

  • Introduction
  • <Section>, <Article>, <Header> <Footer>
  • <Aside>, <nav>, <figure>, <figcaption>
  • <Details>, <Summary>, <time>, <main>
  • Mini Project (Company Website)

Media Elements in HTML 5

  • <audio>, <video>

Introduction to CSS3

  • Introduction,
  • CSS Selectors, CSS Pseudo classes selection
  • Inline CSS, Internal CSS, External CSS
  • Div, Id, Classes, Colors, Borders
  • Margins, Paddings, Text-formatting
  • Fonts, Lists, Styling Links, Tables, Box Model
  • Display, Position, Float, Align, Pseudo Elements
  • Navbars, Tooltips, Forms, Opacity, Image Gallery

2D Transforms in CSS 3

  • Introduction
  • translate(), rotate(), scale(), skewX(), skewY()
  • skew(), matrix()

3D Transforms in CSS 3

  • Introduction
  • RotateX, RotateY, RotateZ

Transitions in CSS3

  • Introduction
  • Transition & Transformation
  • Speed Curve, Delay Transition

Animations in CSS3

  • Key frames rule, Delay Animation
  • Specify animation speed curve
  • Animation shorthand

Images in CSS3

  • Rounded Images, Thumbnail Images, Image Text

Buttons in CSS3

  • Basic Button Styling, Buttons Colors, Button Sizes,
  • Rounded Buttons, Hover able Buttons
  • Shadow Buttons, Disabled Buttons
  • Button Groups, Animated Buttons
  • Mini Project (Technology Portal Website)

Basic JavaScript

  • Introduction to JavaScript
  • JavaScript features
  • Understanding Runtime Env
  • Why to Learn JavaScript
  • Interesting Facts of JS
  • History of JavaScript
  • Setting up Development Env
  • JavaScript Basics
  • Inline JavaScript
  • Internal JavaScript
  • External JavaScript
  • Variable Declaration in JS
  • JS Data Types and Operators
  • JS Conditional Statements
  • JS Objects, Arrays and Functions
  • JS Math & Date Objects
  • JS DOM Manipulation

Advanced JavaScript

  • JS Scopes Concepts
  • JS Advanced functions
  • JS Closures
  • JS Objects advanced
  • JS Prototypes
  • JS Objects Inheritance
  • Mini Project (Typing Speed Tester App)

jQuery

  • Introduction
  • JQuery selectors, Events, and Effects
  • JQuery with HTML

ECMA Script 6 Features

  • Default Parameters
  • Template Strings
  • Let & Const
  • For….of loops
  • Lambdas
  • Destructing
  • The Spread Operator
  • Computed Properties

TypeScript Development

  • Introduction to TypeScript
  • TypeScript Overview
  • Differences between JavaScript and TypeScript
  • TypeScript Editors
  • Installing TypeScript
  • Project Setup in TypeScript
  • TypeScript Hello World
  • TS Data Types, Enums and Functions
  • TS Default Arguments and Optional Arguments
  • TS Function Overloading
  • TS Interfaces, Classes, Constructors and Methods
  • TS Getters & Setters
  • TS Lambda Expressions

Bootstrap 4 Development

  • Introduction
  • What is Bootstrap?
  • Features of Bootstrap
  • History of Bootstrap
  • Bootstrap Overview and Installation
  • Tools Used for Web Development
  • Setting Development Environment
  • Bootstrap First Application and Components Overview
  • Basic Typography
  • Text Alignment & Display
  • Floats Position in Bootstrap
  • Colors Background
  • Spacing in Bootstrap
  • Sizing in Bootstrap
  • Breakpoints in Bootstrap
  • Buttons in Bootstrap
  • Navbars in Bootstrap
  • List groups and Badges in Bootstrap
  • Forms in Bootstrap
  • Input groups in Bootstrap
  • Alerts & Progress bars in Bootstrap
  • Tables & Pagination in Bootstrap
  • Cards in Bootstrap
  • Media Objects
  • Grid System in Bootstrap and Alignments in Bootstrap
  • Flex boxes in Bootstrap
  • Auto margin & wrapping order in
  • Carousels in bootstrap
  • Collapse classes in Bootstrap
  • Tooltips in Bootstrap
  • Popovers in Bootstrap
  • Modals in bootstrap

Introduction to Angular JS

  • Introduction
  • What is Single Page Application?
  • Declarative vs Imperative Programming
  • How Angular Application Works
  • First Angular JS Application
  • Angular Directives, Controllers and Modules
  • Dependency Injection
  • Two way Data binding
  • Examples of Two way Data binding

Register Now