A hands-on guide to applying default, comfortable, and compact density to your application

A common issue for any front-end developer is layout and spacing. How dense should your user interface be? Can a design system really account for all the different layouts in a product? Material is here to help.

The latest update to our density guidelines includes a new systematic approach to applying density and spacing in digital products. Now, you can change the spacing of your product to suit layouts for different use cases, such as data-heavy layouts vs. a layout with a single call-to-action.

Just as you…

Everything you’ll need, from the web code to best practices

You probably already know Material Design — Google’s open-source design system for quickly building beautiful interfaces. But you might not know that one of Material’s most popular use cases on the web is being the “front-end of the back-end.” Oodles of Material web apps are essentially admin panels, data displays, and tools for content manipulation. In fact, this use case is so prevalent that, according to a survey by Material-UI (a 3rd party open-source React implementation of Material Design) 70% of respondents said they used that product to build admin panels and dashboards.

We recently revamped Material’s data table component…

A design system can fail without careful forethought, diligent effort, and support

Photo: Ulrike Hammerich/EyeEm/Getty Images

Design systems are so hot right now — and for good reason. They promote a modular approach to building a product and ensure organizational unity and stability via reusable code snippets, UI components, and utility styles. They make prototyping a breeze and provide a common language for both designers and developers.

A design system is a culmination of several individual components, which can include any or all of the following:

  • Style guide or visual pattern library
  • Design tooling (Sketch library, for example)
  • Component library (where the components live in code)
  • Code usage guidelines and documentation
  • Design usage documentation
  • Voice and…

Communication is essential to human survival. It’s what allowed us to work together, build tribes, and survive the elements to pass on the genetic code. And now, with the growth of the web — the most accessible, widespread, and powerful communication tool we have today — our tribe has become global. Our ideas have merged, and the web has allowed for some incredible collaborations across borders that have continued to move us all forward.

The emergence of this communication network brought with it the emergence of the world of big data, multi-player online games, and personal blogging. You can pretty…

Yesterday, I retweeted a post which criticized the currently fragmented state of web development. The post was pretty aggressive, but I agreed with some of its points re: over-engineering, and a fragile plugin/dependency model that only seems to be getting worse. I’m all for criticism — these are important conversations to have, but then someone pointed out to me a line in the post that I originally skimmed over which personally attacked an open source developer. Woah. Nope. Nope. Nope. That is NOT okay. That line quickly turned the post from a critical, though salty, expression of an opinion on…

Una Kravets

http://una.im :) front-end developer & brunch enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store