summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJacob Schatz <jschatz@gitlab.com>2016-05-25 19:55:14 +0000
committerJacob Schatz <jschatz@gitlab.com>2016-05-25 19:55:14 +0000
commit42e55585bb9b45bd6e2bc5421db40416204dcf1e (patch)
tree480700cbe0d8cf24615ef69d4a1e4fd359bce3ac
parent0cc060bc5fe3ba354979fa0be9e4cc2a2887d5f4 (diff)
parent16817cc49f9dbe333b560b59f05235d8e9add0b6 (diff)
downloadgitlab-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
-rw-r--r--doc/development/ui_guide.md28
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