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
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, ...
2
votes
1answer
461 views

Is it a bad practice to use similar floating action buttons with different functionalities in different pages

According to Material Design Guidelines, Google states that on any page the primary action of the page can be promoted in the floating action button. But what if on different pages, we use similar ...
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 ...
4
votes
1answer
1k views

Best practice for linear or non-linear stepper in multistep forms

I am hammering out the guidelines for use of Material design's steppers in a system. The admin using this system can configure a form to some extent. The admin can not decide in which step of a multi ...
3
votes
1answer
464 views

Reducing Button Clutter and improving UX

This question follows on from some of my previous questions on this forum: header-footer-icon-usability capabilities-detrimental-to-usability With the help of the answers and suggestions I got here ...
1
vote
2answers
689 views

Use of a Dialog box on Material Design

I'm designing a web app but can't reveal its name and its main function so let's see how this could be explained. In this app there's a type of user that have the power to Add and Remove Team Members ...
5
votes
3answers
3k views

Is it a good idea to use a Floating Action Button for non-actions?

Google Material Design guidelines recommend to use Floating Action Buttons primarily for a promoted action. However, recently there seems to be a rather solid emerging trend to use these buttons for ...
2
votes
1answer
538 views

Material Design - bottom navigation with upper tabs?

Prototyping a new dialer app based on Material's framework and style guide. Side navigation is not an option. Instead, I would like to use bottom navigation for 4 main pages/features. Recent Calls ...
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 ...
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-...
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 ...
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 ...
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 ...
4
votes
2answers
814 views

Fitting a Huge Real Life Insurance Form in a 7 Inch Tablet

I'm consulting a Life Insurance company who plan to go mobile with their procedures on signing up for an Insurance product. This will be mobile on a 7" Tablet device, say Nexus 7 with 1920×1200 pixel ...
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 ...
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 ...
6
votes
1answer
7k views

Tasks State Colors with Icons

I am currently trying to implement a task system that can have 5 "states". I've been playing with icons to differentiate between each, but also speculated that colors would be beneficial to include. ...
6
votes
2answers
16k views

Why Material Design uses 64px height for navbar? [closed]

I looked at various implementations of Material Design and it seems that they all have height: 64px and I am wondering why ? What is the calculation based on ? Why not 65px or 50px ?
5
votes
2answers
4k views

Material Design Steppers - Lists inside steps

I am a bit struggling regarding a multistep process to create an item where the user has to fill out different data inside a mobile android application. Basic Data (e.g. a Location, a Date) Select ...
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?
6
votes
2answers
2k views

Filter/Sorting best practice in Material Design?

I'm designing a web application using the Material Design spec. I need to allow users to filter the cards that appear on a tab. From what I understand of Material Design there are quite a few ...
4
votes
6answers
6k views

Were we mistaken about rounded corners being better UX?

I am learning HTML and CSS, discovering that browsers implemented rounded corners and shadows using CSS... just about the time that UI went to "flat / sharp corners" without shadows, etc. It seems sad ...
1
vote
2answers
916 views

Normal Dialog or Bottom Sheet dialog for confirmation

I am about to pick dialog type for confirmation (yes, no) when deleting an item. I have two options to choose from: Bottom sheet dialog Normal dialog What is the best for this scenario and why? ...
6
votes
4answers
2k views

Inputs, does removing borders except the bottom one have any benefit?

Until material design, form fields always have a border all around. For me, it's a cultural habit. Users use these borders to identify the field in the page. Google itself, on Gmail, Google Search... ...
5
votes
2answers
2k views

Material Design: using cards for homogeneous content instead of list

The material design guidelines suggest to use lists for homogeneous content and cards for mostly heterogeneous content. It also suggests that if the content is more than 3 lines long then use cards ...
4
votes
2answers
147 views

Using Material Design on iOS

I have an Android app developed by using Material Design principles. Currently, I am planning to release it on iOS too. I read several blogs/SO posts, which state that Apple is strict about Flat ...
3
votes
2answers
4k views

What are specifications for pagination dots for Android 5?

I have been searching about this and looking into the documentation, but failed. Is it forgotten by Google? Or it's hidden somewhere I didn't notice? Example:
3
votes
3answers
750 views

Improving the sensitivity of range sliders

The context here is a hybrid Android (v 4.4.x+) app. I have started with the code for the rather well written and documented noUISlider which I have modified to make it look more like a "Material" ...
3
votes
1answer
157 views

Can material design give a unique identity to my application?

Can material design be personalized in a way that gives identity to the app? what I know about MDC (Material Design Components, an acronym I've just known!) is that it provides us with a bunch of ...
2
votes
1answer
1k views

Material Design List with a lot of information

Can anyone point to a good example of a material design list where each list item has a bunch of information? I am struggling to put together a block of information that is appealing. My specific ...
2
votes
3answers
3k views

Android Material Design: Should text field and button have same size?

I'm making a login view using material design guidelines, which makes me confused whether the text field should be and the login button must have the same size?
2
votes
1answer
65 views

“Offers” list - capabilities that might be deterimental to usability

Consider the "offers" list shown below. There are two display issues here on which I would like some feedback You will notice that the header text for the second list item spills over into a new ...
2
votes
3answers
2k views

Expand truncated table cell content on hover

I'm working on a project using Google's Material Design and am running into an issue where we need to truncate table cell content. There is a spec for truncating table headers and showing the full ...
2
votes
2answers
1k views

Mobile - Sorting Items on one tab

I am currently working on an android application and I try to follow the material design specification. Now I am in a situation where I have 2 tabs with different content. I need to present sorting ...
0
votes
2answers
505 views

Point of opening bottom sheet when overflow menu was clicked?

I was wondering what's the point of opening modal bottom sheet when overflow menu is clicked? Look at this : Modal bottom sheet behavior Because user have to reach the top of the screen to click the ...
0
votes
1answer
279 views

White action bar or dark actionbar

I see many apps today uses shades of white extensively in their design. Even action bar color is shade of white which was used to be a dark color earlier. This seems to be a trend. As I read in this ...