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
0
votes
1answer
25 views

Material Design | Dialoge from floating action button - how to do it? Is it even a good idea?

I'm designing a dark-mode-first desktop website for an online media organization. One of the key characteristics of the organiation is its community, and how open, friendly, inviting and communical it ...
0
votes
1answer
30 views

Material Design | Cards - Rich Media - Above Primary Title VS. Below Primary Title for a Card Grid?

I'm designing a website under Material Design guidelines for an online media organization. I'm designing right now a card grid where each card will include a rich media component. The page the grid ...
0
votes
0answers
50 views

What would the best UX journey in terms of UI components for PDF data extraction to editing of content ? I have attached the requirement below [duplicate]

The steps involves are the following : User uploads the PDF into the web app. All data are extracted and arranged according to the content in respective control group. Example : Admin , Security , ...
0
votes
1answer
106 views

Is stepper component obsolete from a UX perspective?

I am implementing a stepper with Material-UI something that seems to be a local navigation system (different steps show complete detail views, tables with related entities, other views for related ...
1
vote
1answer
41 views

Best layout/design for profile CRUD actions suggestions

I am currently working on a university project on an android app, that communicates with a device via Bluetooth and uploads profiles to it. So in the app I have a UI that provides different CRUD ...
3
votes
2answers
94 views

Inconsistency with a UI framework that changes its visual design - when and how to move away from it in the Enterprise?

I design internal web tools for a company, and we use Vue and Vuetify on the front-end. I use a material design plugin with Sketch and have created our own beginnings of a design system/style guide ...
0
votes
0answers
14 views

Is there a place for commonly used Inputs or Actions in Material Design?

From what I understand, a single viewport using material design components can have An app bar on top A navigation drawer to the left/right Tabs at the top or bottom for more navigation The middle,...
4
votes
4answers
683 views

Material design or completely custom look? [closed]

I'm making an app and I'm not sure whether to follow Google's material design or stick to a completely custom look and feel. I can find pros and cons in each approach: Material design Custom Pros ...
0
votes
1answer
90 views

Looking for a figma or sketch UI kit of Material Design components for Windows apps (WPF/XAML) [closed]

We are migrating the UI of a Windows app over to Material UI. I would like the ability to mock up screens in figma (or sketch) but would like to do that using the common library of Material components ...
0
votes
0answers
86 views

Designing android apps: Material design and apps with own character

I'm new to mobile app development. I came across material design and its guidelines even though I just scratched the surface. I basically am curious how strict the guidelines have to be followed to be ...
2
votes
2answers
90 views

Should snackbars cover buttons?

I'm designing an app that requires CTAs at the bottom of the screen for most of the flows. This, I have found, presents a challenge when trying to incorporate Material Design snackbars. For example, ...
2
votes
2answers
639 views

App Navigation: Bottom Navigation Bar vs Bottom App Bar?

Bottom navigation Bottom App Bar These are the two options when thinking about the bottom navigation for an Android App. What are the use cases for both? When should one be used over the other?
1
vote
2answers
38 views

Using both bottom navigation and tabs for an android app [duplicate]

I was told it's a bad practice to have both bottom navigation and tabs in the same screen, but I'm not finding any information about why, and what can I use instead of tab bars in Material Design. The ...
0
votes
1answer
92 views

UX solutions for data tables and alignment on large screens

I see a lot of excellent advice here regarding how to build mobile-responsive data tables. However, when it comes to large viewports, I'm not finding much. In general, I'm lost about what could be the ...
0
votes
1answer
254 views

Confusion on Material Design hover and focus states combination

Material Design guideline says this and it's really confusing me: Only one state layer is applied at a time. For example, if an element is first focused and then hovered, the hover state layer will ...
1
vote
1answer
117 views

Is UI Chips for all single choice input a good idea?

I'm working on an iPhone/iPad app that uses a lot of forms and we are currently using several different components for input where the user have to do a single choice from a defined list of items. For ...
0
votes
1answer
89 views

Android App Design for a Data Table File Select

I am a new to designing for Android apps. I have been looking over material design components and trying to follow a few patterns. This is pertaining to a section of the mobile application which ...
0
votes
2answers
84 views

How would you define visual continuity in material design?

I was looking over material.io and it often mentions continuity within different topics. Though it doesn't give a single definition. How would you define visual continuity in a few lines?
4
votes
2answers
129 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 ...
1
vote
2answers
65 views

Extended FAB would get in the way of a listview

Right now my Flutter app has two pages: the app's home (image 1) and the leaderboard (image 2). The home page has a BottomAppBar with two buttons plus an extended FAB docked to it (the one with mock ...
1
vote
2answers
207 views

Android FAB with progress indicator

Is a good idea to put (infinite) progress indicator into a Floating Action Button (FAB)? I am dealing with a situation where there is a bottom navigation panel with inset FAB and there is no toolbar ...
0
votes
1answer
52 views

Where are these material buttons defined? [closed]

The following is said here in relation to Material Design buttons: 1. Text button (low emphasis) - Text buttons are typically used for less important actions. 2. Outlined Button (medium ...
1
vote
3answers
129 views

Back to top button with other floating action button

I have a long page with a detail of an event. In the right corner of this page is present a floating action button to enter editing mode. Where I can place a back to top button?
0
votes
1answer
47 views

Bottom Navigation with only 2 destinations

According to the Material Design Guidelines the usage for Bottom Navigation recommends three to five destinations (https://material.io/components/bottom-navigation/#usage) Was just wondering what ...
3
votes
1answer
127 views

Mobile card carousel navigation

Background We are currently using a standard mobile pattern to showcase 3 cards where users can compare different plans. Problem The cards are very text heavy and contain alot of content below the ...
2
votes
1answer
62 views

Material design edge-to-edge chips field error display

The material design spec for text and chip fields says that errors should be displayed below the field In the case of edge-to-edge chips fields (like those at the top of the chips page: https://...
0
votes
1answer
203 views

Card with horizontal scrollable content

I wonder if placing horizontal content inside a Card (like an image list in the Reply material spp) is breaking material design guidance?
1
vote
3answers
207 views

Material Design card with a lot of information

This is very much related to Material Design List with a lot of information The previous question and answer does not cover how to layout the information in a material card. Let's assume I have some ...
4
votes
4answers
356 views

How should a disabled-but-giving-feedback button look like?

Similarly to the author of this question, I was thinking about replacing a disabled button by one giving a feedback why the action is not allowed. That's not subject of my question as in my case, I'm ...
4
votes
7answers
2k views

Is a bottom sheet dialog “unfitting” for navigation?

Edit: I posted an answer below containing various attempts based on the ideas provided here. I am developing an application with a somewhat special main screen, from where the app is divided into two ...
1
vote
1answer
56 views

Appbar Search Context

I have an PWA in development that is focused around the material design ideologies and style, although this question is likely still applicable to other design schemes as well. Essentially I have a ...
0
votes
2answers
381 views

Material Design for web: Buttons with labels or icon buttons?

I've been reading about the "text vs icon" debate for some while already. Most of the articles and questions here are dated back to 2010-2016, so I wonder if they still apply for material Design for ...
0
votes
1answer
128 views

508 compliance question

For those with knowledge on Material Design and 508 compliance..are there any issues with using an "outlined" text field vs the filled" text field? We're thinking of using the "outlined" text fields, ...
0
votes
1answer
123 views

A doubt whether Soft UI meets the accessibility criteria [closed]

I have made two prototype versions of a button type element one is a mixture of material design and soft UI and other is pure soft UI can you help me in deciding which one is better in terms of ...
1
vote
1answer
566 views

Should all grid contents be divisible by 8 or an even number?

When designing a grid system it is advisable to use an 8pt grid. This is stated by Material Design and many others. Does this mean that columns and gutters all must be divisible by 8 or a smaller even ...
0
votes
1answer
227 views

Where is the most conventional/best place to add actions for items inside datatable?

Like actions I would say "delete", "edit", "details" and many more maybe. How display that on a desktop application. Some possibilites that I already used could be : Add to the top before the header ...
1
vote
1answer
50 views

How can we change Call to actions on a card without making user learning process harder and longer?

We are designing a new dashboard for our platform which user request on some service and our providers submit offers for user requests. when a request submitted by a user, He should wait until service ...
0
votes
2answers
527 views

Why not snackbar icons in Material?

I was reading through the Material Design guidelines and noticed this restriction on the snackbar usage: "Don’t place icons in snackbars." Why not? What would be the rationale for that?
1
vote
1answer
256 views

How to display a skeleton component for a list component

I am using the skeleton component as part of Material UI's API: https://material-ui.com/components/skeleton/ It makes sense that you should make the skeleton look like the component that will be ...
1
vote
1answer
666 views

bottom sheet dialog or complete screen for new task

I am developing something similar to a task app. For new task screens there are two approaches to go with Bottom sheet dialog like in Google Tasks, Todoist Complete screen with items laid out ...
1
vote
2answers
836 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? ...
0
votes
1answer
1k views

Is there a Material 'Chips' UI component in the IOS HIG?

If so, is there a resource somewhere I can grab it or some documentation on it? Basically just want to have a list of tags that a user can delete. If the HIG has something i'd prefer to use that.
0
votes
1answer
272 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 ...
1
vote
2answers
1k views

How is the material design Snackbar accessible if someone is using a screen reader?

I have an accessibility question about the snackbar pattern used in Material Design. Snackbars - Material Design The behaviour of a snackbar is to appear for a temporary period of time then ...
1
vote
2answers
113 views

How to indicate selectability in an information-focused list

My first question, let me know if I should edit! I'm working on a list-map hybrid, where each item on the list can be selected, to show up on the map (like Yelp). The list needs to give a fair ...
0
votes
2answers
486 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 ...
2
votes
2answers
832 views

How to display text with label in Material UI? [closed]

In a single page I would like to display Text Fields for user input and texts, which are static, but have labels. I tried to use the same text fields but with disabled attributes: However, I am not ...
1
vote
2answers
219 views

Button placement in the footer of card layout?

Should the button be placed on the bottom left corner or bottom right corner in the card layout? I was referring to Google's material design I found out that action buttons are placed on the bottom ...
1
vote
1answer
607 views

what should happen to a prominent app bar with long and two-lined title, when scrolling

In material design, if the title is long we should put it in a prominent Appbar like this: The title should not be truncated or shrunk. so when the content scrolls up, should I transform the ...
2
votes
2answers
937 views

Example Lateral, Forward & Reverse Navigation in Desktop Applications

I'm researching Material Design in how it's related to layer based navigation. Navigational directions Based on your app’s information architecture, a user can move in one of three navigational ...

1
2 3 4 5
8