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. When he isn't working on a computer or DIY project, he is most likely to be found camping, backpacking, or canoeing.Follow these guidelines to create a great app icon for your app that feels at home on Windows. He has designed crossovers for homemade speakers all the way from the basic design to the PCB. ![]() He regularly repairs and repurposes old computers and hardware for whatever new project is at hand. He enjoys DIY projects, especially if they involve technology. He also uses Proxmox to self-host a variety of services, including a Jellyfin Media Server, an Airsonic music server, a handful of game servers, NextCloud, and two Windows virtual machines. He has been running video game servers from home for more than 10 years using Windows, Ubuntu, or Raspberry Pi OS. ![]() Nick's love of tinkering with computers extends beyond work. In college, Nick made extensive use of Fortran while pursuing a physics degree. Before How-To Geek, he used Python and C++ as a freelance programmer. He has been using computers for 20 years - tinkering with everything from the UI to the Windows registry to device firmware. Nick Lewis is a staff writer for How-To Geek.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |