![]() ![]() One last comment about icon accessibility: Naming your icons and supplementing them with screen reader-only content can make an enormous difference to people navigating your app or website using screen readers. Looking at the icons in conjunction with fonts and buttons will tell you whether they’re balanced.Īn icon set adjusted for high contrast on the Windows OS. However, since the UI, icons, and fonts should form an aesthetically pleasing unit, and support focus on the content, the best thing to do is place them in the UI and experiment. ![]() Icon size usually informs stroke weight but there is some flexibility based on the look of the icon: A heavier and bolder icon style will usually require a 2px stroke weight in contrast, a minimalistic and reduced icon will benefit from a thinner stroke weight of 1px or 1.5px. The appearance of a vector stroke is reliant on the shape’s visible outline, which can be altered by weight (the thickness of the line), by setting the border stroke to centered, inside, or outside the path (to experiment with the optical size), or by defining how a stroke will look when it ends (cap options). There are simple and subtle ways to influence the appearance, aesthetic, and character of an icon. The good news is that there are plenty of vector exercises on the web to practice creating perfect curves with as few anchor points as possible.Ī range of corner radiuses and how they affect an icon’s appearance. Reduce and remove unused and redundant vector points wherever possible while preserving the original shape. Vector shapes can become cluttered with unnecessary points that make scaling and cutouts through pathfinder operations a pain.Ĭlean forms are what you want: They scale well, have fewer rounding errors after export (too many anchor points can interfere with decimal precision), and look more professional when handing them off to another designer. Anchor pointsĪnchor points are the connectors of a vector shape, and the goal is to have as few as possible. Push for clarity and use metaphors that are easy to recognize. Always remember that searching for the correct icon in a UI can lead to frustration. If you find yourself staring at it for too long, it's a sign that others could have difficulty deciphering its meaning. You can test how a shape translates by scaling it down and quickly looking away and back again. This means choosing shapes that are simple and familiar shapes that are complex will be difficult to scan and understand. Visual balance is as important as numerical precision when creating icon shapes resize circles so the proportions appear correct when placed next to or below rectangles.Ī quick reminder about shapes: Aim for shapes that can be recognized in seconds at a small size. How keyshapes (circle, square, triangle, rectangle) work in combination to form basic proportions on a grid.ĭue to visual rather than numerical balance, circles will always appear more prominent in dimension than rectangles. ![]() Remember that the smaller the icon the harder it will be to add badges or convey complex meaning. When choosing a size, start with a square and view it at 100% to get an accurate picture of how reduced your artwork will need to be to fit inside it. So, icons are easier to align horizontally and vertically think about them in sizes that can be divided by four and centered on a rectangular canvas. Standard icon sizes for dense layouts are 16 x 16px, 18 x 18px, 20 x 20px, or 24 x 24px. If you don’t manage these details first, it will be difficult to create balanced icon sets. Design considerationsīefore starting any vector work consider icon size, alignment, and style. Here, in Part 2, I’ll discuss where to focus your attention as that design process begins. In Part 1, I focused on the prep work-from posture and software to form, beauty, and supplemental meaning-necessary to create the foundation for icon design work to begin. Over the years I’ve designed thousands of icons that have guided millions of people through interfaces during that time, I’ve followed a consistent set of guidelines and practices that have been helpful in my work. As designers, we know that when icons are clearly designed with understandable symbols (and coupled with a supportive UI) It can mean the difference between a product being usable or inscrutable. ![]() Icons are dynamic elements that adapt to user needs, aid storytelling in tooltips and tutorials, and scale to become part of a brand’s voice. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |