23 votes

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

I've been wondering that myself. First, "500" doesn't seem to indicate how many colors there are, but the weird numbering system they use. 500 is the base, 400 is lighter than the base, 600 is darker....
user avatar
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 ...
user avatar
  • 39.9k
20 votes
Accepted

What is the difference between "flat style" and "material design"?

Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and ...
user avatar
  • 12.8k
17 votes

What is an "alpha value of black"?

The alpha value is used in the RGBA colour space to indicate the transparency of a colour. The alpha value goes from 0 to 1 where 0 is completely transparent and 1 not transparent at all. This ...
user avatar
  • 8,098
17 votes
Accepted

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

There are some different ways you can handle this. Don't place vital content below the button This is the most obvious approach, and probably the most general. Whenever possible, structure your ...
user avatar
  • 12.8k
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. ...
user avatar
  • 12.8k
13 votes

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

I'm going to leave this here because it is new information on the topic. https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4 Published on May 28, 2015 A little rusty on your color theory? Material ...
user avatar
  • 790
10 votes

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

May be a bit simplistic and not the most elegant solution, but: add an empty 'dummy' entry to the end of the list, so the user can scroll further than the last entry.
user avatar
  • 24.3k
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 ...
user avatar
7 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: ...
user avatar
  • 39.9k
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 ...
user avatar
  • 26.1k
6 votes

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

Perhaps you've already found this resource, but Google has put together an incredibly handy guide to help developers and designers sync up with the new Material vibe. The whole guide can be found ...
user avatar
  • 71
5 votes
Accepted

What is an "alpha value of black"?

The full context is as follows: Use alpha values for grey text, icons, and dividers To convey a hierarchy of information, you can use different shades for text. The standard alpha value for ...
user avatar
  • 4,335
5 votes

Does Google provide material design resources?

Google doesn't provide ready made PSDs, no, but they provide better things. Check out Google's Material Design Specifications which is packed with all sorts of guidelines of how to design in a ...
user avatar
  • 12.8k
5 votes
Accepted

When should a Material Design ripple be dark, and when should it be light?

In all the simple button examples (including other examples in the animation section), the ripple effect compliments the colour of the text or icon - which should follow readability (use a colour ...
user avatar
5 votes

What is the difference between "flat style" and "material design"?

Flat design = a generic term that refers to the trendy modern UI aesthetic of blocky flat icons and blocks of color. Metro Design = Microsoft's new UI design (now called Microsoft design language) ...
user avatar
  • 49.8k
5 votes
Accepted

Why buttons without icons in Material Design

According to the developer pages (http://developer.android.com/design/building-blocks/buttons.html): Both an icon and text is most appropriate when they complement each other: each carrying its own ...
user avatar
  • 1,503
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 ...
user avatar
5 votes
Accepted

Material design / Elevation in photoshop

I can't find anything regarding Android shadows on the Google design docs now, but there was apparently once upon a time a list of the values for Adobe Illustrator, but they seem to have taken it down....
user avatar
  • 39.9k
5 votes
Accepted

Image for Google Card- How can I tell it is correctly 16:9 ratio?

You need to ensure that the image width relates to the height as the number 16 relates to the number 9. 16 divided by 9 is 1.77777778. That means that your image width must be 1.77777778 times larger ...
user avatar
  • 111
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 ...
user avatar
  • 33.3k
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 ...
user avatar
  • 3,154
5 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/
user avatar
  • 90
4 votes
Accepted

What density is the 512x512 icon for an Android app?

If I remember correctly (no guarantees there), Google doesn't just use scaled versions of their icons, but responsive icons. Meaning they optimize their icons for each size. So in your case, you ...
user avatar
  • 4,262
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="...
user avatar
4 votes
Accepted

How to generate tint, shade and shadow colors in illustrator?

There are two easy ways: Use the Color Guide palette. Open the Color Guide options to control the number of steps and variation between steps. There is a script called "Add Highlight And Shadow ...
user avatar
  • 7,136
4 votes
Accepted

shadow in material design

Make a new layer Drop it beneath the folder picture Draw the shadow shape with the polygon lasso Fill it with the shadow colour Select a grunge effect eraser brush Erase a section of the shadow Done ...
user avatar
  • 301
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
user avatar
  • 1,191
4 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), (...
user avatar
  • 24.3k
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 ...
user avatar
  • 346

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