Mobile wireframes (Draft 9)

On this page (overview)

On this page (detail)

Language selection

Mobile storycards, language selection, draft 9

Language selection splash page


Mobile storycards, home, draft 9

Home, while in the museum
Home, when outside of the museum

Language change slider open

Login screen, user login
Login screen, successful login

Login screen, unsuccessful login
Home, successful logout

Code entry

Mobile storycards, code entry, draft 9

Default code entry
Invalid code entered

Default code entry, chromed
Invalid code entered, chromed

Artifact view

Mobile storycards, artifact view, draft 9

Standard view, default, collapsed
Standard view, expanded

Large image portrait
Large image landscape

No image available
Fullscreen artifact image

Artifact collected
Artifact uncollected

Comment entry

My collection

Mobile storycards, my collection, draft 9

Default, empty

Default, grid
Default, list

Send form

My collection (desktop)

Mobile storycards, my collection (desktop), draft 9

Default, grid view

List view


Mobile storycards, exhibitions, draft 9

Exhibitions browsing, default
Upcoming exhibition detail

An exhibition

Mobile storycards, an exhibition, draft 9

An exhibition, default
An exhibition, about

An exhibition, catalogue, grid (default)
An exhibition, catalogue, list

An exhibition, catalogue, theme/all, grid
An exhibition, catalogue, theme/all, list

An exhibition, guestbook

Guidelines... for text alignment

Ignore all header text alignment implications from above wireframes. The actual rules for header text alignment are as follows:

  • IF the length of the text is short enough to centre-align with the header without exceeding the available text bounds, THEN centre-align with the header (see Fig. 2 and 3)
  • ELSE IF the length of the text is lesser than the available text bounds but exceeds the available text bounds when it is centre-aligned with the header, THEN left-align the text within the available text bounds (see Fig. 4)
  • ELSE (if the length of the text is greater than the available text bounds), THEN truncate the text and replace the truncated text with ellipses such that the new text length (= newly truncated text + ellipses) is less than but approaches the length of the available text bounds, and left-align said text within the available text bounds (see Fig. 5)

In short: header-centre the text until you can't--then left-align it.


  • Don't centre-align the text with the available text bounds (unless the above rules would take too long to implement, and we're running out of time...) (see Fig. 6)
Fig. 1: Available text space

Fig. 2: Short-length, hd. centre-aligned

Fig. 3: "Perfect"-length, hd. centre-aligned

Fig. 4: Medium-length, av. space left-aligned

Fig. 5: Long-length, av. space left-aligned

Fig. 6: Incorrectly aligned text

Guidelines... for element expansion/contraction


Focus on the expanded state should slide up such that the top border of the expansion region (i.e., the toggler; coloured yellow in the figures below) is x (x = 30 in Fig. 2) pixels below the screen header, unless this would create a void space in the lower portion of the screen. In the latter case, the end of the virtual space should be equal with the end of the actual screen.

Fig. 1: Collapsed state

Fig. 2: Expanded state, proper
Fig. 3: Expanded state, improper


No focus change; collapsed region should slide up, but the region above the bottom border of the toggler should not move.

Guidelines... for tapping on a tappable

On tapping (or tap-and-holding) a tappable (e.g., buttons, links, things in a list, etc.), the tappable should highlight to indicate a successful tap (i.e., visual touch feedback). The highlight should persist until the finger leaves the screen.

Fig. 1: Button, untapped
Fig. 2: Button, tapped

Fig. 3: Grid item, untapped
Fig. 4: Grid item, tapped

Fig. 5: List item, untapped
Fig. 6: List item, tapped