summaryrefslogtreecommitdiff
path: root/doc/ui_guidelines.md
diff options
context:
space:
mode:
authorKieran Cawthray <kieranc@gmail.com>2021-08-15 17:50:56 +0200
committerKieran Cawthray <kieranc@gmail.com>2021-08-15 17:50:56 +0200
commit30b32e4c8a750e6434f09a2eaa7cebb5d11a524a (patch)
tree8b010fe81ce8c11d8eab5efcf20822fdac418f61 /doc/ui_guidelines.md
parent9851ed33d84aa242dfb98c2c3714a20ddbc53f45 (diff)
parentee44b6ff4998d6f4d0672c05c1f65c0a9692dc0d (diff)
Merge remote-tracking branch 'upstream/develop' into pinetimestyle-colorpicker
Diffstat (limited to 'doc/ui_guidelines.md')
-rw-r--r--doc/ui_guidelines.md16
1 files changed, 16 insertions, 0 deletions
diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md
new file mode 100644
index 00000000..c267b79b
--- /dev/null
+++ b/doc/ui_guidelines.md
@@ -0,0 +1,16 @@
+# 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
+
+![example layouts](./ui/example.png)