UI/UX Design Training

Module 1 :The Background

• The mobile space today
• Advantages
• Challenges
• Native vs. web, is really a question?
• What is JQM?
• What is not jQM?
• What is a web app?
• Why jQM?
• Features
• Compatibility
• Requirements

Module 2: HTML5 basics

• Requirements
• HTML5 in a small nutshell
• Why HTML5?
• What do we need to know about HTML5 for jQM
• Basic template
• Testing HTML5 documents
• Emulators, Simulators & more & Viewports on mobile browsers

Module 3: The framework

• Architecture of Self hosted vs. CDNs
• Main template
• CDNs available
• Main template
• Support on IDEs
• Roles
• Theming

Module 4: The page

• Headers and footers basics
• Mandatory items in a page
• Working with HTML in the content
• Navigation
• Internal page navigation
• External page navigation
• Understanding AJAX on mobile browsers
• Absolute external links
• Mobile Special links

Module 5: UI Components

• Customizing toolbars
• Positioning toolbars
• Navigation Bars
• Persistent footers and navigation
• Collapsible content
• Working with columns

Module 6: Buttons

• Creating buttons
• Inline buttons
• Grouped buttons
• Icons
• Custom icons

Module 7: Lists

• Creating lists
• Full-page vs inset-lists
• Visual separators
• Nested lists
• Interactive rows, Split button rows
• Split button rows
• Thumbnails
• Count bubbles
• Aside content
• Title and Description
• Filtering data

Module 8: Forms

• AJAX vs. non-AJAX forms
• Automatic form behaviour
• Labeling
• Field containers
• Text fields
• Slider, Slider switch
• Select menus, UI Select menus
• Radio Buttons
• Checkboxes, File Upload
• Validation using HTML5

Module9: The framework and JavaScript

• Using jQuery inside jQuery Mobile
• mobile element
• The mobile init event
• Configuring defaults
• Touch events, Orientation events
• Scroll events, Page events
• Virtual mouse events
• Managing navigation through JavaScript

Module 10: Dynamic data with jQuery Mobile

• HTML5 vs AJAX
• Bringing JSON data to jQuery Mobile
• Updating form controls
• Updating lists
• Implementing Infinite list pattern

Module11: Extending the framework

• Using plugins
• The top 5 plugins for jQuery Mobile
• Creating our own plugin
• Plugin architecture
• Understanding CSS architecture
• Define our own CSS patch
• Changing CSS behavior

Module12: Managing data with HTML5

• Using Web Storage and Web SQL
• Using geolocation

Module 13: Packaging for installation and stores

• The offline manifest
• Full-screen web apps for iOS
• What is a hybrid
• Phone Gap vs other alternatives
• Packaging a sample application

Section 1

Creating New Files & Designing on a Grid

• Creating a new file
• Setting up artboards
• Importing text
• Creating colored backgrounds for text

Importing & Cropping Photos

• Importing a photo as an image fill (crop a photo)
• Rounding corners

Vector Graphics, Colors, Shadows, & More

• Importing & modifying vector graphics
• Aligning & distributing layers
• Layer opacity vs. fill opacity
• Reusing colors (color swatches)
• Adding a drop shadow

Character Styles

• Creating & Editing Character Styles

Section 2

Repeat Grids

• Creating a Repeat Grid
• Customizing the content
• Adjusting the design

Components (Reusable Elements)

• Creating & editing components
• Overriding content in one instance vs. globally updating all components
• Detaching from a component
• Components versus Repeat Grids

Turning a Design into a Clickable Prototype

• Linking between artboards Previewing the prototype Creating an overlay Background blur Fixing the position of elements so they don’t scroll Making a recording of a prototype

Exporting Assets for Web: SVG, JPEG, & PNG

• Exporting individual assets Exporting artboards

Sharing XD Files (For Review, Developers, etc.)

• Sharing an XD file Commenting on shared files Pinning a comment Updating an existing shared file Sharing for Development

Section 3

Stacks, Padding, & Responsive Resize

