search

cagov / design-system

State of California Design System
MIT License
79 stars 25 forks source link

Create icons for design system component library #246

Closed adam-little closed 2 years ago

adam-little commented 2 years ago

Create icons for component library.

Icons should visually represent the component but be abstract enough that they don’t become out of date as the design of the component evolves.

See FigJam for inspiration: https://www.figma.com/file/iTRca8RQolhmMrOwB62guJ/Component-Illustrations?node-id=2%3A386

Here is list of components based on the component audit matrix:

kkoryaka commented 2 years ago

Added component illustrations to the figma: https://www.figma.com/file/iTRca8RQolhmMrOwB62guJ/Component-Illustrations?node-id=0%3A1

adam-little commented 2 years ago

Thanks, Konstantin!

I like that these are consistent and have enough abstraction that they won't become outdated or be mistaken for the actual design.

I left a handful of comments on the Figjam board, including:

I'll defer to @kmbrlygl for feedback about the overall style.

kmbrlygl commented 2 years ago

Ditto to what Adam said, these look great Konstantin! I made some comments as well.

There are graphic elements (smaller arrows, plus signs, etc.) that are getting hard to see on a small scale. I think we should increase the contrast by playing around with the shades. Maybe even introduce color. I took some time to explore a little and added some samples in the Figjam here. Let me know what y'all think!

Angsv commented 2 years ago

I'm still getting used to figma/slack so apologies.

I really liked the components you designed as well, Konstantin.

I agree with Kimberly about increasing the contrast. The usage of a specific monochrome color can be cool too instead of greyscale.

I was also thinking about making some a bit more graphical and maybe adding a three dimensional look to some of the components (see examples below for Alert and Button Grid )

@.***

What you guys think?

-Angelina

From: Kimberly Gail L. @.> Sent: Tuesday, January 4, 2022 12:01 PM To: cagov/design-system @.> Cc: Gerasimov, @. @.>; Assign @.***> Subject: Re: [cagov/design-system] Create icons for design system component library (Issue #246)

CAUTION: External Email. Do not click links or attachments unless you recognize the sender and know the content is safe.

Ditto to what Adam said, these look great Konstantin! I made some comments as well.

There are graphic elements (smaller arrows, plus signs, etc.) that are getting hard to see on a small scale. I think we should increase the contrast by playing around with the shades. Maybe even introduce color. I took some time to explore a little and added some samples in the Figjam herehttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.figma.com%2Ffile%2FiTRca8RQolhmMrOwB62guJ%2FComponent-Illustrations%3Fnode-id%3D259%253A1290&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232647939545%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=TMClXRAlSzcr0q7bmvtziC159EoYIdm3%2B9EAJ2W%2FeMY%3D&reserved=0. Let me know what y'all think!

- Reply to this email directly, view it on GitHubhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcagov%2Fdesign-system%2Fissues%2F246%23issuecomment-1005128964&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=R2v5RGg435%2BDjacPkuAdy3eVLgY1m3r1oDC%2BqUqqZCc%3D&reserved=0, or unsubscribehttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAW353SHSM6RKFN447JFLDZTUUNGXZANCNFSM5JXPJAVQ&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=Xr8q9ZhHXX0qk6d6CPX9%2Fs2IHmQKsAWHc3t6dOvzPrE%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=3VwvvEkjXF7BKORFc622sm9WofLapYbPa6XapuhaE7Q%3D&reserved=0 or Androidhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=xrEhoscQ5nxjUfFqk31G55YubaL9JAsT4rvGpoqYbZQ%3D&reserved=0. You are receiving this because you were assigned.Message ID: @.**@.>>

Angsv commented 2 years ago

Hi everyone,

Kimberly let me know the images didn't show up. I hope this link works for you all (let me know):

Figma Linkhttps://www.figma.com/file/0X2a9BBV0Vv9YIR57TklMB/Component-option?node-id=0%3A1

From: Gerasimov, @. Sent: Tuesday, January 4, 2022 12:15 PM To: cagov/design-system @.>; cagov/design-system @.> Cc: Assign @.> Subject: RE: [cagov/design-system] Create icons for design system component library (Issue #246)

I'm still getting used to figma/slack so apologies.

I really liked the components you designed as well, Konstantin.

I agree with Kimberly about increasing the contrast. The usage of a specific monochrome color can be cool too instead of greyscale.

I was also thinking about making some a bit more graphical and maybe adding a three dimensional look to some of the components (see examples below for Alert and Button Grid )

@.***

What you guys think?

-Angelina

From: Kimberly Gail L. @.**@.>> Sent: Tuesday, January 4, 2022 12:01 PM To: cagov/design-system @.**@.>> Cc: Gerasimov, @. @*.**@*.>>; Assign @*.**@*.***>> Subject: Re: [cagov/design-system] Create icons for design system component library (Issue #246)

CAUTION: External Email. Do not click links or attachments unless you recognize the sender and know the content is safe.

Ditto to what Adam said, these look great Konstantin! I made some comments as well.

There are graphic elements (smaller arrows, plus signs, etc.) that are getting hard to see on a small scale. I think we should increase the contrast by playing around with the shades. Maybe even introduce color. I took some time to explore a little and added some samples in the Figjam herehttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.figma.com%2Ffile%2FiTRca8RQolhmMrOwB62guJ%2FComponent-Illustrations%3Fnode-id%3D259%253A1290&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232647939545%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=TMClXRAlSzcr0q7bmvtziC159EoYIdm3%2B9EAJ2W%2FeMY%3D&reserved=0. Let me know what y'all think!

- Reply to this email directly, view it on GitHubhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fcagov%2Fdesign-system%2Fissues%2F246%23issuecomment-1005128964&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=R2v5RGg435%2BDjacPkuAdy3eVLgY1m3r1oDC%2BqUqqZCc%3D&reserved=0, or unsubscribehttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAW353SHSM6RKFN447JFLDZTUUNGXZANCNFSM5JXPJAVQ&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=Xr8q9ZhHXX0qk6d6CPX9%2Fs2IHmQKsAWHc3t6dOvzPrE%3D&reserved=0. Triage notifications on the go with GitHub Mobile for iOShttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fapps.apple.com%2Fapp%2Fapple-store%2Fid1477376905%3Fct%3Dnotification-email%26mt%3D8%26pt%3D524675&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=3VwvvEkjXF7BKORFc622sm9WofLapYbPa6XapuhaE7Q%3D&reserved=0 or Androidhttps://gcc02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.github.android%26referrer%3Dutm_campaign%253Dnotification-email%2526utm_medium%253Demail%2526utm_source%253Dgithub&data=04%7C01%7Cangelina.gerasimov%40state.ca.gov%7C97f24b354a00432814e008d9cfbcee51%7C52b26be47f5d4e1cbaed8cf75b7570d5%7C0%7C0%7C637769232648095769%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=xrEhoscQ5nxjUfFqk31G55YubaL9JAsT4rvGpoqYbZQ%3D&reserved=0. You are receiving this because you were assigned.Message ID: @.**@.>>

kmbrlygl commented 2 years ago

To-do:

kmbrlygl commented 2 years ago

Jon is/will be working on implementing this

xjensen commented 2 years ago

I think we can close this, thanks to #403.

wrendo commented 2 years ago

Need to incorporate