UI/UX

DESIGN
ILLUSTRATOR
Getting to Know the work Area
l Overview
l Working with Panels
l Working with the tools panel
l Understanding Rulers
l Finding Resources
Selection and Aligning
l Selecting objects
l Aligning Objects
l Working with Groups
l Arrange Objects
l Distributing Objects
Creating and Editing Shapes
l Working with basic shapes
l Creating ellipses and polygons
l Changing Stroke width and alignment Joining paths
l Combining and editing shapes
l Working with the pathfinder
l Using Live Trace
Transforming Objects
l Working with artboards
l Scaling, reflecting, rotating, distorting and shearing objects
l Working with rulers and guides
l Changing Perspective
l Using free distort
l Transforming Content
Drawing
l Using the pen tool
l Using the Pencil and brush tools
l Drawing Curves
l Editing a Path
l Coloring and Painting
Color modes
l Editing a Swatch
l Using Patterns
l Working with Live Paint
l Using Gradients

Working with Type

l Threading text
l Changing fonts size and color
l Using styles
l Warping text
l Text on a path
 l Creating Outlines
l Wrapping text around an object
l Sampling text
Working with Layers
l Creating Layers
l Moving Objects and Layers
l Creating clipping masks
l Merging Layers
Working with Brushes
l Using Calligraphic Brushes
l Editing a brush
l Using Art Brushes
l Creating a pattern brush
l Creating custom brushes
Using Effects, Appearance Attributes and Graphic Styles
l Using and editing effects
l Using appearance attributes
l Creating and saving graphic styles
l Applying an appearance to a layer
l Applying a Photoshop effect
Working with Symbols
l Creating Symbols
l Editing Symbols
l Using Symbols tools
l Symbols and Flash

PHOTOSHOP
Getting to Know the Work Area
l The Photoshop Environment
l Creating Custom Workspaces
l Opening Images
l Using the File Browser
l Image Magnification
l Viewing Document Information
l Moving the Image
l Undoing Mistakes and the History Palette
l Using the options bar and other panels
l Using the Tools
l Displaying Drawing Guides
l Setting Preferences

Photoshop Image Manipulation

l Opening an Image in Photoshop
l Creating images in Photoshop Saving
l images in Photoshop
l Basic image editing
l Cropping an Image
l Bitmap Images
l Vector Images
l Image Size and Resolution Settings
l Scanning Images
l Placing Files
l Supported import and export formats
Transforms
l Using free transform
l Move
l Rotate
l Scale
l Skew Distort
l Perspective
l Flip-vertical, horizontal
 l Invert
l Rotate 180, 90ocw, 90occw
Working with selections
l Using the quick selection tool
l Moving a selected area
l Manipulating selection
l Refining the edges of a selection
Layer Basics
l About Layers-fill and adjustment Layers
l Using the Layers Palette
l Creating Layers
l Deleting Layers
l Moving Layers
l Layer Opacity
l Locking Layers
l Layer modes and blending options
l Apply Layers Style
l Flatting and saving file
Photoshop Tools
l Parts of the Toolbox
l Toolbox shortcuts
l Tool Options
l Marquees Tool
l Magic wand Tool
l Lassos Tool
l Move Tool
l Crop Tool
l Slice Tools
l Healing Brush Tool
l Pattern Stamp Tool
l Clone Stamp Tool
l Patch Tool
l Pencil Tool
l Paintbrush Tool
l Color Replacement Tool
l Eraser Tools
l History brushes Tool
l Gradient Tool
l Paint bucket Tool
l Burn-dodge-sponge Tool
l Blur-sharpen-smudge Tool
l Shapes-line-rectangle-polygon Tool
l Path selection Tool
l Pen Tool
l Type Tools
l 3D Tool
l Hand-Zoom Tool
l Foreground and Background colors
Color Basics
l Color Modes and Models
l Color Management
l Foreground and Background colors
l Using the Color Picker
l Selecting colors with the Eyedropper Tool
l Selecting colors with the Swatches Palette
Masks and channels
l Editing a mask
l Applying a filter effect to a masked selection
l Creating a Gradient mask
Text editing and special effects
l About the type Layer
l Creating horizontal and vertical type
l Using horizontal and vertical type mask tools
l Using character palette for text editing
l Creating text warp
l Rasterizing type
l Converting type to Shapes
l Adding effect to text
Actions
l Using the action palette
l Recording action
l Playing action
l Editing action
l Loading a saved action
Photoshop Special effects and Filters
l About special effects
l Using filters
l Basic filters
l Filter Combinations

