Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 61 Next »

Design Walkthrough

See Also:
(Floe) UI Options user testing results (November 2012)
(Floe) UI Options user testing report (November 2012)
(Floe) UI Options user testing protocol (September 2012)

On-page

Closed panel

Open panel

Size

Contrast

Emphasis links & buttons

Simplify

Option 1: Responsive layout slider

Option 2: Article-only with table of contents

Panel slid

Captions

Text to speech

Keyboard Shortcuts

Browser extension

Mobile





Style

Font

  • #433F3D Open Sans or Helvetica, Arial, sans-serif
  • preference headings: 16pt Semibold (weight:600)
  • descriptions/check-boxes/drop-downs: 14pt Regular (weight:400)
  • on/off toggle: 14pt Semibold (weight:600)

Form element outline

989898

Icon grey

8D8681

Highlight background

E8EABE

Blue Link

3172AE

1 = Outline 009966
2 = Inset border ABD078
3 = Light gradient 97C93C
4 = Dark gradient 22A755

Options top gradient

000000, 15% opacity

Options bottom gradient

E7E6E6

Margins, Padding, and Sizes

On this page
  • No labels