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
1 answer
58 views

Actions as icons on card

I'm looking for a way to properly display actions on my application's card without cluttering the interface too much, while still correctly emphasizing them. My application allows teachers of a school ...
user avatar
0 votes
1 answer
40 views

Material Design Best Practice: Should a dialog "Accept" button only get enabled upon changes to a mutable inner state

As far as UX goes, particularly when working within the material design specifications for a Windows app, if an accept/cancel dialog is presented to the user that is intended to mutate some "...
user avatar
  • 101
2 votes
2 answers
108 views

How to avoid the use of nested cards

I am developing a school web app and trying to follow material design guidelines. There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list ...
user avatar
1 vote
2 answers
36 views

Signify that some input controls map to private information

I'm developing an app meant to be used by a school; user personas are teachers and students. Teachers can add exercises to the app database through an editor. Some of the fields of an exercise are ...
user avatar
0 votes
0 answers
30 views

Navigation drawer, menu icon changed to Up arrow

I have found a desktop app with a dismissible navigation drawer and secondary levels of hierarchy that require using an up arrow for navigation. As you know he burger menu should be displayed on all ...
user avatar
  • 31
1 vote
1 answer
111 views

Form with multiple rows of selectable options displayed on material UI cards, need help with adjusting the design

I have a form that has around 3 rows with selectable cards (only about 3 to 4 options each row). We do not have a UI/UX designer and I want to adjust the UI design but do not have a good idea about ...
user avatar
3 votes
2 answers
91 views

How to show that a form has been dirtied (edited) using a Material design?

I have a vertical list of expansion panels. Each panel has a form under it. I would like to know the best style for showing that the form has been dirtied (edited) on the expansion panel title. The ...
user avatar
  • 133
0 votes
2 answers
127 views

Which is the best approach for key value pair representation in mobile material ui

I am having limitted data for a page as given below Key Value First name John Last name Doe Phone +9099999999 City Chicago I want to represent the above data in an Android view. I tried to avoid ...
user avatar
  • 101
0 votes
1 answer
173 views

Which option is better for read only mode?

I have an Angular application where I have used mat-form fields (Material components) to build the forms. Here I am having a requirement to implement a read only mode. I hope disabling all mat form ...
user avatar
  • 23
1 vote
1 answer
129 views

What are the specs for a top bar in a web application (1440px) according to Material Design?

I'm new to UX design. As a fun project, I'm designing a calendar web application while referring to Material Design. I can't seem to find anything about the top bar specs for web apps on the Material ...
user avatar
3 votes
4 answers
694 views

Make it clear that a card is clickable

I am currently working on a Mobile Application, mainly using Material Design, with some client-specific adaptation. On our project, we display a list of cards, each card having a varying number of ...
user avatar
  • 33
0 votes
1 answer
96 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 ...
user avatar
0 votes
1 answer
72 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 ...
user avatar
1 vote
1 answer
506 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 ...
user avatar
  • 21
1 vote
1 answer
72 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 ...
user avatar
3 votes
2 answers
109 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 ...
user avatar
4 votes
4 answers
819 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 ...
user avatar
  • 45
0 votes
0 answers
90 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 ...
user avatar
  • 1
2 votes
3 answers
193 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, ...
user avatar
  • 33
2 votes
3 answers
4k 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?
user avatar
1 vote
2 answers
181 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 ...
user avatar
  • 369
0 votes
1 answer
230 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 ...
user avatar
0 votes
1 answer
527 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 ...
user avatar
1 vote
1 answer
386 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 ...
user avatar
  • 21
0 votes
1 answer
129 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 ...
user avatar
  • 53
0 votes
2 answers
113 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?
user avatar
  • 1
4 votes
2 answers
279 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 ...
user avatar
1 vote
2 answers
98 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 ...
user avatar
1 vote
2 answers
382 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 ...
user avatar
  • 111
0 votes
1 answer
63 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 ...
user avatar
1 vote
3 answers
293 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?
user avatar
  • 121
0 votes
1 answer
93 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 ...
user avatar
  • 111
3 votes
1 answer
244 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 ...
user avatar
  • 31
2 votes
1 answer
78 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://...
user avatar
0 votes
1 answer
369 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?
user avatar
  • 101
1 vote
3 answers
376 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 ...
user avatar
4 votes
4 answers
486 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 ...
user avatar
4 votes
7 answers
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 ...
user avatar
  • 6,716
1 vote
1 answer
62 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 ...
user avatar
  • 13
0 votes
2 answers
621 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 ...
user avatar
  • 103
1 vote
1 answer
189 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 "...
user avatar
0 votes
1 answer
127 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 ...
user avatar
1 vote
1 answer
1k 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 ...
user avatar
0 votes
1 answer
558 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 ...
user avatar
1 vote
1 answer
59 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 ...
user avatar
0 votes
2 answers
827 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?
user avatar
  • 216
1 vote
1 answer
585 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 ...
user avatar
  • 123
2 votes
1 answer
1k 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 ...
user avatar
  • 687
1 vote
2 answers
2k 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? ...
user avatar
  • 687
0 votes
1 answer
2k 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.
user avatar
  • 1

1
2 3 4 5
8