• Creating a Stack & Adjusting the Spacing Rearranging & Adding Items to a Stack Responsive Resize, Stacks, & Padding Keystrokes for Working with Stacks & Padding Nesting Stacks (Stacks Within Stacks)

Linking Up/Down a Page & Scrollable Areas

• Making Links that Scroll Up/Down a Page Making the Navbar Fixed to the Screen Adjusting the Position & Speed of the Scroll Creating a Scrollable Area Within a Page

Intro to Auto-Animate

• The Basics of Auto-Animate Different Kinds of Easing Adding a Timed Animation

Parallax Animation

• Setting Up the Parallax Assets
• Building the Parallax Animation

Component States (Hover & More)

• Adding a Hover State to a Button
• Custom Component States

Section 4

Creating 3D Transforms

• Adding 3D Transforms
Front to Back versus Z Position

Adding Interactions to a Slideshow: Tap, Drag, & Keys

• Creating a Working Slideshow Prototype
• Adding Tap Interactions
• Adding the Ability to Drag
• Adding Keystrokes

Time Interactions & Adding Audio (Sound Effects)

• Adding a Drag Interaction
• Adding a Time Interaction
• Adding a Sound Effect
• Adding a Keystroke

Linked Components & Shared Libraries

• Linked Components
• Shared Libraries

Section 1

Straight Lines

• Using the Pen Tool
• Adjusting the Workspace
• Arranging Objects
• Color Fills

Curves

• Drawing Curves (Pen Tool)
• Anchor Points and Direction Points
• Default Fill and Stroke

Corners and Curves

• Drawing Corners and Curves (Pen Tool)
• Adjusting Anchor Points

Section 2

No Smoking Sign

• Fill and Stroke
• Basic Shape Tools
• Grouping Objects
• Layers Panel
• Working with Templates

Super Hero

• Live Trace and Live Paint
• Tracing Hand-Drawn Images
• Coloring Live Paint Objects
• Brushes
• Flare Tool

Section 3

What’s Behind the Green Door?

• Compound Paths
• Group Selection Tool

Mask Till You Drop

• Clipping Masks (Shapes)
• Blob Brush Tool
• Eraser Tool
• Reflect Tool

Masking with Type

• Type Tool
• Clipping Masks (Editable Type)
• Filling Text with a Photo
• Placing Linked Images

3D Shape: Milk Duds Box

• 3D Extrude & Bevel
• Creating Symbols from Artwork
• Mapping Symbols onto 3D Objects
• Lighting and Shadows for 3D Objects

Section 3

Will It Blend?

• Blend Tool
• Blending Options

Wavy Line Blend

• Blending Lines
• Reflect Tool
• Rotate Tool

Juggling Colors and Gradients

• Dashed Lines and Stroke Options
• Saving Colors as Swatches
• Blending Modes
• Gradient Tool
• Saving Gradient Swatches

Combining Shapes with the Pathfinder

• Merging Paths (Pathfinder)
• Transparency Options
• Grouping Objects

Section 5

Patterns

• Creating and Applying Pattern Swatches
• Scaling and Rotating Patterns
• Working with Layers
• Align Panel

One-Page Advertisement

• Working with Type
• Text and Character Options
• Adding a Drop Cap
• Type on a Path
• Text Wrap
• Fill Text with a Pattern

Stylin’ Effects

• Using the Appearance Panel
• Transparency
• Blending Modes
• Drop Shadows
• Arrowheads

Appearance and Graphic Styles

• Graphic Styles
• Appearance Panel
• Multiple Fills
• Auto-sizing Text Boxes

Section 6

Layers, Artboards & Recoloring Artwork

• Adding and Removing Layers
• Creating and Using Multiple Artboards
• Recoloring Artwork

HTML-Introduction

• Web Development Introduction
• History of HTML
• HTML Tags and Attributes
• HTML Tag vs. Element

Basic Formatting Tags

• HTML Basic Tags
• HTML Head Tag
• HTML Meta Tag
• HTML Formatting Tags
• HTML Color Coding

