From e0d01411d7124abc5ad099360057ba683287c428 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 12:47:12 +0300 Subject: Ui update --- doc/ui_guidelines.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 doc/ui_guidelines.md (limited to 'doc/ui_guidelines.md') diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md new file mode 100644 index 00000000..9b05ce64 --- /dev/null +++ b/doc/ui_guidelines.md @@ -0,0 +1,14 @@ +# UI design guidelines + +- Align objects all the way to the edge or corner +- Buttons should generally be at least 50px high +- Buttons should generally be on the bottom edge +- Make interactable objects **big** +- Recommendations for inner padding, aka distance between buttons: + - When aligning 4 objects: 4px, e.g. Settings + - When aligning 3 objects: 6px, e.g. App list + - When aligning 2 objects: 10px, e.g. Quick settings +- When using a page indicator, leave 8px for it on the right side + - It is acceptable to leave 8px on the left side as well to center the content +- Top bar takes at least 20px + padding + - Top bar right icons move 8px to the left when using a page indicator -- cgit v1.2.3 From fc6458a35c2260fe152fe84bcd06174cec6d3b92 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 17:21:03 +0300 Subject: Add image with example layouts --- doc/ui/example.png | Bin 0 -> 10642 bytes doc/ui_guidelines.md | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 doc/ui/example.png (limited to 'doc/ui_guidelines.md') diff --git a/doc/ui/example.png b/doc/ui/example.png new file mode 100644 index 00000000..2f6cb789 Binary files /dev/null and b/doc/ui/example.png differ diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md index 9b05ce64..c267b79b 100644 --- a/doc/ui_guidelines.md +++ b/doc/ui_guidelines.md @@ -12,3 +12,5 @@ - It is acceptable to leave 8px on the left side as well to center the content - Top bar takes at least 20px + padding - Top bar right icons move 8px to the left when using a page indicator + +![example layouts](./ui/example.png) -- cgit v1.2.3