diff options
author | Hazel <hazel@gitlab.com> | 2017-08-02 07:43:48 +0300 |
---|---|---|
committer | tauriedavis <taurie@gitlab.com> | 2017-09-22 19:12:51 +0300 |
commit | ff9a2a8b51de385b4383bf25c5ece5479738f6c4 (patch) | |
tree | ceea55c7e178f432e42562bf431f48d6dadecc62 /doc/development/ux_guide | |
parent | c93131d3d03aa19c9bb6738b170dda48744fb211 (diff) |
Illustration guidelines - Fix grammar error and update images.
Diffstat (limited to 'doc/development/ux_guide')
-rw-r--r-- | doc/development/ux_guide/illustrations.md | 24 | ||||
-rwxr-xr-x | doc/development/ux_guide/img/illustrations-palette-oragne.png | bin | 10419 -> 10439 bytes | |||
-rwxr-xr-x | doc/development/ux_guide/img/illustrations-palette-purple.png | bin | 9924 -> 10002 bytes |
3 files changed, 11 insertions, 13 deletions
diff --git a/doc/development/ux_guide/illustrations.md b/doc/development/ux_guide/illustrations.md index 7df8e918e60..b9c98277120 100644 --- a/doc/development/ux_guide/illustrations.md +++ b/doc/development/ux_guide/illustrations.md @@ -8,39 +8,39 @@ The illustrations should always align with topics and goals in specific context. - For clarity, we use simple and specific elements to create our illustrations. #### Be optimistic. -- We are an open-minded, optimistic, and friendly team. We should reflect those values on our illustrations to connect with our brand experience. +- We are an open-minded, optimistic, and friendly team. We should reflect those values in our illustrations to connect with our brand experience. #### Be gentle. -- Our illustrations assist users understand context and guide users to the right direction. Illustrations are supportive, so it should be obvious but not aggressive. +- Our illustrations assist users in understanding context and guide users in the right direction. Illustrations are supportive, so they should be obvious but not aggressive. ## Style #### Shapes -- All illustrations are geometric rather than organic. -- The illustrations are made by circles, rectangles, squares, and triangles. +- All illustrations are geometric rather than organic. +- The illustrations are made by circles, rectangles, squares, and triangles. <img src="img/illustrations-geometric.png" width=224px alt="Example for geometric" /> #### Stroke - Standard border thickness: **4px** -- Depends on different situations, border thickness can be changed to **3px**. For example, when the illustration size is small, the illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. +- Depending on the situation, border thickness can be changed to **3px**. For example, when the illustration size is small, an illustration with 4px border thickness would look tight. In this case, the border thickness can be changed to 3px. - We use **rounded caps** and **rounded corner**. | Do | Don't | -| -------- | -------- | +| -------- | -------- | | <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** -- Depends on different situations, corner radius can be changed to **5px**. For example, when the illustration size is small, the illustration with 10px corner radius would be over-rounded. In this case, the corner radius can be changed to 5px. +- 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"/> +<img src="img/illustrations-border-radius.png" width= 464px alt="Example for border radius"/> #### Colors palette -For consistency, we suggest to pick the colors from the color palette. +For consistency, we recommend choosing colors from our color palette. | Orange | Purple | Grey | | -------- | -------- | -------- | @@ -50,7 +50,5 @@ For consistency, we suggest to pick the colors from the color palette. --- | Orange | Purple | -| -------- | -------- | -| <img src="img/illustrations-palette-oragne.png" width= 160px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 160px alt="Palette - Purple" /> | - - +| -------- | -------- | +| <img src="img/illustrations-palette-oragne.png" width= 160px alt="Palette - Orange" /> | <img src="img/illustrations-palette-purple.png" width= 160px alt="Palette - Purple" /> | diff --git a/doc/development/ux_guide/img/illustrations-palette-oragne.png b/doc/development/ux_guide/img/illustrations-palette-oragne.png Binary files differindex 58df4459c24..15f35912646 100755 --- a/doc/development/ux_guide/img/illustrations-palette-oragne.png +++ b/doc/development/ux_guide/img/illustrations-palette-oragne.png diff --git a/doc/development/ux_guide/img/illustrations-palette-purple.png b/doc/development/ux_guide/img/illustrations-palette-purple.png Binary files differindex da5c1e245c9..e0f5839705e 100755 --- a/doc/development/ux_guide/img/illustrations-palette-purple.png +++ b/doc/development/ux_guide/img/illustrations-palette-purple.png |