Update from obsidian - thinkpad
Affected files: .obsidian/workspace.json notes/thoughts/Design.md
This commit is contained in:
parent
0cc0627d82
commit
4b3f5a0603
2 changed files with 37 additions and 53 deletions
27
.obsidian/workspace.json
vendored
27
.obsidian/workspace.json
vendored
|
|
@ -18,21 +18,8 @@
|
||||||
},
|
},
|
||||||
"pinned": true
|
"pinned": true
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "fcbaa4342b37cadf",
|
|
||||||
"type": "leaf",
|
|
||||||
"state": {
|
|
||||||
"type": "markdown",
|
|
||||||
"state": {
|
|
||||||
"file": "games/persona-5-royal-launch-edition.md",
|
|
||||||
"mode": "source",
|
|
||||||
"source": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"currentTab": 1,
|
|
||||||
"stacked": true
|
"stacked": true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
@ -99,7 +86,7 @@
|
||||||
"state": {
|
"state": {
|
||||||
"type": "backlink",
|
"type": "backlink",
|
||||||
"state": {
|
"state": {
|
||||||
"file": "games/persona-5-royal-launch-edition.md",
|
"file": "projects/games.md",
|
||||||
"collapseAll": false,
|
"collapseAll": false,
|
||||||
"extraContext": false,
|
"extraContext": false,
|
||||||
"sortOrder": "alphabetical",
|
"sortOrder": "alphabetical",
|
||||||
|
|
@ -116,7 +103,7 @@
|
||||||
"state": {
|
"state": {
|
||||||
"type": "outgoing-link",
|
"type": "outgoing-link",
|
||||||
"state": {
|
"state": {
|
||||||
"file": "games/persona-5-royal-launch-edition.md",
|
"file": "projects/games.md",
|
||||||
"linksCollapsed": false,
|
"linksCollapsed": false,
|
||||||
"unlinkedCollapsed": true
|
"unlinkedCollapsed": true
|
||||||
}
|
}
|
||||||
|
|
@ -139,7 +126,7 @@
|
||||||
"state": {
|
"state": {
|
||||||
"type": "outline",
|
"type": "outline",
|
||||||
"state": {
|
"state": {
|
||||||
"file": "games/persona-5-royal-launch-edition.md"
|
"file": "projects/games.md"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -172,14 +159,14 @@
|
||||||
"dbfolder:Create a new database table": false
|
"dbfolder:Create a new database table": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"active": "fcbaa4342b37cadf",
|
"active": "fefb57826a3809d6",
|
||||||
"lastOpenFiles": [
|
"lastOpenFiles": [
|
||||||
"projects/games.md",
|
|
||||||
"games/persona-5.md",
|
|
||||||
"notes/thoughts/Design.md",
|
"notes/thoughts/Design.md",
|
||||||
|
"projects/games.md",
|
||||||
|
"games/persona-5-royal-launch-edition.md",
|
||||||
|
"games/persona-5.md",
|
||||||
"projects/personal-page-notes/Cool Websites.md",
|
"projects/personal-page-notes/Cool Websites.md",
|
||||||
"games/metroid-prime-remastered.md",
|
"games/metroid-prime-remastered.md",
|
||||||
"games/persona-5-royal-launch-edition.md",
|
|
||||||
"games/persona-5-royal.md",
|
"games/persona-5-royal.md",
|
||||||
"games/nier-automata.md",
|
"games/nier-automata.md",
|
||||||
"games/persona-4-golden--1.md",
|
"games/persona-4-golden--1.md",
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
---
|
|
||||||
developers:
|
|
||||||
---
|
|
||||||
|
|
||||||
Diseñar está completamente fuera de mi zona de confort, así que estudiar como hacer, y hacer el esfuerzo de planear como diseñar la página antes de tirarme de hocico a hacerlo ha sido una experiencia bastante satisfactoria
|
Diseñar está completamente fuera de mi zona de confort, así que estudiar como hacer, y hacer el esfuerzo de planear como diseñar la página antes de tirarme de hocico a hacerlo ha sido una experiencia bastante satisfactoria
|
||||||
|
|
||||||
Pensar que debo realizar, que quiero comunicar y como lo quiero comunicar ha enrutado el diseño y permitiendo que sea más facil
|
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
|
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
|
## Cómo enfatizar un elemento
|
||||||
|
|
||||||
|
|
@ -19,44 +15,45 @@ La manera de lograr esto depende del tema:
|
||||||
Contrastar el contorno del elemento con su entorno, para esto podemos:
|
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.
|
- 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 pequeñas y definidas indican mayor proximidad al fondo.
|
||||||
- sombras más grandes y difuminadas indican mayor lejanía del 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.
|
- 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.
|
- 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.
|
- 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
|
### Dark Theme
|
||||||
|
|
||||||
- Utilizar colores claros para denotar el grado de elevación:
|
- 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.
|
- 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.
|
- 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.
|
- _**NO**_ aplicar "light glows" en lugar de sombras oscuras para expresar elevación, porque no logran el mismo efecto.
|
||||||
|
|
||||||
### References of common elevations
|
### References of common elevations
|
||||||
|
|
||||||
|Component|Default elevation values (dp)|White overlay transparency|
|
| Component | Default elevation values (dp) | White overlay transparency |
|
||||||
|---|---|---|
|
| --------------------------------------------------------- | ----------------------------- | -------------------------- |
|
||||||
|Dialog|24|16%|
|
| Dialog | 24 | 16% |
|
||||||
|Modal bottom sheet Modal side sheet|16|15%|
|
| Modal bottom sheet Modal side sheet | 16 | 15% |
|
||||||
|Navigation drawer|16|15%|
|
| Navigation drawer | 16 | 15% |
|
||||||
|Floating action button (FAB - pressed)|12|14%|
|
| Floating action button (FAB - pressed) | 12 | 14% |
|
||||||
|Standard bottom sheet Standard side sheet|8|12%|
|
| Standard bottom sheet Standard side sheet | 8 | 12% |
|
||||||
|Bottom navigation bar|8|12%|
|
| Bottom navigation bar | 8 | 12% |
|
||||||
|Bottom app bar|8|12%|
|
| Bottom app bar | 8 | 12% |
|
||||||
|Menus and sub menus|8|12%|
|
| Menus and sub menus | 8 | 12% |
|
||||||
|Card (when picked up)|8|12%|
|
| Card (when picked up) | 8 | 12% |
|
||||||
|Contained button (pressed state)|8|12%|
|
| Contained button (pressed state) | 8 | 12% |
|
||||||
|Floating action button (FAB - resting elevation) Snackbar|6|11%|
|
| Floating action button (FAB - resting elevation) Snackbar | 6 | 11% |
|
||||||
|Top app bar (scrolled state)|4|9%|
|
| Top app bar (scrolled state) | 4 | 9% |
|
||||||
|Top app bar (resting elevation)|0 or 4|0% - 9%|
|
| Top app bar (resting elevation) | 0 or 4 | 0% - 9% |
|
||||||
|Refresh indicator Search bar (scrolled state)|3|8%|
|
| Refresh indicator Search bar (scrolled state) | 3 | 8% |
|
||||||
|Contained button (resting elevation)|2|7%|
|
| Contained button (resting elevation) | 2 | 7% |
|
||||||
|Search bar (resting elevation)|1|5%|
|
| Search bar (resting elevation) | 1 | 5% |
|
||||||
|Card (resting elevation)|1|5%|
|
| Card (resting elevation) | 1 | 5% |
|
||||||
|Switch|1|5%|
|
| Switch | 1 | 5% |
|
||||||
|Text button|0|0%|
|
| Text button | 0 | 0% |
|
||||||
|Standard side sheet|0|0%|
|
| Standard side sheet | 0 | 0% |
|
||||||
|
|
||||||
Reference:
|
Reference:
|
||||||
|
|
||||||
- [Material Design - UI](https://m2.material.io/design/environment/elevation.html)
|
- [Material Design - UI](https://m2.material.io/design/environment/elevation.html)
|
||||||
- [Material Design - Dark Theme](https://m2.material.io/design/color/dark-theme.html)
|
- [Material Design - Dark Theme](https://m2.material.io/design/color/dark-theme.html)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue