Closed afields1 closed 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.
cc @chrisconnors-ibm
refer to @conradennis for further consultation/action
@conradennis Please provide me any status. Do you have any questions for me?
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.
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.
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
Artboard for this SVG is not 32x32:
Artboard itself is not on the pixel grid:
Artboard includes a label "Assignment"
Pencil art is not snapped to the pixel grad (look at the point)
It should look like this:
book element is a stroked path, but should be a shape.
Here's what assignment.svg should look like in pixel preview mode with those issues corrected:
@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.
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.
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
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.
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.
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.
@conradennis please provide me an update as to when you think these icons will be deployed to the Carbon design library.
@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
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.
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:
SVG files: https://ibm.ent.box.com/s/qeqqs2elfxy20l2fd64vfc9zhcxb5k0b