[Website] Guideline Layout

[oliviaflory]

V1

Designing and adopting a layout

Content hierarchy

Hierarchy helps users (viewer, reader, audience) to navigate complex concepts and narrative structures without getting confused or lost, and ultimately find what they are looking for. Thoughtful application of type styles, components, and media will allow content to be communicated and prioritized in different ways. Also, Pay attention also to the size and proximity of content pieces within a component and between component (S).

• Move the caption to a descriptive paragraph above the image?
• The list feels disjointed from the image and should possibly have a title (Anatomy?)
• Note the list talks about type much more generally than other pages "large" "medium" etc, but these are all component examples.

Grouping and spacing

Update larger image caption to "in this example" rather than "component"

Typographic structure ⚠️

• image Caption needs to be updated to content BLOCK or Content section??
• this list could also use a title

Contrast

• Need to check cards w images component name ⚠️

Creating pages with layout components

• "ibm.com" do we need to caps?

Reading behaviors

• No captions included with do/don'ts

2x grid best practices

• Should we remove (and things to avoid) from the link?
• Should review all grid examples as a group to ensure we all agree ⚠️
  • Could split into most common
  • Other options
  • Avoid
• Add title to Avoid section
• This would be nice to discuss why uneven numbers are unbalanced, or if you have to use 3, skip a column to make it more balanced?
  • I wish there wasn't type embedded in these "unbalanced"

---

V2

• Revisit my examples of common layouts we see across IBM.com and possibly add those
• I did an audit of the Layout guidelines a YEAR ago
  • I would like to revisit this audit as a design team
• Overall I think the guidelines section needs to be reconsidered because of how we are approaching building a page in Dotcom in v2
  • Do we have a get started that breaks into all the guidelines that we already have? Or is it a tabbed format?

[oliviaflory]

Cut:

• Reading behaviors
• 2x grid best practices

2x grid best practices replace:

• content module high level