cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.
https://cfpb.github.io/design-manual/
Creative Commons Zero v1.0 Universal
98 stars 71 forks source link

Create icon standard hypothesis #547

Closed jimmynotjim closed 6 years ago

jimmynotjim commented 6 years ago

Analyze the current set of icons for:

designlanguage commented 6 years ago

@Dnpizarro - I'm currently exploring icon sizing and placement, specifically related to Avenir and the icon circle.

Since they all have to fit in the same size circle, I don't think there should be much variation in the size of the icons. This diagram proposes how vertical and horizontal they should get.

My theory is that icons should be centered within the x-height, not sitting on the baseline. We need to test out this theory and see if it looks good, but it's a starting point.

Shape Image
Circle icon screen shot 2017-12-22 at 1 40 11 pm
Max horizontal screen shot 2017-12-22 at 1 40 29 pm
Horizontal icon screen shot 2017-12-22 at 1 40 41 pm
Square icon screen shot 2017-12-22 at 1 41 06 pm
Vertical icon screen shot 2017-12-22 at 1 40 53 pm
Max vertical screen shot 2017-12-22 at 1 40 20 pm
designlanguage commented 6 years ago

For the icons outside of circle, it may be more important for them to sit on the baseline than correspond to the positioning they would have in the circle. If that's the case, the grid could be something like this:

screen shot 2018-01-10 at 2 48 00 pm

jimmynotjim commented 6 years ago

We came up with an initial standard and need to revisit canvas size, icons size, and line weights. Those will all go into a new hypothesis.