From 3e9715511111274913366e340feb221d33d3274c Mon Sep 17 00:00:00 2001 From: Zain Khoja <zainkho@github.com> Date: Tue, 25 Jun 2019 13:45:21 -0700 Subject: [PATCH 1/2] Updated documentation for /design landing Additional text descriptions for design tools page and progressive disclosure section --- pages/design/index.mdx | 13 +++++++++- pages/design/tools/index.mdx | 5 ++++ .../ui-patterns/progressive-disclosure.mdx | 26 +++++++------------ 3 files changed, 26 insertions(+), 18 deletions(-) diff --git a/pages/design/index.mdx b/pages/design/index.mdx index 96f86e1..c413635 100644 --- a/pages/design/index.mdx +++ b/pages/design/index.mdx @@ -1,3 +1,14 @@ -# Guidelines +# Introduction + +The goal of Primer Design is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. These guidelines set a foundation for design principles, accessibility, layouts, content, and resources for multiple design tools. + +## Designed with accessibility first +We created Primer Design so that GitHub can be used by everyone. We suggest guidelines that create the most opportunity for those with visual, hearing, cognitive, and mobile disabilities. + +## Responsiveness +Primer Design works with all devices and includes guidelines for page layouts, hierarchy, navigation, and so much more. + +## Tools that encourage collaboration +We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma allows designers to share early and share often. export const meta = {displayName: 'Guidelines', nav: 'top', hero: true} diff --git a/pages/design/tools/index.mdx b/pages/design/tools/index.mdx index ef950de..5c96ced 100644 --- a/pages/design/tools/index.mdx +++ b/pages/design/tools/index.mdx @@ -1,3 +1,8 @@ # Design tools +Figma is a vital part of Primer Design's workflow. Figma's collaborative environment allows designers to work together across distance and give feedback asynchronously. Learn more about [GitHub's remote design culture here](https://www.figma.com/blog/github-case-study/). + +## Resources +We provide some open source Figma files to help designers create more with GitHub.com and other GitHub products. Download them below. + export const meta = {displayName: 'Design tools', nav: 'top'} diff --git a/pages/design/ui-patterns/progressive-disclosure.mdx b/pages/design/ui-patterns/progressive-disclosure.mdx index 7c0c160..6941ff3 100644 --- a/pages/design/ui-patterns/progressive-disclosure.mdx +++ b/pages/design/ui-patterns/progressive-disclosure.mdx @@ -10,10 +10,10 @@ The following table outlines common progressive disclosure solutions in use at G | Component | Icon | Usage | Notes | | --- | --- | --- | --- | -| Chevron |  | When elements of content are collapsed and can be toggled open | Do not use this icon to trigger a dropdown menus or navigation; the Caret icon is the more suitable for this. | -Expand/ Collapse Icon |  | Signify that there is content (typically text) to be revealed | Should generally stand alone, rather than being paired with text | -Ellipses Icon |  | For toggling truncated inline text content | Do not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this. | -Text-only Toggles | | | Usage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information | +| Chevron |  | When elements of content are collapsed and can be toggled open | Do not use this icon to trigger a dropdown menus or navigation; the Caret icon is the more suitable for this. | +Expand/ Collapse Icon |  | Signify that there is content (typically text) to be revealed | Should generally stand alone, rather than being paired with text | +Ellipses Icon |  | For toggling truncated inline text content | Do not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this. | +Text-only Toggles | [example]() | | Usage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information | Kebab |  | N/A | For toggling inline dropdowns and menus | Caret |  | N/A | Refrain from using this icon as a progressive disclosure solution | @@ -24,7 +24,7 @@ Caret | , 4 deletions(-) diff --git a/pages/design/index.mdx b/pages/design/index.mdx index c413635..a4717be 100644 --- a/pages/design/index.mdx +++ b/pages/design/index.mdx @@ -1,14 +1,16 @@ # Introduction -The goal of Primer Design is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. These guidelines set a foundation for design principles, accessibility, layouts, content, and resources for multiple design tools. +Our goal is to create an accessible and approachable system that keeps user experience consistent across the breadth of GitHub products and services while also allowing flexibility for new ideas. These guidelines are created with *all* users in mind. Primer Design sets foundations for design principles, accessibility, layouts, and content. We also provide downloadable resources for multiple design tools. ## Designed with accessibility first -We created Primer Design so that GitHub can be used by everyone. We suggest guidelines that create the most opportunity for those with visual, hearing, cognitive, and mobile disabilities. +We created Primer Design so that GitHub can be used by everyone. Our guidelines have considerations for users with visual, hearing, cognitive, and mobile disabilities. + ## Responsiveness -Primer Design works with all devices and includes guidelines for page layouts, hierarchy, navigation, and so much more. +Primer Design includes guidelines for page layouts, hierarchy, and navigation on both web and mobile. + ## Tools that encourage collaboration -We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma allows designers to share early and share often. +We use [Figma](http://figma.com) as our primary tool of choice because of its ability to create a more transparent work environment. Figma supports GitHub's mission to help people work together from all of the world and contribute to amazing projects. export const meta = {displayName: 'Guidelines', nav: 'top', hero: true} -- GitLab