UCLA Web Components

Design criteria

bitbucket Report an Issue Slack Join the Slack Discussion

The following criteria will be used to evaluate if a designed component, enhancement, or proposal should be included in the component library:

Usability

  • Is this pattern widely used on campus websites, products, and services?
  • Does this pattern support a common task or use case?
  • Does it provide a more user-centered approach to an existing pattern, use case, or flow?
  • Does it align with established user interface and interaction patterns?
  • Does it follow usability standards?
  • Can it be extended to support other use cases?

Color

  • Does the component use the official brand color palette?
  • Are new colors used where an existing color could work just as well instead?
  • Does the component over emphasize a non-brand color without a functional need?
  • Do all color combinations meet Level AA WCAG 2.0 compliance?

Typography

  • Does the component use the font stack: Helvetica, Arial, San Serif?
  • Does the component use the type styles already developed?
  • Are new type styles used in a case where an existing type style could work just as well? If not, why?

Layout

  • Does spacing fall within our 8pt grid?
  • Can the component fit into our 12 column grid?
  • Does the use of white space feel consistent with our open and optimistic look and feel?
  • Is the use of overlapping elements consistent with our energetic and progressive look and feel?

Interaction

  • Are buttons, links, form elements, and other inputs consistent with those already developed? If not, why?
  • Are default, hover, active, focus, and disabled states consistent with our interactive color sheet?
  • Does each state of an interactive element meet contrast requirements (Level AA WCAG 2.0)?
  • Do form components provide clear validation and error states?