![]() ![]() Adding this intrinsic padding supports the optical/perceptive weighting without additional fussing in dev later down the line. It is best to put your icons in a fixed size container so that they’re all identical dimensions when exported. Circles and curved objects take up less visual space than squares. The optical grid helps us figure out where the center of mass of the icon is, as well as how large it is perceived by the human eye. Great! Now that you've mastered the pixel grid you’ll want to learn about the optical grid. I like to build myself a grid before I start. You can easily see in Figma the difference between something being 'on-pixel' and off. It helps you stay consistent with your placement, and overall will make your icons look better. Spacing things evenly is much easier when you're using a grid. You want to build things on the pixel grid, not just because it will render more nicely, but because it makes your life easier. But, you can build other shapes on the pixel grid (and if you're using Figma, you already are automatically). When building icons, you always want to align objects to the pixel grid, especially straight lines. The pixel grid is the fundamental grid that uses the smallest increment: a pixel. Anything with 3 or more colors is an illustration, not an icon. For marketing icons, you might want to use 2 colors if it is a crucial part of your brand, but I personally believe icons should be a single color. Anything more than that and your components are going to become too complex and difficult for other designers to leverage. Colorįor product icons, use 1 color: black. It also gives you a sense of the object before you truly minimize it. I find it much easier to remove details and simplify, rather than adding as I go up. When building the same icon at different sizes, I like to start with the largest size and go down. You'll want to add detail for those larger sizes. You might have your base product icon at 24px, but marketing icons at 80px because of the vast difference in use. When you need glyph complexity, that's when you want to start adding sizes. You don't want to build the same icon over and over at a multitude of sizes. So, if you have a grid based on 8s, you'd want to build at 16, 24, or 32.Ĭhoose a common size to build all your icons to, and then allow your engineers to scale to other sizes that might be needed by other designers. From there, your base icon size should relate directly to that. First, you'll need to make sure that you know how your grid is built (multiple of 8 or 10?). Basic elements of an icon SizeĬonsistency is key with icons, and all your icons should be the same size when you build them. Whether you are a design systems expert, an illustrator, or a product designer, this guide will help you learn how to build icons, how to align them with your brand, and how to implement them into your design system. I wrote this guide to help you become one of those people. There aren't many people who love to design icons, and even fewer who are great at it. They’re the foundational building block of illustrated content, but they are also highly technical. Icons are a fundamental part of a good design system and are very helpful for marketing materials. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a crucial part of any design system or product experience.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |