No Go Zone

Feisdra

Hey all,

It's been years since I read Scott Lewis' article in Smashing Magazine, and to this day I still seem to have trouble with the 'No Go Zone' (NGZ).

Back then I tried it and asked for feedback since I felt uneasy about not having it reach the edge of the grid after seeing another example. My goal was a 16x16 icon, but was told that it was actually 12x12. (Wrote 14x14 by mistake)

I get the benefit that the NGZ adds, like the following example Scott used. I recently practiced making some centered-stroke outline icons and while having them touch the edge of the artboard the actual stroke ended outside of it.

Fast-forward 3 years and I still ask myself if my icons' size is determined by the squared-ratio amount of pixels they use. In this icon I wanted to do a 48x48 but constantly think I should've refer to it as 40x40. I also see icon designers like Stefan Dziallas not reach the edge of the grid to visually balance their icons, and I have trouble telling what size I should call it.

Questions:

Should my icons touch the edges of my artboard or not?
Am I confusing grid size with artboard size?

Thanks!

References:
Image 1: https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
Image 3: https://www.instagram.com/p/BZ5x6mlhB6d/?utm_source=ig_web_copy_link
Image 4: https://www.youtube.com/watch?v=IUh6TZsYino&list=PLXpmPt225hwslAml5wjon3Qb26uuQXFRm
Image 5: https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
Image 7: https://iconwerk.com/kayak.html

iconify

Hi Feisdra. Scott Lewis here. You pose a couple of good questions. The answers will probably vary depending on whom you ask but I'll do my best to give you a useful answer.

For the record, I was taking (un)poetic license with the name "no go zone" but it's really just a margin.

The example you show of the fire extinguisher I would call 12 x 12 but it really depends on how the SVG is set up and how it renders in the UI. If the SVG is set up to include the margin as part of the rendering then it is 16 x 16. If the icon is displayed in the UI without the margin then it will be 12 x 12. I believe this is controlled byt the preserveAspectRatio attribute in SVG.

Off the top of my head I am not 100% certain but I think you can control how it displays by setting the ViewBox (I will need to confirm that this is the correct attribute) to 16 x 16. The live area or what is considered the "content area" is actually 9 pixels wide by 12 pixels high and sized at 100% that is the number of pixels that will be activated in the UI. But you can build the SVG so that the margin is also included in the display. Think of it as a bounding box around the black area of the icon. When the UI renders it does the bounding box touch the edges of the black area or does it include the white space, i.e., margin/NGZ?

If you do any CSS coding you can think of this as being the same as the CSS box-sizing attribute and whether it is set to content-box or border-box. Your fire extinguisher is 9 x 12 when set to content-box and 16 x 16 when set to border-box.

I hope that helps with that question but feel free to ask follow-ups and I'll do my best to answer.

Your next question, should you make your icons touch the edge, I think "no", but again, it depends and may not be the same answer even within the same set. Some icons like round ones, diagonals, or icons with and extreme height-to-width ratio may need to touch the edges to appear visually the same size as the other icons.

Dutch Icon told me once that "the aesthetic value of each icon is more important that the grid" so make each icon the best it can be and be as true as you can to the grid as your second priority. If you look at the different design sets like Google Material Design icons (and you should), they do not make every icon the same size. They try to maintain stylistic integrity and consistency. I think this functions very much like designing a font. Some letters are actually a bit taller than the x-height to appear visually the same size based on the amount of white space in the counters. For instance, the letter "O" typically extends slightly beyond the top and bottom lines of the other letters. The same is true with letters like "S" also because our eyes, or rather our brains, put a lot of emphasis on the white area around the letters. If you make the O and S the exact same pixel height as rectangulare letters they will appear slightly shorter when they are not. So you have to make them slightly taller.

The same is true with icons. A square or rectangulare icon with a lot of black coverage will appear heavier and taller than a round or triangulare icon even if they are the same height. So you have to adjust the relative heights.

