helloroboto

Roboto Font

The Roboto font was designed by Christian Robertson, an interface designer for Google. Roboto font is both mechanical and geometric in design with curves that gives smooth feeling to words.

Since the launch of Material Design, Google has been using Roboto font as a standard for Android Mobile development and Web Applications.

The font is licensed under the Apache license and is free to download and use.

Download Roboto Font

framework

Mobile Framework

Mobile Framework

Rapidly design, develop, and manage cross-platform Mobile applications The mobile framework provides rapid design and development of a feature rich and interactive Mobile App for a Website or any other purpose

Mobile Framework
Mobile Framework
Mobile Framework
Mobile Framework

Download PDF

Features List

  • Material Design UI with Navigation Drawer, Card
  • Data input from existing website using XML feed
  • Image Caching, Auto refresh, on click view enabled
  • On click, read complete post including text, image
  • Optimized for WordPress CMS
  • Share posts/articles in social media sites
  • Notification for new post or event
  • Google Ads API for displaying banners, interstitials
guidelines

Material Design Guidelines

Google has launched a design framework – Material design, which is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

Principles of Material Design

According to Google – “A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination

The foundational elements of design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.”

Material Design Guidelines

Google has specified guidelines to use Material Design in web and mobile apps. To use material design in website and apps, follow the guidelines defined in the material design specification .Most of the new components and functionality available in Android 5.0 phones and above.

The specs are very detailed and define exact specs for Elevation, Shadows, Object relationships, Animations, User input, Surface reaction, Material response, Radial action, user input, Surface reaction, Material response, Radial action, Visual continuity, Hierarchical timing, Consistent choreography etc.

Material Design Guidelines Useful links:

Introduction to Material Design:

Goals and Principles of Material Design
http://www.google.co.in/design/spec/material-design/introduction.html

Google Design

Design resource website from Google
http://www.google.co.in/design/

Styles in Material Design

Usage of Color Palette, themes and UI
http://www.google.co.in/design/spec/style/color.html

Material Design Guidelines

Resources for Icons, Fonts, Android TV, VR
https://www.google.com/design/resources/#material-design-guidelines

Material Design for Android

Guidelines for developing Material Design Android Apps
https://developer.android.com/design/material/index.html

Material Design for Developers

Learn how to apply material design styles to your app
http://developer.android.com/training/material/index.html

Material Design Training Material

Articles, videos and resources files
https://developer.android.com/design/index.html

MDL – Material Design Lite

Design framework for developing websites based on Material Design
http://www.getmdl.io/

According to Google, the Material Design specs will be evolving and it is important that web & mobile developers should bookmark the above links and check them frequently for updates.

material_design

Introduction to Material Design Lite for Website

Google has launched a new website framework, Material Design Lite – http://www.getmdl.io/ using which web developers can now add a Material Design look and feel to websites.

It uses CSS, HTML, JavaScript and enables website to display like App. It can be used for any website, blog, article or news site.

It works like a normal framework and web developer have to include the Material Lite CSS and JavaScript files in each HTML page in the project. It has containers, sliders, tables, menus buttons etc. Most elements can be changed using CSS classes like animation of adding a Ripple effect when a button is clicked.

The website – getmdl.io has several ready to use components which will enable a web developer to start using material design:

Templates

Templates There are 5 ready to use themes or templates namely Blog, Android.com MDL skin, Dashboard, Text-heavy webpage and Stand-alone article http://www.getmdl.io/templates/index.html

Introduction to Material Design Lite for Website

Components

Components UI components like Badges, Buttons, Cards, Layout, Loading, Menus, Sliders, Toggles, Tables, Text Fields Tooltips are nicely designed http://www.getmdl.io/components/index.html

Introduction to Material Design Lite for Website

Styles

Styles The site also guides on the styling aspect of website that includes Fonts. Icons, Spritesheets, color palette. As in mobile, MDL uses Roboto Font http://www.getmdl.io/styles/index.html

Introduction to Material Design Lite for Website

Customize

Customize There is a custom CSS theme builder and color wheel using which developers can choose and download primary and secondary theme CSS

Introduction to Material Design Lite for Website

Download MDL project files:

https: //github.com/google/material-design-lite
https: //github.com/google/material-design-lite/archive/master.zip

