search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.7k stars 1.79k forks source link

Contribution: icon (See Box Link) #4135

Closed afields1 closed 4 years ago

afields1 commented 4 years ago

1. IBM Skills Gateway and Digital Learning Platform Applications

2. See Box Link

3. Please briefly describe what the icon is supposed to represent and the use case(s) its being used for.

Below is the list of icons and a statement of that they represent.

  1. ICS content package icon.svg - IBM Collaboration Solutions content package
  2. Wiki icon.svg - a website that allows collaborative editing of its content
  3. Hands on icon.svg - hands on activity
  4. Face to face icon.svg - Face to face meeting
  5. Workshop icon.svg - a group of people working in a workshop
  6. Subcourse icon.svg - a course making up part of a larger course
  7. Database icon.svg - data held in a computer
  8. Powerpoint presentation icon.svg - a collection of individual slides
  9. External tool icon.svg - enables participants to interact with learning resources and activities on other web sites.
  10. Label icon.svg - to identify or describe something
  11. Questionaire icon.svg - written questions with a choice of answers
  12. Open meetings icon.svg - a meeting open to all participants
  13. Course icon - no person.svg - a set of classes or a plan of study
  14. Social icon.svg - an informal social gathering
  15. Certificate icon.svg - a document containing a certified statement
  16. Scorm package icon.svg - an XML-file that contains all the course information
  17. Choice icon.svg - an act of selecting or making a decision
  18. Assignment icon.svg - a task or piece of work assigned to someone as part of a job or course of study.
  19. Experiential icon.svg - pertaining to or derived from experience
  20. Book icon.svg - a written or printed work consisting of pages
  21. Simulation.svg - an approximate imitation of the operation of a process or system
  22. Quiz icon.svg - a test of knowledge
  23. Forum icon.svg - meeting in which people can talk about a problem or matter
  24. Glossary icon.svg - an alphabetical list of terms or words
  25. Snooze icon.svg - a short, light sleep
  26. Learning journey range icon.svg - a step up high learning
  27. Page icon.svg - divide (a piece of software or data) into sections

Use case: These icons are needed for consistency across all the learning applications such as follows: Digital Learning Platfrom: https://www.onlinedigitallearning.com/my/ and Skills Gateway: https://www.ibm.com/services/learning/ites.wss/zz-en?pageType=search#(cc%3A''%2Cfilters%3A()%2CnumberOfResults%3A'20'%2CpageNumber%3A1%2CpubEntIdentifier%3A''%2Cquery%3A''%2Csorting%3Arelevance%2F%2Fasc%2Ctype%3Aall%2CviewMode%3A0)

4. Box Link

Add in a box link (or other cloud) link to your completed Icon Contribution Template sketch file. Please make sure the permissions are set so anyone can view the icon. https://ibm.ent.box.com/s/82jaggc8rmrfhayp0cp89exywedqu08v

5. Screen Shot

Please add the following screen shots to this issue:

  1. Close-up screen shot of the icon with the pixel grid turned on Please see above sketch file
  2. Screen shot of the icon in context with your use case. Please see above Use Case

SVG files: https://ibm.ent.box.com/s/qeqqs2elfxy20l2fd64vfc9zhcxb5k0b

afields1 commented 4 years ago

@shixiedesign I am the architect for Skills Gateway and we are upgrading our application to Corbin and react technologies, but would like to use some of the icons we already have. Please review and let me know any additional actions.

https://www.ibm.com/services/learning/ites.wss/zz-en?pageType=search#(cc%3A''%2Cfilters%3A()%2CnumberOfResults%3A'20'%2CpageNumber%3A1%2CpubEntIdentifier%3A''%2Cquery%3A''%2Csorting%3Arelevance%2F%2Fasc%2Ctype%3Aall%2CviewMode%3A0)

joshblack commented 4 years ago

cc @chrisconnors-ibm

chrisconnors-ibm commented 4 years ago

refer to @conradennis for further consultation/action

afields1 commented 4 years ago

@conradennis Please provide me any status. Do you have any questions for me?

chrisconnors-ibm commented 4 years ago

Looking at the first couple, they need some work to comply with the guidance here: https://www.carbondesignsystem.com/guidelines/icons/contribute/#production-ready You may want to grab the illustrator master file here: https://github.com/carbon-design-system/carbon/tree/master/packages/icons/master as a starting point and to see all of them together.

for example: Assignment icon.svg is blue, should be #000000 with no additional styling. I'd recommend using edit.svg as your starting point.

book icon is also blue, and is a stroked vector rather than an outline. there is already a notebook.svg too.

Choice has issues with the alignment, the color, and the path vs outline issue.

Please review the production guidelines, and when you've adjusted them, work with @conradennis and/or brand team on their execution and the creative for each.

conradennis commented 4 years ago

Hi @afields1 we use illustrator to draw/export all of our icons so you should resubmit the icons redrawn in illustrator. That being said I have some notes:

Everything @chrisconnors-ibm mentioned above is correct and you should follow that direction. When submitting icons they should be #000000 and properly outlined, though looking at these it may benefit to send them as strokes because they need a lot of work.

We already have a good portion of these icons or some variation of these icons in the master/repo/library so I'd advise you to look through the master (see the link in the post above) or search through the library and grab any that are already there: https://www.carbondesignsystem.com/guidelines/icons/library

Additionally, your icon artwork is not to the standard of the IDL design guidance which can be found here: https://www.ibm.com/design/language/elements/icons/design

We, as a rule, do not use perspective or varying stroke widths. A lot of your artwork incorporates elements that are too subtle or close together to visually work at the scale for UI icons. Please make sure all your strokes are aligned to the grid, you use angles in increments of 15 degrees, and do not use curved stroke caps unless it's necessary for communicating the metaphor.

I review all icon artwork, export finals for production, own the master ai. file, and update the repo so slack me @ ctennis to review your icon submissions once you follow this direction and redraw the icons.

ElleLewis commented 4 years ago

IBM Skills Gateway and Digital Learning Platform Applications

Below is the list of icons and a statement of what they represent.

Assignment icon.svg - a task or piece of work assigned to someone as part of a job or course of study. Choice icon.svg - an act of selecting or making a decision Glossary icon.svg - an alphabetical list of terms or words Simulation.svg - an immersion into the operation of a process or system Label icon.svg - to identify or describe something Static document icon.svg - a document used in course ware for teaching or review Modality icon.svg - representing how a course or a learning experience will be delivered PPT document icon.svg - specifically, a powerpoint presentation Package.svg - a grouping of courses tied together Snooze.svg - pause course Snooze alt.svg - pause course alternative Skill level.svg - indicates beginner, medium or advanced level of a course Learning journey.svg - a group of curated courses to achieve a specific expertise Subscription.svg - a purchased license to a set of courseware Reminder.svg - a reminder message Open source.svg - code that is derived from outside of IBM to be consumed by whomever needs it. Enterprise content management.svg - a system to manage content for a specific company External link.svg - a link that takes the user out of a closed system Integrations and governance.svg - oversight of combined systems Credential.svg - an milestone earned by developing an expertise in a skill set Certificate icon.svg - a document containing a certified statement that expresses an earned credential Certification.svg - a specific kind of credential earned by following a prescribed set of IBM skill development
Open badge.svg - a specific kind of credential earned by developing a single skill

Use case: These icons are needed for consistency across all the learning applications such as follows: Digital Learning Platform: https://www.onlinedigitallearning.com/my/ and Skills Gateway: https://www.ibm.com/services/learning/ites.wss/zz-en?pageType=search#(cc%3A''%2Cfilters%3A()%2CnumberOfResults%3A'20'%2CpageNumber%3A1%2CpubEntIdentifier%3A''%2Cquery%3A''%2Csorting%3Arelevance%2F%2Fasc%2Ctype%3Aall%2CviewMode%3A0)

Box Link where you will find the AI file, the Sketch file, the Screen shots, and the SVG's https://ibm.box.com/s/xaa9l33mfeiec9f0auhcv6athq22nhxl

Screen Shots Please add the following screen shots to this issue: Close-up screen shot of the icon with the pixel grid turned on - Please see above sketch file Screen shot of the icon in context with your use case - Please see above Use Case

SVG files: https://ibm.box.com/s/xaa9l33mfeiec9f0auhcv6athq22nhxl

chrisconnors-ibm commented 4 years ago

Artboard for this SVG is not 32x32: image

Artboard itself is not on the pixel grid: image

Artboard includes a label "Assignment"

Pencil art is not snapped to the pixel grad (look at the point) image It should look like this: image

book element is a stroked path, but should be a shape. image

chrisconnors-ibm commented 4 years ago

Here's what assignment.svg should look like in pixel preview mode with those issues corrected: image

conradennis commented 4 years ago

@ElleLewis Almost all of the icons are drawn off grid and many of them do not follow the brand guidelines for icon styling. I'd say a good portion of them can also be served by existing icons without making any tweaks as they communicate the metaphor effectively as is. Please take another look at the icon guidance, then refine your artwork and revise certain metaphors based on those guidelines. I'm happy to hop on a call to walk through the icons in depth with you so I can get a bit more context and provide more feedback on each specific icon.

