Enhance asset landing page with new content and links

carbon-design-system / carbon-platform

The "next" version of the Carbon Design System website, as a platform.

https://next.carbondesignsystem.com

Apache License 2.0

22 stars 5 forks source link

Enhance asset landing page with new content and links #369

Closed mattrosno closed 2 years ago

mattrosno commented 2 years ago

https://www.figma.com/file/j0jgy6QBNV1UtyUN0nkzSg/v0.2-Asset-Landing-Page?node-id=0%3A1

Design

[x] Share copy updates @aubrey-oneal
[x] Draw new hero background image (Thy?)
[x] Redlines for modified page @kingtraceyj
[x] Export new images for featured content @kingtraceyj

Dev

[ ] Update Hero component with new background image placement and reduced copy
[ ] Update existing copy
[ ] Link to asset catalogs
[ ] Link to collections
[ ] Link to featured libraries
[ ] Update roadmap copy @mattrosno

kingtraceyj commented 2 years ago

Final redlines: https://ibm.box.com/s/qwt7h1t2kw9dalhasiukg6w97y03zcyb

Still needs a few copy edits. For discussion, where is the best place to keep final copy? Redlines? Boxnote? Figma?

mattrosno commented 2 years ago

@kingtraceyj @aubrey-oneal your call on final copy. Maybe a Box note in here? https://ibm.ent.box.com/folder/158457453079

@aubrey-oneal @ljcarot @andreancardona just a heads up, I'm going to make a pass over the roadmap copy with suggested content that reflects our progress and discussions from yesterday. I will share when ready for review. @andreancardona I wouldn't mess with the roadmap portion of the assets landing page yet.

mattrosno commented 2 years ago

@andreancardona you can get colors for this portion here: https://github.com/carbon-design-system/carbon-platform/blob/main/services/web-app/data/type.js

mattrosno commented 2 years ago

@kingtraceyj @andreancardona let me know if you want to talk image format. I recommend JPG or PNG at 3x. Current page is all PNGs for hero and roadmap images.

3x for 5k displays, and Next.js will downsize the image for us for everything else.

Not SVG because gradients like these are hard to get right in SVG. Not worth the trouble.

I'd export the hero image where the illustration takes up the full image. No gutter baked in. That makes it easier for us to position the image across our various breakpoints.

kingtraceyj commented 2 years ago

landing page assets:

Feature cards:

Chart library: Charts_collection

React library: carbon_react_library

Card icons: Card-Icons.zip

kingtraceyj commented 2 years ago

@alisonjoseph and @andreancardona jeannie just updated the roadmap images as well! hot off the press New_roadmap_imgs.zip !

alisonjoseph commented 2 years ago

@kingtraceyj looks like the roadmap images are missing the background? Screen Shot 2022-04-05 at 2.51.16 PM.png

jeanservaas commented 2 years ago

Here @andreancardona will these work?

roadmap_imgs.zip

alisonjoseph commented 2 years ago

carbon-next-v0 1

new image roadmap_v0 1

@jeanservaas looks like the border/background is part of the image, and is missing in the updated ones?

jeanservaas commented 2 years ago

Uggggg crap. i must've been on an old file. Hang tight.

jeanservaas commented 2 years ago

OMG @andreancardona I'm so sorry I misunderstood what you were asking for. OMG we did those images late at night and the final version wasn't saved somehow!!!! I had to rebuild those colors and arrows in there.

Sorry again about the confusion. These should be correct.

roadmap_imgs_revised.zip