23 votes
Accepted

What is meant by 'designing an icon at 100% scale'?

Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at. If you are designing a 24px × 24px icon, you set up your artboard in ...
Cai's user avatar
  • 40.6k
17 votes
Accepted

What is the meaning of the prefix "A" in material design color guidelines?

As mentioned on the page you linked, the A in front of the number stands for "Accent". The numbers are lighter the lower they are and darker the higher they are, just like non-accent colors. ...
Zach Saucier's user avatar
  • 13.4k
8 votes

How can I download the material icon font?

The Material Icons Guide has everything you need. All the Material icons are available on the GitHub page. You can download the icon font, along with the needed CSS file for use in webpages here: ...
Cai's user avatar
  • 40.6k
7 votes
Accepted

Icons for cell padding adjustments

I think you can keep your two icons and they will look much cleaner once you remove the arrows. You could also try using a color other than green, a lot of people (myself included) find green hard to ...
pixelfairy's user avatar
7 votes

Material Design: Should the status bar look different from the action bar?

I don't think this is referenced directly, but if you look at at the color section there's this paragraph that mentions the status bar vs toolbar: To create contrast between elements, you can use ...
Yisela's user avatar
  • 26.4k
7 votes
Accepted

Alternative to Google's "Material Design?"

There are like a million of them... They're called Design Systems, and probably this link will help find the one you love: https://designsystemsrepo.com/
katsele's user avatar
  • 110
5 votes
Accepted

How to choose the right color shades/tints for branding?