Creating Links within an image

l Slicing and image in Photoshop
l Saving linked images in an HTML file
l How to convert PSD file to HTML and CSS

Animating GIF Images for the Web

l Animating by hiding and showing layers
l Animating with layer opacity and position
l Using masks to create animations

About UX
l Concept of UX
l Trends in UX
l What is User Interaction
l Mental Model
l Cognitive Model in UX
l Emerging Technologies in UX
l What is UX Design and Where is Used

Elements of UX Design
l Elements used in User Experience Design.
l How it Work Together.
l What is Big Picture?
l What is Persona in UX Design
l 6 Stages used to design in UX
l Heuristic Evalution
l Introduction and Defination on 6 Stages of Design Process
l 6 Design Steps in UX
l Why we used 6 Stages in UX
l Competitor Analysis in 6D

Heuristic Evalution
l 10 Usability Heristic Evaluton Law for UX Design
l How we used Heuristic Evalution
l Case Studies of Competitor
User Research
l Benefits and Introduction on User Research
l Elements that used in User Research
l Process in User Research
l User Interview
l Modern Day User Research Methods

UX Design Process
l What is Research in User Experience Design?
l Tools and Method used for Research
l User Needs and its Goals
l Know about Business Goals
l How to deliver a research andit phases.

UX Design Process
l Visual Design Principles
l Information Design and Data Visualization
l Interaction Design
l Information Architecture
l Wire framing & Storyboarding
l Elements and Widgets
l Screen Design and Layouts
l Hands-on Assignments and Quiz

UX Design Process
l Design Testing Methods and Techniques.
l Usability Testing– Types and Process
l Create plan for the Usability
l What is Tests?
l What is Prototype and how we design it.
l Various Prototyping Tools
l How to prepare Usability Testing?
l How to understand & refine Usability Test Results?

UX Improvement Process
l Understanding the Usability Test findings
l Applying the Usability Test feedback in
l improving the design

UX Delivery Process
l How to communicate with implementation team
l UX Deliverables and its process

Figma
Getting set up
l Create a Figma account
l Can I work offline with Figma?
l Download the Figma desktop app
l Access local fonts on your computer
l Connect Tools
l Getting Started with Imports
Creating New Files & Designing on a Grid
l Creating a new file
l Setting up frames (other apps call these artboards)
l Adding text
l Creating colored backgrounds for text columns

Importing & Cropping Photos

l Importing & cropping photos
l Adding a drop shadow
l Rounding corners

Vector Graphics, Colors, Shadows, & More

l Importing & modifying vector graphics
l Aligning & distributing layers
l Layer opacity vs. fill opacity
l Reusing colors (color styles)

l Adding a drop shadow

Text Styles
l Opening Sketch files in Figma
l Handling missing fonts
l Creating, editing, & organizing text style

Working with Components (Elements)

l Creating & editing components
l Overriding content in one instance vs. globally updating all components
l Detaching from a component

Turning a Design into a Clickable Prototype

l Linking between frames (artboards)
l Previewing the prototype
l Creating an overlay
l Fixing the position of elements so they don’t scroll

Exporting Assets for Web: SVG, JPEG, & PNG

l Exporting individual
l assets Exporting frames (artboards)

Sharing Figma Files: Commenting, Testing, Developers, etc.

l Sharing a Figma file
l Sharing a Prototype
l Commenting on shared files
l Viewing a prototype for user testing

l Specs for developers

Auto Layout: Introduction
l Using Tidy Up for Even Spacing
l Using Auto Layout
l Alignment Constraints
l Spacing, Rearranging, & Adding Items with Auto Layout
Auto Layout: Deeper Dive
l Nes ng Auto Layouts Auto Layout
l Spacing & Padding
l Auto Layout Sizing & Constraints
l Nega ve S acing & Stacking Order
l Absolute Positoning Elements
Linking Up/Down a Page, Scrollable Areas, & Hyperlinks
l Making Links that Scroll Up/Down a Page
l Making the Navbar Fixed to the Screen
l Adjusting the Position & Speed of the Scroll
l Creating a Scrollable Area Within a Page

l Adding Hyperlinks

Intro to Smart Animate

l The Basics of Smart Animate
l Different Kinds of Easing
Parallax Animation
l Setting Up the Parallax Assets
l Building the Parallax Animation

Component Properties & Variants

l Component Properties (Text, Boolean, Instance Swap, & Variant)
l Creating & Using Component Variants

Hovers & Overlays

l Adding a Hover State to a Button (Using Variants)

l Opening a Pop-Up (Using an Overlay)

Team Libraries (Shared Libraries)

l Publishing a Team Library
l Using Components in a Team Library
l Using Styles in a Team Library
l Swapping Team Libraries
The outcomes of UI UX are:
l Better understanding of what user needs and wants
l Clear understanding of the business goals
l Understanding of the process to create a product or service
l Knowledge on how to make a product or service more usable, understandable and
desirable
l Knowledge how to make a product or service more accessible for people with
disabilities
l Knowledge on how to measure success of product and services
l You will have a better understanding of how to navigate the interface and other
features
l You will feel more confident using the UI
HTML 4.0
What is Markup Language
Basic Structure of HTML
Document Overview
l The Structure Tags
l Getting Started With HTML
l Writing the Code
l Head Section
l Meta Tags
l External Link Tags
l HTML Tags
l HEAD Tags
l Title Tags
l Body Tags
l Displaying a web page in a web Browser
HTML Elements
l Block level elements
l Inline elements
l Empty elements
Working with Forms
l Creating a Form
l Form Tag
l POST and GET Method
l Text Input, Text Area, Checkbox, Image Input and Radio
l Select Option
l Option Group
l File Upload and Hidden Fields
l Submit Button, Reset Button
l Relation between HTML Form and PHP
Adding Special Characters
Block Oriented Elements
l Defining Paragraphs and new Lines
l Inserting Spaces
l Perforating the Text
l Changing Background Color
List
l Ordered List
l Unordered List
l Definition List
Attributes of List
l Using Type attribute with Unordered list
l Using Stat attribute with Ordered List
l Some other elements
l Visual Markup
Uniform Resource Locators
l Types of URLs
l Absolute URLs
l Relative URLs
l Document-Relative URLs
l Server-relative URLs
Hypertext Links
l Why links fail?
Images
l Adding Images
l Adding Border to an image
Tables
l How to create table
l Adding Border to a Table
l Apply Formatting Features to Table
l Merge row and columns
Introduction to style Sheets
l How style sheets work
l Style Sheet Structure
Changing the Background
l Changing the color of the text
l Changing the front
l Changing the Indent of the text
l Changing the Line Spacing
l Hide a Style Sheet
Creating Style Classes
l Div
l Span
l Frame
l Layer
l Meta
l HTML Frames
l Frame
l iframe
HTML5
l Introduction to HTML5
l Introduction to HTML5
l What's new in HTML5
HTML5 Syntax
l The DOCTYPE
l The <script> tag
l The <link> tag
l HTML5 Document
New input Elements
l Color
l Date
l Datetime
l datetime-local
l email
l month
l number
l range
l search
l tel
l time
l url
l week
New Input attributes
l autofocus
l formaction
l formmethod
l formnovalidate
l height and width
l list
l min and max
l multiple
l pattern (regexp)
l placeholder
l required
l step
Audio and Video
l <audio>
l <video>
l <source>
New Structural Elements
l <details>
l <dialog>
l <summary>
l <meter>
l <main>
l <header>&<footer>
l <section>
l <aside>
l <figure>

SVG
l What is SVG?
l SVG Advantages
l SVG in HTML
l SVG Shapes
l SVG Text
l SVG Stroke properties
l SVG Animation

Canvas
l What is canvas?
l Lines
l Curves
l Paths
l Shapes
l Color, gradients
l Image
l Arc
l Text
l Shadow

