logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 7. SASS
clase:daw:diw:diseno-web-introduccion

Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

clase:daw:diw:diseno-web-introduccion [2026/10/23 22:55] – Reorganización del módulo: página nueva claudeclase:daw:diw:diseno-web-introduccion [2026/10/23 23:06] (actual) – Medios movidos de 1eval/2eval a clase:daw:diw claude
Línea 9: Línea 9:
 Veamos la encuesta anual de frameworks más usados: [[https://2024.stateofcss.com/en-US/tools/#css_frameworks|State of CSS 2024: Libraries & Tools]]. Veamos la encuesta anual de frameworks más usados: [[https://2024.stateofcss.com/en-US/tools/#css_frameworks|State of CSS 2024: Libraries & Tools]].
  
-{{:clase:daw:diw:1eval:css-frameworks.png?700|}}+{{:clase:daw:diw:css-frameworks.png?700|}}
  
  
-{{:clase:daw:diw:1eval:css-preprocesors.png?700|}}+{{:clase:daw:diw:css-preprocesors.png?700|}}
 ===== Normas y estilos de diseño ===== ===== Normas y estilos de diseño =====
  
Línea 18: Línea 18:
   * Haz que las cosas que no están relacionadas estén muy separadas entre si. Es decir que haya mucho espacio en blanco. Y luego ya veremos si los juntas un poco.   * Haz que las cosas que no están relacionadas estén muy separadas entre si. Es decir que haya mucho espacio en blanco. Y luego ya veremos si los juntas un poco.
  
-|  {{:clase:daw:diw:1eval:sin_espacio.png|}}  |  {{:clase:daw:diw:1eval:con_espacio.png|}}  |+|  {{:clase:daw:diw:sin_espacio.png|}}  |  {{:clase:daw:diw:con_espacio.png|}}  |
  
  
Línea 25: Línea 25:
  
  
-|  {{:clase:daw:diw:1eval:lineas.png|}}  |  {{:clase:daw:diw:1eval:lineas_visibles.png|}}  |+|  {{:clase:daw:diw:lineas.png|}}  |  {{:clase:daw:diw:lineas_visibles.png|}}  |
  
  
Línea 55: Línea 55:
   * [[https://learnui.design/blog/why-beginning-designers-dont-need-grids-type-scales-color-theory.html|Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”)]]   * [[https://learnui.design/blog/why-beginning-designers-dont-need-grids-type-scales-color-theory.html|Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”)]]
   * [[https://digitalsynopsis.com/design/useful-ui-ux-design-tips/|Short, Useful Design Tips For UI/UX Designers]]: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior.   * [[https://digitalsynopsis.com/design/useful-ui-ux-design-tips/|Short, Useful Design Tips For UI/UX Designers]]: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior.
-  * {{ :clase:daw:diw:1eval:the_7_most_common_ui_mistakes.pdf |The 7 most common UI mistakes}}: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior. [[https://ckarchive.com/b/v8u3hrhxdoqnx|ref]]+  * {{ :clase:daw:diw:the_7_most_common_ui_mistakes.pdf |The 7 most common UI mistakes}}: Ejemplos sencillos de como mejorar el diseño. Del creador del libro anterior. [[https://ckarchive.com/b/v8u3hrhxdoqnx|ref]]
   * [[https://learnui.design/blog/color-in-ui-design-a-practical-framework.html|Color in UI Design: A (Practical) Framework]]   * [[https://learnui.design/blog/color-in-ui-design-a-practical-framework.html|Color in UI Design: A (Practical) Framework]]
-  * {{ :clase:daw:diw:1eval:color_cheatsheet_v1-3.pdf |UI Color Cheatsheet.pdf}}+  * {{ :clase:daw:diw:color_cheatsheet_v1-3.pdf |UI Color Cheatsheet.pdf}}
   * [[https://www.indiehackers.com/post/send-me-your-landing-page-and-i-will-give-you-ui-ux-feedback-79752ca8f6|Send me your Landing Page and I will give you UI/UX Feedback]]: La gente envía su página web y un diseñador cuenta como mejorar el diseño.    * [[https://www.indiehackers.com/post/send-me-your-landing-page-and-i-will-give-you-ui-ux-feedback-79752ca8f6|Send me your Landing Page and I will give you UI/UX Feedback]]: La gente envía su página web y un diseñador cuenta como mejorar el diseño. 
   * [[https://twitter.com/erikdkennedy/status/1328771593934290944|50+ practical UI/UX design tips (1 each weekday)]]   * [[https://twitter.com/erikdkennedy/status/1328771593934290944|50+ practical UI/UX design tips (1 each weekday)]]
Línea 65: Línea 65:
  
   * Usabilidad en base a los estilos de los iconos:   * Usabilidad en base a los estilos de los iconos:
-    * {{ :clase:daw:diw:1eval:filled-in_vs._outline_icons_the_impact_of_icon_style_on_usability..pdf |Filled-in vs. Outline icons: The impact of icon style on usability}}+    * {{ :clase:daw:diw:filled-in_vs._outline_icons_the_impact_of_icon_style_on_usability..pdf |Filled-in vs. Outline icons: The impact of icon style on usability}}
     * [[https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/|Solid Vs. Outline Icons: Which Are Faster to Recognize?]]     * [[https://uxmovement.com/mobile/solid-vs-outline-icons-which-are-faster-to-recognize/|Solid Vs. Outline Icons: Which Are Faster to Recognize?]]
     * [[https://www.krishaweb.com/outline-icons-vs-solid-icons|Outline Icons vs. Solid Icons: Which are Faster to Recognize and When?]]     * [[https://www.krishaweb.com/outline-icons-vs-solid-icons|Outline Icons vs. Solid Icons: Which are Faster to Recognize and When?]]
Línea 71: Línea 71:
  
 ===== Colores ===== ===== Colores =====
-Los colores de pueden definir en CSS con formato RGB o HSL. Mas información de HSL en {{ :clase:daw:diw:1eval:color_hsl.pdf |Descripción del modelo de color HSL (Hue, Saturation, Ligthness)}}. Y aquí una herramienta para transformar de RGB a HSL: [[https://www.w3schools.com/colors/colors_converter.asp| Color Converter]]+Los colores de pueden definir en CSS con formato RGB o HSL. Mas información de HSL en {{ :clase:daw:diw:color_hsl.pdf |Descripción del modelo de color HSL (Hue, Saturation, Ligthness)}}. Y aquí una herramienta para transformar de RGB a HSL: [[https://www.w3schools.com/colors/colors_converter.asp| Color Converter]]
  
 Necesitas muchos colores: Necesitas muchos colores:
  
-{{:clase:daw:diw:1eval:paleta_de_colores.png|}}+{{:clase:daw:diw:paleta_de_colores.png|}}
  
 Pero no para hacer cosas así: Pero no para hacer cosas así:
  
-{{:clase:daw:diw:1eval:colores_mal.png|}}+{{:clase:daw:diw:colores_mal.png|}}
  
  
 sino para hacer cosas así: sino para hacer cosas así:
  
-{{:clase:daw:diw:1eval:colores_bien.png|}}+{{:clase:daw:diw:colores_bien.png|}}
  
 La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo. La gama de blancos y grises la usas para hacer las cosas muy claras u oscuras. La gama del color principal obviamente la usas para casi todo, mientras que la gama del color alternativo la usas para destacar algo. Por último, los colores rojo, verde, amarillo, etc, son para cosas concretas que necesitan ese color. Por ejemplo para avisar del borrado de algo usar el rojo.
Línea 109: Línea 109:
 Las cosas que están "encima" debe ser más claras que las que están abajo. Las cosas que están "encima" debe ser más claras que las que están abajo.
  
-{{:clase:daw:diw:1eval:luz-viene-del-cielo.png?direct&900|}}+{{:clase:daw:diw:luz-viene-del-cielo.png?direct&900|}}
  
 Mas informacion: Mas informacion:
   * [[https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-1-light-comes-from-the-sky|Rule 1: Light Comes From the Sky]]   * [[https://learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html#rule-1-light-comes-from-the-sky|Rule 1: Light Comes From the Sky]]
-  * {{:clase:daw:diw:1eval:la_luz_viene_del_cielo.pdf|}}+  * {{:clase:daw:diw:la_luz_viene_del_cielo.pdf|}}
  
 ==== Sombras ==== ==== Sombras ====
 Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba. Las sombras se usan para dar sensación de profundidad sin necesidad de bordes. Suponemos que la luz viene de arriba.
  
-{{:clase:daw:diw:1eval:luz_y_sombras.png|}}+{{:clase:daw:diw:luz_y_sombras.png|}}
  
  
Línea 145: Línea 145:
 </sxh> </sxh>
  
-{{:clase:daw:diw:1eval:sombras_y_profundidad.png|}}+{{:clase:daw:diw:sombras_y_profundidad.png|}}
  
  
Línea 151: Línea 151:
 Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste. Al hacer un interfaz de usuario, jugar con dos colores que hagan contraste.
  
-{{:clase:daw:diw:1eval:contraste_de_colores.jpg?direct|}}+{{:clase:daw:diw:contraste_de_colores.jpg?direct|}}
  
   * En la siguiente imagen se pueden ver la rueda de colores que hacen contraste y se pueden generar en [[https://paletton.com/|Paletton - The Color Scheme Designer]]   * En la siguiente imagen se pueden ver la rueda de colores que hacen contraste y se pueden generar en [[https://paletton.com/|Paletton - The Color Scheme Designer]]
-{{:clase:daw:diw:1eval:contraste_de_colores-rueda.jpg?direct|}}+{{:clase:daw:diw:contraste_de_colores-rueda.jpg?direct|}}
  
  
 Más información: Más información:
-  * {{:clase:daw:diw:1eval:contraste_de_color.pdf|}}+  * {{:clase:daw:diw:contraste_de_color.pdf|}}
   * [[https://www.youtube.com/shorts/YLmAsDw44a8]]   * [[https://www.youtube.com/shorts/YLmAsDw44a8]]
  
Línea 169: Línea 169:
 ^   ^  Importancia  ^^^ ^   ^  Importancia  ^^^
 ^  Función  |  Primaria  |  Secundaria  |  Terciaria  | ^  Función  |  Primaria  |  Secundaria  |  Terciaria  |
-|  Normal  |  {{:clase:daw:diw:1eval:primary.png|}}  |  {{:clase:daw:diw:1eval:secondary.png|}}  |  {{:clase:daw:diw:1eval:tertiary.png|}}  | +|  Normal  |  {{:clase:daw:diw:primary.png|}}  |  {{:clase:daw:diw:secondary.png|}}  |  {{:clase:daw:diw:tertiary.png|}}  | 
-|  Alternativa  |  {{:clase:daw:diw:1eval:alt-primary.png|}}  |  {{:clase:daw:diw:1eval:alt-secondary.png|}}  |  {{:clase:daw:diw:1eval:alt-tertiary.png|}}  | +|  Alternativa  |  {{:clase:daw:diw:alt-primary.png|}}  |  {{:clase:daw:diw:alt-secondary.png|}}  |  {{:clase:daw:diw:alt-tertiary.png|}}  | 
-|  Peligrosa  |  {{:clase:daw:diw:1eval:rojo-primary.png|}}  |  {{:clase:daw:diw:1eval:rojo-secondary.png|}}  |  {{:clase:daw:diw:1eval:rojo-tertiary.png|}}  |+|  Peligrosa  |  {{:clase:daw:diw:rojo-primary.png|}}  |  {{:clase:daw:diw:rojo-secondary.png|}}  |  {{:clase:daw:diw:rojo-tertiary.png|}}  |
    
 Veamos algunos ejemplos de varios botones juntos: Veamos algunos ejemplos de varios botones juntos:
Línea 214: Línea 214:
   * **Página de Login**   * **Página de Login**
  
-{{:clase:daw:diw:1eval:botones-itaca.png|}}+{{:clase:daw:diw:botones-itaca.png|}}
  
 Los 2 botones son iguales, cuando realmente queremos que pulsen "Entrar", así que uno debería ser primario y el otro secundario. Los 2 botones son iguales, cuando realmente queremos que pulsen "Entrar", así que uno debería ser primario y el otro secundario.
Línea 220: Línea 220:
   * **Página de cookies de una web.**   * **Página de cookies de una web.**
  
-{{:clase:daw:diw:1eval:botones-valencia-bonita.png|}}+{{:clase:daw:diw:botones-valencia-bonita.png|}}
  
 Ahora si que está claro cual quiere que pulsemos pero el botón de "Más información" nunca interesa que lo aprieten, así que debería ser terciario. Por otro lado ¿Realmente les interesa que pulsemos en el de "Rechazar y Subscribirme por 0,75€ Por mes"? Ahora si que está claro cual quiere que pulsemos pero el botón de "Más información" nunca interesa que lo aprieten, así que debería ser terciario. Por otro lado ¿Realmente les interesa que pulsemos en el de "Rechazar y Subscribirme por 0,75€ Por mes"?
Línea 227: Línea 227:
   * **Abrir un enlace en WhatsApp.**   * **Abrir un enlace en WhatsApp.**
  
-{{:clase:daw:diw:1eval:botones-whassapp.jpeg|}}+{{:clase:daw:diw:botones-whassapp.jpeg|}}
  
 Aquí está bien porque hace uso de la función peligrosa, además que no quiere influir sobre que botón deberías pulsar. Aquí está bien porque hace uso de la función peligrosa, además que no quiere influir sobre que botón deberías pulsar.
Línea 233: Línea 233:
   * **Iniciar un trámite en una administración pública.**   * **Iniciar un trámite en una administración pública.**
  
-{{:clase:daw:diw:1eval:botones-expediente.jpg?400|}}+{{:clase:daw:diw:botones-expediente.jpg?400|}}
  
 Le da la misma importancia a seguir con el trámite que cancelarlo. Le da la misma importancia a seguir con el trámite que cancelarlo.
Línea 239: Línea 239:
   * **Diálogo**   * **Diálogo**
  
-{{:clase:daw:diw:1eval:boton-sino.png|}}+{{:clase:daw:diw:boton-sino.png|}}
  
 Tienen la misma función el "Si" y "No", cuando el "Si" debería ser peligroso ( ya que es borrar el trámite). Tienen la misma función el "Si" y "No", cuando el "Si" debería ser peligroso ( ya que es borrar el trámite).
Línea 246: Línea 246:
 Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de margenes, fuentes, etc.  Al igual que en los colores nos ceñimos a un conjunto limitado de colores, se debe hacer lo mismo con los tamaños de margenes, fuentes, etc. 
  
-{{:clase:daw:diw:1eval:espaciado.png|}}+{{:clase:daw:diw:espaciado.png|}}
  
  
Línea 282: Línea 282:
  
 ===== Tipografías ===== ===== Tipografías =====
-{{:clase:daw:diw:2eval:serif.png?400|}}+{{:clase:daw:diw:serif.png?400|}}
  
 Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras. Para fuentes grandes (títulos) que sea menor la altura de las minúsculas (x-height) y menos espaciado entre letras.
 Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras. Para fuentes pequeñas que sea mayor la altura de las minúsculas (x-height) y mas espaciado entre letras.
-{{:clase:daw:diw:2eval:titulo.png |}}+{{:clase:daw:diw:titulo.png |}}
  
  
Línea 302: Línea 302:
     * [[http://www.creativosonline.org/blog/10-fuentes-gratuitas-enorme-calidad.html|10 fuentes gratuitas de 8 estilos distintos de enorme calidad]]     * [[http://www.creativosonline.org/blog/10-fuentes-gratuitas-enorme-calidad.html|10 fuentes gratuitas de 8 estilos distintos de enorme calidad]]
     * [[https://www.w3schools.com/css/css3_fonts.asp|Usando fuentes descargadas en una página Web]]     * [[https://www.w3schools.com/css/css3_fonts.asp|Usando fuentes descargadas en una página Web]]
-    * {{:clase:daw:diw:2eval:creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf}}: Crear tu propia fuente de iconos (([[https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/|Creating and Implementing Your Own Icon Font – A Tutorial]])) +    * {{:clase:daw:diw:creating_and_implementing_your_own_icon_font_a_tutorial_-_the_media_temple_blog.pdf}}: Crear tu propia fuente de iconos (([[https://mediatemple.net/blog/tips/creating-implementing-icon-font-tutorial/|Creating and Implementing Your Own Icon Font – A Tutorial]])) 
-    * {{:clase:daw:diw:2eval:ejemplo_fuentes.zip|}}: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas+    * {{:clase:daw:diw:ejemplo_fuentes.zip|}}: Ejemplo de creación de fuente con iconos y uso de fuentes descargadas
  
-{{:clase:daw:diw:2eval:ejemplo_de_fuente.png|}}+{{:clase:daw:diw:ejemplo_de_fuente.png|}}
  
-{{:clase:daw:diw:2eval:reglas-fuente-correcta.png?600|}}+{{:clase:daw:diw:reglas-fuente-correcta.png?600|}}
  
   * El tipo de la letra "a" hace que sea más formal o informal.   * El tipo de la letra "a" hace que sea más formal o informal.
  
-{{:clase:daw:diw:2eval:letra_a_estilo.png|}}+{{:clase:daw:diw:letra_a_estilo.png|}}
  
 ==== Peso de las fuentes ==== ==== Peso de las fuentes ====
Línea 317: Línea 317:
  
  
-{{:clase:daw:diw:2eval:tipo_fuente_peso.jpeg|}}+{{:clase:daw:diw:tipo_fuente_peso.jpeg|}}
  
  
Línea 329: Línea 329:
  
 Vídeos de [[https://www.instagram.com/jiron.design/|Roberto Jiron]] sobre errores típicos de diseño: Vídeos de [[https://www.instagram.com/jiron.design/|Roberto Jiron]] sobre errores típicos de diseño:
-  * [[https://www.instagram.com/jiron.design/reel/DefoWU9oUOK/|Deja de centrar todos tus textos]] \\ {{:clase:daw:diw:1eval:jiron_centrar_texto.png?300|}} +  * [[https://www.instagram.com/jiron.design/reel/DefoWU9oUOK/|Deja de centrar todos tus textos]] \\ {{:clase:daw:diw:jiron_centrar_texto.png?300|}} 
-  * [[https://www.instagram.com/jiron.design/reel/DedHRaDMz7_/|No uses botones primarios para todo]] \\ {{:clase:daw:diw:1eval:jiron_botones_primarios.png?300|}} +  * [[https://www.instagram.com/jiron.design/reel/DedHRaDMz7_/|No uses botones primarios para todo]] \\ {{:clase:daw:diw:jiron_botones_primarios.png?300|}} 
-  * [[https://www.instagram.com/jiron.design/reel/Dek1JXksFZd/|Deja de meter botones en tu barra]] \\ {{:clase:daw:diw:1eval:jiron_barra_navegacion.png?300|}} +  * [[https://www.instagram.com/jiron.design/reel/Dek1JXksFZd/|Deja de meter botones en tu barra]] \\ {{:clase:daw:diw:jiron_barra_navegacion.png?300|}} 
-  * [[https://www.instagram.com/jiron.design/reel/DeiNg0Hs8LP/|Deja de diseñar cards planas]] \\ {{:clase:daw:diw:1eval:jiron_cards.png?300|}} +  * [[https://www.instagram.com/jiron.design/reel/DeiNg0Hs8LP/|Deja de diseñar cards planas]] \\ {{:clase:daw:diw:jiron_cards.png?300|}} 
-  * [[https://www.instagram.com/jiron.design/reel/Deafv_IJdyC/|No diseñes modales de esta manera]] \\ {{:clase:daw:diw:1eval:jiron_modales.png?300|}}+  * [[https://www.instagram.com/jiron.design/reel/Deafv_IJdyC/|No diseñes modales de esta manera]] \\ {{:clase:daw:diw:jiron_modales.png?300|}}
  
  
clase/daw/diw/diseno-web-introduccion.1792788944.txt.gz · Última modificación: por claude