diff options
author | Hazel <hazel@gitlab.com> | 2017-08-09 09:29:38 +0300 |
---|---|---|
committer | tauriedavis <taurie@gitlab.com> | 2017-09-22 19:12:51 +0300 |
commit | 05ddd46c8646a82647a525933c59cf80887e8e4a (patch) | |
tree | cda47b13c470214b01c6ebcb375c31ac9d902488 /doc/development/ux_guide | |
parent | ff9a2a8b51de385b4383bf25c5ece5479738f6c4 (diff) |
Add size part to the guideline
Diffstat (limited to 'doc/development/ux_guide')
-rw-r--r-- | doc/development/ux_guide/illustrations.md | 31 | ||||
-rwxr-xr-x | doc/development/ux_guide/img/illustration-size-large-horizontal.png | bin | 0 -> 55272 bytes | |||
-rw-r--r-- | doc/development/ux_guide/img/illustration-size-large-vertical.png | bin | 0 -> 59217 bytes | |||
-rwxr-xr-x | doc/development/ux_guide/img/illustration-size-medium.png | bin | 0 -> 20994 bytes | |||
-rw-r--r-- | doc/development/ux_guide/img/illustration-size-small.png | bin | 0 -> 43536 bytes |
5 files changed, 30 insertions, 1 deletions
diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index b9c98277120..818076900a6 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -31,13 +31,38 @@ The illustrations should always align with topics and goals in specific context. | -------- | -------- | | <img src="img/illustrations-caps-do.png" width= 133px alt="Do: caps and corner" /> | <img src="img/illustrations-caps-don't.png" width= 133px alt="Don't: caps and corner"/> | - #### Radius - Standard corner radius: **10px** - Depending on the situation, corner radius can be changed to **5px**. For example, when the illustration size is small, an illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. <img src="img/illustrations-border-radius.png" width= 464px alt="Example for border radius"/> +#### Size +Depends on the situation, the illustration size can be the 3 types below: + +**Large** +* Use case: Empty states, error pages(e.g. 404, 403) +* For vertical layout, the illustration should not larger than **430*300 px**. +* For horizontal layout, the illustration should not larger than **430*380 px** + +| Vertocal layout | Horizontal layout | +| --------------- | ----------------- | +| <img src="img/illustration-size-large-vertical.png" /> | <img src="img/illustration-size-large-horizontal.png" /> + +**Medium** +* Use case: Banner +* The illustration should not larger than **240*160 px** +* The illustration should keep simple and clear. We recommend not including too many elements in the medium size illustration. + +<img src="img/illustration-size-medium.png" width=983px /> + +**Small** +* Use case: Graphics for explanatory text, graphics for status +* The illustration should not larger than **160*90 px** +* The illustration should keep simple and clear. We recommend not including too many elements in the small size illustration. + +<img src="img/illustration-size-small.png" width=983px /> + #### Colors palette For consistency, we recommend choosing colors from our color palette. @@ -47,6 +72,10 @@ For consistency, we recommend choosing colors from our color palette. | <img src="img/illustrations-color-orange.png" width= 160px alt="Orange" /> | <img src="img/illustrations-color-purple.png" width= 160px alt="Purple" /> | <img src="img/illustrations-color-grey.png" width= 160px alt="Grey" /> | | #FC6D26 | #6B4FBB | #EEEEEE | +#### Don't +- Don't include the typography in the illustration. +- Don't include tanuki in the illustration. If necessary, we recommend having tanuki monochromatic. + --- | Orange | Purple | diff --git a/doc/development/ux_guide/img/illustration-size-large-horizontal.png b/doc/development/ux_guide/img/illustration-size-large-horizontal.png Binary files differnew file mode 100755 index 00000000000..8aa835adccc --- /dev/null +++ b/doc/development/ux_guide/img/illustration-size-large-horizontal.png diff --git a/doc/development/ux_guide/img/illustration-size-large-vertical.png b/doc/development/ux_guide/img/illustration-size-large-vertical.png Binary files differnew file mode 100644 index 00000000000..813b6a065e5 --- /dev/null +++ b/doc/development/ux_guide/img/illustration-size-large-vertical.png diff --git a/doc/development/ux_guide/img/illustration-size-medium.png b/doc/development/ux_guide/img/illustration-size-medium.png Binary files differnew file mode 100755 index 00000000000..55cfe1dcb91 --- /dev/null +++ b/doc/development/ux_guide/img/illustration-size-medium.png diff --git a/doc/development/ux_guide/img/illustration-size-small.png b/doc/development/ux_guide/img/illustration-size-small.png Binary files differnew file mode 100644 index 00000000000..0124f58f48e --- /dev/null +++ b/doc/development/ux_guide/img/illustration-size-small.png |