diff options
| author | Jacob Schatz <jschatz@gitlab.com> | 2016-05-25 19:55:14 +0000 |
|---|---|---|
| committer | Jacob Schatz <jschatz@gitlab.com> | 2016-05-25 19:55:14 +0000 |
| commit | 42e55585bb9b45bd6e2bc5421db40416204dcf1e (patch) | |
| tree | 480700cbe0d8cf24615ef69d4a1e4fd359bce3ac /doc | |
| parent | 0cc060bc5fe3ba354979fa0be9e4cc2a2887d5f4 (diff) | |
| parent | 16817cc49f9dbe333b560b59f05235d8e9add0b6 (diff) | |
| download | gitlab-ce-42e55585bb9b45bd6e2bc5421db40416204dcf1e.tar.gz | |
Merge branch 'dz-improve-ui-guide' into 'master'
Write some thoughts to the UI guide
cc @skyruler
See merge request !4290
Diffstat (limited to 'doc')
| -rw-r--r-- | doc/development/ui_guide.md | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index a3e260a5f89..b4dcb748351 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -6,3 +6,31 @@ We created a page inside GitLab where you can check commonly used html and css e When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples you can use during GitLab development. + +## Design repository + +All design files are stored in the [gitlab-design](https://gitlab.com/gitlab-org/gitlab-design) +repository and maintained by GitLab UX designers. + +## Navigation + +GitLab's layout contains 2 sections: the left sidebar and the content. The left sidebar contains a static navigation menu. +This menu will be visible regardless of what page you visit. The left sidebar also contains the GitLab logo +and the current user's profile picture. The content section contains a header and the content itself. +The header describes the current GitLab page and what navigation is +available to user in this area. Depending on the area (project, group, profile setting) the header name and navigation may change. For example when user visits one of the +project pages the header will contain a project name and navigation for that project. When the user visits a group page it will contain a group name and navigation related to this group. + +### Adding new tab to header navigation + +We try to keep the amount of tabs in the header navigation between 5 and 10 so that it fits on a typical laptop screen. We also try not to confuse the user with too many options. Ideally each +tab should represent separate functionality. Everything related to the issue +tracker should be under the 'Issues' tab while everything related to the wiki should +be under 'Wiki' tab and so on and so forth. + +## Mobile screen size + +We want GitLab to work well on small mobile screens as well. Size limitations make it is impossible to fit everything on a mobile screen. In this case it is OK to hide +part of the UI for smaller resolutions in favor of a better user experience. +However core functionality like browsing files, creating issues, writing comments, should +be available on all resolutions.
\ No newline at end of file |