A great place to start is to try using the grids that Apple and Google provide for their icon design guidelines. It took me several years to realize that my icons looked "off" because I wasn't following a good guide. I learned how to keep my sets consistent by using the Google grid. If you are designing for Android and iOS then you will probably have to create multiple versions of your set because they use different grid sizes. Last time I checked, which was admittedly about 2 years ago, Apple was using a 60-pixel grid and Google was using a 24-pixel grid for the Material Design system.

Your wine bottle and hot dog are great examples! These pose two of the more challenging use cases when designing a consistent set. There is a lot of white space around the live area and the icons have a heigher aspect ratio (height-to-width). In this case you have a 3:1 ratio because your height is 3 times the width. There are a couple of ways you can handle this.

Some designers will exaggerate the ratio and make the wine bottle and hot dog fatter. You can try that. It seems counter intuitive but it can look great. I'll see if I can find an example to share in a subesquent reply. You can also make the neck of the wine bottle shorter.

This is another area that took me a long time to realize : The goal is not to depict the object exactly as it is, but just accurately enough so that the typical user will recognize it. You can get a lot of stylistic mileage out of playing with proportions.

As for the centered strokes ending up outside of the bounding box, that is okay. What is probably more important is making sure the storkes align to the pixel grid in your design app. The app can render the center of the line on the grid lines or it can render the center line to the center of the pixels. This is usually called "pixel-perfect". The rule of thumb I follow is that if my strokes are an even thickness (2, 4, etc) I align the center line of the stroke to the grid lines. If the stroke width is odd (1, 3, etc) I align to the center of the pixel. This makes sure the edges of the strokes always align to the pixel grid lines and give a nice crisp edge. With Retina displays this is less of an issue but IMO it always looks better to maintain pixel-perfection.

Fast-forward 3 years and I still ask myself if my icons' size is determined by the squared-ratio amount of pixels they use.

I answered this earlier less directly but the answer is "If your SVG ViewBox includes the margin area, then the size is the squared ratio. If the ViewBox is constrained to the edges of the black area of the icon, then that is the size". I guess more simply put, the size is whatever the SVG files ViewBox size is.

Questions:

Should my icons touch the edges of my artboard or not?

I don't think they should. As much as possible you should follow the rules in the original "Better Icon Design in Six Easy Steps" article. They are based on the Google Material Design Icons approach, which was based on the practices of designers like Stefan. It is more work and more subjective but I think the end result is better. You will need to take care with your SVG files to make sure the margin area is included in the display size, though. I am happy to help you figure out how to set up the SVG files to do this.

Am I confusing grid size with artboard size?

Perhaps but I think your confusion is warranted. Both approaches are valid. Hopefully the explanations above clarify this for you, though.

Do you think a follow-up article is warranted?

Feisdra

Thank you iconify and Bogdan-from-Iconfinder for taking the time to respond.

iconify Do you think a follow-up article is warranted?

Probably not. At my level, I needed to read everything three times to get it. 😅 But soon after I realized it's all well explained. I'll definitely pay attention to these topics:
• Including margins in SVG
• Google Material Design icons
• Using proportions as a stylistic element
• Centering strokes to grid line/pixel

it really depends on how the SVG is set up and how it renders in the UI.

If I understood correctly, I think this answers everything. Let's see... At first I thought that an icon's size was strictly referring to the size of the live area, or content box in CSS, thus adding a margin meant I was reducing that live area, and ultimately the icon's size. That's why I saw my Swimming Pool icon as a 40x40 even with the 4px margin. But in reality an icon size refers to the limits where the bounding box sits. That means that an icon set with different sizes in live area, but with a consistent bounding box sitting at 32x32 can actually be called a 32-pixel icon set. 🤯

But there has to be a limit to this, right? 🤔 If the live area is 16x16 and the bounding box 32x32 (8px margin), is it still considered a 32-pixel icon? I could imagine that an 8px margin (if there was such a need) could drastically affect a design. Is there a suggested margin size or indicator to help determine it? Stroke size, spacing?

Bogdan-from-Iconfinder while if they had the ngz the curve line would prob. be fine.

I read the contributor's handbook entirely and can't recall seeing something like this. Thanks! When working with editable line weight, do icons downloaded in Iconfinder have a limit to the weight that can be added, so that it's considered in padding, or is this a detail that should be added to the icon's usage guide?

