====== 2. Diseño Web: Sistema de diseño ====== Un **sistema de diseño** es el conjunto de valores y componentes que se deciden **antes** de diseñar las pantallas: qué colores, qué sombras, qué tamaños y qué botones hay. Al hacer una pantalla no se elige el valor que uno quiera: se elige uno de los que ya están en el sistema. Sus partes y sus ventajas están en el [[.:start#que_es_un_sistema_de_diseno|índice del módulo]]. ===== Limitar las opciones ===== Con millones de colores y cualquier número de píxeles, cada decisión es una tortura (¿''12px'' o ''13px''? ¿sombra con un 10% o un 15% de opacidad?) y cada pantalla acaba con valores distintos. La solución es decidir una vez una lista corta de valores y usar siempre esos. En el ejemplo mal cada tarjeta tiene su azul, su redondeo, su sombra, sus márgenes y su tamaño de letra. En el bien, todo sale del mismo sistema. ^ Mal ^ Bien ^ | {{:clase:daw:diw:bienmal_sistema_mal.png?400|}} | {{:clase:daw:diw:bienmal_sistema_bien.png?400|}} | Qué se fija en el sistema: * **Colores**: las gamas y para qué se usa cada una. * **Sombras**: unos pocos niveles de elevación. * **Tamaños**: márgenes, ''padding'', tamaños de fuente y ''border-radius''. * **Componentes**: los botones y sus variantes. Y lo mismo con el peso de la fuente, la altura de línea, el ancho de los bordes o la opacidad: cualquier cosa sobre la que haya que decidir un valor. Con el sistema, elegir es descartar: si para un icono solo hay ''12px'', ''16px'', ''24px'' y ''32px'', se prueba el que parece mejor y los de al lado, y los malos se ven enseguida. Si un valor no está en el sistema, no se usa. Si de verdad hace falta, se añade al sistema y a partir de ahí lo usan todos. Cómo se lleva todo esto a CSS con variables está en [[.:sistema-diseno-tokens|Sistema de diseño: Tokens]]. ===== Colores ===== 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]] Una cosa son los **colores** y otra los **colores semánticos**: * **Colores**: Las gamas que tienes, con el nombre de cómo son: grises, blancos, rojos, verdes, azules y amarillos. * **Colores semánticos**: Con el nombre de para qué se usan: principal, alternativo y peligroso. Cada uno es una gama de colores. Los colores, con los de Tailwind 4 (los blancos no existen en Tailwind): {{:clase:daw:diw:paleta_de_colores_tailwind4.png|}} En el generador: [[https://logongas.github.io/color-schemes-generator/?p0=0-0-9&p1=0-0-15&p2=0-0-25&p3=0-0-32&p4=0-0-45&p5=0-0-63&p6=0-0-83&p7=0-0-90&p8=0-0-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Grises]], [[https://logongas.github.io/color-schemes-generator/?p0=0-0-92&p1=0-0-93&p2=0-0-94&p3=0-0-95&p4=0-0-96&p5=0-0-97&p6=0-0-98&p7=0-0-99&p8=0-0-100&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Blancos]], [[https://logongas.github.io/color-schemes-generator/?p0=359-69-30&p1=356-92-33&p2=358-100-38&p3=357-100-45&p4=357-96-58&p5=359-100-70&p6=0-100-82&p7=0-100-89&p8=0-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rojos]], [[https://logongas.github.io/color-schemes-generator/?p0=16-83-27&p1=17-100-31&p2=16-100-40&p3=18-100-48&p4=25-100-50&p5=32-100-51&p6=31-100-71&p7=32-100-83&p8=35-100-92&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Naranjas]], [[https://logongas.github.io/color-schemes-generator/?p0=145-73-19&p1=148-98-20&p2=145-100-25&p3=142-100-33&p4=144-100-39&p5=150-96-45&p6=143-81-71&p7=141-82-85&p8=141-84-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Verdes]], [[https://logongas.github.io/color-schemes-generator/?p0=225-67-33&p1=227-76-41&p2=225-84-49&p3=221-97-54&p4=216-100-58&p5=212-100-66&p6=211-100-78&p7=213-100-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Azules]], [[https://logongas.github.io/color-schemes-generator/?p0=30-84-25&p1=33-100-27&p2=34-100-33&p3=39-100-41&p4=44-100-47&p5=47-100-50&p6=51-100-56&p7=53-100-76&p8=55-97-88&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Amarillos]]. Los colores semánticos: {{:clase:daw:diw:colores_semanticos.png|}} En el generador: [[https://logongas.github.io/color-schemes-generator/?p0=225-67-33&p1=227-76-41&p2=225-84-49&p3=221-97-54&p4=216-100-58&p5=212-100-66&p6=211-100-78&p7=213-100-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Principal]], [[https://logongas.github.io/color-schemes-generator/?p0=16-83-27&p1=17-100-31&p2=16-100-40&p3=18-100-48&p4=25-100-50&p5=32-100-51&p6=31-100-71&p7=32-100-83&p8=35-100-92&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Alternativo]], [[https://logongas.github.io/color-schemes-generator/?p0=359-69-30&p1=356-92-33&p2=358-100-38&p3=357-100-45&p4=357-96-58&p5=359-100-70&p6=0-100-82&p7=0-100-89&p8=0-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Peligroso]]. ^ Color semántico ^ Color ^ Para qué se usa ^ | Principal | Azul (''blue'') | Casi todo: botones, enlaces, cabeceras | | Alternativo | Naranja (''orange'') | Destacar algo | | Peligroso | Rojo (''red'') | Las acciones que destruyen algo: borrar, cancelar un pedido | Gracias a los colores semánticos, si mañana el color principal pasa a ser verde solo cambia a qué gama apunta ''principal'', no cada sitio donde se usa. Cómo se llevan a CSS está en [[clase:daw:diw:sistema-diseno-tokens#tokens_de_sistema|Tokens de sistema]]. Otros colores semánticos habituales: * **Éxito**: Verde. La operación ha terminado bien: «Pedido guardado». * **Aviso**: Amarillo. Algo que conviene revisar pero no impide seguir: «La sesión caduca en 5 minutos». * **Información**: Azul. Mensajes neutros: «Hay una nueva versión». * **Error**: Rojo, como peligroso, pero para un estado y no una acción: un campo mal rellenado. * **Deshabilitado**: Gris claro. Un botón que no se puede pulsar. * **Texto**: Gris oscuro para el texto normal y gris medio para el secundario. * **Fondo**: Blancos, para el fondo de la página y de las tarjetas. Necesitas muchos colores, pero no para hacer cosas así: {{:clase:daw:diw:colores_mal.png|}} sino para hacer cosas así: {{: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. Para crear variaciones de un color usa: * [[https://learnui.design/tools/data-color-picker.html#single|Data Viz Color Palette Generator (for Charts & Dashboards)]] * [[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]] * [[https://logongas.github.io/color-schemes-generator/?p0=224-64-33&p1=226-71-40&p2=224-76-48&p3=221-83-53&p4=217-91-60&p5=213-94-68&p6=212-96-78&p7=213-97-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Azules]] * [[https://logongas.github.io/color-schemes-generator/?p0=164-86-16&p1=163-88-20&p2=163-94-24&p3=161-94-30&p4=160-84-39&p5=158-64-52&p6=156-72-67&p7=152-76-80&p8=149-80-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Verdes]] * [[https://logongas.github.io/color-schemes-generator/?p0=336-69-30&p1=336-74-35&p2=335-78-42&p3=333-71-51&p4=330-81-60&p5=329-86-70&p6=327-87-82&p7=326-85-90&p8=326-78-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Rosas]] * [[https://logongas.github.io/color-schemes-generator/?p0=22-78-26&p1=23-83-31&p2=26-90-37&p3=32-95-44&p4=38-92-50&p5=43-96-56&p6=46-97-65&p7=48-97-77&p8=48-96-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Amarillos]] * [[https://logongas.github.io/color-schemes-generator/?p0=264-67-35&p1=263-69-42&p2=263-70-50&p3=262-83-58&p4=258-90-66&p5=255-92-76&p6=252-95-85&p7=251-95-92&p8=251-91-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Morados]] * [[https://logongas.github.io//color-schemes-generator/index.html?p0=217-33-17&p1=215-25-27&p2=215-19-35&p3=215-16-47&p4=215-20-65&p5=213-27-84&p6=214-32-91&p7=210-40-96&p8=210-40-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Gris pizarra]] Para crear el color alternativo usa: * [[https://colorschemedesigner.com/csd-3.5/|Color Scheme Designer 3]] ==== Evolución de colores en Tailwind ==== Tailwind ha cambiado su paleta en cada versión mayor. Estos son los tonos 100 a 900 de cada color en cada versión, para comparar sus gráficas de saturación y luminosidad. Tailwind 4 define los colores en ''oklch'' con una gama más amplia que sRGB; el enlace muestra su aproximación en sRGB, que es lo que maneja el generador. **Grises** ^ Gris pizarra \\ ''slate'' \\ (v.2: ''blueGray'') ^ Gris \\ ''gray'' \\ (v.2: ''coolGray'') ^ Gris zinc \\ ''zinc'' \\ (v.2: ''gray'') ^ Gris neutro \\ ''neutral'' \\ (v.2: ''trueGray'') ^ Gris piedra \\ ''stone'' \\ (v.2: ''warmGray'') ^ | [[https://logongas.github.io/color-schemes-generator/?p0=222-47-11&p1=217-33-17&p2=215-25-27&p3=215-19-35&p4=215-16-47&p5=215-20-65&p6=213-27-84&p7=214-32-91&p8=210-40-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2, v.3 y v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=220-26-14&p1=218-23-23&p2=218-17-35&p3=216-15-52&p4=214-20-69&p5=211-25-84&p6=214-32-91&p7=210-38-95&p8=204-45-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=221-39-11&p1=215-28-17&p2=217-19-27&p3=215-14-34&p4=220-9-46&p5=218-11-65&p6=216-12-84&p7=220-13-91&p8=220-14-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2, v.3 y v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=240-6-10&p1=240-4-16&p2=240-5-26&p3=240-5-34&p4=240-4-46&p5=240-5-65&p6=240-5-84&p7=240-6-90&p8=240-5-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2, v.3 y v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=0-0-9&p1=0-0-15&p2=0-0-25&p3=0-0-32&p4=0-0-45&p5=0-0-64&p6=0-0-83&p7=0-0-90&p8=0-0-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2, v.3 y v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=24-10-10&p1=12-6-15&p2=30-6-25&p3=33-5-32&p4=25-5-45&p5=24-5-64&p6=24-6-83&p7=20-6-90&p8=60-5-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2, v.3 y v.4]] | **Grises con matiz (nuevos en Tailwind 4)** ^ Gris malva \\ ''mauve'' ^ Gris oliva \\ ''olive'' ^ Gris niebla \\ ''mist'' ^ Gris topo \\ ''taupe'' ^ | [[https://logongas.github.io/color-schemes-generator/?p0=292-15-10&p1=289-14-15&p2=296-11-25&p3=292-9-33&p4=293-8-45&p5=295-6-64&p6=300-8-83&p7=300-6-90&p8=300-8-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=60-14-10&p1=60-12-15&p2=60-11-25&p3=60-10-33&p4=60-9-45&p5=60-8-64&p6=60-9-83&p7=60-10-90&p8=60-15-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=197-14-10&p1=193-12-15&p2=193-11-25&p3=191-10-33&p4=191-9-45&p5=192-8-64&p6=195-9-83&p7=192-10-90&p8=180-8-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=17-14-10&p1=13-12-15&p2=13-11-25&p3=15-10-33&p4=17-9-45&p5=16-8-64&p6=15-9-83&p7=12-10-90&p8=0-8-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | **Rojos, naranjas y amarillos** ^ Rojo \\ ''red'' ^ Naranja \\ ''orange'' ^ Ámbar \\ ''amber'' ^ Amarillo \\ ''yellow'' ^ | [[https://logongas.github.io/color-schemes-generator/?p0=0-47-31&p1=0-56-39&p2=0-61-48&p3=0-76-57&p4=0-88-68&p5=0-95-75&p6=0-97-85&p7=0-95-92&p8=0-100-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?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|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=359-69-30&p1=356-92-33&p2=358-100-38&p3=357-100-45&p4=357-96-58&p5=359-100-70&p6=0-100-82&p7=0-100-89&p8=0-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=14-61-30&p1=16-65-37&p2=20-71-44&p3=24-75-50&p4=27-84-57&p5=33-90-65&p6=38-93-77&p7=39-96-89&p8=40-100-97&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=15-75-28&p1=15-79-34&p2=17-88-40&p3=21-90-48&p4=25-95-53&p5=27-96-61&p6=31-97-72&p7=32-98-83&p8=34-100-92&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=16-83-27&p1=17-100-31&p2=16-100-40&p3=18-100-48&p4=25-100-50&p5=32-100-51&p6=31-100-71&p7=32-100-83&p8=35-100-92&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=22-78-26&p1=23-82-31&p2=26-90-37&p3=32-95-44&p4=38-92-50&p5=43-96-56&p6=46-97-65&p7=48-97-77&p8=48-96-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=23-91-25&p1=24-100-30&p2=25-100-37&p3=30-100-44&p4=36-100-50&p5=44-100-50&p6=47-100-59&p7=48-98-76&p8=48-97-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=30-76-26&p1=32-75-34&p2=36-71-42&p3=40-67-51&p4=47-81-61&p5=51-89-67&p6=55-92-76&p7=58-97-87&p8=60-100-97&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=28-73-26&p1=32-81-29&p2=35-92-33&p3=41-96-40&p4=45-93-47&p5=48-96-53&p6=50-98-64&p7=53-98-77&p8=55-97-88&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=30-84-25&p1=33-100-27&p2=34-100-33&p3=39-100-41&p4=44-100-47&p5=47-100-50&p6=51-100-56&p7=53-100-76&p8=55-97-88&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | **Verdes** ^ Lima \\ ''lime'' ^ Verde \\ ''green'' ^ Esmeralda \\ ''emerald'' ^ Verde azulado \\ ''teal'' ^ | [[https://logongas.github.io/color-schemes-generator/?p0=88-61-20&p1=86-69-23&p2=86-78-27&p3=85-85-35&p4=84-81-44&p5=83-78-55&p6=82-85-67&p7=81-88-80&p8=80-89-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=86-71-19&p1=84-100-19&p2=85-100-25&p3=86-100-32&p4=84-100-41&p5=80-100-45&p6=81-88-64&p7=81-89-79&p8=79-89-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=152-42-23&p1=152-45-28&p2=150-48-35&p3=148-48-43&p4=145-46-51&p5=143-55-62&p6=141-60-75&p7=139-73-87&p8=136-100-97&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=144-61-20&p1=143-64-24&p2=142-72-29&p3=142-76-36&p4=142-71-45&p5=142-69-58&p6=142-77-73&p7=141-79-85&p8=141-84-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=145-73-19&p1=148-98-20&p2=145-100-25&p3=142-100-33&p4=144-100-39&p5=150-96-45&p6=143-81-71&p7=141-82-85&p8=141-84-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=164-86-16&p1=163-88-20&p2=163-94-24&p3=161-94-30&p4=160-84-39&p5=158-64-52&p6=156-72-67&p7=152-76-80&p8=149-80-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=165-100-15&p1=163-100-19&p2=162-100-24&p3=160-100-30&p4=160-100-37&p5=161-100-42&p6=158-76-64&p7=152-78-80&p8=150-81-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=185-40-23&p1=183-42-27&p2=181-47-33&p3=179-51-39&p4=177-52-46&p5=174-59-56&p6=172-67-70&p7=170-77-83&p8=168-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=176-61-19&p1=176-69-22&p2=175-77-26&p3=175-84-32&p4=173-80-40&p5=172-66-50&p6=171-77-64&p7=168-84-78&p8=167-85-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=176-76-18&p1=177-100-19&p2=176-100-24&p3=175-100-29&p4=174-100-37&p5=174-100-42&p6=172-81-60&p7=168-86-78&p8=168-86-89&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | **Azules** ^ Cian \\ ''cyan'' ^ Celeste \\ ''sky'' ^ Azul \\ ''blue'' ^ Índigo \\ ''indigo'' ^ | [[https://logongas.github.io/color-schemes-generator/?p0=196-64-24&p1=194-70-27&p2=193-82-31&p3=192-91-36&p4=189-94-43&p5=188-86-53&p6=187-92-69&p7=186-94-82&p8=185-96-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=196-72-23&p1=192-100-24&p2=193-100-29&p3=192-100-36&p4=190-100-43&p5=188-100-47&p6=187-98-66&p7=186-96-81&p8=185-96-90&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=202-80-24&p1=201-90-27&p2=201-96-32&p3=200-98-39&p4=199-89-48&p5=198-93-60&p6=199-95-74&p7=201-94-86&p8=204-94-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=201-96-22&p1=201-100-27&p2=202-100-33&p3=202-100-41&p4=199-100-48&p5=196-100-50&p6=199-100-73&p7=201-97-86&p8=203-94-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=215-41-28&p1=213-49-34&p2=211-61-43&p3=209-62-50&p4=207-73-57&p5=205-79-66&p6=203-82-76&p7=202-81-86&p8=201-100-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=224-64-33&p1=226-71-40&p2=224-76-48&p3=221-83-53&p4=217-91-60&p5=213-94-68&p6=212-96-78&p7=213-97-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=225-67-33&p1=227-76-41&p2=225-84-49&p3=221-97-54&p4=216-100-58&p5=212-100-66&p6=211-100-78&p7=213-100-87&p8=214-95-93&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=247-33-32&p1=242-38-41&p2=237-47-52&p3=234-62-60&p4=229-76-66&p5=225-86-73&p6=221-90-81&p7=217-97-88&p8=213-100-96&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=242-47-34&p1=244-55-41&p2=245-58-51&p3=243-75-59&p4=239-84-67&p5=234-89-74&p6=230-94-82&p7=228-96-89&p8=226-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=243-50-35&p1=246-61-42&p2=248-68-51&p3=247-91-59&p4=241-100-69&p5=235-100-74&p6=230-100-82&p7=227-100-89&p8=226-100-94&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | **Morados y rosas** ^ Violeta \\ ''violet'' ^ Morado \\ ''purple'' ^ Fucsia \\ ''fuchsia'' ^ Rosa \\ ''pink'' ^ Rosa rojizo \\ ''rose'' ^ | [[https://logongas.github.io/color-schemes-generator/?p0=264-67-35&p1=263-69-42&p2=263-70-50&p3=262-83-58&p4=258-90-66&p5=255-92-76&p6=252-95-85&p7=250-95-92&p8=251-91-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=265-74-35&p1=267-86-40&p2=268-93-47&p3=265-99-56&p4=261-100-66&p5=257-100-76&p6=253-100-85&p7=250-100-92&p8=251-91-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=254-41-34&p1=256-44-42&p2=258-50-52&p3=259-59-59&p4=260-73-70&p5=262-81-77&p6=265-86-86&p7=268-90-92&p8=270-100-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=274-66-32&p1=273-67-39&p2=272-72-47&p3=271-81-56&p4=271-91-65&p5=270-95-75&p6=269-97-85&p7=269-100-92&p8=269-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=274-73-32&p1=275-82-38&p2=276-100-43&p3=275-96-52&p4=273-100-64&p5=272-100-74&p6=271-100-85&p7=269-100-92&p8=269-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=297-64-28&p1=295-70-33&p2=295-72-40&p3=293-69-49&p4=292-84-61&p5=292-91-73&p6=291-93-83&p7=288-96-91&p8=287-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=296-73-27&p1=296-99-29&p2=295-100-36&p3=294-100-44&p4=293-96-57&p5=293-100-71&p6=292-100-83&p7=289-100-91&p8=287-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=318-51-29&p1=322-60-37&p2=325-57-46&p3=329-64-54&p4=331-79-66&p5=336-86-75&p6=339-90-85&p7=343-95-92&p8=348-100-98&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.1]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=336-69-30&p1=336-74-35&p2=335-78-42&p3=333-71-51&p4=330-81-60&p5=329-86-70&p6=327-87-82&p7=326-85-90&p8=326-78-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=334-79-29&p1=332-100-32&p2=332-100-39&p3=329-100-45&p4=328-92-58&p5=327-95-69&p6=327-96-82&p7=326-88-90&p8=326-78-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | [[https://logongas.github.io/color-schemes-generator/?p0=342-75-30&p1=343-80-35&p2=345-83-41&p3=347-77-50&p4=350-89-60&p5=351-95-71&p6=353-96-82&p7=353-96-90&p8=356-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.2 y v.3]] \\ [[https://logongas.github.io/color-schemes-generator/?p0=339-89-29&p1=340-100-32&p2=344-100-39&p3=344-100-46&p4=345-100-56&p5=350-100-69&p6=352-100-82&p7=352-100-90&p8=356-100-95&minLightness=5&maxSaturation=95&rotate-hue=10&ecuacion=parabola&tasa-crecimiento=8|Tailwind v.4]] | ===== Sombras ===== Las sombras dicen a qué altura está cada elemento ([[.:diseno-web-introduccion#la_luz_viene_del_cielo|la luz viene del cielo]]). En el sistema se definen unos pocos niveles de elevación y cada tipo de elemento usa siempre el suyo. * Ejemplo de sombras que cada vez están más arriba. .square { width: 100px; height: 100px; background-color: #ffffff; border-radius: 6px; }
{{:clase:daw:diw:sombras_y_profundidad.png|}} ^ Nivel ^ Elemento ^ | 1 | Botones | | 2 | Tarjetas | | 3 | Menús desplegables | | 4 | Avisos flotantes (//toasts//) | | 5 | Diálogos modales: están encima de todo | ===== 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 márgenes, fuentes, etc. {{:clase:daw:diw:espaciado.png|}} En el ejemplo mal cada separación tiene un valor distinto (10, 11, 13, 15, 17, 19, 21, 22 y 25 píxeles) y tan parecidos que no se distinguen: parecen descuidos, no decisiones. En el bien solo hay tres valores: ''8px'' entre lo que va junto, ''12px'' entre un título y lo suyo y ''24px'' entre bloques. ^ Mal ^ Bien ^ | {{:clase:daw:diw:bienmal_espaciado_mal.png?400|}} | {{:clase:daw:diw:bienmal_espaciado_bien.png?400|}} | Veamos algunos ejemplos. Padding o Margin: 0px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 128px, 160px, 192px, 224px, 256px, 320px, 480px, 640px Tamaño de fuente: 12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 64px Border radius: 0px, 2px, 4px, 6px, 8px, 12px, 16px Obviamente se puede elegir los tamaños que se deseen pero se tiene que tener en cuenta que a mayor tamaño , mas debe ser el incremento entre uno y otro. Entre dos valores seguidos tiene que haber una diferencia que se vea: entre ''12px'' y ''13px'' no la hay, así que ''13px'' no está en la lista. ===== Botones ===== Los botones también se predefinen: no se diseña un botón para cada pantalla, se elige uno de los que tiene el sistema. Los botones tienen 2 características: * Importancia: Es si queremos o no que el usuario pulse ahí. A mayor importancia es que queremos que mas veces pulse en ese botón. * Función: Es para decir al usuario que tipo de acción está realizando. Por ejemplo , la función "Peligrosa" es roja y nos quiere decir que tengamos cuidado al pulsar ahí. ^ ^ Importancia ^^^ ^ Función | Primaria | Secundaria | Terciaria | | Normal | {{:clase:daw:diw:primary.png|}} | {{:clase:daw:diw:secondary.png|}} | {{:clase:daw:diw: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:rojo-primary.png|}} | {{:clase:daw:diw:rojo-secondary.png|}} | {{:clase:daw:diw:rojo-tertiary.png|}} | Veamos algunos ejemplos de varios botones juntos: ^ Pagar carrito ^ Cancelar pago ^ * Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal * Cancelar pago: Terciaria Normal . Nunca queremos que pulse ahí y es una acción normal ---- ^ Pagar carrito ^ Vaciar carrito ^ * Pagar carrito: Primaria Normal . Queremos que pulse ahí y es una acción normal * Vaciar carrito: Terciaria Peligrosa . Nunca queremos que pulse ahí y ademas es peligroso porque se queda sin los productos del carrito ---- ^ Actualizar a la nueva versión de Windows ^ Mantener tu versión de Windows ^ * Actualizar a la nueva versión de Windows: Primaria Peligrosa . Queremos que pulse ahí y es una acción peligrosa * Mantener tu versión de Windows: Secundaria Normal . No queremos que pulse ahí y es una acción normal ---- ^ Donar 20€ a Wikipedia ^ Donar 5€ a Wikipedia ^ * Donar 20€ a Wikipedia: Primaria Normal . Queremos que pulse ahí y es una acción normal * Donar 5€ a Wikipedia: Secundaria Normal . No queremos que pulse ahí y es una acción normal La diferencia entre normal y peligrosa está clara, pero la diferencia entre normal y alternativa es una cuestión de estética, para resaltar un tipo sobre otro pero los dos son similares. ==== Ejemplos ==== * **Página de Login** {{: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. * **Página de cookies de una web.** {{: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"? * **Abrir un enlace en WhatsApp.** {{: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. * **Iniciar un trámite en una administración pública.** {{:clase:daw:diw:botones-expediente.jpg?400|}} Le da la misma importancia a seguir con el trámite que cancelarlo. * **Diálogo** {{: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). ===== Ejercicios ===== ==== Ejercicio 1 ==== Busca 2 Webs e indica cuál es el color principal y cuál el color alternativo. Haz 2 capturas de pantalla del uso del color para cada web ==== Ejercicio 2 ==== Busca una Web y indica los tipos de botones que tienen según los tipos que hemos visto en el tema. Haz capturas de pantalla para cada uno de los tipos que haya ==== Ejercicio 3 ==== Inventa ventanas con botones e indica el texto de cada botón, la importancia y la función ^ ^ Botón 1 ^^^ Botón 2 ^^^ Botón 3 ^^^ ^ Nº Botones ^ Texto ^ Importancia ^ Función ^ Texto ^ Importancia ^ Función ^ Texto ^ Importancia ^ Función ^ ^ 1 | | | | N/A | N/A | N/A | N/A | N/A | N/A | ^ 1 | | | | N/A | N/A | N/A | N/A | N/A | N/A | ^ 2 | | | | | | | N/A | N/A | N/A | ^ 2 | | | | | | | N/A | N/A | N/A | ^ 3 | | | | | | | | | | ^ 3 | | | | | | | | | | ==== Ejercicio 4 ==== Elige una web y, con las herramientas de desarrollador del navegador, saca su sistema de diseño: qué colores, tamaños de fuente, márgenes, ''border-radius'' y sombras usa. ¿Están limitados a unos pocos valores o cada sitio usa el que quiere? ^ Propiedad ^ Valores que usa ^ | Colores | | | Tamaños de fuente | | | Márgenes y padding | | | border-radius | | | Sombras | |