Diferencias

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

--- clase:daw:diw:1eval:tema01 [2022/09/20 19:02]
admin [Normas y estilos de diseño]
+++ 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.
@@ 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 65: / 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 146: / 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 171: / 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