search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
264 stars 157 forks source link

Cupcake website page creation - Get started/Designing page #483

Closed jeffchew closed 4 years ago

jeffchew commented 4 years ago

chsanche created the following on Sep 24:

User Story

As an IBM.com page creator

I need to: have a good understanding of the design kit

so that I can: do my day to day work efficiently.

Additional information

Task

Acceptance criteria

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1758

jeffchew commented 4 years ago

On Oct 01, chsanche commented: @Olivia-Flory Can you take a look at the content on the "Designing" page, especially the "Get the Kit" section, and let me know if there are any changes we need to make?

designing

FYI: This is the format Carbon currently has for "Get the Kit" section.

screen shot 2019-10-01 at 1 49 28 pm

jeffchew commented 4 years ago

On Oct 03, Olivia-Flory commented: Thanks for sending @chsanche, I have a few copy suggestions, but as I'm looking through I think we need to clarify a few things that I'm not clear on first:

  1. My understanding of our current "closed adoption" strategy is that we are only releasing the design kit to our sponsor users (the DGC squads). Are we planning on releasing the design kit to people outside DGC?

  2. If we are releasing to users outside of the DGC squads, what is the timeframe? Before the end of the year? In 2020?

  3. What is the timeframe for releasing this page? If we release it before the component theming is done we might need to clarify that these are not production ready and possibly label as "experimental".

  4. If we move to Sketch Cloud and make the kit available to everyone, the Set up box drive – Request access sections will be irrelevant, and we could do something like Carbon has with the resouce cards. I am meeting with Anna and Lauren on Monday (Oct 7) to talk about Sketch Cloud and will get back to you both on what our options are.

@Wonil-Suh1 can you weigh in on the questions above? I don't want to block Jenny from completing this, but I'm just confused about what we should do about the kit if we are going with a "closed adoption" strategy.

jeffchew commented 4 years ago

On Oct 03, chsanche commented: Hi @Olivia-Flory I am not sure what is the final decision on the design kit around if it should be open to outside adopters or not. That's why I need your help finding out what we need to change for the "Get the Kit" section so the IBM.com designers can download the kit. By all mean, what you see above is what we currently have on v19a for the "Get the Kit" section but not for the Cupcake website yet.

jeffchew commented 4 years ago

On Oct 03, Wonil-Suh1 commented: @Olivia-Flory Thanks for the comments and questions.

@linda-carotenuto Let me take a crack at them:

  1. This cupcake should be released to approved adopters (DGC in 2019).

  2. TBD

  3. ASAP to DGC adopters only.

  4. Thank you!!!!

jeffchew commented 4 years ago

On Oct 03, chsanche commented: Sounds good, Thank you both @Wonil-Suh1 @Olivia-Flory !

jeffchew commented 4 years ago

On Oct 04, chsanche commented: @Olivia-Flory @Wonil-Suh1 I took a stab on the "Get the kit" section content. Please let me know what changes we need to make.

Get the kit

(FYI - bold text = link)

1. Install Sketch.

To design with Digital Design System you must have the most recent version of Sketch installed.

2. Set up Box Drive

If you currently use Box Sync, you must uninstall it to use Box Drive. You can follow the steps on Uninstalling Box Sync Manually document to uninstall Box Sync and Installing and Updating Box Drive document to install the Box Drive.

The Digital Design System team releases frequent updates to the design kit. Follow the instructions above to stay up to date with the latest changes via Box Drive.

3. Set up Sketch library and theme

You can save the template and library by navigating to the IBM Design kit → digital design → v19a folder.

There are four Digital Design themes, two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its Sketch library. You can subscribe to as many libraries as you’d like.

(4 cards linked to each theme)

4. Bring in additional colors and icons.

The full icon library and additional color collections live in the IBM Design Language library.

(1 card linked to IBM Design Language Library)

5. Download the grid templates.

To save the grid template, open the “IBM Design template” file in Sketch, from the menu choose File → save as template → save.

To add the library, from Sketch navigate to Preferences → Libraries → Add Library and select Box → IBM Design kit → digital design → v19a → IBM Digital Design.sketch.

Be sure to add the library following the instructions above. The Digital Design System team does not recommend downloading the “IBM Digital Design” Sketch file to your local drive because you will not receive the updates as they are published.

For product design, the Carbon kit is available via Sketch Cloud and you do not have to request access to the box folder.

jeffchew commented 4 years ago

On Oct 04, Olivia-Flory commented: Thanks Jenny, I'll respond to your thoughts below, and also link a sketch file / jpg of comments I was working on

  1. Set up Sketch library and theme You can save the template and library by navigating to the IBM Design kit → digital design → v19a folder.

There are four Digital Design themes, two light (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its Sketch library. You can subscribe to as many libraries as you’d like.

(4 cards linked to each theme)

Can't be v19a, it will be in another folder We might not have all the themes ready when this release happens, so we'll want to only say the white theme, but the other's are coming soon.

  1. Bring in additional colors and icons. The full icon library and additional color collections live in the IBM Design Language library.

(1 card linked to IBM Design Language Library)

Will need 3 cards:

  1. Download the grid templates. To save the grid template, open the “IBM Design template” file in Sketch, from the menu choose File → save as template → save.

To add the library, from Sketch navigate to Preferences → Libraries → Add Library and select Box → IBM Design kit → digital design → v19a → IBM Digital Design.sketch.

Be sure to add the library following the instructions above. The Digital Design System team does not recommend downloading the “IBM Digital Design” Sketch file to your local drive because you will not receive the updates as they are published.

Also can't be v19a folder, might cause confusion.

For product design, the Carbon kit is available via Sketch Cloud and you do not have to request access to the box folder.

I think that it's a great idea to link to Carbon for these

Here is my proposed content updates, I need to follow up on a few things that are italic / semi bold

designers-page-comments-olivia

jeffchew commented 4 years ago

On Oct 09, chsanche commented: Updated content and design:

designing-v3

@Olivia-Flory

For "Get the Kit", "Symbol - Library menu navigation" and "Symbol -Structure" content, I will leave it as it is for now. Let me know when the design kit folder structure is ready and we can make updates.

For the "Bring in additional colors and icons" section, we do not need three cards but just one. The new IDL library will be released in the next Carbon release and will include the icons, colors, and pictograms.