Page MenuHomePhabricator

Create "Do" "Don't" imagery content type for Design Style Guide
Closed, ResolvedPublic

Description

For documenting guidelines, Design Style Guide needs a way to show "Do" and "Don't" guideline pattern.

Event Timeline

Nirzar created this task.Apr 4 2018, 4:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 4 2018, 4:50 PM

@Nirzar We should start with the Do to emphasize on. As we've spoke this week, I'd also strengthen the description (increase font-size, separate from other image description)

Volker_E added a comment.EditedMay 3 2018, 8:44 PM

Comparisons:
Material Design:

Lightning Design:
(doesn't provide a huge number, only comparable found)

Facebook Brand Resource Center:

Carbon Design System, U.S. Web Design System are completely relying only on positive guidelines without a Do and Don't comparison.

Notes from comparison:

  • Wider border than 3px to emphasize
  • We should add icons as additional visual cue besides Do and Don't

another version

Volker_E renamed this task from Create "Do" "Avoid" imagery content type for DSG to Create "Do" "Avoid" imagery content type for Design Style Guide.Jul 16 2018, 12:36 PM
Volker_E updated the task description. (Show Details)


This is the current look after the main patch got merged.
Two small amendment over latest design: Boldening of Do & Don't and also putting into color. Also, we're staying with the unicode characters for checkmark and x here for code simplification reasons.
✓ Everything's responsive and separated from full-edge figure elements.

One small question: Dealing with indentation, separate line and indentation of text description?

From today's Design Review meeting, we'll stay for now with the current layout and iterate if necessarily of the indentation or a possible new line alternative. Problem with indentation solution is, it would be language-dependent, and not i18n friendly.

Volker_E renamed this task from Create "Do" "Avoid" imagery content type for Design Style Guide to Create "Do" "Don't" imagery content type for Design Style Guide.Jul 17 2018, 5:55 PM
Volker_E closed this task as Resolved.
Volker_E triaged this task as Normal priority.
Volker_E moved this task from Needs Review/Feedback to Done on the Wikimedia Design Style Guide board.
Volker_E updated the task description. (Show Details)