Category Archives: Material Design framework

SUBSCRIBE TO UI STREET

MATERIAL DESIGN AWARDS 2016 BY GOOGLE

Material Design AWARDS 2016 BY GOOGLE

A design system only comes into existence when it’s used to create meaningful experiences. Last year, Google has introduced the Material Design Awards to recognize best-in-class achievements in employing Material Design. At Google I/O 2016, Robinhood was presented with the Google Play Award for Best Use of Material Design, Google wants to continue recognizing the makers who are helping to provide the next generation of Material Design.

This year Google is proud to announce the winners of the second annual Material Design Awards. Whereas the last year winners are highlighted in specific aspects of Material Design used in creating apps which satisfy the users while aptly expressing their brand. The five winners have been honoured at the SPAN LA conference on October 27, representing the finest application of aspects of Material Design.

THE TOP FIVE WINNERS ARE AS FOLLOWS :
Asana: Team Tasks & Projects by Asana, Inc.

An application built on making team more productive and collaborative which is visually focused and clear to keep the users concentrated on getting work done in time. Asana achieves this by polishing short, frequently repeated interactions to make efficiency feel rewarding. The content is never submerged by the wide range of actions because they are organized brilliantly and are very easy to trigger.

Asana’s design team has worked with the brand experience at every turn. Tenuous gradients are applied to the floating action button, as well as in moments of more casually paced user communication. The product logo is resonated in the circular outlines around icons which shows up while editing a task.

FABULOUS – MOTIVATE ME!BY THEFABULOUS

It’s always hard to rewire the brain and to adopt a routine, but it can be made easier with a perspective coach from your side. The Fabulous app a self-described “happiness trainer” that helps you to make a positive choice.

The application’s has the most charming illustration style which makes an instant impression. The crisp state transitions and pleasing goal completion animations keeps up the motivation— the experiences beyond the application functionality are keenly considered, with bold notifications style and with a good soundscape.

C CHANNEL BY C CHANNEL CORPORATION

When it comes to designing an application navigation, higher content usually means higher problems. Search often becomes a primary mode of exploration. The C Channel application clearly balances a blend of studio-created and user-submitted videos which is related to fashion, food, and much more.

Material Design AWARDS 2016

C Channel organizes the content into a series of tabs that can be seen easily with a simple swipe.

KITCHEN STORIES BY KITCHEN STORIES

Kitchen Stories shines in creating effective, easy-to-check layouts for recipes across a variety of screens and sizes. Home cooks will be more excited to have their tablets in the kitchen: content is organized smartly, there is no need of touching the screen with messy fingers. Kitchen stories is grabbing the attention through other moments in the application such as precise positioning for the playful use of the logo as a textural element on background surfaces.

AIRBNB BY AIRBNB,INC.

In Airbnb, the essential tasks are satisfied through clear design, routing users clearly and quickly from sign in, to browsing, and booking a reservation. They have clearly segmented the larger goals into smaller steps. Airbnb’s visual appeal is at the point. Photography is clear and communicates a sense of opportunity in each new destination.

AIRBNB BY AIRBNB

SUBSCRIBE TO UI STREET

TOP 3 MATERIAL DESIGN FRAMEWORKS TO USE

Top 3 Material Design framework To Use

The most considerable thing about web designing is that it is always changing and deriving. Web designing is the Google’s new design practice; it is the mobile first approach design system. The main aim of the material design is to make everything in a same simple manner so anybody can understand them, even if it is an application with a brand new functionality.

Material design has been defined as a visual concept that works to combine science and technology with the traditional rules and principles of classic design. Material design is like a flat design, but it has more depth than other usual designs. Material design has used bolder colours, layout principles, animated elements, and better use of typography. The most important and used aspect is transitions. Material design has the best psychological traditional effects.

Many well-known companies started to adapt material design for their projects. Companies like Whatsapp, Invision and many more started using material design principle these days.

We have found some great material design based front end framework while we resource in material design, so, in this article we have put together the best material design frameworks for developers.

M-UI Design Framework:

Material UI is a lightweight CSS framework that allows Google’s Material Design guidelines. It was designed from the ground up to be fast, small, and developer friendly. The major goal of the project is to provide a basic set of components and helper methods so that developer can build the sites that are fast and user-friendly.

Material-UI components run on top of Facebook’s React.js library. Everything in the framework is a React component except the basic CSS classes for material colours and typography. This makes a little crucial for non-programmers, since one need to have a good understanding of Javascript, JSX syntax, and basic React concepts.

The framework is much customizable and you can override the style for most of the components by passing custom CSS classes as props to the components under consideration. Roboto fonts are at the crux of Material UI framework for a clean modern look and feel.

The most important goal of building MUI is that the developers can use it fastly, and consistently the UI components across platforms from web to mobile to email to iOS to Android.

Angular Material Design Framework:

An Angular material project is nothing but the implementation of Material design in Angular.js. The Angular material is a complete framework that implements Google’s material design and provides reusable, well-tested, and accessible UI components based on material design. Angular material is created and maintained by Google’s team, who has created the material design guidelines in association with Google’s Angular framework developers.

The framework in the Angular ecosystem will run on directives. All material design components are available as directives and services, the behaviour of the components can be controlled by the usage of attributes.

The developer can customize typography, colours and other components by using the theming layer of the framework.

Angular material package is available in GitHub and can also be built using npm and gulp, alternatively, you can get the distribution files and install locally using Bower.

var app = angular.module(‘StarterApp’, [‘ngMaterial’]);
app.controller(‘AppCtrl’, [‘$scope’, ‘$mdSidenav’, function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
“ The above code describes Angular module and Angular Controller “

Bootstrap Material Design Framework:

Definitely this one is for all the Bootstrap fans and also for the people who is planning to start a new web project. It would not be completely appropriate to call it as a framework since it is a theme built using Bootstrap 3 that implements Google’s material design.

It comes packed with components and CSS compliant with some material guidelines and so customizable that you can create any layout and obtain any design just by making minor configuration changes.

Bootstrap is the best framework for creating responsive websites at lightning speed and material design is the design philosophy that is fuming at the moment.

You get Bootstrap elements plunged in material design, these includes tabs, navigation bars, typography, buttons, progress bars, sliders, and panels.

Bootstrap is definitely a go without a second thought if you are among the people who do not believe in building websites from scratch.

Final Thought

Material design is raging in the present environment and the whole web and mobile ecosystems are undergoing a mass scale redesign influenced by Google’s material design principles. Frameworks around any new design paradigm are necessary and that is what we are witnessing here with material design.

Let us see how these frameworks shape up and where the web goes from here with material design in near future.