Material Design in Webix UI

Material Design is a visual language that was developed by Google and is becoming trendy in mobile and web apps development. It is aimed at increasing the usability of application interfaces while preserving simplicity and nice look and feel of the apps. Web apps with this design can easily adapt across various platforms and all types of devices.

material design

Webix team was inspired by Google Material Design and created a new skin in accordance with the described visual principles.

Webix Material Skin

As you see in the picture above, the interface is cleaner and clearer, the shadows are lighter and the colors for selecting controls are brighter than they used to be. All these visual updates will help your users to focus on the work of application without diverting their attention to the visual features of the app. Such a light design of components makes the final app even more user friendly and allows it to look good on a wide range of devices.

To watch the performed changes, please check the Webix Admin App demo with a new Material skin. The source code of the app you can find here.

We are still working over the skin improvements and planning to make it public quite soon. Stay tuned to Webix news!

Written by
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Webix product manager since 2012, interested in SMM and usability. She strives to make the online world better by creating qualitative and catching content.
  • Ilir

    Sweet! :)

  • Dmitry Dudin


  • Miguel Angelo Mello

    Good work fellows.

  • Nice design! The new admin app could be a bit more mobile friendly… In Chrome for Android on my Galaxy S5, it’s difficult to pan around and zoom in/out. But since this is work in progress, I hope a fully mobile ready version will be out soon.

  • Cool design! Keep it up!

  • Mrinmoy Majumdar

    I am comming from the Sencha Background, and looking for some alternatives to their ExtJS product. Webix seems to be a really good fit for most of the thing, but i was unable to find much on the theaming. I know that there is an online skin builder but it may not be sufficient for our product as we do a lot of customizations. Sencha have a process to selectivly override sass variables and sources with our own which gives us endless possibilities. I think a detailed blog on the theaming process in Webix will be really cool to show how a user defined theams can be programmed like you did when you created meterial design

    • Veronika Lindorenko

      Hello Mrinmoy, that’s a good idea for a blog post. We will consider it and may be write an article soon.

  • Baihaqi Aviq

    hi.. how to switch to material design after clone repo from git?

    • Veronika Lindorenko

      This skin is a preview skin and it will be available only at the end of March.

      • Baihaqi Aviq

        OK.. nice design

      • dmoshal

        It’s almost the end of March – are you still on track to release the Material theme?

        • Veronika Lindorenko

          Yes, the material skin will be a part of new Webix version that will be released tomorrow.

          • Sweet! :-)
            Four hours ago Maksim just uploaded the new Material Design skin to Github.

  • Webix skins for Meteor are now available on Atmosphere – skin

All posts: