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

Update group 2 icons - Web Icons #574

Closed jimmynotjim closed 6 years ago

jimmynotjim commented 6 years ago

Update the second group of icons and export for print and web. Ensure the file names match the names used in the Design Manual, the paths are grouped into a top-level group, and everything is converted to outlines.

jimmynotjim commented 6 years ago

We're also going to split this group in half because it's so large and somewhat likely to have unexpected issues with the standard.

@designlanguage @Dnpizarro when you get to this one, could one of you post here with a list of what icons each of you are updating?

designlanguage commented 6 years ago

Here is a large chunk of group 2:

Name Symbol In circle notes
External-link screen shot 2018-01-23 at 1 40 11 pm screen shot 2018-01-23 at 1 40 16 pm Because of the first few icons in this group, i think we need to add a thinner line-weight for simple icons (100pt in addition to 130). Open to other ways to solve this.
Link screen shot 2018-01-23 at 1 39 49 pm screen shot 2018-01-23 at 1 40 05 pm Unusual shape breaks the grid to maintain visual balance with other icons.
Share screen shot 2018-01-23 at 1 40 23 pm screen shot 2018-01-23 at 1 40 28 pm Unusual shape breaks the grid to maintain visual balance with other icons.
Bookmark screen shot 2018-01-23 at 1 40 34 pm screen shot 2018-01-23 at 1 40 38 pm
Unbookmark screen shot 2018-01-23 at 1 40 43 pm screen shot 2018-01-23 at 1 40 48 pm
Favorite screen shot 2018-01-23 at 1 40 58 pm screen shot 2018-01-23 at 1 41 02 pm Breaks the grid for visual balance.
Unfavorite screen shot 2018-01-23 at 1 41 09 pm screen shot 2018-01-23 at 1 41 14 pm "
Information screen shot 2018-01-23 at 1 41 22 pm screen shot 2018-01-23 at 1 41 27 pm Used an upside-down exclamation point to maintain style.
Audio-max screen shot 2018-01-23 at 1 41 39 pm screen shot 2018-01-23 at 1 41 46 pm
Audio-medium screen shot 2018-01-23 at 1 41 51 pm screen shot 2018-01-23 at 1 41 56 pm
Audio-low screen shot 2018-01-23 at 1 42 02 pm screen shot 2018-01-23 at 1 42 07 pm
Audio-mute screen shot 2018-01-23 at 1 42 13 pm screen shot 2018-01-23 at 1 42 20 pm Added an "x" to indicate better indicate mute.
Double-quote screen shot 2018-01-23 at 1 42 37 pm screen shot 2018-01-23 at 1 42 41 pm Tried to keep this style more in line with our simple icons.
Not specified in design manual screen shot 2018-01-23 at 1 42 46 pm screen shot 2018-01-23 at 1 42 52 pm
Clock screen shot 2018-01-23 at 1 43 03 pm screen shot 2018-01-23 at 1 43 09 pm Hands in the open symbol feel a little thin with our rules, but maybe it's okay.
Lock screen shot 2018-01-23 at 1 43 17 pm screen shot 2018-01-23 at 1 43 22 pm
Unlock screen shot 2018-01-23 at 1 43 29 pm screen shot 2018-01-23 at 1 43 34 pm
Search screen shot 2018-01-23 at 1 44 17 pm screen shot 2018-01-23 at 1 44 25 pm
Menu screen shot 2018-01-23 at 1 45 40 pm screen shot 2018-01-23 at 1 45 46 pm
Wifi screen shot 2018-01-23 at 2 24 06 pm screen shot 2018-01-23 at 2 24 12 pm Uses the additional 100pt weight. Breaks the grid because of it's unusual shape.
Chart screen shot 2018-01-23 at 2 47 39 pm screen shot 2018-01-23 at 2 47 47 pm
Bullhorn screen shot 2018-01-23 at 3 04 16 pm screen shot 2018-01-23 at 3 04 22 pm
Microphone screen shot 2018-01-23 at 3 14 04 pm screen shot 2018-01-23 at 3 14 10 pm
Dnpizarro commented 6 years ago

Below is the rest of the group 2 icons:

Name Symbol In circle notes
User artboard 2 copy 6 artboard 2 copy 14
Parent artboard 2 copy 7 artboard 2 copy 15
Dialogue artboard 2 copy 8 artboard 2 copy 16
Speech-bubble artboard 2 copy 9 artboard 2 copy 17
Date artboard 2 copy 10 artboard 2 copy 18
Settings artboard 2 copy 11 artboard 2 copy 19
Lightbulb artboard 2 copy 12 artboard 2 copy 20 I worked on the shape of the bulb several times and I wanted to get some feedback on it.
designlanguage commented 6 years ago

@Dnpizarro - Thanks for posting these. Can you add your file to the drive? A few comments:

Dnpizarro commented 6 years ago

Below are the notes from our working session earlier today:

External link: looks like arrow goes too far. Potentially reconsider rethinking this icon. Share-icon: Consider adding an additional share symbol. Information: Lets test at 16pt, the “i” might be too thin. Audio mute: bring “x” in closer to the speaker. Clock: the hands might be too small, reconsider position of the clock hands. Parent: Consider less torso, document the rounded edges for the people. Speech bubble: Make consistent triangle shape with the complaint bubble. Dialogue: Try both as solid shapes with an outline. Date: consider a redesign as a calendar, remove the numbers. Settings: the spaces between the gears can be wider, make the teeth smaller.

designlanguage commented 6 years ago

@Dnpizarro - FYI, the "Play" and "Newspaper" icons are still missing from this group.

Scotchester commented 6 years ago

Most of these are solid now. A few minor issues:

designlanguage commented 6 years ago

These icons should probably live in web:

Name Symbol In circle notes
Not shown in design manual screen shot 2018-01-29 at 1 52 47 pm screen shot 2018-01-29 at 1 52 53 pm

Maybe this one too:

Name Symbol In circle notes
Not shown in design manual screen shot 2018-01-29 at 1 57 20 pm screen shot 2018-01-29 at 1 57 27 pm
jimmynotjim commented 6 years ago

I'm kicking this one back to the backlog. @Dnpizarro after you finish Group 4 can you circle back to this and make the recommended updates? Thanks.

designlanguage commented 6 years ago

This icon should also probably live in the web category:

Name Symbol In circle notes
Not specified in the design manual screen shot 2018-01-30 at 3 11 07 pm screen shot 2018-01-30 at 3 11 12 pm
Dnpizarro commented 6 years ago

@jimmynotjim @Scotchester below are the missing icons for this set: https://drive.google.com/drive/u/1/folders/1PU0jc7hphx_5ZfVnL9MXqpL_eAsaclkh

screen shot 2018-01-30 at 5 12 11 pm
Dnpizarro commented 6 years ago

@jimmynotjim @Scotchester the updated broadcast icon is below: https://drive.google.com/drive/u/0/folders/1PU0jc7hphx_5ZfVnL9MXqpL_eAsaclkh