Lists

• Unordered Lists
• Ordered Lists
• Definition list

Images

• Image and Image Mapping

Hyperlink

• URL - Uniform Resource Locator
• URL Encoding

HTML-Table

HTML-Headers

• Title
• Base
• Link
• Styles
• Script
• Meta

HTML5 forms

• Introduction to HTML5 forms
• Accessible forms
• New Input types
• New forms attributes
• Form validation

Graphics

• Basics of HTML5 canvas
• Immediate drawing mode: rectangles, text, images, etc.
• Path drawing mode: lines, circles, arcs, curves, etc.
• Colors, gradients, patterns, shadows, etc.
• Working with SVG in HTML5

HTML5 animations

• Basic animation techniques
• Canvas and user interaction
• Working with pixels
• Understanding transforms

API

• Introduction to HTML5 APIs
• The Web Storage API
• Form validation API
• The File API
• The Geolocation API

GETTING TO KNOW YOUR WORKSPACE

• Menu bar, application bar, options bar, tools panel, panel dock on right
• Differences on PC and Mac
• Different ways to zoom
• Hidden tools on toolbar

BASIC SELECTIONS

• Why make selections?
• Geometric selections
• Freehand selections
• Edge-based selections
• Color-based selections
• How do I choose a selection tool?

ADJUSTMENT PANEL

• Making color and tonal adjustments
• Creating an adjustment layer
• Adjustment presets,
• Common image corrections
• Saving adjustments as a preset
• Deleting adjustment layer
• Applying adjustment layer to another layer

TOOL BAR TOOLS

• Blur tool
• Sharpen Tool
• Smudge Tool
• Dodge Tool
• Burn Tool
• Sponge Tool

BASIC PHOTO CORRECTIONS

• Image menu
• Color mode
• Image resolution and size
• Straighten and crop image
• Rotate cropped image
• Automatic adjustments
• Auto color—removes color cast
• Manually adjusting color cast
• Manually adjusting tonal range
• Replacing color
• Clone tool
• Spot healing brush
• Healing brush
• Patch tool
• Content-aware fill (NEW TO CS5!)

LAYERS

• Background layer
• Isolating part of image
• Hide, view, reposition, delete, rename, merge
• Lock layers
• Convert background layer to regular layer
• Convert regular layer to background layer
• Layer styles
• Applying layer styles to multiple layers

GRADIENTS

• Gradient tool
• Gradient styles
• Editing colors
• Saving gradients

MASKS

• How is it different than selection tools?
• Save time-consuming selections
• Quick mask mode
• Using brush tool
• Channels panel
• Loading mask as a selection

CAMERA RAW

• Unprocessed picture data
• Set up camera to save as camera raw
• Nikon (.nef)
• Canon (.crw)
• Olympus (.orf)
• Opening up other file formats in RAW
• Using Bridge vs. Photoshop
• White balance
• Adjust for different lighting settings
• Save as DNG file, open source file
• Exposure
• Fill light
• Sharpening an image
• Detail panel
• Synchronize across images

CORRECTING/ENHANCING DIGITAL PHOTOGRAPHS

• Shadows and highlights adjustment
• Correcting Red Eye
• Sharpening Edges
• Correct Image Distortion
• Adding Depth of Field

TYPE IN PHOTOSHOP

• Point v Paragraph Type
• character panel
• paragraph panel
• Type on a Path
• Warping Type
• Creating work path from type
• Convert type to shapes
• Horizontal/Vertical Type Mask Tool
• Create a selection in the shape of type
• Clipping Mask Type
• Open Type

CREATING VECTOR GRAPHICS IN PHOTOSHOP

• Bitmap v. Vector?
• Pen Tool
• Magnetic and freeform pen tool
• Using pen tool as selection tool
• Converting selections to paths
• Converting selection to layer
• Shape layers
• Smart Objects

AUTOMATING STEPS

• Recording actions
• Actions panel
• Record, play, edit, delete individual actions