component

Material Design UI components

User Interface is the most important component in Material Design. As material design becomes the new standard in Mobile App designing, more and more app developers have started making the transition in launching new apps with Google material design.

Listed below are some of the UI components that are used for developing a Material Design App:

For more details pl. check:
https://developer.android.com/design/material/index.html
http://www.google.co.in/design/spec/components/cards.html#cards-usage

To develop a Material Design based app. Pl.

contact us.

resources

Material Design Resources

Collection of useful links and downloads for web/mobile developers and designers working on Material Design from Google

Listed below are some great resources that you can read and download about the new Material Design from Google

From Google:

Material Design Introduction

https://www.google.com/design/spec/material-design/introduction.html

Material Design Guidelines

https://www.google.com/design/resources/#material-design-guidelines

Material Icons

https://www.google.com/design/icons/

Sticker Sheets

https://www.google.com/design/spec/resources/sticker-sheets-icons.html#sticker-sheets-icons-components

Roboto & Noto fonts

https://www.google.com/design/spec/resources/roboto-noto-fonts.html

Color palettes

https://www.google.com/design/spec/resources/color-palettes.html

Layout templates

http://www.google.co.in/design/spec/resources/layout-templates.html

Android Wear Material

https://developer.android.com/design/downloads/index.html#Wear

Material Design for Website

http://www.getmdl.io/

Other Useful Links:

http://android-developers.blogspot.fr/2015/05/android-design-support-library.html?m=1)and

http://www.cssauthor.com/material-design-resources/

http://www.tommasonervegna.com/blog/2014/9/28/25-free-design-resources-for-google-material-design

http://ypereirareis.github.io/material-design-resources/

http://www.materialup.com/posts/c/resources https://365webresources.com/10-free-design-resources-android-l-google-material-design/

http://www.tommasonervegna.com/blog/2014/9/28/25-free-design-resources-for-google-material-design

http://www.hongkiat.com/blog/material-design-resources/

http://www.sketchappsources.com/free-source/597-google-material-design-ui-sketch.html

http://speckyboy.com/2014/11/19/free-material-design-gui-templates-icon-sets/

http://superdevresources.com/material-design-web-ui-frameworks/

https://github.com/search?o=desc&q=material+design&s=stars&type=Repositories&utf8=%E2%9C%93

To add any other link or resource on Material Design, pl. contact us.

androidd

Material Design for Android

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices from Google. Android has now included support and guidelines for developing material design apps.

https: //developer.android.com/design/material/index.html

The five major components of Material Design UI are:

1.Theme

Customize the look of the app theme according to your brand identity with a color palette you control. You can tint the action bar, animations and the status bar using theme
https://developer.android.com/training/material/theme.html

2. List and Cards

Display important pieces of information inside cards that have a consistent look and feel
https://developer.android.com/training/material/lists-cards.html

3. View Shadows

Material design introduces elevation for UI elements. Elevation helps users understand the relative importance of each element and focus their attention to the task at hand
https://developer.android.com/training/material/shadows-clipping.html

4. Animations

Animations in material design give users feedback on their actions and provide visual continuity as users interact with your app. The material theme provides some default animations for buttons and activity transitions. You can create custom animations for touch feedback in UI controls, changes in view state, and activity transitions
https://developer.android.com/training/material/animations.html

5. Drawables

Vector drawables scale without losing definition. You need only one asset file for a vector image, as opposed to an asset file for each screen density in the case of bitmap images
https://developer.android.com/training/material/drawables.html

6. Material Design Icons

Download beautiful material design icons like Badges, Buttons, Cards, Layout, Loading, Menus, Sliders, Toggles, Tables, Text Fields, Tooltips
https://github.com/google/material-design-
http://google.github.io/material-design-icons
As material design becomes the new standard in Android App design, more and more app developers have started making the transition in launching new apps with Google material design.

gmail

10 Great Material Design Apps

Material Design is a new design language from Google that incorporates interfaces from components that behave like physical objects. Like occupying 3D space, casting shadows, stacking on top of each other and even simulating momentum when moved. Most Android developers have started developing new apps on material design framework.

Below is the list of few apps that uses the latest Material Design, not surprisingly several of them are from Google Inc:

1. Inbox by Gmail