HTML5 APIs
l Google Map
l Drag & Drop
CSS
l CSS Introduction
l CSS Syntax
l CSS Id & Class
l Types of CSS links
Colors and Backgrounds
l color
l background-color
l background-image
l background-repeat
l background-position
l background-attachment
l background
Text and Fonts
l font
l font-family
l font-size
l font-weight
l font-style
l line-height
l letter-spacing
l word-spacing
CSS Box Model
l CSS Border
l CSS Outline
l CSS Margin
l CSS Padding
CSS Advanced
l CSS Grouping/Nesting
l CSS Dimension
l CSS Display
l CSS Positioning
l CSS Floating
l CSS Align
l CSS Pseudo-class
l CSS Pseudo-element
l CSS Navigation Bar
l CSS Image Gallery
l CSS Image Opacity
l CSS Attribute Selectors
l Styling Links

CSS 3.0
Introduction to CSS3.0
What's new in CSS 3.0
Border
l border-image
l border-radius
CSS Shadows
l Text-shadow
l Box-shadow
Background
l background-clip
l background-size
l background-origin
l background-image
Outline
Transitions
l transition
l transition-delay
l transition-duration
l transition-property
Transform
2D Transforms
l transform
l matrix()
l translate(x,y)
l scale(x,y)
l rotate(angle)
l skew(x-angle,y-angle)
3D Transforms
l transform
l transform-style
l perspective
l transform-origin
Animations
l @keyframes
l animation
l animation-direction
l animation-duration
l animation-name
Selectors
l CSS combinations
l Pseudo Elements
Gradients
l Linear Gradients
l Radial Gradients
Multiple Columns
l column-count
l column-fill
l column-gap
l column-width
l columns
l column-rule
l column-rule-color
l column-rule-style
l column-rule-width
User Interface
l resize
l box-sizing
l outline-offset
CSS Filters
l Blur
l Brightness
l Contrast
l Grayscale
l Hue-rotate
l Invert
l Opacity
l Saturate
l Sepia
l Drop-shadow
Media Query
l What is Responsive Web Design
l Intro to the Viewport
l The Viewport Tag
l Media Queries
l Fluid Layouts
l Tablet Styles
l Mobile Styles
l Making a Mobile Drop-down Menu
l Responsive Images & Polyfills
Web Fonts
l @font-face
l font-family
l src
l font-stretch
l font-style
l font-weight

Flexbox
l flex-grow
l flex-shrink
l flex-basis
l flex
l flex-wrap
l flex-direction
l flex-flow
l justify-content
l align-items
l order
Forms
l form objects
l creating a form
l creating a jump menu
Behaviors
l set text of status bar
l open browser window behavior
Inserting Media Objects
l linking to sounds
l embedding sounds
l inserting flash
l content inserting director content

JAVASCRIPT
Introduction to JavaScript
l Syntax
l Statements
l Comments
Enabling in various browsers
Popup Boxes
l Alert
l Confirm
l Prompt
Variables
Operators
l Arithmetic
l Assignment
l Comparison
l Logical
l Conditional
Conditional Statements
l if
l if...else
l if...else if...else
l Switch
Loops
l while
l do...while
l for
l for...in Statement
l Break
l Continue
Functions
l User-defined Functions
l Function Syntax
l Function with Arguments
l Returning Values from Functions
l Built-in Functions
l paraseInt and parseFloat
Events
l Introduction
l Mouse Events
l Keyboard Events
l Form Events
l Document/Window Events
Cookies
Page redirection
Built-in Objects
l Introduction
l Number
 l Strings
l Math
l Arrays
l Associative Array
l Array Properties and Methods
l Date
l Boolean
l Regexp
Advanced javascript
l Form Validations
l Basics of Form Validation
l Validating Radio Buttons
l Validating Checkboxes
l Validating Select Menus
l Validating Textareas
JS Document Object Model (DOM)
l Introduction
l DOM HTML
l DOM CSS
l DOM Events
JS Browser Object Model (BOM)
l JS Cookies
l JS Window
l JS Location
l JS Popups
l JS Time
Introduction to OOP concept
Jquery
What is JQuery?
Overview of JQuery features
Using JQuery links
JQuery Selectors
JQuery Events
JQuery Effects
l Hide() & show()
l Fade()
l Slide()
l Animate()
l Callback function
l Chaining
JQuery HTML
l Get() & Set()
l Add() & Remove()
l CSS()
l Dimensions()
JQuery Traversing
l Parent() & children()
l Next() & Prev()
l Find()

Jquery AJAX
Image slider using JQuery plugins
Form Validation
2.0 NOIDA SEC-63
H-43 Sector-63
Noida-201301

+91 7042175774
+91 9810851363