From 91db4a576e7f7035a0fa1912feee19198c1f9aaa Mon Sep 17 00:00:00 2001 From: aleidk Date: Sun, 27 Aug 2023 12:58:38 -0400 Subject: [PATCH] Update from obsidian - thinkpad Affected files: .obsidian/workspace.json notes/thoughts/Design.md projects/personal-page-notes/Landing Page.md --- .obsidian/workspace.json | 20 ++++--- notes/thoughts/Design.md | 55 +++++++++++++++++++- projects/personal-page-notes/Landing Page.md | 7 +-- 3 files changed, 67 insertions(+), 15 deletions(-) diff --git a/.obsidian/workspace.json b/.obsidian/workspace.json index 62b46a7..f9a62af 100644 --- a/.obsidian/workspace.json +++ b/.obsidian/workspace.json @@ -13,7 +13,7 @@ "state": { "type": "markdown", "state": { - "file": "games/Mega Man X2.md", + "file": "projects/personal-page-notes/Landing Page.md", "mode": "source", "source": false } @@ -23,11 +23,9 @@ "id": "cf53b9feaa2c17f6", "type": "leaf", "state": { - "type": "markdown", + "type": "kanban", "state": { - "file": "projects/personal-page.md", - "mode": "source", - "source": false + "file": "projects/personal-page.md" } } } @@ -97,7 +95,7 @@ "state": { "type": "backlink", "state": { - "file": "games/Mega Man X2.md", + "file": "projects/personal-page-notes/Landing Page.md", "collapseAll": false, "extraContext": false, "sortOrder": "alphabetical", @@ -114,7 +112,7 @@ "state": { "type": "outgoing-link", "state": { - "file": "games/Mega Man X2.md", + "file": "projects/personal-page-notes/Landing Page.md", "linksCollapsed": false, "unlinkedCollapsed": true } @@ -137,7 +135,7 @@ "state": { "type": "outline", "state": { - "file": "games/Mega Man X2.md" + "file": "projects/personal-page-notes/Landing Page.md" } } }, @@ -171,9 +169,10 @@ }, "active": "1528e2a394386e35", "lastOpenFiles": [ - "projects/personal-page-notes/Landing Page.md", - "games/Mega Man X2.md", "projects/personal-page.md", + "notes/thoughts/Design.md", + "games/Mega Man X2.md", + "projects/personal-page-notes/Landing Page.md", "projects/todos.md", "projects/todos-notes/Better Read later.md", "projects/todos-notes/Update tmux config.md", @@ -200,7 +199,6 @@ "notes/foo.md", "notes/thoughts/Depression.md", "projects/personal-page-notes/Cool Websites.md", - "notes/thoughts/Self Steam.md", "blog", "projects/personal-page-notes/Landing_Page.excalidraw", "projects/notes/Untitled", diff --git a/notes/thoughts/Design.md b/notes/thoughts/Design.md index 96984a9..068e6f6 100644 --- a/notes/thoughts/Design.md +++ b/notes/thoughts/Design.md @@ -2,4 +2,57 @@ Diseñar está completamente fuera de mi zona de confort, así que estudiar como Pensar que debo realizar, que quiero comunicar y como lo quiero comunicar ha enrutado el diseño y permitiendo que sea más facil -el feedback tambien ha sido satisfactorio, porque me ha hecho entender mejor que debo hacer y que no, tambien algúnos comentarios han contradecido completamente lo que yo creería que sería mejor, lo cuál ha enfocado mejor el diseño final en lo que realmente debe (y como debe) ser la página \ No newline at end of file +el feedback tambien ha sido satisfactorio, porque me ha hecho entender mejor que debo hacer y que no, tambien algúnos comentarios han contradecido completamente lo que yo creería que sería mejor, lo cuál ha enfocado mejor el diseño final en lo que realmente debe (y como debe) ser la página + +## Cómo enfatizar un elemento + +Para hacer que un elemento destaque del fondo, debemos ocupar _**Elevación**_,esto hará que el elemento parezca estar más cerca de la pantalla, haciendo que resalte de lo demás y atrapando la atención del usuario. + +La manera de lograr esto depende del tema: + +### Light Theme + +Contrastar el contorno del elemento con su entorno, para esto podemos: + +- Utilizar sombras, esto destaca el contorno de un elemento y su grado de elevación. + - sombras más pequeñas y definidas indican mayor proximidad al fondo. + - sombras más grandes y difuminadas indican mayor lejanía del fondo. +- Distintos colores diferencian elementos pero no proveen su grado de elevación. +- Opacidad muestra los contornos de los elementos y su solapamiento, pero no su grado de elevación. +- Podemos oscurecer el fondo para destacar un elemento sobre todo lo demás, esto ofrece una gran, pero no especifica cantidad de elevación. + +### Dark Theme + +- Utilizar colores claros para denotar el grado de elevación: + - Utilizar colores directamente. mientras más claro sea el color, más elevado estará un componente. + - Aplicar un _"overlay"_ de un color claro, con distintos grados de transparencia. Mientras menos transparente más elevado estará el componente. No aplicar este esto a los colores primarios o similares. +- _**NO**_ aplicar "light glows" en lugar de sombras oscuras para expresar elevación, porque no logran el mismo efecto. + +### References of common elevations + +|Component|Default elevation values (dp)|White overlay transparency| +|---|---|---| +|Dialog|24|16%| +|Modal bottom sheet Modal side sheet|16|15%| +|Navigation drawer|16|15%| +|Floating action button (FAB - pressed)|12|14%| +|Standard bottom sheet Standard side sheet|8|12%| +|Bottom navigation bar|8|12%| +|Bottom app bar|8|12%| +|Menus and sub menus|8|12%| +|Card (when picked up)|8|12%| +|Contained button (pressed state)|8|12%| +|Floating action button (FAB - resting elevation) Snackbar|6|11%| +|Top app bar (scrolled state)|4|9%| +|Top app bar (resting elevation)|0 or 4|0% - 9%| +|Refresh indicator Search bar (scrolled state)|3|8%| +|Contained button (resting elevation)|2|7%| +|Search bar (resting elevation)|1|5%| +|Card (resting elevation)|1|5%| +|Switch|1|5%| +|Text button|0|0%| +|Standard side sheet|0|0%| + +Reference: +- [Material Design - UI](https://m2.material.io/design/environment/elevation.html) +- [Material Design - Dark Theme](https://m2.material.io/design/color/dark-theme.html) \ No newline at end of file diff --git a/projects/personal-page-notes/Landing Page.md b/projects/personal-page-notes/Landing Page.md index be877a1..6f4b9a9 100644 --- a/projects/personal-page-notes/Landing Page.md +++ b/projects/personal-page-notes/Landing Page.md @@ -2,7 +2,8 @@ Design: [Excalidraw](https://excalidraw.com/#json=XhWOcx3u_ZpshX4Bt3NXv,QjgZ9JYS Todo: - [ ] Improve card style: - - [ ] Change colors - - [ ] Add dropshadow + - [x] Change colors + - [x] Add dropshadow -> doesn't apply to dark themes - [ ] make them bigger - - [ ] This is the main content, should be more atractive \ No newline at end of file + - [ ] This is the main content, should be more atractive + - [ ] Fix list of links, they doesn't display well in long titles \ No newline at end of file