UI UX Demo and Training

  User Interface / User Experience Demo

Agenda

  1. What is UI?

  2. Emerging UI Technologies

  3. HTML vs. CSS

  4. JavaScript

  5. Bootstrap

  6. Angular JS

  7. Become an UI Developer

  8. Roles & Responsibilities

  9. UI Development Tools

  

10. Mobile Hybrid Applications

  

11. What is User Experience? About Me ( UI / UX / Consultant / Trainer ) Subrahmanyam Poluru

  10+ Yrs experience

• Working as Full Stack Frontend Developer • Responsible for UI development
• Corporate Trainer (Genpact, L&T InfoTech, iGATE, Crescent ITS, Possibillion)
• Currently working as Freelance Online Trainer for UI / UX developers.
• Placed more than 200+ UI developers around the globe
• Worked with major clients Deloitte, iGATE, ExxonMobil, LPL

Prerequisite

• Any educational background
• IT
• Non IT
• Web Developers • Web Designers • Graphic Designers • Any Programmers

  What is User Interface (UI)?

User Interface (UI)

  The way a person interacts with a computer, tablet, mart phone or other electronic device. The user interface (UI) comprises the screen gesture movements, command language and online help, as menus and icons, well as physical keyboard shortcuts, buttons, dials and levers. The user interface can arguably mouse and include the total "user experience," which may include the

  Emerging UI Technologies Some of UI Technologies

  HTML vs. CSS

HTML Hypertext Markup

  Language, a standardized

  system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

  CSS Cascading Style Sheets

  (CSS) is a style sheet language used for describing JavaScript

JavaScript

  An object-oriented computer programming language commonly used to create interactive effects within web browsers.

Popular JavaScript Frameworks :

  Ext JS Node JS React JS

  JQuery Sencha LESS

  Backbone JS JQuery UI

  Touch Bootstrap Kendo UI

  JQuery Mobile Phonegap JavaScript

JavaScript Examples

  Bootstrap

Twitter Bootstrap

  Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

  Why Bootstrap?

• Ease Of Use • Highly Flexible • Responsiveness • Comprehensive List Of Components

Bootstrap

Bootstrap Example

Angular JS

Angular JS

  Angular JS is a structural framework for dynamic web

  apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

  Why Angular JS?

• MVC, MVVM
• Good for Single Page Applications • Two binding
• Templating

Angular JS

Angular Example

Mobile Hybrid Applications

  Hybrid apps, like native apps, run on the device, and are written with web technologies (HTML5, CSS and JavaScript). Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the JavaScript locally.

  Popular Frameworks

• Phonegap • Ionic Framework • Rhomobile • Titanium

Hybrid Application

Some of Mobile UI Frameworks

  JQuery Mobile Demo

  Want to Become UI Developer?

Become UI Developer

• HTML 4/5
• CSS 2/3
• JavaScript / OOJS
• JQuery
• JQuery UI
• JQuery Mobile • Bootstrap • SASS / >Angular JS
• AJAX / JSON
• Node JS
• Grunt, Bower, Yeoman, Jasmine

Tools for UI

• Basic Note Pad • Note Pad++
• Edit++
• Sublime • Eclipse • Netbeans • Visual Studio • Dreamweaver

Roles & Responsibilities

• Should closely work with backend developers like ASP, PHP, Java, and Ruby • Convert Visual Designs to HTML web or mobile or responsive
• Creating Prototypes for demonstrating applications
• Should be hand coded JS, HTML, CSS experience
• Familiar with DIV based layouts • Should be hands on experience in Mobile UI frameworks.
• Responsible for getting into UI RESTful services data

  User Experience (UX) User Experience

  User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

• Adobe Photoshop • Wireframes / Prototypes • Axure • Iconography • User Research

User Experience

UX Concepts

   User Research  User Interviewing  Gathering Statics  Personas  Information Architecture  Creating Wireframes  Prototyping  Usability  User Interface  Visual Design  Interaction Design  Content Strategy  Accessibility  Work Closely with developers  Communication with stack holders

  Web Designer Web Designer

  Design is the process of collecting ideas, and aesthetically arranging and implementing them, guided by certain principles for a specific purpose. Web design is a similar process of creation, with the intention of presenting the content on electronic web pages, which the end-users can access through the internet with the help of a web browser.

• Adobe Photoshop • Wireframes / Prototypes • HTML
• CSS
• JavaScript

  Thank You

onlinetraininginui@gmail.com | www.onlinetraininghome.com