@@ -12,7 +12,7 @@ Follow these guidelines when contributing or reviewing design and user interface
...
@@ -12,7 +12,7 @@ Follow these guidelines when contributing or reviewing design and user interface
advice and best practices for code review in general.
advice and best practices for code review in general.
The basis for most of these guidelines is [Pajamas](https://design.gitlab.com/),
The basis for most of these guidelines is [Pajamas](https://design.gitlab.com/),
GitLab design system. We encourage you to [contribute to Pajamas](https://design.gitlab.com/get-started/contribute)
GitLab design system. We encourage you to [contribute to Pajamas](https://design.gitlab.com/get-started/contribute/)
with additions and improvements.
with additions and improvements.
## Merge request reviews
## Merge request reviews
...
@@ -32,9 +32,9 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
...
@@ -32,9 +32,9 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
- Follow [Pajamas](https://design.gitlab.com/content/punctuation/) as the primary
- Follow [Pajamas](https://design.gitlab.com/content/punctuation/) as the primary
guidelines for UI text and [documentation style guide](../documentation/styleguide/index.md)
guidelines for UI text and [documentation style guide](../documentation/styleguide/index.md)
as the secondary.
as the secondary.
- Use clear and consistent [terminology](https://design.gitlab.com/content/terminology).
- Use clear and consistent [terminology](https://design.gitlab.com/content/terminology/).
- Check grammar and spelling.
- Check grammar and spelling.
- Consider help content and follow its [guidelines](https://design.gitlab.com/usability/helping-users).
- Consider help content and follow its [guidelines](https://design.gitlab.com/usability/helping-users/).
- Request review from the [appropriate Technical Writer](https://about.gitlab.com/handbook/engineering/ux/technical-writing/#designated-technical-writers),
- Request review from the [appropriate Technical Writer](https://about.gitlab.com/handbook/engineering/ux/technical-writing/#designated-technical-writers),
indicating any specific files or lines they should review, and how to preview
indicating any specific files or lines they should review, and how to preview
or understand the location/context of the text from the user's perspective.
or understand the location/context of the text from the user's perspective.
...
@@ -43,20 +43,20 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
...
@@ -43,20 +43,20 @@ Check these aspects both when _designing_ and _reviewing_ UI changes.
- Consider similar patterns used in the product and justify in the issue when diverging
- Consider similar patterns used in the product and justify in the issue when diverging
from them.
from them.
- Use appropriate [components](https://design.gitlab.com/components/overview)
- Use appropriate [components](https://design.gitlab.com/components/overview/)
and [data visualizations](https://design.gitlab.com/data-visualization/overview).
and [data visualizations](https://design.gitlab.com/data-visualization/overview/).
### Visual design
### Visual design
Check visual design properties using your browser's _elements inspector_ ([Chrome](https://developer.chrome.com/docs/devtools/css/),
Check visual design properties using your browser's _elements inspector_ ([Chrome](https://developer.chrome.com/docs/devtools/css/),
@@ -61,7 +61,7 @@ Therefore, you should postpone this effort until the [experiment cleanup process
...
@@ -61,7 +61,7 @@ Therefore, you should postpone this effort until the [experiment cleanup process
We recommend the following workflow:
We recommend the following workflow:
1. Review the Pajamas guidelines for [icons](https://design.gitlab.com/product-foundations/iconography) and [illustrations](https://design.gitlab.com/product-foundations/illustration).
1. Review the Pajamas guidelines for [icons](https://design.gitlab.com/product-foundations/iconography/) and [illustrations](https://design.gitlab.com/product-foundations/illustration/).
1. Add an icon or illustration as an `.svg` file in the `/app/assets/images` (or EE) path in the GitLab repository.
1. Add an icon or illustration as an `.svg` file in the `/app/assets/images` (or EE) path in the GitLab repository.
1. Use `image_tag` or `image_path` to render it via the asset pipeline.
1. Use `image_tag` or `image_path` to render it via the asset pipeline.
1.**If the experiment is a success**, designers add the new icon or illustration to the Pajamas UI kit as part of the cleanup process.
1.**If the experiment is a success**, designers add the new icon or illustration to the Pajamas UI kit as part of the cleanup process.