Introduction

• HTML structure and content
• Advantages of CSS
• Creating and using style sheets
• CSS Rules: The Basic Syntax

CSS Boxes and CSS Selectors

• The CSS box model
• CSS and logical HTML structure
• Styling boxes, borders, margins, and padding
• Using IE6 standards mode
• Sh4ecifying CSS distances
• and many other CSS techniques

Fonts and Text

• Using custom fonts
• Font properties
• Web font formats
• Type Kit, font squirrel

Text Formatting in CSS

• Fundamentals of text formatting
• Typefaces, alternatives, and defaults
• Font characteristics
• Formatting blocks of text
• Using arbitrary inline tags

CSS Selectors and Selections

• Using HTML element IDs in CSS
• Using CSS descendant selectors
• Descendant selector examples
• Child, sibling, and pseudo-class selectors
• And many other CSS techniques.

CSS positioning

• Choosing the right CSS
• Technique for positioning blocks
• The position property, floats, and margins
• Static positioning and normal flow
• Absolute positioning outside normal flow
• Fixed positioning outside normal flow

CSS page Layout

• Alternative methods of CSS positioning
• Styling lists
• Redefining the behaviour of inline and block elements
• Table formatting in CSS
• Styling table cell borders
• page layout with table dish4lay properties

Cascade, precedence, Specificity, and Inheritance in CSS

• Cascading and cascade order
• Resolving style conflicts by Origin & Importance
• Resolving style conflicts by Specificity & Order

CSS Layers and Translucency

• Different forms of layered presentations in CSS
• Layering with the z-index property
• Different methods for creating translucency effects
• The CSS3 opacity property

Using CSS in the Real World

• Deploying CSS
• CSS formatting vs. HTML formatting
• Standard tags and semantic markup
• Screen size and fluid design
• Table layout and CSS positioning
• Cross-platform testing

Useful CSS Tips

• Usage of CSS Sprites
• Pseudo Selectors
• CSS Minify
• Cheat Sheet for CSS3

MODULE 1: Fundamentals of JavaScript Code

• JavaScript methods (such as alerts)
• Variables
• The importance of quotes
• Numbers vs. strings
• Concatenation

MODULE 2: Reusing Code with Functions

• Defining functions
• Calling functions
• Defining parameters & passing arguments
• Simple Accordion with JavaScript
• Targeting elements by ID
• Hiding & showing elements with JavaScript

MODULE 3: If Statements: Clearing Form Fields

• Testing code in the JavaScript Console
• Getting & setting properties
• Using if statements
• Reshowing text hints in empty form fields

MODULE 4: Introduction to JavaScript Objects & the DOM

• Intro to objects
• The global object
• Breaking open and manipulating objects

MODULE 5: Dynamically changing content with custom objects

• Checking the functionality of the select menu
• Getting the chosen value
• Dynamically changing the state name value
• Dynamically changing the rest of the values

MODULE 6: Introduction to arrays and the math object

• Creating an array
• Editing an array
• Creating an array of welcome handlings
• The math object
• Using the math object to pick random headlines

MODULE 7: Introduction to for loops

• Creating a for loop
• Using the for loop to set dropdown menus
• Clearing the menu
• Optional bonus: refining the menu selection experience

MODULE 8: Exploring JavaScript selectors

• Intro to JavaScript selector
• Selecting multiple elements and elements without IDs
• Getting a specific list item
• Getting elements by class name
• Getting multiple items using query selector
• Getting a single item using query selector
• Chaining selectors together
• Targeting elements by data attribute

MODULE 9: Photo filter website: using friendly navigation

• Creating an array to store the selector
• Getting the all button to select all filters
• Getting the rest of the buttons to select the other filters
• Initially hiding the photos
• Getting the photos to filter

MODULE 10: Photo filter website: creating an executive filter

• Adding a checkbox to toggle executive filtering on/off
• Separating the inclusive and exclusive filter
• Writing a conditional to select the appropriate filter
• Programming the exclusive filter
• Rerunning the filter when the checkbox is toggled
• Improving the user experience

