How UI Framework improves design process.

Problem: Inconsistent design

Miscommunication and blame between developers and designers STORY

Solution: UI framework

UI frameworks are emerging to become an accepted standard for building complex, consistent and maintainable presentation layer for a web application. UI frameworks, when implemented sets standard for developing presentation layer of any web application.

UI framework is living library with patterns, visual standards and interaction behavers

 Why UI Framework?

• Portability
• Move away from repetitive speci?cation documentation by just referencing your patterns
• Allows re-use of assets in the application
• Supports the growth of the product over time
• Cheaper Development
• Easy to install
• UI Framework UI Library UI Guidelines
• A library of UI Components, JavaScript, CSS, HTML templates and other resources you can include in your projects. Library of UI controls
• UI Components Controls Grid Colours Typography Animation Icons
• Guidelines with Components and Patterns. How to arrange your components on the screen

Advantage

Consistency across Multiple Platforms: UI frameworks are designed to be consistent across a variety of platforms. They support as many mobile devices now available in the market as possible. To work flawlessly on different platforms, they take advantage of responsive design or use reactive design (where UI elements appear or disappear depending on the platform) in combination with responsive design.

User Interface Elements: Frameworks offer a variety of HTML5 UI elements and controls like menus, toolbars, buttons, forms, modal overlays, lists, tabs etc. Some of them also use naturally resizable font files to display icon images on the device screen.

Query Selector: Frameworks make use of a query selector, a JavaScript library that instructs them to choose UI elements for making changes to the DOM (Document Object Model). Without a query selector, a framework either doesn’t work properly or at all.

Touch and Click Events: Frameworks take benefit from click events and touch events, which are used by desktop mouse-driven devices and mobile devices respectively. Most of these frameworks also ensure that HTML elements will get resized properly for touch activation.

Dynamic Loading: Frameworks have the ability to dynamically load data from the web using asynchronous techniques. This way, they don’t only speed up the development process but also make your apps more advanced.

Extra Functionality: Many of these frameworks give you an option to add extra functionality through plug-ins, CSS or JS. You’re free to include what is necessary and exclude useless things.

Disadvantage

You learn the framework, not the language: I believe this to be the major problem. If you’re using a framework and you know very little about the language behind it, you will learn the framework and not the language itself. The way you code jQuery is different from the way you code JavaScript. Simply put, if you know jQuery, it doesn’t mean you know JavaScript.

Limitation: The framework’s core behaviour can’t be modified, meaning that when you use a framework, you are forced to respect its limits and work the way it is required. Make sure you choose a framework that suits your needs.

Code is public: Since the framework is available to everyone, it is also available to people with bad intentions. It can be studied in order to know how things work and to find flaws that can be used against you.