diff options
| author | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-05-25 20:44:02 +0200 |
|---|---|---|
| committer | Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com> | 2016-05-25 20:44:02 +0200 |
| commit | f7da994cfdfa3bf7b9c96b2f84066c5bd77b8b43 (patch) | |
| tree | 38b6f6bd8332139fca4ab91a2758c8f086d2ec9c /doc/development/ui_guide.md | |
| parent | baa9c66057fccefce05b9f01009942fb079fee22 (diff) | |
| download | gitlab-ce-f7da994cfdfa3bf7b9c96b2f84066c5bd77b8b43.tar.gz | |
Write some thoughts to the UI guide
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Diffstat (limited to 'doc/development/ui_guide.md')
| -rw-r--r-- | doc/development/ui_guide.md | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index a3e260a5f89..3aef364f0ec 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -6,3 +6,36 @@ 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 layout contains of 2 sections: left sidebar and content. Left sidebar +contains static navigation menu no matter what page you visit. It also has GitLab logo +and current user profile picture. Content section contains of header and content itself. +Header describes what area of GitLab user see right now and what navigation is +available to user in this area. Depends on area (project, group, profile setting) +header name and navigation will change. For example when user visits one of the +project pages the header will contain a project name and navigation for project +pages. When visit group page it will contain a group name and navigation related +to this group. + +### Adding new tab to header navigation + +We try to keep amount of tabs in header navigation between 5 and 10 so it fits on +a laptop screens and doest not confure user with too many options. Ideally each +tab should represent some separate functionality. So everything related to issue +tracker should be under 'Issues' tab while everything related to wiki should +be under 'Wiki' tab etc. + +## Mobile screen size + +We want GitLab work on small mobile screens too. Because of size limitations +its impossible to fit everything on phone screen. Its ok in this case to hide +part of the UI on smaller resolutions in favor of better user experience. +However core functionality like browsing file, creating issue, comment, etc should +be available on all resolutions. |