Bogdan-from-Iconfinder

Scott pretty much explained it up there, here are my 2 cents to the dollar 🙂
I would always use the ngz, it's safer, but you could go without it for sure. There are designers who don't use it. I often stumble in review on no ngz icons, but when there are outline icons in play and round corners + editable line weight, the round corners on the edge get slightly clipped on the artboard, so open line curves and edges, a bit of an iffy situation, while if they had the ngz the curve line would prob. be fine. This happens on other types of icons also, with the ngz it is easyer to spot problems like things peaking out of the artboard. So for me it will always be with padding/safety zone 🙂
On the very small icon sizes like 14px and 16px, i used a reduced 1px zone.

Monica-from-Iconfinder

Feisdra I read the contributor's handbook entirely and can't recall seeing something like this. Thanks! When working with editable line weight, do icons downloaded in Iconfinder have a limit to the weight that can be added, so that it's considered in padding, or is this a detail that should be added to the icon's usage guide?

We hear you, Feisdra! We surely need to add a section about this in the Handbook since it is missing right now! 📓

Thank you for creating such an interesting thread here! 🙌

iconify

Feisdra I apologize for the slow reply. I got sidetracked.

You keep asking me these really tough questions and making me think! :-) Technically-speaking there is no limit to the amount of margin as far as the SVG file is concerned. If the bounding box is 32 x 32 it will be rendered as such regardless if the live area is 2 x 2. But we humans can see the 16 x 16 icon and see that it has a lot of margin and the "icon" portion is only 16 x 16. It's confusing but there is a distinction what we see and what is rendered on the screen. As designers we have to take both into consideration. Unfortunately the problme here is language. We don't really have the right words to be able to describe this duality. But I think you have the concept now even if it is difficult to split the hairs necessary to talk about the mathematical and visual size. Well, now that I mention those terms that pretty much is the language. There is the mathematical size which is the size of the bounding box which includes the live area and margins. The visual size will be the outline of the colored area (I say colored because this idea could apply to glyphs or full color icons). The visual size may not be consistent. If the icon is predominantly round it will be slightly smaller numerically in order to maintain the same visual size.

With regards to icons downloaded with editable strokes, there are not technical limitations. I would say "use common sense". Whatever looks reasonable in your design.

Feisdra

iconify

iconify You keep asking me these really tough questions and making me think! :-)

Sorry! 😅 I thought I had it and then got lost in my own thinking. I guess I just want to make sure to really get it and don't miss anything. And no worries for slow replies. The least I want is to make you feel pressured to answer.

iconify There is the mathematical size which is the size of the bounding box which includes the live area and margins. The visual size will be the outline of the colored area...

Distinguishing the mathematical size from the visual size helps.

Just finished a practice set and was eagered to share it in this discussion to apply the theory and my understanding into a tangible example. In the images you'll see the grid with their "key lines" and each icon in the grid. Also a look at them outside the grid and in their actual size to judge their visual size with one another. (You'll need to open the image in another tab to see it correctly.)

They're made in a 32-pixel grid (mathematical size) with a 2px stroke. Margin size is 2px. The visual size is:

26x26
32x32
30x28
26x28
26x28

In conclusion, after learning so much here, I think it's safe to call this a 32-pixel icon set, even though only the sun is visually a 32-pixel icon. (Fingers crossed hoping I'm correct)

iconify The visual size may not be consistent. If the icon is predominantly round it will be slightly smaller numerically in order to maintain the same visual size.

It's out of the scope of this thread to be discussed now, but was just wondering after sharing my icons here since you were talking how shape affects visual size, if it's the same for color considering its appearance on different backgrounds. Maybe in a particular scenario that same round circle could not need being smaller if its color relative to its context affects it's perceived size. Or just its perceived weight? Interchangeable terms? We could continue this topic some other time.

iconify

Feisdra You definitely have it. These would all be considered 32 x 32. I think the best analogy for icons is typography. Very few of the letter forms within a given font will be exactly the specified size - say 16 pt. But the designer has adhered to the underlying grid as closely as they can while making the letter forms uniform in perceived/visual size.

