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
About Me
Subrahmanyam Poluru
( UI / UX / Consultant / Trainer )• 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
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 menus and icons,
keyboard shortcuts, mouse and
gesture movements, command language and online help, as well as physical
Some of UI Technologies
HTML5 CSS3 JAVASCRIPT JQUERY
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 the presentation of a
JavaScript
JavaScript
An object-oriented computer programming language commonly used to create interactive effects within web browsers.
Popular JavaScript Frameworks :
JavaScript
Bootstrap
Twitter Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
• Ease Of Use
• Highly Flexible
• Responsiveness
• Comprehensive List Of Components
• Leveraging JavaScript Libraries
Bootstrap
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.
• MVC, MVVM
• Good for Single Page Applications
• Two binding
• Templating
• Easy to develop
Angular JS
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.
• Phonegap
• Ionic Framework
• Rhomobile
• Titanium
Hybrid Application
JQuery Mobile Demo
Tools for UI
• Basic Note Pad
• Note Pad++
• Edit++
• Sublime
• Eclipse
• Netbeans
• Visual Studio
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.
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 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
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