ElleLewis commented 4 years ago

Hi, I would really appreciate a call to discuss this last set of comments from conradennis. I need to understand what you are asking. Should I arrange a call? Who should attend? Thank you in advance for your help. _el     Ellen Lewis Creative Director   Marketing Services Center  Phone: +1-678-523-9546 E-mail: e.l.lewis@ibm.com IBM Marketing Services Center
          ----- Original message -----From: conradennis notifications@github.comTo: carbon-design-system/carbon carbon@noreply.github.comCc: ElleLewis e.l.lewis@ibm.com, Mention mention@noreply.github.comSubject: [EXTERNAL] Re: [carbon-design-system/carbon] Contribution: icon (See Box Link) (#4135)Date: Tue, Nov 12, 2019 10:22 AM  @ElleLewis Almost all of the icons are drawn off grid and many of them do not follow the brand guidelines for icon styling. I'd say a good portion of them can also be served by existing icons without making any tweaks as they communicate the metaphor effectively as is. Please take another look at the icon guidance, then refine your artwork and revise certain metaphors based on those guidelines. I'm happy to hop on a call to walk through the icons in depth with you so I can get a bit more context and provide more feedback on each specific icon. —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe.  

ElleLewis commented 4 years ago

Hi, I would really appreciate a call to discuss this last set of comments from conradennis. I need to understand what you are asking. Should I arrange a call? Who should attend? Thank you in advance for your help. You can reach me at e.l.lewis@ibm.com _el

ElleLewis commented 4 years ago

Hi Ellen,    You can set up an hour for us to chat this week. Add Chris Connors as optional in case he wants to attend and feel free to include anyone on your team you think would benefit from the call. Thanks.   Conrad EnnisVisual Design | User Experience IBM Brand Experience & Design 88U NYC       ----- Original message -----From: E L Lewis/US/IBMTo: reply@reply.github.com, Conrad T Ennis/Austin/IBM@IBMUSCc: carbon@noreply.github.com, mention@noreply.github.com, Anthony L Fields/Atlanta/IBM@IBMUS, Chris Connors/Pittsburgh/IBM@IBMUSSubject: Re: [EXTERNAL] Re: [carbon-design-system/carbon] Contribution: icon (See Box Link) (#4135)Date: Tue, Nov 12, 2019 3:19 PM  Hi, I would really appreciate a call to discuss this last set of comments from conradennis. I need to understand what you are asking. Should I arrange a call? Who should attend? Thank you in advance for your help. _el     Ellen Lewis Creative Director   Marketing Services Center  Phone: +1-678-523-9546 E-mail: e.l.lewis@ibm.com IBM Marketing Services Center
          ----- Original message -----From: conradennis notifications@github.comTo: carbon-design-system/carbon carbon@noreply.github.comCc: ElleLewis e.l.lewis@ibm.com, Mention mention@noreply.github.comSubject: [EXTERNAL] Re: [carbon-design-system/carbon] Contribution: icon (See Box Link) (#4135)Date: Tue, Nov 12, 2019 10:22 AM  @ElleLewis Almost all of the icons are drawn off grid and many of them do not follow the brand guidelines for icon styling. I'd say a good portion of them can also be served by existing icons without making any tweaks as they communicate the metaphor effectively as is. Please take another look at the icon guidance, then refine your artwork and revise certain metaphors based on those guidelines. I'm happy to hop on a call to walk through the icons in depth with you so I can get a bit more context and provide more feedback on each specific icon. —You are receiving this because you were mentioned.Reply to this email directly, view it on GitHub, or unsubscribe.    

stale[bot] commented 4 years ago

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

afields1 commented 4 years ago

IBM Skills Gateway UX team (Ellen Lewis) had worked with the Carbon Design team (Conrad) to get several icons approved.

@conradennis please comment when these icons are approved and deployed to the Carbon design library.

afields1 commented 4 years ago

@conradennis please provide me an update as to when you think these icons will be deployed to the Carbon design library.

conradennis commented 4 years ago

@afields1 Hi, they're all in the library and available for use. you can find the SVGs here: https://github.com/carbon-design-system/carbon/tree/master/packages/icons/svg/32

original PR including the requested icons is here: https://github.com/carbon-design-system/carbon/pull/4789

I passed the SVGs to Ellen, you can use that set as a reference for locating the icons in the repo

chrisconnors-ibm commented 4 years ago

closed via https://github.com/carbon-design-system/carbon/pull/4789