This is exactly what the HSB colour model is for. HSB splits the colour into the values Hue (H), or colour type; Saturation (S), or (inverse) amount of white in the colour; and Brightness (B), (...
Vincent's user avatar
  • 25.2k
5 votes

What exactly are Google's '500' color swatches?

Here is the answer to your question.. check out this video The 500s are Primary Colors perfect describing the dominant theme in your product and are great for toolbars. 700s are used for ...
Pratik Shah's user avatar
5 votes
Accepted

What font is used on this material design arabic RTL?

I believe this is plain old Adobe Arabic. It is included with Adobe products, and is the default in Illustrator when Arabic characters are pasted or typed into a document. Looks like you can also ...
Vicki's user avatar
  • 3,184
5 votes
Accepted

How to make material design imagery with GIMP

You do not need "flashy" tools. You can do flat design even in Microsoft Paint, which is the simplest program ever. You can simply use the Path tool to make a shape, convert it to a selection and ...
Rafael's user avatar
  • 37.2k
4 votes

How can I download the material icon font?

NOT all the Material icons are available on GitHub. Only the Regular Material Icon font is available. The Outlined, Round, Sharp, and Two-Tone fonts are NOT available. These fonts can be referenced, ...
Heath's user avatar
  • 41
4 votes

Where are the light sources located in Material design?

It is actually 45 degrees altitude and 90 degrees angle. You can see it in the video @Cagrigk posted. (this is the link with the exact timing). These images posted in Material design: The ...
Alvaro's user avatar
  • 346
4 votes
Accepted

Need Material design color pallette,

Corel Draw can import Adobe Color Files (.aco), so you should be able to use these colour palettes from Google Design Resources: https://www.google.com/design/spec/resources/color-palettes.html
Jackson Hyde's user avatar
  • 1,201
4 votes

How do I keep my floating action button from blocking other components?

This works for me. Add bottom padding to RecyclerView <android.support.v7.widget.RecyclerView android:id="@+id/my_recycler_view" android:layout_width="match_parent" android:layout_height="...
Abhishek Agrawal's user avatar
4 votes

Secondary color is a light version of the primary color

It's often a hard job to sync to a client's taste so what I will give you is a tool that will help you make things a loooooot easier: The color tool allows you to set a primary color (in your case #...
Alin's user avatar
  • 4,945
4 votes

How do you choose 'light' and 'dark' shades in Google Material Design

Use whichever works better in your application. This may sound like a non-answer, but it's really how design works. There is no "right" answer besides the one that is more along the lines of the way ...
Zach Saucier's user avatar
  • 13.4k
4 votes
Accepted

How to effectively create material elevation in mainly Inkscape or Illustrator?

If you are asking for an alternative to the drop shadow filter, you could use a black filled rectangle, moved under the button using Lower Selection to Bottom, and move it to the desired position . ...
Billy Kerr's user avatar
  • 86.3k
4 votes
Accepted

How can we download Google Material Design Color Palettes?

Download link: https://drive.google.com/drive/folders/1x_Ir5oTDzBIN8yBsHtPe_mTXks3oIUOO?usp=sharing Update: added MaterialUI.ase file for illustrator. You can open swatches in Illustrator: Swatches >...
Justas Dambrauskas's user avatar
4 votes

Material Design: Actions on items in a table view

Google's material design guidelines are just that -- guidelines. Google doesn't even follow them to a t. One example of Google breaking the guideline that you mention is in Google Play (specifically ...
Zach Saucier's user avatar
  • 13.4k
4 votes

Alternative to Google's "Material Design?"

Is this not obvious? If Google has one... the other players should: https://developer.apple.com/design/human-interface-guidelines/ https://docs.microsoft.com/en-us/windows/uwp/design/ Some others are ...
Rafael's user avatar
  • 37.2k
3 votes

Why buttons without icons in Material Design

I might be late to this. But in Material Design website it does have a sample of it. In most cases I think text only or icon only are sufficient to describe what it does. I came across a scenario ...
Ryan Teh's user avatar
  • 131
3 votes

What color should be given to the ripple feedback?

Some useful logic I got from Android SDK packages android.support.v4.graphics and android.support.v7.graphics. The ripple color is white or black with related transparency and animation. Color (white/...
Constantin's user avatar
3 votes

How are Google Material Design Color Palettes Generated?

There's no published algorithm, but it's latent in the code in the Material Design page Color. More specifically it's in the JS file bundle.js. The code is wildly obfuscated, likely the result of ...
Alan Cabrera's user avatar
3 votes
Accepted

Secondary color is a light version of the primary color

The Material Design guidelines are exactly that; guidelines. You don't have to follow what they say to the letter. They're meant to help you with the design process and create a consistent visual ...
Cai's user avatar
  • 40.6k
3 votes
Accepted

Why does Android's material button's 'onPressed' state actually rising up instead of getting pushed down?

According to the Google Material design guide they behave like this because they were designed to be an object resting on top of another, thus when you "press" it the button actually raises from its ...
Luciano's user avatar
  • 7,925
3 votes

What do the keylines on product icon design guidelines mean exactly?

That spec is IMHO extremely clear about the intent and usage of the keylines: Icon artwork can populate the entire asset space, or you can design and position artwork elements such as logos onto ...
GerardFalla's user avatar
  • 9,626
3 votes

What is a good icon to represent a toll?

From the Merriam-Webster dictionary, a toll could be either a tax or fee paid for some liberty or privilege (as of passing over a highway or bridge) compensation for services rendered: such as a) a ...
Luciano's user avatar
  • 7,925
3 votes
Accepted

How does material design handles 3D object?

As said in the comments. Material design https://m3.material.io/ is a system to create User Interfaces, not Graphic Identity. It has some guidelines that can be considered 3 dimensional, but only for ...
Rafael's user avatar
  • 37.2k
2 votes

How do I keep my floating action button from blocking other components?

Bouncing off the "Relocate the button" idea in the accepted answer, the Scrolling techniques part of material design guidelines has one possible implementation of that idea. Namely, the ...
arekolek's user avatar
  • 121
2 votes

Usage of Google’s Material Design Paper examples?

Basically, Material Design is a metaphor inspired by paper and ink (real paper). Thats why they talk about paper as the fundamental, not a specific part as cards does. Google took paper to heart as ...
yaxpac's user avatar
  • 572

Only top scored, non community-wiki answers of a minimum length are eligible