Goals

• Consistent navigation for all major features
• Mobile and web
• Allow users to easily find areas of site relevant to them

General Design

Includes:

• Responsive, high-level UI across large, medium small screens.
• Dark and Light modes
• Notification dropdown
• User dropdown
• Search input (includes search auto suggest)

Updated links and comments below

Web - Dark

Large

https://invis.io/KWU1X9IEB2U#/400020224_Web_Large_-Dark-

Medium

https://invis.io/KWU1X9IEB2U#/400021493_Web_Medium_-Dark-

Small

https://invis.io/KWU1X9IEB2U#/400022522_Web_Small_-Dark-

Web - Light

Large

https://invis.io/KWU1X9IEB2U#/400026008_Web_Large_-Light-_

Medium

https://invis.io/KWU1X9IEB2U#/400030054_Web_Medium_-light-

Small

https://invis.io/KWU1X9IEB2U#/400035770_Web_Small_-Light-

Notes

Responsiveness [large]

• The horizontal and vertical lines should continue the full width and height of the screen at all times.
• In medium screens, the nav icons should be right alined at all times.
  • Design shows a width 900px. But if the viewport was 950px icons should be aligned to the right and not the left.

Search

• The entire bounding area of the text input should be clickable
• Clicking anywhere outside of the search input or search dropdown should deactivate / close the search.
• The five most recent search terms (for the device) should be displayed when the search is initially activated.
• The user can clear device search history by clicking Clear History
• As the user starts to type, the dropdown should show Predictive Search Terms and Suggested Results. Note that Suggest results should favour channels / groups etc that the user either is subscribed to, or as visited before. e.g. If I search Rami, I should see Rami Albatal before any other Rami out there.
• On Desktop, the user should be able to navigate through the dropdown by using up/down arrow keys. Pressing enter should jump to the selected item.
• Search input note: please disable autocomplete autocorrect autocapitalize and spellcheck

Notifications

• Need to distinguish between Seen and Unseen notifications.
• Notifications should be grouped together. If a single post received 100 up-votes, we should not display 100 individual notification. Rather we should display them as a single notification. e.g. Michael and 99 others liked “My first post”.
• A notification should be marked as seen, simply by activating the notification dropdown. In this case
• A red dot, with unseen notification count should display when there are any unseen notifications.
• If seen/unseen state should be persisted centrally, so between devices (e.g. web and mobile) the state of seen and unseen notifications are consistent.

added scoped labels

added to epic &93

added 1 deleted label

added scoped label and automatically removed label

added scoped label and automatically removed label

changed due date to December 11, 2019

added scoped label and automatically removed label

added scoped label and automatically removed label

added scoped label and automatically removed label

changed the description

Links for the new, high-level design across dark & light modes, and all three screen sizes too.

Note: some work to be done on the 'Composer Modal', so consider that a WIP. Questions, feedback etc welcome.

cc @jotto141 @ottman @markeharding @brianhatchet

changed the description

added scoped label and automatically removed label

added scoped label and automatically removed label

added scoped label

removed 1 deleted label

changed the description

FYI: Web high level designs (nav) packaged-up. Links and any design notes include within the original comment.

We should do a quick run-through just to confirm / sign-off on the above, before getting handed over to the devs.

The equivalent for mobile app is incoming, will land before the COB.

cc @jotto141 @ottman @brianhatchet @markeharding

I would use the channel avatar for the channel icon and put it on top or bottom. More personal. Also, I like the home icon better than newspaper but won't get bent out of shape about it. Overall looks great.

changed the description

added scoped label and automatically removed label

changed due date to January 10, 2020

changed milestone to %Sprint::01/01 - Xerothermic Xenartha

closed

Why closed @brianhatchet ?

This was the design card that got broken down into the individual cards. I'll reopen this to make sure we got everything tracked.

reopened

added scoped label and automatically removed label

added scoped label and automatically removed label

These designs have been moved over to the new system and are pretty stable. Closing off this card

closed