Inbox, built by the Gmail and all messages from Gmail are displayed here and better organized, like get the most important information without even opening the message
https://play.google.com/store/apps/details?id=com.google.android.apps.inbox&hl=en

2. Messenger

Messenger from Google is a communications app that helps you send and receive SMS and MMS messages to any phone. You can also send group texts as well as your favorite pictures, videos and even audio messages to your contacts
https://play.google.com/store/apps/details?id=com.google.android.apps.messaging&hl=en

3. Google Calendar

See your schedule at a glance with photos and maps of the places you’re going. Events from Gmail – Flight, hotel, concert, restaurant reservations and more are added to your calendar automatically. Assists to fill in your calendar – You can quickly create events with smart suggestions for event titles, places and people
https://play.google.com/store/apps/details?id=com.google.android.calendar&hl=en

4. Relay for Reddit

Relay for reddit is a fun new way to browse the news and entertainment website Reddit. Whether you’re a casual ‘lurker’, power user, or even a moderator, Relay makes using reddit a pleasure. Also has inline previewing of pictures, YouTube, gifs and html 5 videos.
https://play.google.com/store/apps/details?id=free.reddit.news

5. Pocket Casts

Podcast player that is full featured, beautiful and easy to use. Pick any podcast you like, set it to auto-download. It won the Google Play Editors Choice and winning a Google Material Design Award.
https://play.google.com/store/apps/details?id=au.com.shiftyjelly.pocketcasts

6. WAVE Calendar

WAVE Personal Calendar is a calendar app, which has an amazing UI, works smoothly, is easy to navigate. It syncs with all calendars (Google, Exchange, Hotmail, Outlook, and Facebook)
https://play.google.com/store/apps/details?id=com.esites.ecal&hl=en_GB

7. FeedlyReader

FeedlyReader is a RSS reader for Feedly
https://play.google.com/store/apps/details?id=com.huwenqi.feedlyreader.app&hl=en

8. Simplenote

Simplenote is an easy way to keep notes, lists, ideas, and more. Keep notes on the web, mobile device, your computer and find notes quickly
https://play.google.com/store/apps/details?id=com.automattic.simplenote&hl=en

9. WhatsApp Messenger

WhatsApp Messenger is a popular messaging app. WhatsApp uses the phone’s Internet connection to message and call friends and family. Send and receive messages, calls, photos, videos, and Voice Messages.
https://play.google.com/store/apps/details?id=com.whatsapp

10. Pocket

Save articles, videos and other web content for later in a beautiful and optimized easy-to-view experience for your phone and tablet — even offline
https://play.google.com/store/apps/details?id=com.ideashower.readitlater.pro

Note: These apps will display proper animations on a Lollipop Android phone For more info on Material Design
http://www.google.co.in/design/spec/material-design/introduction.html

pallette

Material Design Color Palette

Choose your favorite colors and get your Material Design palette generated Explore various options and download the right design color combinations for your App

View

material

Material Design

What is material design?

Material Design is a new design concept developed by Google. It is a language for a unified system of visual, motion, and interaction design that adapts across different mobile devices and different screen size websites.

According to Google “A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic” With the release of mobile phones with Android Lollipop, Google’s Material Design language has begun making its impact. Most of the Android mobile apps have started adapting to Material Design due it superior UI experience.

Material Design

Material Design

Material Design Guidelines

Guidelines of new Visual Design Language from Google Check out info on Material design new features, framework info and tool kits

Material Design

Material Design for Android

Android Operating System now includes support for material design apps. To use material design in your Android apps, follow the guidelines, pl. check –
https://developer.android.com/design/material

Material Design

Material Design for Website

You can now add a Material Design look and feel to your website. It uses CSS, HTML, JavaScript.and enables website work like App –
http://www.getmdl.io/

Material Design

Material Design UI components

Material UI Components such as Launch screen, Action Bar, Roboto Font, Dialog, Cards, Dropdown menu, Icon buttons, Switches, Toolbar and more

Material Design

Material Design Apps

List of Android apps use Material Design and functionality Clean card-based layout, theme format and smooth animations make them stand out

Material Design

Material Design Color Palette

Choose your favorite colors and get your Material Design palette generated Explore various options and download the right design color combinations for your App