chore: add files from master-wiki repo

_master_wiki/03. Resources/Design/Content Creators.md

@@ -0,0 +1,13 @@
+---
+created: 2024-04-14 12:43
+updated: 2024-04-15 20:56
+---
+- [Carmen Ansio](https://www.youtube.com/@CarmenAnsio)
+- Marina Aísa
+- Sarah Drasner
+- [Kevin Powell](https://www.youtube.com/@KevinPowell)
+- Miriam Suzanne
+- [Manz Dev](https://www.youtube.com/@ManzDev)
+- [Una Kravets](https://www.youtube.com/@UnaKravets/videos)
+- [Serudda](https://www.youtube.com/@serudda/videos)
+- Josh Comeau

_master_wiki/03. Resources/Design/Design.md

@@ -0,0 +1,66 @@
+---
+created: 2023-08-17 10:05
+updated: 2024-03-12 13:49
+---
+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
+
+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)
+
+
+![Layouts](Layouts.md)

_master_wiki/03. Resources/Design/Layouts.md

@@ -0,0 +1,6 @@
+---
+created: 2024-02-29 18:36
+updated: 2024-03-12 13:49
+---
+## Layouts
+- [How to Properly Layout A Website (For Beginners)](https://www.youtube.com/watch?v=3C_22eBWpjg&t=604s)

_master_wiki/03. Resources/Design/Story Telling.md

@@ -0,0 +1,147 @@
+---
+created: 2024-04-03 12:11
+updated: 2024-04-03 13:52
+---
+
+# Story Telling
+
+## El Arco Narrativo
+
+- Ir de un punto álgido a otro bajo y volver a subir es lo que have que una historia de la satisfactoria sensación de estar completa
+- Una historia comienza con un _"llamado a la acción"_, el verbo mueve al sujeto.
+
+## El Viaje Del Héroe
+
+Se puede utilizar el patrón del _"viaje del héroe"_ en el diseño para guiar a los usuarios:
+
+- Un incidente iniciante o una problemática que incita al "héroe" a moverse de donde está
+- El "llamado a la aventura" es donde se incita al usuario a algo
+- El "cruce del umbral", en donde el usuario entra en el otro sector (posiblemente hostil) en donde tendrá que pasar la "prueba de fuego"
+- El camio de vuelta, donde regresamos al origen pero co algo nuevo ("regreso con el elixir")
+
+## Story Boards
+
+Los story boards son herramientas para planificar la acción transformadora de una historia.
+
+Contar una historia en 6 fotogramas es una buena manera de contar los elementos esenciales de la forma narrativa
+
+## Ingredientes De Una Historia
+
+- **Arco**: la acción tiene un principio, un nudo y un final.
+- **Cambio**: la acción transforma a un personaje o una situación.
+- **Tema**: la acción se construye a partir de detalles concretos y relevantes.
+- **Plausibilidad**: la acción es verosímil y sigue sus propias reglas.
+
+## Regla De 3
+
+Contar una historia en 3 pasos es una herramienta poderosa:
+
+- 3 pasos da la sensación de facilidad y rapidez, aunque estos 3 pasos engloben más en secreto, agrupar tareas suele estar bien mientras no genere confusión
+- Si se utilize de modo que el ultimo elemento es inesperado, puede sorprender y generar una sensación de satisfacción
+- Ayuda a la memorización de elementos clave, sobre todo combinado con el item anterior
+
+Esta regla se puede extender a 4 pasos, perdiendo cierta efectividad. Más de
+4 pasos no suele set rentable, ya que da una sensación de set demasiado largo y "latero"
+
+## Conexiones Forzadas
+
+Aplicar conceptos e ideas, que en un principio pueden parecer contrarias o inconexas puede llevar a nuevas ideas y diseños interesantes, se puede emplear un concepto (Extraterrestre, colosal, vulgar, zoologico, etc) a un elemento a diseñar y ver que ocurre.
+
+## Emoción
+
+El diseño destinado a susitar emociones require pensar en como los usuarios anticiparán una experiencia y cómo la recordarán después.
+
+>[!quote]
+>  "Las emociones son una palanca para la acción."
+>
+>  "Los diseñadores necesitan adoptar estrategias para acceder a los contextos emocionales de los productos que tienen que diseñar, pensando en la gente que los usará."
+
+![](IMG_20230722_120651_229.jpg)
+
+![](IMG_20230722_121658_512.jpg)
+
+## Economía De la Experiencia
+
+Durante una experiencia, los usuarios generan significados y asociaciones que adquieren una mayor importancia que la del propio acontecimiento
+
+Una experiencia es algo más de lo que se consume en el memento. Integra al consumidor en una representación teatral, creando un recuerdo perdurable y un lazo emocional.
+
+![](IMG_20230722_123447_567.jpg)
+
+Las experiencias se crean cuando los diseñadores deplazan el **foco** de los objetos a las acciones:
+
+> [!info]
+> Esto no necesariamente significa que el usuario realice algo, sino mover el principal elemento a una acción:
+> - Auto -> conducir
+> - Restaurant -> Cenar
+> - Universidad -> Aprender
+
+## El Viaje Emocional
+
+Si una trama consiste en más de una series de sucesos que conforman una historia, un viaje emocional consiste en los sentimientos que esos sucesos despiertan
+
+![](Pasted%20image%2020240403125253.png)
+
+![](IMG_20230722_125137_501.jpg)
+
+La forma en que concluye una experiencia afecta el juicio que los usuarios emitirán sobre el acontecimiento completo.
+
+Prestar especial atención a la forma en la que concluyen las acciones, ofreciendo un extra de carga emocional para recompensar a los usuarios por su tiempo y esfuerzo.
+
+## Cocreación
+
+Los diseñadores trabajan junto a los usuarios, los cuales son considerados "un experto en el tema tratado".
+
+## Técnicas Útiles
+
+### Mapa De Palabras
+
+Cada participante escribe un tema en el centro de una hoja, mediante un proceso de libre asociación, los participantes dibujan o escriben conceptos asociados para crear nodos de ideas
+
+![](Pasted%20image%2020240403133913.png)
+
+### Fuerzas Positivas Y Negativas
+
+Crear una matriz de conceptos + y -
+
+|                                        | Pros                                   | Cons                                                |
+| -------------------------------------- | -------------------------------------- | --------------------------------------------------- |
+| Cómo hacer que más gente tome la micro | - ahorrar dinero<br>- Leer en el viaje | - Tiempo de viaje<br>- No hay lugar para bicicletas |
+
+> [!question]
+> Tendrá que ver con [[FODA]]??
+
+### Asociación
+
+Se le asignan emociones o personalidad a una idea
+
+![](Pasted%20image%2020240403134732.png)
+
+### Estudio De Personaje
+
+Crear una planilla para un producto como si fuera una persona:
+
+- Que edad tiene?
+- En que trabaja?
+- Cómo vive?
+- Cómo viste?
+- Donde pasará sus vacaciones?
+
+Se puede partir tratando de imaginar al usuario que va dirigido el producto y simular su estilo de vida
+
+Ej:
+
+Perfile #1, Altavoz inalámbrico:
+
+- Edad: 25
+- Ocupación: Programador
+- Vivienda: Depto. urbano
+- Transporte: Bicicleta
+- Ropa: Jeans y vintage
+
+## Color Y Las Emociones
+
+## References
+
+- El diseño como STORYTELLING - Ellen Lupton
+- [Design notes on pdf](Design_Cheatsheet.pdf)