MODULE 11: Showing/hiding content with JQuery animation

• Getting started with JQuery
• Running code when the document is ready
• Click events
• Using the jQuery slide toggle method
• Supporting JQuery disabled users

MODULE 12: Sharing JavaScript across pages

• Externalizing JavaScript
• Linking to the JavaScript file

MODULE 13: JQuery hover animation

• Adding an outline with CSS
• Using the JQuery hover method
• Using the JQuery animate method

MODULE 14: More advanced JQuery showing/hiding

• Adding animation to reveal hidden content
• Targeting the proper div: traversing the document
• Swapping the button image with JQuery

MODULE 15: JQuery lightbox: a pop-up image viewer

• Linking the plugin files
• Initializing the pop-up
• Grouping the photos into a gallery
• Adding captions
• Removing the counter
• Customizing the appearance

MODULE 16: JQuery cycle: a simple slideshow

• Initial setup
• Defining what content gets cycle
• Adding more cycles and exploring options
• Reversing the animation

MODULE 17: JQuery cycle: adding slideshow controls

• Preventing a possible “flash of unstyled content’’
• Enabling the slideshow
• Adding and customizing the controls

MODULE 18: JQuery cycle: adding a pause button

• Adding a pause/play button
• Styling the pause/play button
• Checking to see if the cycle is paused
• Making the pause/play button work

MODULE 19: JQuery form validation

• Initializing the plugin & setting options
• Customizing the error messages
• Changing the location of the error messages
• Styling the error messages

MODULE 20: JQuery Image Carousel

• Linking to the plugin files
• Creating the carousel
• Styling the carousel
• An easy way to add prev & next buttons
• Adding custom prev & next buttons
• Setting how many items are shown
Download Syllabus - JavaScript

Introduction to

• InDesign tools
• The InDesign workspace
• The document window
• Using guides
• Viewing modes
• Working with panels
• The Tools panel
• Managing panels
• Working with the Control panel
• Saving your workspace
• Navigating through an InDesign document
• Using the Pages panel
• Changing the magnification of your document
• Working with type
• Entering and formatting type
• Placing and formatting type
• Flowing type
• Using styles
• Applying paragraph styles
• Applying character styles
• Applying object styles
• Working with graphics
• Placing graphics
• Positioning graphics within a frame
• Applying text wrap
• Understanding layers
• Applying effects

Building Documents with Master Pages

• Creating custom page sizes
• Creating a new custom-sized document
• Creating and formatting master pages
• Adding automatic page numbering
• Basing master pages on other master pages
• Overriding master page items
• Adding layout pages
• Adding images and text to the master frames
• Applying master pages to multiple pages

Working with Text and Type

• Adding text to your document
• Creating a text frame
• Changing character attributes
• Changing font and type styles
• Adjusting size
• Adjusting line spacing
• Adjusting character spacing:
• kerning and tracking
• Using a baseline shift
• Changing paragraph attributes
• Horizontally aligning text
• Changing the spacing before and after paragraphs
• Using tabs
• Adding rules above or below paragraphs
• Changing text color
• Creating drop caps
• Checking and correcting spelling
• Finding and changing text and text attributes
• Adding words to the dictionary
• Checking spelling as you type
• Automatically correcting spelling
• Editing text using the Story Editor
• Drag-and-drop text editing
• Special characters and glyphs
• Using the Glyphs panel and glyph sets
• Text frame options
• Adjusting text inset
• Vertically aligning text
• Importing text
• Flowing text manually
• Threading text between frames
• Using semi-autoflow to link several text frames
• Changing the number of columns in a text frame
• Baseline grid
• Viewing and changing the baseline grid
• Adding story jumps
• Using styles to format text
• Creating a headline and applying a style
• Redefining styles
• Type on a path
• Importing text from Microsoft Word
• Missing fonts
• Finding and fixing missing fonts

Working with Styles

