search

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

This is the Carbon for IBM.com website, which includes documentation and guidelines around design and development for IBM.com
https://www.ibm.com/standards/carbon/
Apache License 2.0
39 stars 43 forks source link

Website [Expressive theme] Need new content #962

Closed shixiedesign closed 3 years ago

shixiedesign commented 3 years ago

Once Carbon merges the expressive components and tokens, this page becomes out of date. https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/guidelines/expressive-theme

Need to design and write content for a new page guiding people to create an Expressive experience

JennySanchez commented 3 years ago

@oliviaflory

🚨🚨🚨🚨🚨 Just a heads up on we need to update the Guideline overview page once the page is done.

shixiedesign commented 3 years ago

Also moving out a sprint because Olivia could be overbooked.

shixiedesign commented 3 years ago

Looked through the current expressive theme page and I think these below points are still relevant:

Expressive experience

Responsive design

Type scale & Icon

Container & field sizes

oliviaflory commented 3 years ago

I suppose I had thought this page would evolve to talk about what makes an expressive experience. I agree the above points are still relevant, but maybe slightly re-organized

Typography

Essential components: Should we define what makes an expressive experience?

How the essential components are used with examples?

Productive moments Should we talk about what defines our productive moments and when to use the productive tokens?

Container & field sizes use lg prop

Are we saying that all teams should use the lg prop for all components? We were seeing some teams struggle to use the lg form components when it was forced to 48px container with the expressive theme.

Do we want to combine layout into Expressive experience or is responsive layout just baked into all of our layout components?

Same thing with image, the image component is responsive within the grid, and imagery is a key part of what can make an experience expressive.

Not saying my organization is perfect, but might be helpful to understand what we are trying to communicate to our adopters.

Should we mention how to transition off of the previous expressive kit?

oliviaflory commented 3 years ago

Met with Jan to discuss Expressive experience page updates 6/22 and got some more insight into the bullet points Shixie shared in 6/21 comment:

Expressive experience

Responsive design – responsive design is a key element within an expressive experience.

  • responsive in layout – image of responsive devices still relevant. Our components are responsive in layout.
  • responsive in typography – fluid typography.
  • responsive in image – images are essential to exp experience.
    • Idea: Could maybe add a gif of an image component scaling within browser?

Type scale & Icon

  • Add some description about typography usage and link to Carbon typography page that Jan is currently updating.
  • Show examples of type pairing with icon & when to use (14 type with 16px icon; 16px type with 20px icon).
    • Idea: Could show in context of a button.

Container & field sizes

  • remove table (not applicable to new approach)
  • use lg prop
    • Idea: talk about essential components (button, link, list) and using lg prop. Show examples (lead space, Content group, etc)
oliviaflory commented 3 years ago

The approach to describing the typography usage has changed and we will wait to write new content for Expressive until that language has been more finalized so they align.

oliviaflory commented 3 years ago

Updates from Aug 25

New approach: Expressive styling

Overview

Components