Keep in mind that the purpose of the grid is to be a guide, not an absolute. If you made every icon exactly 32 x 32 they would not look like the same size. This is 100% because of human perception so you have to use the grid as a gude to give you a starting point, but you are really designing for perception, not the grid.

I think the way to think about it is that the 32 x 32 grid is the target visual size. You want all of the icons to "appear" to be 32 x 32. Within that, some will need to be slightly smaller and some slightly larger but their perceived size should be as close to 32 x 32 as possible. If you are creating a glyph (solid) set, the only shape that will be exactly 32 x 32 will be a perfect square. Any other shape can only approximate that size visually but not mathematically. For instance, it is impossible to make a triange 32 x 32.

I think the question about color is totally on-topic. We are talking about creating visually unified icons, not strictly about grid size. TBH I have never thought about the color iss with regards to visual size but it can absolutely have an impact. I don't have an answer to your question, though. I am trying to think of someone who might be able to answer your question. Hemmo de Jong (Dutch Icon) comes to mind. This might be a good topic of exploration for a blog post by Iconfinder (@Martin-from-Iconfinder).

The color impact on perceived size probably depends on the style. Flat and glyph icons would probably be the styles where that would be a concern. Filled-line icons that use a black outline around areas of color probably would not be impacted by color issues.

iconify

Feisdra I came across a GIF from a blog post a while back that demonstrated this whole concept perfectly but I've been unable to find it. The GIF demonstrated the visual size by blurring the shapes. This is a great way to determine if the icons are visually the same size. You can do the same thing with the "squint" test. Just sqint your eyes and look at the icons together. If you take your icons from above and apply enough gaussian blur so the edges disappear and all you have are fuzzy shapes you'll be able to see more clearly if the sizes are the same visually.

Feisdra

iconify The color impact on perceived size probably depends on the style. Flat and glyph icons would probably be the styles where that would be a concern.

I see. Looking up color theory, this issue seems to be about Contrast of extension. "It refers to the contrast between the proportions of one area of color to another. Contrast of extension involves the relative areas of two or more color patches; it is the contrast between much and little, or great and small."

I have seen icons being called "badge" style (basically flat or glyphs inside a background shape). Maybe this shape can be used to help manage this. I suppose that having this shape editable would best serve the user, being able to change the color to best suit its context. But if this would be true, It could also be true that the avoidance of these color issues ultimately will fall entirely on the user's color theory knowledge.

I'm not sure how would that work in a marketplace context like Iconfinder, but in client work, would it be good practice to provide a limited amount of color suggestions that the background shape of "badge icons" could be changed to (similar to what style guides do with logos)? I did a quick search while writing this and noticed that some add a white outline to separate the flat icon from the b/g shape.
Waze Icons

In some way I feel that with the amount of experience I have in the topic, that I'm getting ahead of myself asking all of this questions. 😅 When it comes to color and icon design, what I've read so far has dealt with:
• Contrast and theme (Iconfinder Knowledgebase)
• reaching cohesiveness
• staying on-brand
• limiting the amount used (particularly in product icons)

Since what I know about color is from articles on logo design, I was curious to know what role does color's technical aspects has in icon design and if its impact is noticeable enough to be worth considering.

iconify Filled-line icons that use a black outline around areas of color probably would not be impacted by color issues.

Good to know! I'm always trying to find a reason beyond aesthetics to choose a style from. I'll keep this in mind!

iconify If you take your icons from above and apply enough gaussian blur so the edges disappear and all you have are fuzzy shapes you'll be able to see more clearly if the sizes are the same visually.

I'll try to incorporate that in my process. I've read that printing icons is a good way to evaluate them, but blurring seems more practical for icons used for digital contexts.

iconify I came across a GIF from a blog post a while back that demonstrated this whole concept perfectly but I've been unable to find it.

Could it be this one? I read this a while back and saved it for reference. I got to admit that It makes more sense to me after this discussion. It's called: Hopefully, the Ultimate Guide to an Interface Icon Set

Can't thank you enough for taking the time to share your knowledge! Hoping to put it to good use.