Questions tagged [material-design]

Material Design is a design language developed by Google. Based on the paper and ink metaphor, the framework is characterised by the use of 'cards', grid-based layouts, responsive animations, transitions and depth effects such as lighting and shadows. "Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design." (Material.io)

Filter by
Sorted by
Tagged with
43
votes
5answers
15k views

What are the disadvantages of Material Design?

I'm generally a fan of Google's Material Design UX framework. Its positive aspects have been well-covered by the press and Google's own design group and evangelists. But, the disadvantages of the ...
37
votes
7answers
22k views

Do material design's floating action buttons provide a bad UX?

Google's material design largely focuses on clean visuals and a good user experience, but there is one feature that I have questioned: floating action buttons. This is a large button that appears in ...
36
votes
6answers
10k views

Is it acceptable to use Google Material Design in web applications?

We are considering using Material Design components in our website, but since this is an "Android design", wouldn't it turn away iOS users? What is the best practice? Is it wide-spread to use these ...
31
votes
3answers
8k views

Why isn't primary text full opacity?

I've been reading the material design guidelines and it suggests: For dark text on light backgrounds, apply the following opacity levels: The most important text has an opacity of 87%. I'm just ...
23
votes
5answers
4k views

Material design - buttons raise, not depress

There is some discussion of this here but I haven't found a more comprehensive discussion of it. With Material Design, objects that wish to convey being pressed appear to rise up towards the user, ...
20
votes
7answers
15k views

Material Design - Card within a Card

I'm utilizing Material Design for our product and have an area that has cards displaying information. Can a card be listed within a card? Similar to the image below but with content, obviously.
20
votes
1answer
4k views

Are there premixed Material Design color combinations I can use for prototyping?

I'm looking at this tool that allows to select material design colors and this document by Google that describes how to pick material design colors. As far as I understand, I pick 3 primary colors ...
18
votes
6answers
13k views

Fixed width for buttons or proportional with the text?

What is the best practice for a UI, to make all the similar buttons with a fixed-width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add ...
18
votes
3answers
10k views

Back vs close icon in Material Design

Some Material Design apps use the "close" icon instead of the more common "back" icon in the toolbar, for example: (From https://stackoverflow.com/questions/27125340/material-close-button-in-toolbar-...
18
votes
4answers
17k views

Editable table in material design

we're designing a web application in material design and we have an editable table there - something like this: Any suggestion on how to indicate the editable fields, if not all columns are editable? ...
17
votes
6answers
4k views

In a static data table, should rows be highlighted on hover?

My team is building a Material Design table component. The Material Design guidelines on data tables state: Row hover (Desktop) Display a background in a table row if a user hovers over any ...
16
votes
4answers
29k views

Material Design required field

Has anyone seen in Material Design how to present a required field? At the moment it seems the guideline is either to hide the submit button until required fields are populated or else throw an error ...
16
votes
2answers
2k views

Are material flat buttons distinguishable?

Blue colored texts are known to be links everywhere and users know they can click on them. How about Google Material Flat Buttons? In material design, colored text with enough padding is known as a ...
16
votes
1answer
10k views

Material Design - How to display a log in error

Problem I am trying to create a log in page that follows the material design guidelines, but I don't know how to handle when the user inputs the wrong email or password. In the material design ...
15
votes
4answers
4k views

Arrowless tooltip: Usability?

I'm working on a project using Angular Material, a framework based on Google's Material Design Specifications. As such, it uses arrowless tooltips like this: According to the guideline: Tooltips ...
15
votes
3answers
11k views

Best way to display a key-value list with material design?

For a "Material design" project, I need to display a key-value list with multiple items, something like that (example with an animal and 4 criteria): Name: Cat Category: Mammal Color: Black Size: ...
14
votes
2answers
3k views

How should a coloured dropdown be styled using Google Material?

I am working on a project which is using Google Material UI. I have a set of production statuses that need to be displayed - they are selectable from a list but I am not sure what that list should ...
13
votes
5answers
14k views

Is having multiple rows of tabs against Material Design?

As seen in this mockup, I kind of need multiple rows of tabs. One to click into categories, and another one to select your category. Is this ok? Also, side note—If Categories is selected, should I ...
13
votes
2answers
14k views

Choosing colors in material design

I am learning the ins and outs of material design. Note that I am a developer, and have only recently decided to be a little more serious about UX. Google writes: Limit your selection of colors by ...
13
votes
3answers
31k views

How to show read only label:Text in material design

Looking through material design components, specifically text input fields the guidelines are really clear for input fields. However, its unclear how to lay out non input text fields. Say I've got a ...
12
votes
2answers
7k views

Why the textfield in Google Material Design without box

Why the text fields (as below) in Google Material Design are without boxes? Here is a live demo of Material Design text fields. Polymer paper elements - paper-input What are the benefits of this ...
12
votes
1answer
13k views

Material Design data table filtering

How would you implement filtering in MD data table? Sorting, paging and searching is obvious but I need more complex filtering. Should I put the filters on the table title or create a separate ...
12
votes
1answer
624 views

In Google Maps, why did Google use back arrow icon instead of “X” close for search results list when its clearly a layer on top of the main interface?

I've been getting into Material design lately, and I really liked one of the material concepts, and thats to think of the UI in X,Y,Z axis. But noticed a discrepancy with what might be extremely ...
11
votes
3answers
22k views

Is it a strong anti-pattern to use a Floating Action Button in an iOS app?

Floating Action Buttons - invented by the Google Material Design Team - are rather popular on Android. Apple's closest equivalent are perhaps an action icon at top-right or the bottom Tool Bar pattern ...
11
votes
3answers
2k views

Is the Floating Action Button going away

I am contemplating whether to use the material design Floating Action Button vs. Menu with different Action options and I noticed that Google in Google sheets, for example, has removed the button in ...
11
votes
1answer
5k views

Submit button of form in material design

There is no description for submit buttons in material design. The most closest by meaning are floating action buttons. The buttons are located in top part of screen, but I don't see any sense in this ...
10
votes
2answers
8k views

Material design solution for popovers

Material design has no popovers, and I wonder what should be used as a replacement? For example, how would you advise Product Hunt to replace their popover when they switch to material design?
10
votes
5answers
24k views

Are there Material Design best practices for Filtering/Sorting in a Tab Layout?

What I’m trying to do I’m trying to find out what the Material Design best practices are for adding independent filter and sort options to EACH tab in a tab layout. What I have proposed I’m proposing ...
10
votes
4answers
3k views

Where to place the Save button Material

I'm developing a simple user creation screen in Android using Material Design. The portrait layout is completed, but I'm struggling finding a way to achieve a nice way to lay info out on the landscape ...
10
votes
2answers
2k views

Material Design - text colors don't maximize contrast

Description The color palette for Material Design specifies hues as well as suitable colored (white/black) text to be used for each backing-hue. So for example in the Red palette there are 10 '...
9
votes
2answers
3k views

Material Design guideline for Google Map's side pane?

Here is what happens when you click on an icon in an "old-style" Google map: You get an InfoWindow, and clicking "more info" opens a new tab with a google search of the icon's ...
9
votes
2answers
5k views

What is replacement for Android's Floating Button in iOS?

I wanted to build functionality in Android using a floating button, as all the tabs are fixed. What is the solution for replacing Floating Button in iOS?
8
votes
2answers
4k views

Font 'Roboto' mandatory in Google's material design?

Is using the font 'Roboto' mandatory in Google's material design – or can I use different fonts in a material design based website?
8
votes
2answers
14k views

Material Design - How to display an error on a larger screen

A bit similar to this question Material Design - How to display a log in error Though it doesn't address how to do this on a larger screen (i.e. desktop browser) since snackbar at the bottom as an ...
8
votes
2answers
8k views

Tree navigation in material design

I am looking for examples or guidelines how to design tree navigation in material design. The style guide covers data tables and lists but trees are not mentioned. The only reference are nested ...
8
votes
3answers
3k views

Is there a reason for drawing Material Design flat buttons like plain text?

In the MD specifications are listed two types of buttons: flat buttons raised buttons the flat buttons are usually with black text, making them look like simple not clickable text (for someone). ...
8
votes
5answers
32k views

Vertical and Horizontal three dots icon button usage

Despite the Material Design has great guideline documentation, I'm confused about vertical/horizontal dots icon for a Web App since for mobile, the vertical solution is a stablished pattern. I found ...
8
votes
2answers
3k views

Stacked modal dialogs (with Material Design)

I'm designing a Material Design app where users can edit items via a lightbox-style modal dialog. This is a hard constraint, so avoiding the lightbox is not an option. Within the dialog, there is an ...
7
votes
5answers
6k views

Material Design for Web apps?

I'm working on an admin portal (angular, jquery, bootstrap..) and I'm pretty comfortable with bootstrap and I think that the bootstrap designs are pretty cool. Now, my colleague insists on changing it ...
7
votes
2answers
4k views

Does Material Design have a guideline for styling a “select all” checkbox?

I have a list of checkboxes and would like to add a "select-all" toggle. I already have it working, including setting an indeterminate state when some of the items are selected. What I'd like to ...
7
votes
6answers
7k views

How do you deal with long labels using material design text fields?

I need to convert a form to material design guidelines but I don't think MD has considered how to deal with long labels on narrow forms. As you can see in my example I have 3 pairs of dropdowns that ...
7
votes
1answer
23k views

Material design - icon size in navigation drawer

I was wondering, in material design, what should be the icon size for navigation drawer. I had gone through https://www.google.com/design/spec/patterns/navigation-drawer.html# , but they didn't ...
7
votes
1answer
3k views

Commit/Save button in material design

I have a CMS system I'm implementing using Polymer/Material Design. Due to a number of factors, changes made to the content cannot be applied immediately, the user must make a set of changes and then ...
7
votes
3answers
10k views

What is the best practice for “delete” buttons in material design?

A lot of design systems/ style guides define red as the color for "delete"/ "erase"/ uninstall/ error buttons. In material design, I didn't find this specified. So, what is the ...
7
votes
1answer
4k views

Does Material Design have a guideline for grouping/organizing many form fields?

I have an editor on my Material-based site that lets users edit entity data. Each item might have a large number of key-value pairs, only a few of which are required, and I'm trying to surface the ...
7
votes
2answers
834 views

Not including a 'first page' and 'last page' button in a data table

So, in general my experience is that the Material Design spec by Google has been extremely well thought out, which doesn't mean I blindly follow it, but at least I think twice about every decision ...
7
votes
1answer
3k views

Responsive web app, bottom tabs for secondary navigation or primary actions?

I'm building a web app that I need to be fully functional for all devices, so I've built it from the ground-up as a mobile-first responsive web app. I already use a hamburger and left nav for main ...
7
votes
3answers
875 views

Best way to share from a Material design list

I've been looking for a common Material Design pattern for sharing an individual item from a list of content: I can't seem to find any strong recommendation from the guidelines other than not to use ...
6
votes
5answers
2k views

Right and left representing good and bad

I've been playing around with material design and was making an app where the user can interact with an element by either swiping it right or left (pressing it does a third thing). The idea is that ...
6
votes
2answers
2k views

Which of these two form layouts is better (more “material”)

Consider the two form layouts shown below The context here is an Android app targeting Android v 4.4+. The controls are A select box which I have attempted to make flat A readonly input which when ...

1
2 3 4 5
8