23

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 Illustrator or document in Photoshop or whatever else you are using to 24px × 24px. As quoted from the Material Design guide, this is for pixel accuracy. If you work at ...


21

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. That's pretty similar to how font-weights are numbered (info) so maybe that has something to do with it. I've found that some of the numbers less than 500 ...


20

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 animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be ...


16

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 allows to do "alpha compositing" which, in lay terms, is the process of placing an image on top of a background and to combine the colours to create the illusion of ...


14

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 design to make sure that nothing vital is below the action button like other buttons, main content, etc. You can add extra space by using padding or a blank entry,...


11

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 design makes color easy. Find out more about color and material design at www.google.com/design. ETA: The primary colors, (the 500) are colors that Google ...


11

As mentioned on the page you linked, the A in front of the number stands for "Accent". The numbers are light the lower they are and darker the higher they are, just like non-accent colors. Usage guidelines of these accent colors are as follows: The accent should be used for the floating action button and interactive elements, such as: Text fields ...


8

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.


7

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 look at. There is also the possibility of a treatment that doesn't involve two icons, only one that serves as an affordance for a menu that lets users toggle. ...


6

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 lighter or darker tones of your primary color. The contrast between lighter and darker tones helps show division between surfaces, such as between the status ...


5

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 text on a white background is 87% (#000000). Secondary text, which is lower in the visual hierarchy, should have an alpha value of 54% (#000000). Text hints ...


5

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 material way, from the style and layout to usability and animations. If you're looking for help on the coding/implementation side, you can check out Material Design ...


5

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 here - http://www.google.com/design/spec/material-design/introduction.html# Specifically, this page makes all their favorite colors available for download - http:...


5

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 contrast checker if in doubt). In general, this is common sense: if you have a 'dark' button requiring light text, adding light ink will be visible and consistent; ...


5

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) for Windows 8 that uses the flat design visual aesthetic. Material Design = Google new UI design for Android that uses the flat design visual aesthetic. (Note ...


5

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 bit of information, but together making a larger whole. This may be the contributing factor in the design guide where no such example is present


5

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 than the height. E.g. an image with the width of 800px should be 450px high.


5

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 fill it with a color or gradient. Here's a tutorial. But in reality using GIMP is the wrong approach. You should use a vector based program, such as Inkscape. ...


5

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 purchase it here: https://www.fontspring.com/fonts/adobe/adobe-arabic


4

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 Status bars and 300s are used for Secondary informations So basically those numbers represent pre-defined shades and tints of Primary colors for specific ...


4

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 could adapt the top edge for each size before exporting. For example, you could make the top edge 1px in the smallest sizes, 4px in medium sizes, and 6px in the ...


4

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 Swatches" that does exactly that. You'd need to adjust the values manually in the script, though.


4

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. There are a lot of resources that list 5 different shadow levels. The Google design docs link to the Polymer docs that say: Note: The material design ...


4

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 You can use a thing called a layer mask instead of the eraser on step 5-6, that will enable you to go back if you're not happy. To apply a layer mask: Select ...


4

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


4

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), (inverse) amount of black. Hue is expressed in degrees, with 0° being red, and 180° being cyan. Saturation and Brightness are expressed in precentages. 0% ...


4

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 to use on the web here: https://github.com/google/material-design-icons/tree/master/iconfont You can also use the icon font through Google Fonts using this code: <link href="https://...


4

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 #031740) and then go through a predefined list of secondary colors and show you a fast preview of what it will look like. You simply need to set up a meeting with ...


4

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 you want your application to look and feel. Google's material design guidelines are just that - guidelines. They obviously used two different methods to ...


4

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 . The you can apply a blur to it, and reduce the opacity. To finish, you could group the button and the shadow.


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