From f7da994cfdfa3bf7b9c96b2f84066c5bd77b8b43 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 25 May 2016 20:44:02 +0200 Subject: Write some thoughts to the UI guide Signed-off-by: Dmitriy Zaporozhets --- doc/development/ui_guide.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) (limited to 'doc/development/ui_guide.md') 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. -- cgit v1.2.1 From 16817cc49f9dbe333b560b59f05235d8e9add0b6 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Wed, 25 May 2016 14:57:15 -0400 Subject: Fix the english. --- doc/development/ui_guide.md | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) (limited to 'doc/development/ui_guide.md') diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index 3aef364f0ec..b4dcb748351 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -14,28 +14,23 @@ 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. +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 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. +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 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. +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 -- cgit v1.2.1 From 33c499441a91c068c4b3e73748b50a2369450a5a Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 2 Jun 2016 22:43:02 +0300 Subject: Add icons and buttons to UI guide Signed-off-by: Dmitriy Zaporozhets --- doc/development/ui_guide.md | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'doc/development/ui_guide.md') diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index b4dcb748351..ecaa306756b 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -33,4 +33,24 @@ be under 'Wiki' tab and so on and so forth. 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 +be available on all resolutions. + +## Icons + +* `trash` icon for button or link that does destructive action like removing +information from database or file system +* `x` icon for closing/hiding UI element. For example close modal window +* `pencil` icon for edit button or link +* `eye` icon for subscribe action +* `rss` for rss/atom feed +* `plus` for link or dropdown that lead to page wher eyou create new object (For example new issue page) + + +## Buttons + +* Button should contain icon or text. Exceptions should be approved by UX designer. +* Use gray button on white background or white button on gray background. +* Use red button for destructive actions (not revertable). For example removing issue. +* Use green or blue button for primary action. Primary button should be only one. +Do not use both green and blue button in one form. + -- cgit v1.2.1 From 814b26cfc3829a683ce565cbbfc8525dd768299d Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Thu, 2 Jun 2016 23:04:08 +0300 Subject: Fix typo Signed-off-by: Dmitriy Zaporozhets --- doc/development/ui_guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'doc/development/ui_guide.md') diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index ecaa306756b..23760a14b39 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -43,7 +43,7 @@ information from database or file system * `pencil` icon for edit button or link * `eye` icon for subscribe action * `rss` for rss/atom feed -* `plus` for link or dropdown that lead to page wher eyou create new object (For example new issue page) +* `plus` for link or dropdown that lead to page where you create new object (For example new issue page) ## Buttons -- cgit v1.2.1 From 366ad9ff72b44df384bffe562ac66f85aff24c65 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Wed, 8 Jun 2016 17:11:43 +0300 Subject: Reject idea of using white/gray button depends on bg color Signed-off-by: Dmitriy Zaporozhets --- doc/development/ui_guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'doc/development/ui_guide.md') diff --git a/doc/development/ui_guide.md b/doc/development/ui_guide.md index 23760a14b39..5893b7c219e 100644 --- a/doc/development/ui_guide.md +++ b/doc/development/ui_guide.md @@ -49,8 +49,8 @@ information from database or file system ## Buttons * Button should contain icon or text. Exceptions should be approved by UX designer. -* Use gray button on white background or white button on gray background. * Use red button for destructive actions (not revertable). For example removing issue. * Use green or blue button for primary action. Primary button should be only one. Do not use both green and blue button in one form. +* For all other cases use default white button -- cgit v1.2.1