Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Concept: Iconography #74

Open
arcticicestudio opened this issue Dec 12, 2018 · 0 comments
Open

Design Concept: Iconography #74

arcticicestudio opened this issue Dec 12, 2018 · 0 comments

Comments

@arcticicestudio
Copy link
Contributor

This epic documents the icon design concept of Nord Docs. It defines the process steps to decide about all iconography aspects like the base sizes and usage within components/themes.

All implementation details and requirements are documented and tracked in the corresponding issues:

  • -

🚧 This is a living document which means it is work in progress, not completed yet and will be extended!

Icon Stack

To achieve a uniform design across Nord and its brand the main icon stack will be the awesome Eva Icons project. They match the overall branding and especially the chosen typefaces documented in the “Typography” design concept They are designed with a rounded appearance and a minimal and elegant feeling while being expressive about their meaning.

Other icon projects that might be used, when there are icons missing for specific use cases, will be “Feather Icons” and Ionicons. Both are also similar to Eva Icons are match the Nord brand style.

All of these icons that are open source like Nord itself. There might also be some icons coming from the long awaited “Refactoring UI” book that has been released yesterday which is used as reference and inspiration for Nord Docs in several other design concepts.

@arcticicestudio arcticicestudio self-assigned this Dec 12, 2018
arcticicestudio added a commit that referenced this issue Dec 13, 2018
> Layout

The header uses a CSS flexbox layout consisting of two container
components with the maximum of flexible space between both. The
containers contain the branding component and the navigation like
documented in the sections below.

> Navigation

To allows users to simply navigate around the site, the component
provides the quickly accessible navigation. It is placed in the
right-sided container. As of now the following link items are included:

- "Ports" - links to `/ports`, the landing page for all Nord port
  projects.
- "Docs" - links to `/docs`, the landing page for Nord's documentation.
- "Blog" - links to `/blog`, the landing page for Nord's blog.
- "Community" - links to `/community`, the landing page of the Nord
  community channels.

> Branding

To represent Nord's branding, the left-sided container consists of the
Nord logo and a caption/label. It links to Nord Docs landing page to
allow quick access to the root (`/`) page.

> Theme Mode Switcher

The user action component mentioned in the introduction paragraph above
allows to toggle between the available global theme modes. Both modes
are represented through icons where a sun is used for "bright snow
flurry" and a moon for "dark night frost" mode. They are implemented
using the awesome "React Pose" (1) project to animate the "rising up"
and "going down" sequences. The icons fly out and in" within the bounds
f the component that takes the form of a button.

Like documented in the Iconography design concept (2), the awesome
"Eva Icons" (3) project will is used where the "moon" and "sun" icons
represent the both available theme modes.

> Responsive Design

For reduced width views (responsive design) the header adjusts several
styles and composed components.

>> Slide Menu

The main navigation link list will be hidden and replaced by the user
action element (button) that toggles an animated slide down menu
containing the navigation links. The drop down will start right below
the header and takes up the available height and width to cover the
full screen. As soon as the animation starts all scroll events will be
removed from the underlying content (body) using the
"body-scroll-lock" (4) project. This prevents users from scrolling the
content below the menu when the menu itself overflows the Y-axis and
shows a scroll bar.

>> Behavior

To allow quick access while also being inconspicuous, the component is
"sticky" at the top of the site, but will collapse as soon as the user
scrolls down. It'll only switch into expanded mode when at top of the
site.
In expanded mode, the height of the header is larger and the
caption/label of the logo is visible. As soon as switching into
collapsed mode the height decreases and the caption fades out with a
smooth transition animation.

To achieve the resizing animation based on the scroll position the
"subscribe-ui-event" (5) project is used to listen to scroll events. It
provides throttling by default, only calls `document.body.scrollTop`
and `window.innerWidth` once and uses `requestAnimationFrame` for the
best performance.

References:
  (1) https://popmotion.io/pose
  (2) #74
  (3)  https://akveo.github.io/eva-icons
  (4) https://www.npmjs.com/package/body-scroll-lock
  (5) https://www.npmjs.com/package/subscribe-ui-event

Associated epic: GH-63
GH-64
arcticicestudio added a commit that referenced this issue Dec 25, 2018
This includes the official logo of Arctic Ice Studio, more UI icons as
well as several social media & community sites and services:

- Discord (1)
- GitHub (2)
- Keybase (3)
- Reddit (4)
- Slack (5)
- Spectrum (6)
- Twitter (7)

References:
  (1) https://discordapp.com
  (2) https://github.com
  (3) https://keybase.io
  (4) https://reddit.com
  (5) https://slack.com
  (6) https://spectrum.chat
  (7) https://twitter.com
  https://akveo.github.io/eva-icons
  https://simpleicons.org

Associated epic: GH-74
GH-106
arcticicestudio added a commit that referenced this issue Dec 26, 2018
This includes the official logo of Arctic Ice Studio, more UI icons as
well as several social media & community sites and services:

- Discord (1)
- GitHub (2)
- Keybase (3)
- Reddit (4)
- Slack (5)
- Spectrum (6)
- Twitter (7)

References:
  (1) https://discordapp.com
  (2) https://github.com
  (3) https://keybase.io
  (4) https://reddit.com
  (5) https://slack.com
  (6) https://spectrum.chat
  (7) https://twitter.com
  https://akveo.github.io/eva-icons
  https://simpleicons.org

Associated epic: GH-74
GH-106
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant