Diferencias

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

--- clase:daw:diw:1eval:tema01 [2022/05/23 15:50]
admin [Ejercicios]
+++ clase:daw:diw:1eval:tema01 [2024/02/04 23:04] (actual)
admin [Colores]
@@ Línea 9: / Línea 9: @@
   * Haz que las cosas estén alineadas a una recta imaginaria que va de arriba a abajo.
   * Resalta lo importante
+  * Repele la atención de lo que no es importante (más pequeño, más espacioso, de menor contraste).
   * Evita usar label o captions. Si ves "ventas@persianas.com" ya sabes que es un correo, no hace falta indicar que es el correo. Pero si usas un label que forme parte de una frase. "3 en stock" en vez de  "Stock:3". Y aun así, si las usas, que estén desenfatizadas
   * Los títulos <h1> no tienen porque destacar ya que a veces no son importantes ya que es obvio el título. <h1> es para que el buscador sepa que eso es importante.
   * Las esquinas cuadradas indican seriedad. Las Esquinas muy muy redondeadas son muy informales.(border-radious)
-  * Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, una un color le letra gris en vez del negro del texto.
+  * Para enfatizar en vez de un mayor tamaño de letra, usa negrita. Pero para desenfatizar, usa un color de letra gris en vez del negro del texto.
   * Nunca usar un carrusel. [[https://shouldiuseacarousel.com/]]
@@ Línea 25: / Línea 26: @@
   * [[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.
+  * {{ :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]]
   * [[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}}
   * [[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://anthonyhobday.com/sideprojects/saferules/|Visual design rules you can safely follow every time]]
+  * [[https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-1.html|7 Rules for Creating Gorgeous UI (Updated for 2022)]]
+  * [[https://www.learnui.design/blog/4-rules-intuitive-ux.html|4 Rules for Intuitive UX]]
   * 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}}
@@ Línea 64: / Línea 71: @@
   * [[https://logongas.github.io/color-schemes-generator|Color Scheme Generator]]: Mi generador
   * [[https://palettte.app/|Palettte App]]
+  * [[https://colorcolor.in/|colorxcolor]]:Permite ajustar las curvas de saturación y luminosidad.
   * Paletas de colores de [[https://tailwindcss.com/|Tailwind CSS]]
     * [[https://logongas.github.io//color-schemes-generator/index.html?p0=0-63-31&p1=0-70-35&p2=0-74-42&p3=0-72-51&p4=0-84-60&p5=0-91-71&p6=0-94-82&p7=0-96-89&p8=0-93-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rojos]]
@@ Línea 145: / Línea 153: @@
 ===== Sistema de tamaños =====
-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. Veamos algunos ejemplos.
+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|}}
+Veamos algunos ejemplos.
 Padding o Margin:
-px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px
+px, 4px, 6x, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px
 Tamaño de fuente:
@@ Línea 170: / Línea 183: @@
   * [[https://www.markarina.com/5-ejemplos-en-los-que-la-ley-de-hick-te-ayuda-a-disenar-tu-web/|5 ejemplos en los que la ley de Hick te ayuda a diseñar tu web]]: Minimiza el Nº de opciones para el usuario
   * [[https://www.checklist.design/|Checklist Design]]: Lista de cosas a incluir en cada tipo de página.
+  * 2 artículos criticando los interfaces actuales:
+    * [[https://datagubbe.se/decusab/|The Decline of Usability]]: 1º Parte (2020)
+    * [[https://datagubbe.se/usab2/|The Decline of Usability: Revisited]]: 2º Parte (2023)
 La siguiente web está hecha para conseguir la peor  experiencia de usuario posible: [[https://userinyerface.com/|User Inyerface - A worst-practice UI experiment]]
+===== IA y diseño =====
+  * [[https://www.logoai.com/|https://www.logoai.com/]]:Web para crear logos
 ===== Ejercicios =====

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página