• Style types
• Paragraph styles
Applying a paragraph style
• Character styles
• Defining a character style
• Applying a character style
• Using nested styles
• Globally updating styles
• Loading styles from another document
• Quick Apply
• Organizing styles into groups
• Object styles
• Defining an object style
• Applying an object style
• Changing an object style

Working with Graphics

• Understanding how InDesign handles graphics
• Locating missing images
• Working with the Links panel
• Customizing the Links panel
• Adding graphics to your layout
• Fitting an image within an existing frame
• Auto Fitting
• Using Adobe Bridge to import graphics
• Placing multiple graphics using Mini Bridge
• Using object styles for images
• Wrapping text around images
• Wrapping text around the bounding box
• Using graphics with clipping paths and alpha channels
• Removing an image background using InDesign
• Using anchored objects
• Advanced importing
• Importing layered Photoshop files
• Importing InDesign layouts as graphics

Working with Tables

• Creating a table
• Creating new tables
• Copying and pasting table information
• Converting text to a table and a table to text
• Importing a table
• Editing tables and table options
• Changing row height
• Editing the border
• Formatting rows and columns
• Using fills
• Formatting cells and text
• Resetting the cell styles within a table
• Text alignment and inset within a cell
• Formatting text within a cell and saving paragraph styles
• Formatting text in tables by column
• Working with tables in Story Editor
• Merging cells
• Defining a header cell
• Setting column and row dimensions
• Setting a fixed row height
• Setting column width
• Using graphics in tables
• Placing graphics in cells
• Cell styles and table styles
• Cell styles
• Applying cell styles
• Creating table styles
• Applying table styles

Using Color in Your Documents

• Applying colors to frames and text
• Applying color to text
• Applying color to frames
• Applying Live Corner Effects
Creating and saving a new swatch
• Applying strokes to text
• Creating a tint reduction
• Making a dashed stroke
• Creating and saving gradients
• Linear gradients
• Saving a gradient
• Adjusting fill opacity
• Radial gradient
• Adjusting the direction of a radial gradient
• One-click edits
• Using the Eyedropper tool to copy frame attributes

Applying colors to multiple objects

• Updating and editing colors
• Using and saving spot colors
• Colorizing a grayscale image

Using Effects

• Creative effects
• Applying opacity to objects
• Apply effects to stroke or fill only
• Drop shadow
• Adjusting effects for objects
• Bevel and Emboss
• Object styles with effects
• Using Find/Change to apply object styles
• Basic Feather
• The Gradient Feather tool
• Converting text to a path
• Applying blending modes to objects
• Working with imported files that use transparency
• Applying an alpha channel selection
• Applying a path selection

Section 1: Introduction to Canva

• Welcome to Canva!
• Logging / Setup Canva Account
• Layouts & Templates
• Get you setup with your Canva & account
• Tour of your dashboard
• Learn about the different types of templates Canva has
• Learn how to use the pre-designed layouts
• Downloading your work
• Working with text
• Photo backgrounds & Shapes
• Illustrations, icons and lines
• Adding pages to a design
• Image
• Text features and Charts
• Album cover
• Youtube thumbnail
• Twitter header
• Facebook post
• Ebook cover
• Documents
• Data and charts
• Presentation slides

Section 2: Fonts, Colors, and Images

• Typography and font pairing
• Using icons effectively
• Organising the dashboard
• Sharing designs
• Adding links
• Upgrading to Canva for Work
• Brand colors
• Custom filter codes
• Color codes
• Color scheme
• Introduction to the color wheel; creating a color palette
• How to use grids; transparency; photo filters

Section 4: Advanced Topics

• Brand Kit
• Magic Resize
• Paid Elements
• Folders for Elements
• Background Remover
• Teams, Exporting and Scheduling
• Learn more advanced techniques
• Learn how to create a logo from scratch
• Learn how upload your own graphics, logos, images
• Learn how to organize your designs
• See where I go to purchase stock photography
• Videos Overview / Editing
• Video Tools
• Animations
• Animated Presentations
• Adding Music