[Pages] Guidelines: Motion

[jeanservaas]

Elements-Motion A designer can discover the new IDL Elements guidance for Motion as it relates to both Product and Editorial, why / how to apply motion to their work.

Design and Content

• [x] Overview Tab: redesign layout and create/update and usage guidance
  • Bring over guidance from IDL Motion page
  • Remove irrelevant or out of date guidance.
  • Add new guidance or expand on existing guidance
• [x] Resources Tab: may or may not make v10 release
  • Bring over guidance from IDL Motion page
  • Remove irrelevant or out of date guidance.
  • Add new guidance or expand on existing guidance
• [x] Images: update all exhibit images with new styles / create assets

Development

• [ ] Overview Tab:
  • Make sure we have components built to accomodate this layout (see issue: https://github.com/carbon-design-system/carbon-website/issues/293)

Overlapping issue: https://github.com/carbon-design-system/issue-tracking/issues/61

[jeanservaas]

Motion Elements v10

Sketch File https://ibm.box.com/s/0yruurkwto8zo6v9tgl86c2l7t9r2ir7

Image Exports https://ibm.box.com/s/11efxwy2q5pjd4sskvyjj74c65bdjf4k

Video & video poster frames https://ibm.box.com/s/csmnsqmt6ltqe160kzhatmt9w7jj44oz

• This is @shixiedesign 's page... I'm moving it from https://github.com/carbon-design-system/issue-tracking/issues/61
• She is still working on the Resources tab... layout coming soon and version will be updated in box

[shixiedesign]

Resource tab content:

Motion page component specs:

[shixiedesign]

This is content is live on IDL site, but @claycrenshaw I think you might wanna check it still? I would send a boxnote link but I think the sketchfile has the latest copies.

[chrisconnors-ibm]

Is there a good reason why this wouldn't use the same header configuration as every other internal page (smaller header, intro text in the main copy pane)?

[claycrenshaw]

This caption style feels pretty awkward to me. Does the line length need to be this short?

[eraymond25]

@shixiedesign shouldn't the inline code snippet be light, not inverse? See design language motion site

[shixiedesign]

Thanks for the comments guys! @eraymond25 yeah I will change that back. I just thought it didn't look good on the cool grey. Do you have that on digital too? The other thing to consider is, we might shift the background of all pages to Gray 20. I can stay on the light theme code snippet, but will need a different color.

@claycrenshaw I agree that's definitely weird. There might be a dev reason behind why that was like that. But I can change that in design.

[eraymond25]

Digital is using what I believe is gray 20 (but old color palette still) https://pages.github.ibm.com/webstandards/northstar-website-external/web/elements/grid-usage.html

[claycrenshaw]

@alisonjoseph @shixiedesign I am going to go ahead and convert the copy for this page to MD so I can run edits on it. I'll put placeholders for the images / components for now.

[alisonjoseph]

FYI custom video components won't get done in the next week. (we can embed a basic vimeo video now)

Inner tab component, probably not, but will try if there is time after homepage, nav, search etc are done.

[claycrenshaw]

Looking more carefully at the content on this page, I wonder if we would be better off back-burnering this page until after v10. The videos and tabbed components are so important to expressing these concepts. It would feel like we are not really telling the whole story if we can't include them in time for launch. @jeanservaas @shixiedesign @alisonjoseph

[shixiedesign]

Sorry guys i don't know how I missed all the comments. Catching up now, thanks.

[aagonzales]

Sprint 25:

• [x] finalize content or set release timeframe for motion work
• [ ] upload videos to vimeo
• [ ] work with dev to determine v10 scope

[jeanservaas]

Motion Elements v10 _ REVISED

Sketch File https://ibm.box.com/s/0yruurkwto8zo6v9tgl86c2l7t9r2ir7

Video & Image Assets https://ibm.box.com/s/csmnsqmt6ltqe160kzhatmt9w7jj44oz

• Revised leadspaces to match IDL and digital
• Updated tab component and inline code snippet to match other GL pages
• @shixiedesign is still working on the Resources tab... layout coming soon and version will be updated in box

[shixiedesign]

Motion page final design ready for dev

Sketchfile: https://ibm.box.com/s/0yruurkwto8zo6v9tgl86c2l7t9r2ir7 Video & image assets: https://ibm.box.com/s/wyy9df51y4xwljd7xnkl3am3759h49rj

Quick notes:

1. Video assets have do/don't designs baked in. This is so that only 1 video component is needed for website, and motion videos should not exist outside website without the do/don't coloring.
2. Removed checklist component. Only using list. That's one less component to develop.
3. @claycrenshaw feel free to resume motion content review.

[shixiedesign]

Closing design issue. Dev issue created #508