refine basketball icons

[natslaughter]

purpose of this ticket is to take the existing basketball icons, which incorporate the human figure, and create new basketball icons with no human.

existing icons

possible new icon concept

basketball or basket with ball

[natslaughter]

going with a basketball hoop with ball for the symbol concept

next steps

• icon design refinement
• test icon on maps
• geometric cleaning & svg file preparation

[rasagy]

I took @natslaughter’s design forward, and mainly focused on aligning the net to the grid and getting the negative space to work well for the 11px icon:

Specifically, I found the negative space in 11px to stand out too much, so I’ve made the ring thicker to add more gray (final one on top, 1px negative space iteration below).

@natslaughter Would love your thoughts on whether this works well or the one with a 1px negative space.

[rasagy]

After comparing how the negative space in 11px icon looks on retina and non-retina screens, we decided to go ahead with the gray option above — the lower option with 1px negative space divides the ball into two distinct triangles and breaks the overall shape.

[natslaughter]

@rasagy I would try and see if you can make the outer ball seams a lighter color value

[rasagy]

I built further on the 1px negative space and added 1px thick outer ball seams as well:

(Top has max negative space, middle has thick central seam, bottom is with more gray/less negative space)

[natslaughter]

@rasagy my vote is for option 2 or 3. I find the 1 pixel seams in option 1 to segregate the ball too much, and it starts to look like a singular object. Option 2's 1 pixel central seam seems a bit awkward in its relationship to the 0.5 pixel peripheral seams. Option 3's horizontal rim feature is slightly more than 1 pixel in width - bleeding into the pixel row above - and I wonder if restricting this element to 1 pixel might add clarity to this option. I wonder if the development that has happened to the icon since we last discussed this horizontal negative space would improve the icon or not.

[rasagy]

Thanks Nat! I agree — I am thinking of taking the mix of option 2 & 3 based on your suggestions.

Just reflecting back on our conversations, I feel the two parts of the icon are the ball and the basket, so we should make sure these are separated by a 1px negative space and therefore are clearly distinguishable as the two parts.

For the seams, I’m realizing that having the gray/sub pixel negative space is much better than the thicker 1px negative space that I tried above, specifically because the curved seams even at 1px aren’t distinct but the vertical, center seam at 1px becomes a clear white line, separating the ball into two quarter circles.

So intentionally using a sub-pixel vertical seam will keep the ball as a single entity, and 1px space from the basket will make the two parts distinct:

Top two icons at 1x: