Skip to main content
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.7k
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.7k
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
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.6k
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

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

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

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
  • 87.2k
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.6k
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

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.7k
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
  • 8,045
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
  • 8,045
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.6k
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

Can I use material design for both Android and iOS?

Apple has the iOS Human Interface Guidelines, which set some limitations on design but they shouldn't prevent you from implementing material design in your app. The only real limitations you have to ...
Cai's user avatar
  • 40.7k
2 votes

How to make rounded rectangle in circle

In my way doing, i took series of lines(alternate green & blue) with stroke around 6pt on top of a Rectangle box(red). Next selected Blue lines (changed to expand both lines)... While both ...
anilvardhan's user avatar
2 votes
Accepted

How to create a material design style depth score in Photoshop?

Draw a rectangle, filled with grey, over the area to be dark. Set the blend mode to Multiply. Add a slight Outer Glow layer style to the rectangle to create the white highlight at the edge. Then ...
Scott's user avatar
  • 210k

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