Choose Avatar and Username
The page allows the user to choose an avatar and a a username or cancel the account creation process.
- Route: /choose-avatar-and-username
- File Name: choose-avatar-and-username.html
This page contains:
-
(CLICKABLE) X-mark (grey4, small):
- Route: Stop signup
-
Title (main-title1, grey3b): "Choose an avatar and a username."
-
(CLICKABLE) Default avatar (t.b.d.) (size= 90x90px) and upload icon (Arrow up, white, small, blue background):
- Route: Resize avatar
-
(SELECTABLE) Inputfield: label: username - value: default username (t.b.d.)
-
(CLICKABLE) Big icon button (next, blue, normal):
- Route: Password warning
Extra non-visible design-info:
- On desktop, align all elements to the left
- On desktop, the inputfield should appear to the right of the avatar+upload
- Upperpart should be givven a height (mobile 40vh, desktop 50vh) and a bottom-padding of 10vh. For the bottompart, I'd suggest working with distances between the divs.
- Check > clickmodel in Invision for the distance between the upload-icon and the avatar, it is intentionally that the icon 'overlays' the avatar