![]() The tints of the dark colors and shades of the light colors are usually useless and drab.These tints and shades should be used only when you need a little more contrast. For a wider palette, create tints to white and shades to black using the same method as step 2.Most of the icon should be comprised of these colors. Create three steps in between each base color.In most cases you will have to adjust the light color to be brighter and the dark color to be less saturated, but of course you should use your best judgement. Create three colors from the same hue.Monochrome paletteĬreate a monochrome palette using the following steps: Avoid very tight transitions that would feel like reflections or dimension. The important thing is that it’s a smooth transition. Start and end points can be adjusted accordingly. The default angle for gradients is 120 degrees. Try to limit your gradient ramps to only one or two steps in both the horizontal and vertical directions. Gradients should be subtle for the most part. Color gradients, overlays of varying opacity, and tints of color should be kept to a minimum. To avoid complexity when scaling an icon across a range of sizes, treatments to colors should be minimized. Use shape and metaphor with color to communicate. Pick colors carefully and avoid relying on color alone to convey meaning. It is recommended to only add additional literal detail to the most prominent layer of an icon. When adding detail, care should be taken to maintain legibility at small sizes. Use as few shapes with as few corners as possible to distinguish your product while still feeling at home on Windows. Use the grid to design a silhouette that’s distinctive, yet legible at small sizes. SilhouetteĪ visually balanced silhouette allows good icon scalability and also avoids extremes of thick and thin shapes. When rounded corners are applied to an interior curve, use a 1px radius instead. When rounded corners are applied to an exterior curve, use a 2px radius at 48x48. The corners of these shapes should match the rounded corners in the icon grid. Shapes used in your app's product icons should be built to align with the icon grid. One way we communicate this trait is by using soft or rounded corners. Aligning your icon's distinctive features to the grid will balance well with the other icons around it.Īpproachability is a Microsoft personality principle. Microsoft aligns its icons to a 48x48 grid initially to ensure a balanced icon that takes advantage of the space available, while still maintaining a distinctive shape and silhouette. Design guidance: Shape The grid and rounded corners The app’s name will appear in association with the icon throughout the operating system. Letters and words on your icon should be avoided and only used when it’s essential. Icons should not include typography as part of the design. Only use an abstract metaphor in instances where it's impossible to find a literal, self-evident metaphor to represent the core functionality of a product. A good test for an effective icon is when users can tell what it represents without a label. Literal metaphors are best for articulating the purpose and promise in a clear way. If a single metaphor can be used, that’s even better. To enhance communication clarity, use no more than two metaphors in a single icon. The key concept should be your icon's focal point don't dilute your icon by adding decorative elements that don’t support the metaphor. When creating your icon, use clear metaphors and leverage concepts that are largely understood - such as an envelope for mail or magnifying glass for search. Your icon should illustrate the concept of your app in a singular element using simple forms. Design guidance: MetaphorĪn icon should be a metaphor for its app: a visual representation of the value proposition, functions, and features of the product. Follow these guidelines to create a great app icon for your app that feels at home on Windows. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |