[UPDATE] Component / Header

[jeffreytr]

Global Header

Zeplin link

zpl://screen?sid=zpl.io/aNPZPPZ
zpl.io/aNPZPPZ

Product team

Platform

Design lead

@jeffreytr

Notes

This is meant to be a visual update to deprecate the font Avant Garde from our nav and replace with Unica. Made a few other small adjustments to get up to speed with our design system. Likely will follow up in the coming months with a more considered nav approach.

Checklists

Design

For Tokens

Color, type, spacing, icons, etc

• Is it serving a purpose? (is it needed or just purely decorative?)

• Can it be merged with any existing styles on the site?

• Has it been pressure-tested in all instances?

• Does it meet accessibility standards? (min type size, color contrast)

For Elements

Buttons, links, loaders, inputs, dropdowns, etc

• Is it using up-to-date tokens from above?

• Have all states been captured? (hover, selected, disabled, focused, normal, thinking, errors)

• Have all transitions/animations been defined?

• Is it useable? (Considering touch targets, screen sizes)

• Is it consistent with the rest of the visual system? (Corner radius, stroke weight, form, shadow, opacity, etc)

• Does it meet accessibility standards? (is it keyboard navigable, does it have required accessibility markup)

• Does it render and function properly in Artsy supported browsers?

For Components

Nav, modules, modals, cards, etc

• Is it using up-to-date elements and tokens from above?

• Does it communicate clearly? (Copy, writing style/tone)

• Is it flexible? (Internationalization, text wrapping)

• Is it logical from a UX perspective? Does it follow paradigms set on the rest of Artsy?

• Has responsive behavior at all breakpoints been defined?

• Have all transitions/animations been defined?

• Does it meet accessibility standards?

• Does it render and function properly in Artsy supported browsers?

Engineering

Accessibility

• Do all images and multimedia have alt or title tags?

• Are semantic elements used appropriately (nav, button, etc)?

• Are new components keyboard-navigable?

• Are hover interactions available by other means?

• Are aria- attributes included where appropriate?

• Has a Chrome Devtools accessibility audit been performed?

Compatibility

Has the new component been reviewed in Browserstack:

• Desktop Chrome

• Desktop Edge

• Desktop Safari

• Desktop Firefox

• Android

• iOS