Consejos rápidos de diseño para todos

1. Introducción: Oigan, ¿qué pasa, todos? Soy diseñadora y emprendedora y llevo cinco o diez años diseñando. He trabajado con todo tipo de negocios, que van desde pequeños negocios locales hasta empresas multimillonarias. En este curso, estaré compartiendo algunos consejos de diseño rápido que he aprendido a lo largo de los años están diseñando. Esperemos que puedas aplicarlos a tus propios diseños. Entonces entrémonos en ello. 2. Elige tu personalidad: hora de diseñar cualquier cosa, lo que sea tal vez tengas un entrenamiento, la personalidad que quieres dar a tu sitio web o lo que sea que estés trabajando app, website, lo que sea. Por lo que quería mirar dos sitios web que tienen muy diferentes y tienen personalidades muy distintas. Por lo que esta llegada del sitio web, se puede ver es muy especie de inteligente en corpora, muy moderno. Se puede ver que todos los botones son muy cuadrados. Se pueden ver las fuentes también muy cuadradas, paleta de colores muy minimalista también, solo los negros, los blancos pastan. Y sí, diseño y personalidad muy inteligente y sofisticado. Denis dando, incluso con las fuentes, teniendo fuentes mayúsculas como esta, donde también el espaciado entre las letras, sólo un enfoque de aspecto muy moderno. No obstante, cuando miramos a hunk, que es una aplicación de mensajería, se puede ver muy, muy diferente. Utiliza colores mucho más claros. Tiene esquinas redondeadas, esquinas muy, muy redondeadas. Incluso la propia fuente que utilizan tiene esquinas redondeadas en el extremo, el botón es muy redondeado. Se pueden ver estas pequeñas animaciones peculiares. Están pasando muchos colores diferentes. Los iconos, ya sabes, rebotan, se mueven. Un look muy diferente y mucho más amigable resolver look. Se ve bastante bien. Este sitio web y el sitio web de llegada ambos se ven fantásticos. Simplemente tienen personalidades muy, muy diferentes. Entonces cada vez que estás diseñando algo funcionó cuál es tu personalidad, cuáles son las personalidades que estás tratando de cruzar para esa marca, para ese sitio web, e ir desde ahí. Es bueno mirar otros ejemplos, es bueno mirar otros sitios web y ver lo que hacen a la hora de entregar su personalidad. Entonces como un ejemplo rápido, voy a burlarme de dos diferentes vieron un sitio web no completos, sino solo para darte una idea de lo que es agregar personalidad a un sitio web. Por lo que agregaremos un marco en FISMA. Hagamos este ancho 1200 en realidad, hagámoslo un poco más ancho. ¿ Podemos hacerlo más amplio y ponerlo a punto? Sí, podemos. Está bien. Genial. Entonces sí, creo que haré un sitio web bancario. Entonces ahora le ha puesto a banco la parte superior aquí arriba. Y vamos a ir por una paleta de colores minimalista pi por ahora. Y también pongamos algunos encabezamientos. Entonces Entra, regístrate. Yo sólo voy a ser muy rápido de Alice. Añadamos un rectángulo. Navbar. Por ejemplo. Bajemos eso. Oh, queremos conseguir todos estos y alinearlos. Trae estos sobre T. Y cuando se trata de la fuente, lo que haremos es usar en, porque pienso en es un teléfono bastante bueno, inteligente, sofisticado. Tiene bordes muy afilados a ella también. Hagamos el logo un poco más grande. Creo que hacer las fuentes atrevidas también puede ayudar a darle un aspecto más atrevido. Haremos esto blanco también. Vamos a chapotear y de nuevo, imagen a incluir en nuestro diseño. Entonces metamos esta imagen en. Hagamos que encaje dentro, por supuesto, trayendo debajo de todo. Y entonces realmente lo queremos en el área del marco. Lo que haremos es también añadir un Sí, agregaremos un relleno en la parte superior del mismo. Hacer un relleno sólido. Y obedeciendo la opacidad hacia abajo. Quizás dos alrededor del 70% también harán de este color oscuro. Se lo ha puesto alrededor de los ojos, que estos sean blancos. Hagamos esto un poco más grande. T 14, creo que es bueno. Y el espaciado entre ellos semi inclinó los colores sobre ellos. Y lo que realmente voy a hacer es que voy a quitar este encabezado. Y creo que en realidad se ven bien, se ven mejor sin el encabezado. Y estos arriba otra vez para dar la vuelta ahí. Y luego vamos a añadir algo de copia ahora mismo porque es negro. Pero lo haremos un poco más grande. Como digamos, un espacio extra ahí. Tráelo al medio. Añadamos también un poco de texto debajo. Hagamos esto como decir puerta. Y haremos esto obviamente mucho más pequeño. A lo mejor 16 bit D mucho ayer conseguimos a Alex mejor. A lo mejor consigamos esta camiseta de color. Vamos a añadir un botón. El botón, el collar dorado. Ahora teníamos como decir, bueno en realidad creo que va a necesitar ser vamos a hacerlo un poco más oscuro en color. La cosa se ve bastante bien. Para hacerlo semi inclinado. También hace que ese botón sea un poco más grande. Entonces cambié el color del botón porque creo que el azul en realidad se ve un poco mejor. Pero sí, ahí estamos. Acabamos de hacer una especie muy rápida de cabecera del sitio web bancario. Y he elegido una imagen muy sencilla. La imagen corporativa utiliza fuentes muy modernas con bordes afilados, botones sin ningún tipo de radio sobre ellos. Y de igual manera solo se ve muy corporativo y muy empresarial, muy bancario, como le vamos a dar un nombre de banco. Y lo que haremos es hacer otra. Y éste digamos que está más relacionado con la moda porque va a haber un aspecto muy, muy diferente. Entonces démosle el nombre solo moda. Muy fácil. Entonces para esta, vamos a usar una fuente llamada Made espejismo, gran favorita mía. Y cambiamos todas las fuentes. Debería usar tipografías t usaremos espejismo hecho y usaremos termini porque vamos por más de un look de moda. Utilizamos bastantes fondos diferentes para este. Por lo que terminar de nuevo es una de mis fuentes favoritas. Piensa que se ve fantástico. Te hacen todo en mayúsculas suite. Y tal vez hagamos esto como blog. Contacto. Cu también hará la pierna un poco más grande y es un poco más pequeña. Están como de lado. Lo que haremos es quitar la imagen de fondo y luego iremos a y salpicaremos. Y buscaremos una imagen relacionada con la moda. Entonces usaremos esta imagen aquí. Quitaremos este texto donde hicimos el botón también. Cuando tengamos todo, usaremos esta imagen aquí. Hazlo obviamente mucho más pequeño que eso. A lo mejor lo hagamos por aquí tan grande. También baje esto un poco más, baje un poco el marco un poco. Nos mantendríamos fuera 1400 área húmeda. Y pondremos algo así como solo un título grande en nuestra fuente favorita. Hazlo blanco. Y lo haremos enorme también. Algo así. Lo hace menos, asegúrate de que todo esté centrado también. Y estamos, lo que vamos a hacer esto también, en realidad recortará esta imagen. Entonces haz un rectángulo de aquí a aquí y consigue la imagen. Y usamos mezquita. Y de nuevo, creo que eso es mejor. Podríamos incluso hacer este título aún más grande en realidad. Sí, hagámoslo aún más grande así. Y lo haremos un poco delgado en t, chico de la Marina. Y lo que haremos es añadir algo de texto a continuación. Yo, tal vez sólo algún texto ficticio. Al igual que digo creo que eso podría ser un poco demasiado texto ficticio. Muéstrame algo de ello. Y también hacerlo un poco más pequeño. Se puede agregar una fecha. Y haremos de esta fecha un término y una fuente. Aumentemos la altura de línea en esa t. Y luego podemos agregar un botón para decir, leer más. Otra vez. Hagamos que esa sea nuestra otra fuente. Y sí, ahí estamos. Simplemente tenemos una especie muy rápida de blogs de moda o cosa que he configurado. Y obviamente se ve muy diferente a nuestra página web de banca corporativa que hicimos antes. Y esa es solo una manera realmente rápida y fácil de agregar algo de personalidad EN un sitio web. Averigua la personalidad que puedes usar. Diferentes fuentes es diferentes Formas de Botón. Sea lo que sea, mira la inspiración y aplica tu propia personalidad a sitios web propios. 3. No uses grises: Cuando comienzas a diseñar por primera vez, en realidad es muy fácil solo usar negros y grises y blancos cuando se trata de tu diseño. Pero lo que me gusta hacer es, es a diferencia de t's pastadas que tienen un toque de color en ellos. Ya sea un indicio azulado, un indicio verde, o un indicio amarillento para ellos. O tal vez incluso como una pista roja para darle más de un look más cálido. Y en un toque de color a tus grises realmente puedes vivir y diseñar superior y transformar la forma en que se ve. Entonces te voy a mostrar rápidamente cómo es solo hacer algo de gracia normal y luego agregar algunos grises con algunos colores aquí. Y sigma hará una paleta de colores rápida. Dar botones arriba a la vuelta de la esquina. Me encantan mis botones teniendo esquinas redondeadas. Y te veré cuando empecemos con el negro. Hará un color negro. Color gris. Hizo otro gris en algún lugar por ahí. Vamos a asegurarnos de que en realidad estos son el ACGME va a matarme. Entonces aquí tenemos un montón de negros, grises, y blancos. Se ve bien. Puedes usar esto en tu diseño. Y sí a veces usé colores completamente negros y completamente grises en mi diseño. No hay nada de malo en eso. No obstante, si tu sitio web tiene un color de acento, por ejemplo, azul, no veo por qué puedes agregar un poco de azul a tu gracia. Entonces vamos a hacer eso. Entonces hicimos este IVR y vamos a sacar esto, pero lo llevaremos a todo azul por aquí. Y lo que haremos es traerlo por aquí, en algún lugar por aquí. Ahora, es muy, muy sutil. Y luego si comienzas a ver en tu pantalla, pero puedes ver esto es mucho un tono negro, pero esto es más una especie de azulado en negro clave de alguna manera. Y lo que haremos es hacer diferentes tonalidades de ese gris. Entonces a medida que pasamos por la gama de colores, solo podemos usar el recolector de color. Y nos gustaría hacer es que me gustaría ir en ese tipo de ángulo, se podría decir. Entonces. No sólo como recta arriba, sí me gusta como ir en un ángulo, decir así básicamente. Pero volvamos a lo que estás haciendo. Ve por aquí tal vez. Sí, creo que eso se ve bastante bonito. Por aquí, creo. Sí. En realidad, hagámoslo un poco más oscuro y ahí. Y luego por ahí, qué color su escritorio, desierto B. Así que lo haremos alrededor de una. B, creo. Por ahí. Sí. ¿ Qué es esto? Este es un d Así que trae tu actitud D por ahí. Y luego finalmente B1, último color. Ahora lo estamos. Como puedes ver, hay un toque de azul en esos grises. Y creo que solo agrega un poco más de color y característico a cualquier diseño en el que trabajes. Y esa es una forma realmente rápida de hacer una paleta de colores de grises con un toque de color en ellos. Entonces aquí me he burlado rápidamente de una aplicación solo usando negros, grises, y blancos, y de inmediato se ve bien. Pero carece de personalidad. Digo eso porque me hace reír con después suerte diseñaría que se ve así de todos modos. Y, pero, pero de todos modos, queríamos agregar algo de color a esta app. Entonces vamos a cambiar nuestra Gracia y darles un poco de color a ellos. Entonces vamos a empezar primero con los antecedentes. Entonces elegamos un azul que nos guste. Tráelo. Y ya podemos ver que hay un poco de cambio entre éste y aquel. Cambiemos nuestro icono de hamburguesa. Vamos a elegir audiblemente Pat ground. Y vamos a plantear eso. A lo mejor dos por ahí. Sí, me gusta ahí. Yo creo. Haz lo mismo con nuestro icono de campana de notificación. Y sólo vamos a pasar lentamente y cambiar el color de nuestro pasto demasiado un poco más azul. Hagámoslo un poco más ligero. En realidad. Ahí lo tienes. Whoops. Ese es el color equivocado. Entonces ya puedes ver que eso está haciendo una gran diferencia. Ya puedes ver que hay un poco de color dentro de la propia aplicación real. Entonces sigamos adelante. Cámbialo eso. Sí. Y luego también le agregaremos un color a nuestro botón porque actualmente nuestro botón es solo gris. Diga, vamos a darle un área de color. Eso se ve bastante bien. Daremos a nuestras tarjetas un poco de color también. A lo mejor hasta cambió un poquito aquí. Guy. Cambió la barra de progreso, es bueno, que un poco de color como así. Nos vemos bastante bien en ángulo otra vez, estamos llegando, estamos llegando ahí. Llegar ahí muy, muy rápido. Acerquemos un poco para que podamos cambiar también estos colores. Entonces cuando se trata de algo como esto, este botón, mucha gente, lo que suelen hacer es que lo harían Y, y entonces probablemente le den una capacidad de 50 por ejemplo. Pero creo que eso es un error que mucha gente comete. Y, y creo que se ve bien. Lo mejor que encontré que debes hacer es que en realidad deberías darle al botón un color que sea más una especie de azul más claro o de color más claro como ese. Simplemente creo que eso se ve mucho mejor que solo usar un blanco y luego cambiarlo para darle alguna capacidad lo haría para que estos en realidad usáramos el fondo un poco como digamos entre traer estos giros por ahí. Sí, creo que eso va a funcionar. Y otra vez, con este texto aquí, el, creo que la mayoría de la gente lo haría blanco y luego le daría una opacidad. Pero no queremos hacer eso. Queremos darle un tinte azulado, pero de un color azul a ella así. Y entonces sólo podemos hacer lo mismo por los demás. Sabes qué, voy a copiar y pegar este solo para que sea un poco más fácil para mí. Y ahí estamos. Se puede ver que hemos tomado una gran app, aplicación gris muy oscuro, y le hemos dado bastante color y se ve mucho diferente. Le da a la Apple un poco más de personalidad, le da un poco más de color, y simplemente hace que parezca que hay algún tipo de marca detrás de ella. Entonces, sí, es genial usar grises. No puedes usar negros y grises si ese es el look que buscas. Pero si tu marca tiene un color de acento como un color azul como aquí, entonces creo que siempre es buena idea agregar un poco de azul a tu gracia, tus negros y blancos. 4. Espaciado de las letras: Algo que me gusta hacer cuando se trata de mis diseños es que me gusta aumentar o disminuir el espaciado entre letras dependiendo del texto y el contexto. Entonces por ejemplo, aquí tenemos una imagen, tenemos una categoría, tenemos un título, y tenemos un texto. Alguien mensajes de texto. Y voy a ir y hacer es voy a copiar todo esto para que pueda mostrarles un antes y un después. Entonces lo copiaremos por ahí. Sí. Y entonces lo que haremos es hacer todo esto en mayúsculas. Y luego aumentaremos el espaciado entre letras como si el 50%. Ahora eso es un poco demasiado. Hagamos 10%. Ahí estamos. Creo que eso se ve bastante bien. Y creo que eso funciona muy bien cuando se trata de pequeños bits de texto como ese, etiquetas de luz interior y cosas así. Tener letras mayúsculas con algún espaciado simplemente se ve mucho mejor que lo que ves aquí. Pero entonces cuando se trata de títulos, lo que realmente me gusta hacer es disminuir el espaciado entre letras. Entonces disminuyámoslo a tal vez menos 5%, algo así. Y ahí estamos. Hace que las letras se acerquen mucho más juntas y se parece más a un encabezamiento. Y realmente se puede ver la diferencia. Decida dónde no hay espaciado de plomo y este lado donde hay un mayor espaciado láser y un menor espaciado entre letras. 5. Altura de línea de texto: Tanto los programas diseñados. Y por lo general cuando desarrollas un sitio web o sitio web de código y pones texto, el texto puede parecer un poco demasiado compacto, demasiado unido. Hace que sea leer el texto mucho más difícil de lo que debería ser. Y una muy fácil de, que mucha gente creo que se pierda. Es solo para aumentar la altura de tu línea. Entonces si vamos a aumentar la altura de línea donde ella justo aquí, actualmente está en 17 como su defecto. Pero si lo incrementamos a 22, por ejemplo, al instante podemos ver que es simplemente mucho más fácil de leer. Hay mucho más espaciado entre cada línea. nuestros ojos les resulta mucho más fácil leer cada línea también. Y solo ayuda mucho cuando se trata de legibilidad. Ahora, lo único con esto es que no quieres tener la misma línea alta. Si tienes un título, di por ejemplo, si yo, o incluso sólo una fuente más grande en general. Entonces si hago este un poco más grande, porque es un poco tener 14. Y luego ponemos line-height también. Al igual que esto. Todavía es bastante legible incluso con una fuente más grande. Pero cuando en realidad aumenta la altura de línea para fuentes más grandes, no quieres aumentarla tanto como lo harías con un párrafo. Por lo que actualmente está en 29 como el predeterminado a menos que solo lo incremente a 32. Y sí, al instante puedes ver que es mucho más fácil de leer. Lo que voy a hacer es en realidad hacer que estos sean un poco más pequeños para sólo mostrarles los diferentes lado a lado, cuánto de una diferencia lecherías. Entonces si copiamos y pegamos días más, tráelos aquí. Y luego ponemos auto como altura de línea. Podemos ver este lado aquí está con la altura de línea aumentada. Y este lado de aquí es sólo una altura de línea y alterarlo. Y es que es mucho más fácil leer el lado que tiene la altura de la línea aumentada. Por lo que tienes un consejo muy rápido, sencillo para cualquiera que esté haciendo sitio web, cualquiera que esté lidiando con cualquier tipo de grandes cuerpos de texto. 6. anchura de párrafo: Diseñando cualquier sitio web, o tal vez estás diseñando un blog o algo así. Tenemos pérdida de texto. Es bastante fácil tener imágenes grandes y grandes cuerpos de texto. No obstante, confundo a Garcia lobule makers en un tramo el texto todo el camino a través de la página web, todo el camino a través, solo para que parezca que se ajusta a la imagen. Pero esto está completamente mal y no siempre debes hacer cosas porque hace bastante difícil leer el texto. Tus ojos realmente tienen que ir y venir para leer cada frase. Y en realidad es bastante agotador y bastante molesto para el lector. Entonces una cosa muy sencilla de hacer es solo disminuir el ancho de tu texto. Y una buena regla de oro es mantenerla entre 40 a 80 caracteres por línea. Ahora obviamente no es realmente tan fácil contar cada personaje sencillo que tienes en cada línea. Pero a medida que lo sigues haciendo, a medida que resuelves, límpiate con el diseño, como descarado, metiéndote con el ancho del texto, obtienes una buena idea de lo que es más fácil leer y lo que funciona con la fuente que estás usando. Entonces sí, otro consejo muy rápido sobre solo hacer que tu texto sea más fácil de leer. 7. Haz tus formas: Entonces cuando se trata de formularios, veo sitios web de registro tienen formularios que se ven así, donde se tienen todos estos campos de entrada y parecen ser de peso ancho. Y no hay separación. Apenas una gran cantidad de campos de entrada. Y no es muy fácil de usar, simplemente no parece muy limpio y ordenado. Y algo que quieras rellenar. Ahora es realmente fácil arreglar esto y es realmente fácil separar cada parte del formulario y simplemente hacerlo más digerible para el usuario que está rellenando el formulario. Entonces lo que haremos es volver a copiar esto y empezaremos primero por la parte superior del formulario. Entonces empecemos a separar las cosas. Añadamos un borde por aquí. Hazlo t pixels. Dale un gris muy claro. En realidad, sólo podemos hacerlo de un píxel. Y moveremos todas estas formas hacia abajo. Entonces haremos nuestra forma de bit, un poco más grande como seno. Entonces moveremos todo un poco hacia abajo. Ahí estamos. Sólo para darnos algo de espacio. Lo que haremos es separar realmente los campos de entrada. Por lo que tenemos los campos de entrada a la derecha y luego la izquierda y tenemos una descripción de esa sección. Entonces por ejemplo, aquí podemos titularlo info del usuario, por ejemplo. Hazlo semi hueso como coser. Y luego podemos poner una descripción para esa sección, creo que puede ser muy útil, sobre todo para las personas que se están inscribiendo. También se puede ayudar aquí está trabajando en un sistema de cuadrícula. Por lo que podemos ver que el campo de entrada en sí tiene 880 de ancho. Y podemos dividir eso en tres y luego poner 20 píxeles de panning entre cada uno. Entonces eso nos da una columna de 280. Por lo que podemos hacer este 280 por ejemplo, así. Y luego traemos esto aquí arriba, damos 20 píxeles de relleno. Entonces muévelo por 20 píxeles, 12, y luego haz nuestro campo de entrada a 80. Como digamos, sin embargo, cuando se trata del InputField real, no sientas que tienes que apegarte al 280. Lo que me gusta hacer es diseñar el campo de entrada mientras que el ancho del campo de entrada, dependiendo de cuánto tiempo creo que será la entrada. Entonces, por ejemplo, con una dirección de calle que puede variar mucho, puede ser muy larga o muy corta. Entonces hay que pensar la longitud del campo de entrada y en lo que se espera que entre ahí. Entonces un nombre y apellido, por lo general no son locos mucho tiempo, así que podemos traerlos aquí arriba. Y podemos hacer esos 280. Y creo que habrá demasiado de un tema. Entonces ahí vamos. Tenemos nuestra primera sección y ya podemos ver que es una diferencia masiva con respecto a lo que vemos aquí, abordará en la siguiente sección, que es la sección de direcciones. Por lo que en esta sección lo llamaremos dirección de facturación. Porque obviamente se trata de un formulario de registro de pago suave. Entonces llámalo dirección de facturación, así. Copiaremos sobre esto. Y como dije, no siento que tengas que hacer el campo de entrada a 80. Y con una dirección de calle única , puede variar tanto. Entonces creo que en realidad es una buena idea tener esto como un campo de imput de ancho completo. Creo que el campo de la ciudad en realidad podría quedarse como un 2-SAT con lo mismo con el campo Estado y Condado sólo puede llegar a 80 aquí rápidamente, así. Lo mismo con el campo country, y luego lo mismo con el código postal. Y entonces tenemos nuestra sección final, que es la información de la tarjeta. Entonces vamos a copiar esto más. Y podemos poner algo así como solo para tranquilizar al usuario. Simplemente hacer algo en este momento aumentará la altura de línea del mismo. Traer sobre el nombre del titular de la tarjeta. Sí, creo que en realidad sería una buena idea hacer de este ese tipo de número de tarjeta de longitud, creo que en realidad podría ser 2-SAT. Y lo que haremos es realmente mantener el número de tarjeta en su propia línea. Porque creo que eso tiene mucho más sentido. Tener en así. Al igual que vamos a llevar el botón de registro allá arriba. Y entonces también haremos nuestra forma compacta. Y ahí vamos. Ya podemos ver que hay una diferencia masiva en comparación con lo que tenemos aquí. En realidad hemos tomado todos esos campos, imput field, y lo hemos hecho, hecho la forma en sí más compacta y también la hemos hecho mucho más legible para el usuario. Pueden ver lo que necesitan para llenar. Pueden ver separaciones claras entre cada parte de la forma simplemente la hace mucho más digerible para el usuario. Y esa es una forma realmente rápida y fácil de hacer que tus formularios sean mucho más fáciles de leer. 8. Botones de radio: Por lo general cuando diseñas un formulario, a veces tendrás botones de radio como este y funcionan, se veían bien, pero creo que aquí podemos hacer un trabajo mucho mejor y hacer que estos botones de radio se vean mejor. Entonces copiaremos todo esto, bajarlo así. Quitaremos los radios. Y entonces lo que haremos es poner en un rectángulo, como digamos, tal vez darle algunas esquinas redondeadas. Hazlo blanco. Dale una sombra de gota. Trae esto aquí abajo. Lo que haré en realidad es hacerlo más fácil, solo tiraré todo esto en una carpeta, separaré esto en una nueva capa de texto. Y luego haremos esto un poco más grande. A lo mejor 18 en realidad, hagámoslo 1618, tal vez un poco demasiado grande. Nos quedamos semi inclinados. ¿ Y cuál es el precio? Un poco más grande para traerlo. Y luego debajo de aquí, podemos poner algún texto ficticio. Gran T, grande. En realidad borrar una línea. Y creo que eso ya se ve mucho mejor. Entonces lo copiaremos para los otros también. Entonces vamos a hacer esto en grupo. Y entonces también podemos quizá hacer un diseño para este seleccionado. Digamos, en realidad podríamos cambiar el color de esto. Para ser bastante probable. A lo mejor. Le vamos a añadir una huelga. Y B hará su huelga por nombrar de nuevo. En realidad, hagámoslo más brillante también. Creo que definitivamente deberíamos ser mordidos. A lo mejor así. A lo mejor anti color un poco más ligero a cualquier tipo. Y ahora lo estamos, Es tan simple como eso. Se puede ver que hemos tomado sus botones de radio estándar y simplemente les hemos hecho lucir mucho mejor y una descripción. Y simplemente facilitó su lectura y les agregó un toque de diseño bastante bonito. 9. Colores de ícono: Entonces un error común que veo cuando las personas diseñan interfaces de usuario es cuando hacen de los iconos el mismo color que su fuente de texto. Entonces aquí podemos ver que tenemos el ícono, tenemos el texto, pero simplemente no se ve bien. Y el ícono parece que son un poco para que esperaras. Siento como si estuvieran quitando un poco demasiada atención del texto en sí y simplemente no ponderaban correctamente. Entonces una buena manera y una manera muy fácil de arreglar esto es copiarlo y pegarlo. Circo te muestra la diferencia. Literalmente, simplemente hacemos del icono un color más claro que el texto en sí. Por lo que puede ser algo por ahí. Sí. Creo que eso se ve bastante bien. Y luego lo haremos por cada uno de ellos. Entonces ahora que lo hemos hecho, si cada uno de los iconos, se puede ver una diferencia masiva entre este lado por aquí y decidir aquí. Simplemente parece un poco más neutral, un poco más igual cuando se trata de los colores y los pesos, a pesar de que el texto en sí es en realidad un color oscuro que los propios iconos. Entonces eso es solo un consejo rápido sobre hacer o salpicadero. Los iconos y las etiquetas se ven un poco más iguales. 10. No grandes.: Entonces cuando pones iconos en uno de tus diseños, lo general los iconos que pones en impar firmados por un diseñador estadounidense que ya ha diseñado sus iconos a un conjunto de ancho y altura. Por lo que una gran cantidad de iconos de diácono variando tamaños. Pero por ejemplo, estos iconos están actualmente en 64 por 64, pero el tamaño original de estos iconos, o en realidad 32 por 32. Por lo que los he agrandado aquí para que se ajusten a la tarjeta y para que parezca más que estén ocupando más espacio. No obstante, eso en realidad es un error. Eso no es algo que debas hacer. Y es algo que veo que hacen muchos diseñadores junior. Cuando se quiere tener iconos más grandes. Por lo general, los iconos deben tener más detalle a medida que se hacen cada vez más grandes. Si agrandas un icono más pequeño, simplemente agrandas algo que ya está diseñado para estar en un espacio muy pequeño y agrandado que simplemente no se ve bien. Realmente no fluye con el diseño. Y claramente el ícono en sí no ha sido diseñado para ser ampliado. Entonces lo que vamos a hacer es que vamos a tomar esto y vamos a cambiar estos iconos a su tamaño original. Pero también queremos que ocupen el espacio, que ocupen una, una buena cantidad de espacio en la propia tarjeta. Y hay una manera realmente rápida y fácil de hacer eso. Entonces copiaremos éste hacia abajo. Por ejemplo, hará que el ícono sea tamaño original de 32. Y entonces lo que haremos es que en realidad añadiremos un círculo detrás del ícono. Entonces hagámoslo 80 por 80. Como digamos, lo muestro detrás del ícono. Vamos a centrarlo. Y entonces vamos a centrar el icono dentro de él. Pedidos también. Haremos la plaga de Ikhwan. Y luego haremos de esto el color azul que teníamos. En realidad, lo haremos un poco más. Creo que podría ser un poco demasiado grande. Hagámoslo 70 por 70. El área. Y ya podemos ver que eso ha hecho una diferencia masiva porque este ícono fue diseñado para ser 32 por 32, no 64 por 64. Entonces hagámoslo a los otros también. Y ahí estamos. Es una pequeña diferencia, pero creo que hace un gran cambio, un gran impacto del diseño. Porque la mayoría de los iconos no están realmente diseñados para ser más pequeños o agrandados. Están diseñados para ser del tamaño que están diseñados, y ese es el punto completo de ellos. Y una buena manera de hacer que ocupen más espacio es agregar formas detrás de ellos como he hecho aquí, no tiene que ser un círculo. Puedes convertirlo en un cuadrado, puedes convertirlo en un diamante, un hexágono, cualquiera que sea la forma que quieras, dondequiera que la forma se ajuste a tu marca. Y tenía apenas una manera rápida de hacer mejores tus iconos en tus diseños. 11. Hacer el modo oscuro: Por lo que adoptamos modo siendo tan popular como es. La mayoría de las personas, lo que hacen es diseñar o ver su versión ligera de la app, como puedes ver aquí. Y luego simplemente invertirán su diseño. Y se ve bien. Definitivamente es funcional. No se ve bien. De nuevo, simplemente no se ve bien, tenerlo invertido. Y la razón de eso es cuando diseñas una interfaz ligera, lo que normalmente haces es tener los colores más oscuros en el fondo y luego tuvo los colores más claros en primer plano. Eso es lo que crea profundidad. Eso es lo que hace que parezca que las cosas están estallando del diseño. Y cuando haces eso con un diseñador invertido y luz invertida hecha, los fondos reales son más ligeros que las acciones que están frente a ti. Entonces vamos a corregir eso. Entonces copiaremos esto más. Y entonces sólo necesitamos hacer algunos ajustes y realmente no son tantos. Por lo que empezaremos con el fondo hará que eso sea considerablemente más oscuro. Y ahí creo que se ve bastante bien. Hará que este también darpa y necesita ser más oscuro que los propios botones reales. Como digamos, ya sabes qué, creo que eso se ve significativamente mejor. Y se puede ver lo que hemos hecho es que hemos hecho los colores más oscuros en el fondo donde deberían estar. Y hemos hecho los colores más claros en primer plano donde deberían estar. Y sólo hace que la oscuridad se vea mucho mejor y simplemente mucho más agradable a la vista que tener los colores reales invertidos.