Diseño visual para diseñadores y desarrolladores de interfaz de usuario web → Mejorar en el diseño

1. ¿Qué cubrirá este curso?: Hola a todos. Este es un curso de diseño visual para ti. Por qué diseñadores, diseñadores web, desarrolladores o todos los mendigos que acaban de empezar su diseño Ahora por qué creé este curso. He visto mucho fuera de mis alumnos o no Miss. Los diseñadores son diseñadores más grandes que cometen los mismos errores de diseño una y otra vez, y la sensación de que algo falta en su diseño o sus diseños lucen muy hecho. Entonces ese es el problema mayor, que me he centrado en eliminar en las escuelas. Por lo que dentro de las escuelas, les voy a mostrar mucho de mi proceso. Mis técnicas, mis decisiones de diseño, por qué y cómo creo y formulo están diseñadas desde una escala de grises de modelo de diseño a nivel de bloque hasta nuestro color o diseño final. Y al final, cómo presento este diseño usando más tazas para que aprendas muchas técnicas básicas de diseño visual . Puedes aplicar en tu diseño en tus diseños Web, en tu aplicación móvil, diseños o incluso en branding. Entonces si eres más grande eres desarrollador o simplemente estás interesado en mejorar tus habilidades de diseño. Puedes tomar esta clase y espero verte pronto y me encanta ver tu proyecto. Dentro de este vidrio hay un proyecto que vas a presentar, así que empecemos y diseñemos algo impresionante. 2. Punto focal de cada diseño: cada diseño en el mundo. Tiene algún punto focal ahora. Lo que significa el punto focal es que cada vez que miras algún diseño, ya sea branding, diseño, ah,diseño ah, logotipo son un guardia visitante o una revista en cada página en cada sección, en cada uno un separado pieza off diseño, encontrarás uno puntos focales. Entonces siempre que veas por primera vez algún diseño la primera vez que tus ojos van a golpear alguna zona o vas a atraer, miramos esa zona que es el punto focal de ese diseño. Por lo que siempre que estés diseñando de upside ah, por maíz o algún anuncio de revista, debes tener eso en cuenta que donde quieres que tus usuarios luzcan primero. Por lo que ese artículo va a ser el punto focal de tu diseño. Ahora, una vez que haya calculado que este va a ser un punto focal, todo lo demás estará apoyando a ese punto focal. Entonces vas a diseñar todo en torno a ese punto focal. Entonces el punto focal, o el medio que puedes decir el área principal fuera de tu diseño va a captar la atención del usuario, por lo que su propósito principal es captar la atención del usuario y luego apoyar su flujo. Entonces una vez que mires una cosa que tus ojos van a fluir hacia lo siguiente y lo siguiente así es como controlas la gripe de los ojos de tu usuario. Por lo que este es un consejo muy importante en diseño. Ahora eres el diseñador y necesitas guiar a tus usuarios los ojos del pie del punto focal y luego al siguiente punto. Entonces punto focal, luego el siguiente punto focal y el dedo del pie el tercer punto focal, y así sucesivamente y así sucesivamente. Entonces, en realidad, lo que estás tratando de hacer es que quieres tu dedo del pie de usuario, lee nuestro acto de una manera específica. Quieres que el usuario dé estos pasos 123 y necesitas definir los de tu diseño. Vas a usar colores. Ibas a utilizar el espacio en blanco o el espacio negativo para guiar los ojos fuera de los usuarios punto focal, y luego hacia el siguiente punto focal, y luego hacia el siguiente libro, punto focal. Por lo que habrá diferencias en el punto focal. Siempre habrá solo un punto focal importante entonces el siguiente es un poco se puede decir que no tan importante como el 1er 1 y luego el 3er 1 también va a ser no tan importante. Por lo que el punto más importante es sólo un punto focal. Entonces ahora les voy a mostrar algunos ejemplos para ilustrar nuestro este concepto. Eso Veamos algunos ejemplos. Ahora puedes ver esto es un sitio web y lo encontré en un bar. Starcom Liberal tonificado o tranquilo Reino Unido Y se trata de los productos de violencia, audífonos y violistas. Y se puede ver su enfoque es más en la imagen de la derecha donde el sujeto está sosteniendo este ah dispositivo o variando este dispositivo para que puedas ver todos los colores son en piedra naranja y solo tú puedes ver que el negro es los auriculares están en negro. Entonces así es como van ahí, mostrando la importancia del lado izquierdo. Se puede ver el rumbo está a la izquierda. La confianza para destacar la música portátil. Entonces cada vez que miro por primera vez esta página, lo primero que veo es esta imagen. Entonces veo este rubro. Y luego veo esta música portátil. Por lo que todos estos son de la izquierda y los productos del lado derecho. Y esto son elementos de apoyo. No son tan grandes en tamaño. Están al norte, que coloridas, como estas imágenes. Entonces así es como realmente diseñas en el enfoque alrededor de algo Así puedes ver aquí. El foco está en este texto. Por lo que hay mucho espacio en blanco a su alrededor, y el espacio vicio va a crear algún enfoque. Por aquí. Este es el propósito del espacio de lucha. Aquí, puedes ver que están resaltando su producto solo un producto y el fondo pálido y mucho espacio en blanco apagado o espacio negativo, como lo llamamos. Y se puede ver aquí tenemos en el botón. Esto es ir guía del dedo del pie como esta. No ver. Y para Así es como estos son los pasos del punto focal. Es así como nuestros ojos van del dedo del pie se mueven. Entonces veamos otro ejemplo Aquí puedes ver el enfoque está en esta imagen del producto otra vez que ésta. orgánico, Chocolateorgánico, negro. Entonces, en, como, cuatro y cinco segundos, voy a saber que estos son chocolate orgánico y es ah, 100% orgánico o algo así. Por lo que aquí de nuevo, se puede ver un gran uso off colores, solo el producto de cabecera y tienda. Entonces no demasiado desorden, mucho espacio de esposa. Y este es un gran ejemplo. Otra es esta raya y este es nuevo estándar en pagos en línea, sistema de pago en línea. Y aquí nuevamente, el foco medio está en este rubro. Por lo que siempre que vengas primero a esta página, voy a mirar esta. Entonces voy a ver la falta del personal en stock, arte y otras cosas. Entonces también este es muy importante o él para que puedas ver toda la página por aquí en este color. El pantalla es totalmente diferente a todo esto. Entonces el fondo es azul. Todo es blanco y azul. Simplemente esta cuenta de crear es verde. Por lo que esto se llama botón de llamada a la acción. Y por eso es básicamente el punto focal aquí. Entonces uno y 21 y así moviendo el ojo de este dedo del pie de cabeza este botón. De acuerdo, así que este es Walmart. Otro ejemplo Aquí, se puede ver el foco está en este año por aquí. Y también esta imágenes más grandes. No estoy seguro de por qué han quitado el color de la barra. Entonces si nos movemos hacia abajo, se puede ver que esta barra es básicamente el punto focal más importante fuera de este sitio web. De verdad deseo que incluso en este estado, tengan un bar completo por aquí para separarlo del resto de las secciones. Eso puede ser fácilmente. Um se puede decir fácilmente Click by eyes and picked by eyes Y next veamos éste. De acuerdo, así que esta es una página de producto de Elektronik Samsung y puedes ver u escuchar Hear. El principal punto focal básico es la pantalla de Samsung porque es coloreada y tiene muchos colores apagados . Entonces a la derecha es Este es el 112 y tres más grandes. Por lo que estas son las tres cosas más prominentes. Esto es más romano y luego éste es el segundo más prominente. Se trata de un cansado, más prominente. Es así como vas a diseñar y ah, ya sabes im guiar los ojos fuera de tus usuarios. No, Vamos a ver algunos fuera de los, um, diseños de branding. Ahora puedes ver aquí tenemos Este logo es más prominente overhead. Y esta duna no guió y ah, yendo Guía de piedra. Algo así. No estoy seguro de qué son estos? Pero se puede ver aquí en el logo es parte más importante por aquí y luego este rubro. Entonces no estoy seguro de qué es esto, pero se ve genial. Veamos estos ejemplos. Aquí tenemos otro movimiento de branding de diseño. Surgen los gráficos, y puedes ver por aquí en esta página, el punto más focal es esta imagen, y luego al siguiente, tus ojos se van a mover hacia este rubro. Entonces así es como nos vamos a relacionar. Mujer reconstruirá el mundo. Entonces creo que esto se trata de mujer y mujer molestando. Algo así. Aquí otra vez, tenemos algo como esto aquí otra vez. Lo primero es esto Lo más importante es que esto se unió a la revolución humanitaria, y lo siguiente es esta imagen. Para que puedas ver. Um, esto es más prominente en esto porque los colores son demasiado oscuros y esto es un poco claro , como un colores compartidos en la imagen. Entonces así es como esta cosa está funcionando. Siguiente. ¿ Ves otro? Um, encierran tempestad. Odd. Y puedes ver esto es algún tipo de revista y nuevamente puedes ver aquí tenemos diferentes arreglos para imágenes y maquetación, pero lo primero que vas a notar es que este contenido continúe. ¿ Creo que es contenido? A lo mejor y creo que es francés, así que no entiendo mucho, pero así es como usas los puntos focales en tu diseño. De igual manera, aquí se puede ver lo más importante es esta imagen, porque tiene mucho espacio en blanco fuera a su alrededor, y de nuevo, las imágenes son tienen muchos colores. Entonces lo siguiente que notan en este diseño es este rubro overhead. Entonces esto es muy importante. El 3er 1 es el chivato de nieve y mira, estas son las tres cosas más prominentes por aquí. Nuevamente, se puede ver u escuchar imagen muy prominente y el texto de manera similar por aquí, estos son prominentes por dentro. lo primero que vas a notar los encabezados de Artie, así es como usas el punto focal y usas ese dedo del pie. Enfatiza y guía los ojos de tus usuarios y da algunas cosas importantes y más grandes que las otras cosas. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección 3. Uso de línea, curvas y formas en el diseño: lo que fueron diseñados para ver en este mundo. Todos están hechos fuera de líneas, unas curvas y formas, naves básicas. Entonces, siempre que empieces a dibujar algo o comienzas a diseñar algo, vas a usar las formas básicas, las curvas y la línea. Entonces la línea es básicamente línea recta de un punto a otro punto. Las curvas son un poco curvadas o anguladas, o algo así, y las formas son básicamente rectangulares, estrellas triangulares y ah tu, ah, círculo o labios. Entonces estas son todas las cosas que hay. Los vas a utilizar en tus diseños para realzar tu diseño así lo tienes. Se pueden utilizar de diversas maneras. Te voy a mostrar muchos ejemplos. Veamos un poco más sobre estas líneas, curvas y formas. Ahora hay algo más en estas líneas y formas. Entonces si estás diseñando para Children empresa tu Ropa infantil o doble marca, entonces las líneas que vas a usar en tus diseños. No van a ser muy rectos y teniendo muchas esquinas, por lo que las formas y líneas se van a cambiar de acuerdo a tu logo branding y al equipo fuera de tu diseño Así que, por ejemplo, si tu diseño es basado en estas tres palabras clave como fuerza, libertad y Morgan, ¿qué crees que vas a usar? ¿ Vas a usar overs son elipses o vas a usar líneas de tablero muy rectas o algo así? Entonces así es como vas a dar forma a tus diseños, por lo que usando diferentes formas basadas en tu equipo y también se pueden usar de muchas maneras diferentes. Te voy a mostrar diferentes ejemplos, así que abre tu mente sobre el uso de estas líneas y formas en tus diseños. Entonces veamos algunos de los ejemplos. Este es un sitio web rayado. Lo hemos visto en ejemplos anteriores y se puede ver sobre él que aquí tenemos una forma. Esta es la forma tipo Bill alrededor de esto también el tipo de biddle para su uso por aquí. Entonces tenemos rectángulos redondeados por aquí y se puede ver esto es sólo rectángulos se pueden ver en muchas formas por aquí, o se puede ver a la derecha esta falta ahí. Pero también es esquinas redondeadas. Este lo hace y todas estas imágenes están usando esquinas redondeadas. Entonces esto es básicamente todo el equipo. Están usando mucha equivocación en este diseño. Ahora bien, si ven por aquí, pueden ver que esto también es otra forma. Esta es una línea que se inclina el alrededor de este encabezado Esta zona azul, no es muy cuadrada. Por lo que lo están usando para crear algún interés por aquí. Entonces este es otro uso fuera de las líneas. Línea inclinada. Y si vamos por aquí, se puede ver aquí otra vez. Verás una línea una separada su línea otra vez y más abajo aquí para mostrarte algunas de las cosas como iconos por aquí. Elipse otra vez tenemos la línea inclinada, Esta sección Puedes ver cómo están usando diferentes formas. Por lo que se trata básicamente de una línea inclinada la cual está haciendo diferentes secciones. Estaban aquí otra vez en el fondo por aquí. Una línea separada para separar estos de esta inferior otra vez una línea 10 en medio de una línea de 10 a través y se puede ver si me muevo por aquí. Este botón vuelve a tener la misma esquina, mismas formas. Son ilustraciones también tienen esquinas redondeadas. Se puede ver que no son cuadradas. Entonces así es como se construye todo el equipo. Por lo que han tomado esto y se lo han aplicado a ahí, todo diseñado a todos los elementos. De acuerdo, así que aquí Walmart se puede ver u oír. Las líneas no son muy curvadas. Esto es recto. Entonces otra vez, esto es línea recta. Se trata de sección recta línea recta para enfatizar esta sección. Estamos aquí. Se puede ver aquí que tenemos de nuevo. Um, déjame mostrarte. Este es un botón redondeado, separador de línea recta por aquí. Esta línea de 10 se puede ver por aquí otra vez. Estas son unas líneas un poco aburridas y ah, nuevo, una línea de 10. Cuando hacemos clic en él, se vuelve arriba en Boulder. También. Se puede ver esto partidos con la parte superior encabezada por aquí. Se puede ver esta barra de este tipo, y este estilo es casi el mismo. Y así es como le da forma a su diseño. Usando diferentes formas, líneas. Hay muchos usos fuera de las líneas. De acuerdo, entonces este, uh, este proyecto es tu totalmente diferente es la caridad para los niños, creo. Y aquí se puede ver, las líneas son sólo en totalmente diferente. Los cuatro estilos, las líneas detrás de ellos, líneas punteadas, son Se ven como ahora, por aquí. Ya puedes ver si miro de cerca este Ah, subrayan cualquier enlace que puedas ver. Es un marcador muy, Andrea. Líneas impulsadas por marcadores. Eso es todo. Parece que algún chico le ha puesto una línea debajo. De igual manera, Por aquí están usando líneas de curry de curva. Líneas dedo del pie crean interés. Por lo que esto es de nuevo se puede ver línea cepillada en toda esta área de línea de descubrimiento. Por lo que para crear algún interés así de nuevo se pueden ver 100 esquinas, líneas curvas, una forma, forma dura. Se usa de nuevo, dos o tres veces, en este diseño. Y así es como se jode todo este diseño Así también, se puede ver la forma de esto. Se puede ver la misma forma fuera de este sofá. Es casi similar a estas cargas. Entonces así es como han utilizado diferentes elementos en el diseño otra vez, es otro sitio web Um muy 10 líneas han sido habituales aquí en diferentes secciones. Déjame mostrarte aquí. 10 líneas, 10 líneas, 10 líneas para ocultar lo que aquí en la cabecera redondeada píldora rectangular en forma de barra tal botón en forma de campana . Y se puede ver cómo sonó esto. De este logo viene la redondez. Se puede ver su paquete. Tiene todo diferente. A rectángulos redondeados hechos juntos de nuevo. Estos iconos también están restringidos de la misma manera que tengo mucho. Tienen mucho fuera esquinas redondeadas, muy 10 líneas. Por lo que 10 líneas es básicamente su equipo. Están usando 10 líneas muy estilizadas, incluso en los botones que puedes ver por aquí. Brasil se filtra. No estoy seguro de qué lenguaje es este. Creo que es polaco y ah, mucho fuera de líneas. Mucho fuera de líneas, mucho fuera de líneas aquí otra vez en la cabeza en la foto, puedes ver si miras de cerca por aquí. Hay una línea muy delgada que separa la separación entre estas dos líneas y esto un rectángulo forma la forma de derrame. Esto es por apoyo. Entonces así es como es todo este diseño. Veamos otro. Es muy último diseño cada amor esto en y aquí han usado algunas formas, que realmente me encantan, así que puedes ver cómo han creado algún interés. Por lo que estas son líneas onduladas. BlueWave aquí tenemos whitewave aquí tenemos una nave estelar redondeada en forma de estrella y se ve realmente impresionante. Veamos algunos ejemplos más para que no esté bien. Por lo que puedes ver aquí tienen descensos. Por lo que todo el equipo tiene muchas líneas tecnológicas. Aquí se puede ver. Por aquí, esta tierra más botón tiene declive que otra vez Por aquí. Se trata de un gran descenso con el descenso con el declive y esta es línea iniciada. Entonces así es como estas estas líneas están creando justo en esto sobre el diseño. De igual manera, se puede ver u oír. Este es un diseño de aplicación móvil y estas líneas muy pequeñas y sencillas están creando mucho espacio fuera de blanco y crean en justo en este diseños una línea a línea tres líneas para cinco y una línea curva por aquí. Esta es la forma de la curva. Se utiliza para crear algún interés porque todo el diseño es muy aplastado. Así que crea a alguien solo Han usado esta línea country y se ve realmente genial. Es a partir de un gravo o dejarte querido haciéndolo. Estoy usando sus páginas para mostrar estos diseños. Entonces me conseguí el dedo del pie crédito cualquiera Así se puede ver por aquí de manera similar, por aquí esto es de múltiples dueños. Yo solía ir y pocas agencias De igual manera, este este este es de este tipo. Carol, Ella bocina. De acuerdo, así que esto es de Mika Park, y aquí puedes ver este diseño es totalmente diferente. Aquí se han utilizado las formas de los trazos de pincel, pinceladas plato y ah, es como se ha creado todo este equipo. Por lo que puedes ver realmente me encanta cómo este cepillado de pincel está creando justo en todo este cabezal superior de área. Entonces creo que estos son, ah, muchos ejemplos que has visto ahora. Y si tienes alguna pregunta sobre esto usando líneas y formas y cómo va a encajar en tu equipo fuera de tu diseño, puedes hacerme cualquier pregunta al respecto. Pasemos a la siguiente escucha. 4. Colores y el tema de el diseño: el mayor problema que he visto en mucho fuera diseñadores novatos. A grande nunca diseñadores es cómo usar el color Saudia. No saben usar colores en sus diseños, por lo que solo hablan hasta colores aleatorios o tres colores aleatorios e intentan mezclarlos y usarlos para diferentes elementos en sus diseños. Entonces esta es la cinta más grande que les voy a dar. Para empezar son avisos o tienda de bigness. Trata de usar más de dos colores en tu diseño, así que te voy a mostrar muchas técnicas. Cómo construir tu esquema de color y un poco grande. Un problema es que la mayoría de los diseñadores estadounidenses, en su mayoría los grandes diseñadores de notas de metal, no saben que los colores no son independientes. Por ejemplo, si estás usando solo color azul o un color morado, no significa que sean independientes. Tienen dedo del pie se ven muy bien juntos, por lo que necesitas combinarlos. Y esto no es cierto para cada color. Cada color es no no se puede combinar con ningún otro color. Entonces hay algunas reglas. Hay algunos colores que van a ir bien juntos. Algunos asesinos no se van dedo del pie se ponen bien demasiado bien juntos. Por ejemplo, si vas a la playa, ves a un equipo específico en greens, salones y blues, y la arena es un poco de edad amarilla o gris, algo así. Entonces esto es todo un equipo. Este es el color natural, maquinando lo que Dios ha creado de todos modos. Entonces la regla es la que he visto y usado es que 60% use tres colores. Si tienes un asesino se va a usar para el fondo. 60% del 30% es el segundo regular, que se va a utilizar en diferentes áreas fuera de tu página web, y el 10% es el S y el color son otro color, cual se va a utilizar con moderación o muy menos en tu diseño. Entonces esta es la regla de básicamente las personas que son diseñadores de interiores. Utilizan esta regla para el esquema de color, así que si estás pendiente de tus pelotas, van a ser 60% del mismo color. Esto va a ser mucho en tu habitación que el 30%. Podría ser el tan lejos de tu habitación y la cama en tu habitación y el 10% es el amarillo. Por ejemplo, Si tienes almohadas amarillas en tus camas, se van a actuar como color de extensión o 10% de color. Entonces así es como van a construir su esquema de color. Entonces si miras mi esta diapositiva, puedes ver cuántos colores he usado. Acabo de usar básicamente hacer asesinos. Se trata de un color morado negro negro, glaciar apropiado, ular de tapa blanda. Y en la parte superior, se puede ver este es el blucher, blanco y negro. No son básicamente colores que no son. Se puede ver que no están en lo enorme. Simplemente no son color y ah Ali color. Entonces así es como se construye este esquema de color. Además, puedes ver en la parte inferior donde has visto haciendo tus diseños pactados Awesome. Por Mohammed s y Parise. Ese es mi nombre. Y también es Ah, se apaga. Aquí se puede decir Calero gris azulado. Por lo que este es un Esto se genera a partir del mismo este color azul. Entonces así es como se ha generado este esquema de color. Una cosa más es que hay propósito fuera de cada color en tus esquemas de color. Entonces si estás usando colores muy tiburones que se pueden usar como tus botones. Se pueden utilizar como los elementos capaces o llamar la atención de su usuario. Entonces puedes usar otro color. Por ejemplo, son de color azul opaco como se puede ver. ¿ Qué aquí? 30%. Puedes usar eso en algunas áreas específicas fuera de tu diseño como barra superior y barra de navegación superior . A lo mejor. Y luego tenemos color de pelea británica algo así que voy a usar para el fondo. Entonces, ¿así es como puedes construir tu esquema de color? Aquí he mostrado este ejemplo. Se puede ver. De acuerdo, ahora el último consejo y eso es más importado Tip. El consejo más importante es que empiece a diseñar sin colores. Vas a añadir los colores al final. Es así como diseñé así es como muchos diseñadores diseñan y esta es la forma correcta. Entonces lo que vas a hacer es que vas a usar crea en tu diseño, y al final, solo un ex angular como puedes ver lo que aquí ha usado este cólera amarilla. Por lo que este amarillo se utilizará para son los botones son todas las áreas activas fuera de tu diseño o áreas interactivas fuera de tu diseño y otros van a usar para definir diferentes secciones y diferentes colores en tu diseño y todos los demás estos grises son yendo dedo del pie mostrar una diferentes áreas de secciones fuera de tu diseño. Por ejemplo, este gris voy a usar para logo este gris voy a usar para texto o deshonra, va a estar encabezando esta locura, yendo texto corporal Toby, y esto va a actuar como mi color de fondo. Así que intenta iniciar tu diseño con gris, solo diseña en diferentes tonos de grises y luego después en la siguiente iteración. Adv en color a ella. Entonces así es como vas a agregar un color que el 2do 1 y van a lucir como un gran diseño. Entonces les voy a mostrar muchos ejemplos en la siguiente lección. Entonces sigamos adelante y veamos algunos fuera de los ejemplos del dedo del pie. Quítate la idea de este color, maquinando 5. Ejemplos de colores y temas: veamos algunos ejemplos para los fusibles off color y cómo se puede utilizar. Simplemente puedes usar pocos colores como dos asesinos, y crear tu o diseño. Entonces esta es una página de aterrizaje que recientemente creé para un cliente. Y se puede ver por aquí que he usado apenas unas líneas y unas sombras y azul, y esto es casi de alerta negra. Por lo que estos son los solo dos colores que son los principales asesinos utilizados en todas partes en este diseño . Por lo que este gris por aquí, se puede ver también es una gran variación azul del mismo nucular. Todo aquí y luego si lo muevo hacia arriba, se puede ver esta es la segunda sección otra vez. Estos son un poco de azul pálido. Eso fue un poco se puede ver captador de atención de ocho años sección fuera de este diseño. Entonces tenemos éste. Esto de nuevo es azul y negro otra vez, azul y negro. Estos son sólo unos pocos colores más, que acabo de crear a partir de esto otra vez. Este azul y yo hemos mostrado algunos de los trucos en mis otros cursos sobre cómo crear diferentes colores a partir de los mismos colores que van a ir bien juntos y Ah, y esta es la única sección donde he usado estos colores. Y luego si vamos por aquí otra vez, botón negro, esto son clientes diferentes. Y al final, se puede ver por aquí en los zurdos son de nuevo los colores azules, este fondo. También son pálidos, azul grisáceo. Por lo que todo este equipo está usando sólo azul y negro dos colores, unas pocas líneas, pocas sombras, y están disueltas. Entonces así es como puedes crear una necesidad y un diseño limpio sin usar demasiados colores. Aquí hay otro ejemplo que creé en el concurso de diseño 99 y estuve en el finalista. Pero de todos modos, desafortunadamente, no quería este concurso. De acuerdo, entonces aquí se puede ver de nuevo. Estoy usando este gris y azul para que esto puedas ver a todo este equipo ojos usando este cree y colores azul, nada más. Por lo que se puede ver cómo he creado Ah, diseño muy elegante al usar solo son se puede decir dos asesinos. Por lo que todo al fondo es azul o negro y solo x tobillo sencillo. Entonces este es el color más importante por aquí. Se puede ver que escogí este color de aquí. Se puede ver si se mira el logotipo. Estos Así es como vas a volver a conseguir las ideas. Se puede ver el local para ello y se puede ver este teléfono evolucionado. Están a juego ropa de su muy cerca. Entonces así es como obtenemos ideas y creamos diseños de aspecto impresionante otra vez, se puede ver por aquí este ah dream sabor tradicional tabaco. Tiene algo de textura en ella. Entonces he usado algo de textura, nena en el fondo, mismos colores que puedes ver por aquí. Escogí para la espalda fuera de mano de obra y esta pantalla lo escogí para sabor mental solo dedo del pie separado que de lo contrario todo lo demás es azul y este azul viene de su marca. Se puede ver sueño 1.8 y así es como creé todo este diseño y revisión de clientes. Al igual que este diseño, casi me llamaron a dos veces. Incluso después de que terminó esta competencia Waas, dijo que realmente me encantó este diseño y desafortunadamente estoy en el cliente real que iba a seleccionar en el CEO fuera de esta empresa. Al final no seleccionó esto, pero la agencia que diseñé para ellos realmente les encanta esta idea. De todos modos, veamos otro ejemplo. De acuerdo, entonces este es otro ejemplo que es, uh, otra competencia de mis 99 diseños dot com. Y estos son muy viejos. Y desgraciadamente, nuevo no gané en este. Yo estaba en las finales, pero no me refería a nada como se puede ver aquí. Estoy usando solo color morado y grandioso y negros para el glamour porque es, ah, Bush soplando bar. Y puedes ver aquí acabo de usar ese color mecenas. Te tengo algunos mecenas, algunos fondos, algunas sombras líneas para enfatizar diferentes secciones y áreas. Y aquí se puede ver de nuevo, el color más destacado es morado, revirtiendo los colores. Esta otra técnica te he mostrado en mis otros diseños que aquí invertimos los colores y aquí tenemos los asesinos reales. Fue el esquema de color. Entonces así es como creé a todo este equipo. Veamos algunos ejemplos más de otros diseñadores porque creo que solo soy un diseñador normal . Mi trabajo no es tan bueno, Así que veamos algunos diseñadores experimentados y con más experiencia que yo. Entonces aquí tenemos jampp dot com. Este es otro sitio web. De verdad me encantan estos asesinos porque Estos son mis colores favoritos. Morado. Perdón, Morado. No morado. Me gusta esto Azul oscuro son azules y naranjas. Por lo que estos son dos de mis colores favoritos y se puede ver cómo lo han usado. Top line púrpura que este morado formas por aquí, las formas azules y ah, así es como se utiliza el diseño de la zorra. Estos dos asesinos en sus todas sus ilustraciones y algunos tonos fuera que para esto es un encendedor. azul es el mismo azul más claro de este broker más oscuro. Realmente me encanta este sitio web. Esto es de primera clase y nos encanta este diseño. Muy sencillo, muy elegante. Tan solo dos colores y diferentes tonalidades fuera de que esta publican azul. Entonces éste es más oscuro. Esto es diversión ligera en esto es de nuevo este gran, gran popular color azul grisáceo o aquí para que puedas ver usando sólo hacer colores. Puedes crear diseños impresionantes que no necesitas como tres o cuatro o cinco colores. Esto es así que veamos un ejemplo más. De verdad me encanta este. Es de Denny Petty y el título es que los perros deben ser bonitos. Y realmente me encanta esto. Cómo ha usado diferentes pastos por aquí. El azul de inicio este azul prominente en el stock sobre negro Un poco aquí y me encanta cómo estas las cosas se han destacado por aquí con algún color azul pálido debajo ellas. Ah, y ah, este es un gran uso de un esquema de color simple para realzar todo tu diseño para que puedas ver justo este es su color primario o acento. Se trata de color azul el cual se utiliza para las secciones resaltadas o selectivas o interactivas este diseño. Este azul pálido se utiliza para resaltar pocas áreas que son, se puede decir áreas enfatizadas, y estos son de nuevo enlaces. Por aquí. Estos están de nuevo en azul. Por lo que realmente me encanta este diseño. Déjame mostrarte otro Pelo otra vez. Están usando sólo dos colores la pantalla y el mar en la arena, color azul opaco y el extremo del dedo negro casa estos colores y se pueden ver estos. ¿ Hay otras ilustraciones diferentes otra vez en la ilustración. Solo estás viendo dos colores por aquí, dedo del pie hacer colores a colores a colores, y eso es todo para que puedas ver cómo están usando diferentes colores para resaltar, como los trabajos. Nos estamos escondiendo, así que si pinchamos por aquí. Vamos a ver cómo su pala de trabajo está listada por aquí. Por lo que abren empleos de nuevo. puede ver aquí tienen este Bill C en color azul y ah, me encantó mucho esta vez. Esto es muy audaz, muy único en este color placa y en la parte superior fuera el negro con la pantalla se ve realmente genial. Entonces estos son algunos ejemplos que quería mostrarles chicos. Espero que te haya encantado esta lección y concordes las ideas de cómo puedes usar diferentes colores . Un consejo más es que si tienes un fondo más claro, intenta usar colores más oscuros en la parte superior de ese dedo del pie, consigue un poco de contraste como puedes ver qué aquí. Y si tienes algunos fondos más oscuros, puedes ver aquí tenemos fondos más oscuros. Están usando colores más claros en él. Entonces esto es un muy básicamente, pero he visto a muchos diseñadores haciéndolo mal. Entonces pasemos a la siguiente lección. Estas lecciones son cada vez más largas, pero espero que te vayas a sacar ah, mucho de mejoras en tus diseños al mirar estos ejemplos y cómo te estoy explicando . Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección 6. Uso de consejos y trucos de Typefaces: Ahora hablemos de las caras tailandesas y de la fuerza que usas en tu diseño. Tienen, ah, regla muy importante. Desempeñan un papel muy importante en tus diseños. Ahora mucho fuera de los diseñadores, creo que no entienden que Eat Die Phase tiene hits propios Weiss, o se puede decir que es propio tono o propio equipo o personalidad. Entonces si estás tratando de usar algún tipo de letra, intenta emparejarlo con el equipo y la personalidad fuera de tu diseño. Entonces si estás diseñando para los niños la fuerza, vas a usar su va a igualar a ese equipo. Entonces, ¿qué más hay ahora en las tipografías? El primer consejo que le doy a los novatos o a todos los diseñadores es empezar con un cajón o máximo de dos tipos de letra. Intenta usar tres o cuatro tipos de letra e intenta mezclarlos Así que una tipografía intenta seleccionar la tipografía única, que tienen mucho fuera diferentes estilos como Open Sands o Roberto Roberto tienen, como tal vez 30 40. Se trata de una familia muy grande, y puedes combinar diferentes estilos y crear un bonito diseño. De igual manera, intenta usar dos tipos de letra diferentes puntera obtener contraste ahora puedes ver en mi diseño. Aquí puedes ver he usado la cara delantera Rakitic, que es para el encabezado y otra que es muy elegante, muy delgada y muy alta. Entonces puedes ver que son ellos. Están consiguiendo cierto contraste entre ellos. De igual manera, siempre que intentes usar algunas tipografías, deben tener algún contraste. Entonces hay un curso completo de mi parte en esta tipografía o tipografía. Ahora, el segundo dip que le doy a mis diseñadores es que trate de usar solo una familia fort face o trate usar solo dos tipos de letra. Entonces no intentes mezclar como tres o cuatro porque son difíciles de manejar y controlar. Entonces, ¿quieres que me encare? Por ejemplo, si estás usando Roberto o cualquier otro tipo de letra similar, puedes ver que tiene muchos estilos diferentes. Entonces si miras a Roberto, ahí está Roberto, Roberto, Roberto, Condensado y Roberto. Creo que algún tiefest estilo cancha hay como 30 o 40 diferentes fuerza y estilos en Andhra border Tiefest Segundo dip es que trató de usar dos diferentes yo caras para conseguir algún contraste. Por lo que el contraste se puede utilizar de muchas maneras diferentes como tomar y 10 y mucho. Voy con el dedo del pie. Hay otra conferencia en la siguiente lección sobre la siguiente sección sobre el contraste. Entonces vamos a hablar de su sobre el contraste para que puedas hacer formas San serif y serif . El fuerza, que tienen algunas líneas de guión en las esquinas, está al fondo de ellas. Entonces así es como vas a empezar a usar algunas tipografías. Lo de Von enano es que cada estilo cuatro tiene su propio propósito. Entonces si estabas usando want I face para encabezados, vas a usar ese mismo tamaño y ese mismo fort para todos los encabezados en tus diseños . Si estás usando un ford para body dext o el texto corriendo en tu diseño en el texto pequeño , vas a usar la misma cara de corbata para todo el texto de cuerpo por todas partes en tu diseño. Por lo que esta es una cinta muy importante. Trata de arreglar tu fuerza y trata de darles propósito que esto sea para encabezar. Esto es para texto corporal. Esto es para esto es para botones. De acuerdo, Entonces la magia donde va a suceder la magia en tus tipos de letra es. El mágico está escondido en la escala. La escala es básicamente el tamaño o el contraste. Cuánto hay el contraste. Entonces escala es que, por ejemplo, tengo fuerte muy pequeño para mi dext y luego tengo fuerte muy grande para teléfono grande para mi rumbo. Por lo que van a tener mucho contraste fuera y se va dedo del pie crear muchos intereses fuera como se puede ver u escuchar en mis diapositivas D. Lo que intento hacer es que estoy usando un Ford muy 10 con una forma muy toma, que es un teléfono negro más audaz. Por lo que puedes ver estos son diferentes estilos que he mostrado. Creo que se trata de un Ford 10 de Burdeos normal, mediano, audaz y negro. Por lo tanto, intenta usar tanto contraste como puedas por ejemplo, delgado y negro. Van a tener mucho contraste. De igual manera, puedes usar el contraste haciéndolo un encabezamiento muy grande Para, como este, puedes ver en todas mis diapositivas estoy usando muy tomo muy grande, color muy brillante para este rubro y muy teléfono delgado y pequeño para mis textos o aquí. Entonces así es como vas a usar la magia está realmente oculta en la escala de escala significa cómo estás haciendo el texto uno muy más grande y un fondo muy pequeño muy pequeno y tomaste una muy lata. Entonces así es como vas a hacer eso En estos días. Estamos diseñando mucho para APS móviles, pantallas móviles y pantallas más pequeñas. Y hay mucho apagado para diferentes números fuera de pantallas, diferentes tamaños fuera de pantallas, escritura en retenedor, tamaños pequeños y luego dispositivos de tamaño mediano, luego dispositivo de gran tamaño como escritorio DVS muy grande y algo así. Por lo tanto, ten eso en cuenta que cada tiefest no va a funcionar en pantallas más pequeñas en pantallas más pequeñas . Existen diferentes tipos de letra que están diseñados para funcionar para pantallas más pequeñas en y dispositivos de mano , y se puede ver que van a funcionar mejor en esas pantallas. Por lo que antes de comprar cualquier teléfono o usar cualquier fuerza, siempre hay información en ese sitio web. O intenta probar eso para en la pantalla de tu móvil e intenta ver que 14 píxeles o 16 píxeles son 18 pixel cuatro tamaño ¿se ve legible? ¿ Se ve legible? ¿ Y puedes reconocer diferentes letras? Entonces así es como vas a seleccionar tu déficit. Entonces hay muchos factores en la selección del tifus lo es, pero este es uno de ellos Ahora ¿por qué crees que Roboto es usado por Android y San Francisco lo usan los dispositivos Apple? Esta es la misma razón por la que han desarrollado sus propias defensas que se ven muy bien en sus dispositivos y que son legibles, ilegibles. Y por eso que si nuestro sistema para Android es Roberto y Apple dispositivos tu San Francisco ahora en la siguiente lección, vamos a ver algunos de los ejemplos que cómo está la selección off tifus va a mejorar y ex crear diseños de aspecto impresionante. Entonces veamos algunos de los ejemplos. 7. Ejemplos de usar caras en el diseño web UI web: Ahora veamos algunos ejemplos. Y este es el primer ejemplo de G ella y esto está en Bihar. Empieza ya y puedes ver cómo esto creo que esto es Ah, agencia de diseño. Y hay proyectos perfil y general. Y se puede ver cómo están usando esta tipografía muy única. Y se puede ver es que parecía que se usa. Está escrito por ah uh Carter vecino Pen y llevar gráfico Ben. Algo así. Y se puede ver cómo han utilizado sólo dos colores y este die tarifas para enfatizar y su estilo. Aquí también se puede ver la misma tipografía, misma vez cara misma tipografía en Levante I face usado en todo este diseño y se puede ver que se ve genial. Entonces así es como usted la selección de caras de tinte o muere para la selección puede mejorar su diseño. Entonces veamos otra aquí. Se puede ver esta es alguna receta al revés, creo, y se puede ver aquí hay debido a la fuerza. Creo que éste es el mismo. Esta es una versión muy audaz y esto es normal. Creo que creo que se ven igual. Vamos a ver lo viejo. Vale, así que aquí tenemos estas dos fuerza en que están buscando crear Muy toma rumbo con algún gran estilo y puedes ver por aquí núcleo visual, nuevo nutrir Puedes ver este teléfono es muy redondeado y es sensible Y este es un triste día para así se ven juntos crean aquí de nuevo se puede ver San Serif y Serif sentido que si es básicamente tener algunas terminaciones como estas y bolas muy gruesas puedes ver tu aquí en la cola off ¿Por qué? Ahí hay una bola pequeña y están buscando crear Así que esto está bajo diseño y aquí se puede ver de nuevo Están usando síndico muy con o muy tomados pensar y transformados como se puede ver en la parte superior para la más grande El encabezamiento cuatro Hay mucho contraste entre diferentes líneas. También es un celular y se puede ver en el subepígrafe de aquí donde está escrito Oscar Wilde. Se trata de un triste reformado y es humanista, creo Humanise Ford. Aquí hay otro ejemplo Aquí. Se puede ver muy tomar el control aquí para que se pueda ver la diferencia en escala. Esto es muy grande. Esto es muy pequeño y esto es muy tomado. Esto es muy 10. Entonces así es como va a crear interés en tu diseño para que puedas ver solo para morir caras una muy grande, muy pequeña. Y se ven muy bien juntos. De igual manera, este es otro proyecto Berlín y realmente me encanta este Cuarto, esto es de nuevo, creo. Ah, Ford transitorio. Supongo que no recuerdo todo, pero creo que es más depende de, um, um, crear tu sentido fuera de la fuerza de coincidencia. Por lo que no necesitas aprender y recordar cada cuatro estilos. Pero se puede ver por aquí el para forzar uno es San Serif y uno mismo. Por lo que la parte superior en ella decía si el de abajo es sensible y está más fuera de fuerte geométrico, lo aprenderás. Se basa en naves simples y esto es básicamente que están buscando crear juntos. Entonces si miras sus esta es su app. Para que veas cómo estos dos teléfonos van a crear juntos. Esto se utiliza para el rubro. Entonces el propósito fuera de este teléfono el stop uno está encabezando el de abajo es el texto. Entonces así es como todo el AB está usando estos forzados. Y espero que hayan disfrutado de esta lección. Entonces, uh, pasemos al siguiente. 8. Uso de el espacio blanco en el diseño de UI: Si quieres ser un gran diseñador, hay una cosa más que necesitas poner en tu diseño. Eso es mucho espacio en blanco. Entonces usando el espacio en blanco o el espacio negativo donde no hay nada escrito, va a mejorar mucho tus diseños. Por lo que el espaciado entre elementos y el espaciado entre elementos vertical y horizontalmente, ambos van a funcionar para tu espacio en blanco. Entonces si quieres ser un buen diseñador, eres todos los días, palabra o línea cotidiana debe ser. Uso el espacio en blanco en todas partes. De acuerdo, entonces esa es una cosa que debes tener en cuenta. He visto mucho fuera de diseñadores más grandes que tienen miedo de usar tanto espacio en blanco. Intentaron desorden del dedo del pie, sus elementos de diseño en la página un grande, por lo que intentan apretarlos juntos. Por lo que te aseguras de que vas a usar una buena cantidad fuera del espacio en blanco. Ahora bien, ¿por qué necesitamos espacio en blanco? espacio en blanco en realidad crear cosas guisadas? El número uno es el énfasis. Ahora se puede ver en toda esta diapositiva. Tengo mucho espacio de peleas y muy menos contenido, por lo que se puede ver todo el enfoque y Todo el énfasis está en el medio en el área de este texto donde he escrito. Entonces así es como el vacío, los espacios yendo del dedo del pie enfatizan lo que sea capturado o dentro de ese espacio de lucha. Entonces si algo alguna imagen o algo tiene mucho espacio en blanco alrededor, es espacio negativo como se le llama. Entonces va a ser muy prominente en tu diseño. En segundo lugar es que se va dedo del pie producir efecto fuera de la sencillez y diseño limpio, y se quitará más adelante. Así que he visto muchos diseñadores, su mayoría bigness, que intentaron dedo del pie simplemente poner texto y diferentes elementos al azar en su tablero de arte y los no saben cómo, ya sabes, equilibrar nuestro espaciado entre diferentes elementos. Entonces, en mi curso tipografía para diseñadores y desarrolladores, he hablado de este ritmo vertical donde vas a diseñar todo tu diseño basado en diferentes espacios en blanco, diferentes pasos vitales, por lo que va a ser muy calculado, y se basa en ciencia y matemáticas distintas al arte. Entonces por eso dije que el diseño es mayormente ciencia y matemáticas más que arte, porque usamos muchos cálculos en él. Ahora, permítanme mostrarles algunos ejemplos y pueden ver por aquí. Aquí tienes uno de mis diseños y puedes ver por qué he dejado mucho espacio fuera alrededor de esta zona para que puedas ver esta imagen. Perdón, Este video, va a tener mucho énfasis porque hay mucho espacio en blanco en el lado derecho del lado izquierdo. Y también por aquí, se puede ver el rumbo es Ah, mucho tienen mucho espacio de hielo por encima de él. Por lo que leyendo en la parte superior, izquierda y derecha, se va a poner énfasis. Y ah, así es como va a suceder. Entonces, um, aquí en esta sección, se puede ver que tenemos mucho espacio en blanco a la izquierda, la derecha, en la parte inferior y en la parte superior. Así que asegúrate de que estás espaciado sea consistente. Entonces si tienes, como, como, 100 píxeles o 100 puntos de distancia entre estas dos secciones, mantén eso en todas partes igual. De acuerdo, así que 100. Si tienes 100 en la parte inferior, asegúrate de que siempre sean 100 o algo así. Entonces eso asegúrate de que seas espaciados en diferentes elementos entre diferentes elementos. Va a ser consistente. De acuerdo, entonces aquí hay otro ejemplo. En este diseño, puedes ver que solo estoy usando espacios en blanco. Pocas líneas puntera separadas, diferentes secciones. Por lo que puedes ver aquí en esta sección por qué es muy prominente porque tiene mucho espacio en blanco de fondo. Ah, el espacio vicio no significa literalmente que debe ser blanco. Puede ser de cualquier color, pero se puede ver que esta zona es dominante. Por lo que siempre que veas en toda esta sección, he considerado fuera la parte superior que puedes ver por aquí. Vmc. No es tan prominente este también Ah, mucho espacio en blanco en la parte superior. Se puede ver a la izquierda y a la derecha. Entonces este es un prominente por lo que primero lo verás. Entonces mirarás este formulario porque apagado este botón resaltado botón. Por lo que esta también es otra técnica. Puedes usar el espacio en blanco para enfatizar o guiar los ojos fuera de tus usuarios. Y aquí hay otra sección que puedes ver que estas secciones están separadas, pero solo están separadas con espaciado diferente para que puedas ver que el espacio entre estas dos secciones es demasiado. Por lo que significa que ahora se ha iniciado de nuevo la nueva sección fuera de este sitio web. El nuevo apartado y mucho espacio y es consistente con el este espacio. Entonces este espacio es igual dedo del pie saudita Ah, este lugar y este es el fin. Por lo que puedes ver de nuevo por aquí mucho espacio en blanco por encima de esta zona del pie. Y si intentas apretar estos texto del dedo del pie del borde de este, no se va a quedar muy bonito y se verá desordenada. Por lo tanto, ten eso en cuenta. Es así como uso el espaciado entre elementos. Además, se puede ver el espaciado horizontal y la destrucción también es buena. Um, aquí se puede ver la temporada de desconcierto, espaciado horizontal entre estos cuatro elementos. Entonces así es como utilizas espaciado dedo del espacio blanco. Consigue en casa tus diseños. Veamos algunos ejemplos más y este es un ejemplo perfecto. Fuera uso del espacio de la esposa. puede ver que es un medio de república. Se trata de agencia digital con sede en Londres y se puede ver cómo toda su página ha sido diseñada logo por aquí. Algunos enlaces por aquí, y todo el énfasis está en esta sección. Por lo que mucho espacio en blanco alrededor de esta sección en realidad le está dando énfasis. Y este diseño se ve muy bien. Entonces veamos cómo han trazado sus otras páginas. Se puede ver aquí tenemos de nuevo mucho espacio en blanco alrededor del tema. Gran diseño. Otra vez. Mucho espacio en blanco y todo énfasis en esta área es esta sección. Realmente me encanta este sitio web. Um, bien, así que veamos otro ejemplo. Aquí tenemos otro ejemplo. Es significativo. Y es por todos estos diseñadores un libro de equipo que realmente me encanta cuando muchos diseñadores vuelven a estar juntos porque es el diseño más creativo. De acuerdo, así que aquí puedes ver déjame mostrarte. Um Vale, así que aquí puedes ver si voy allá abajo. OK, entonces esta es su página de productos. Selecciona cantidad, y podrás ver cuánto espacio en blanco han utilizado. Por lo que va a crear un look moderno, un look elegante y un look de caña. Por lo que puedes ver que estás aquí mucho espacio en blanco, solo un producto que la cantidad en stock. Y ah, sólo este paso a paso y guardia. De igual manera, si nos fijamos en esta zona. Inicia interactiva. Se puede ver que hay muchos huecos fuera entre diferentes elementos. Mucho uso de espacio en blanco se puede ver por aquí en esta zona, Della Lamb. Se puede ver cuánto espacio tienen entre esta revisión y el nombre fuera del revisor y esta esta calificación de inicio. Entonces así es como usaste el espacio en blanco entre diferentes elementos. Y aquí de nuevo, se puede ver cuánto espacio tienen en la parte superior. Entonces, um, tesis, cómo se obtiene la idea de diferentes diseños de que cómo están utilizando el espacio en blanco así nuevo o escuchar pocas líneas dem y mucho espacio en blanco para crear toda esta mesa para la ley órdenes. Y así es como estos diseñadores usando el espacio de trabajo de manera similar, es esto en este sitio web de asana? Veo mucho espacio en blanco se puede ver en la parte superior por aquí y luego otra vez, esta sección por aquí antes de comenzar este, um, um, regalo de imagen de GF para GF o lo que sea. De acuerdo, entonces de nuevo, se puede ver por aquí en esta sección, ve mucho espacio en blanco donde viene de nuevo la siguiente sección. Mucho espacio en blanco otra vez Mucha experiencia y es consistente. puede ver que es casi lo mismo en la parte superior y en la inferior. Mucho espacio en blanco. Realmente me encanta este sitio web. Asana es una gran herramienta y este sitio web tiene un gran diseño. Entonces otro. Esto es picante, sin punto picante com, y se puede ver cómo todo este sitio web se ha presentado mucho espacio en blanco. De acuerdo, entonces si intentamos dedo del pie haga clic en él. Lexie. Mucho espacio en blanco. Todo el énfasis está en esta área que está cerca esto. Ver otro ejemplo. Aquí hay otro ejemplo. Se trata de cuatro hogar y familia conocidos por su experiencia o lo que sea. Si haces click en él, volverás a ver mucho espacio de trabajo. Todavía se está cargando. Creo que las miradas lo apagan. Espero que tengas industrial como el espacio en blanco va a crear mucho énfasis. Si tienes mucho texto o lord off elementos en tu página, se va a quedar abarrotado. Entonces pregúntale a tus clientes que intenten minimizar Ah, todo el contenido para que podamos hacer que se vea genial. Entonces eso es todo lo que puedes ver si miras por aquí cuánto contenido tenemos, solo pequeño encabezamiento tres líneas fuera de texto, que es , creo, ni más que una larga línea. De igual manera, por aquí, solo una cotización de un cliente y, como 434 clientes principales y luego ver más clientes. Si quieres volver a verlos, puedes ver que están mostrando sus pocas Ah, nuevas y destacables, incluyendo línea de tiempo, y puedes ver aquí de nuevo el contenido es muy menor porque la mente humana, puede consumir menos contenido fácilmente en lugar de mucho contenido. Por lo que esto también es dama a la psicología humana. Creo que esta conferencia es cada vez más larga, así que si tienes alguna pregunta que hacerme, pasemos a la siguiente escucha. 9. Technique de diseño de niveles de bloque: siempre que alguien construya su casa o cualquier edificio, qué hacen Primero, hagan el inicio de construirla de inmediato, o empiecen con el plano o el mapa de ese diseño. Entonces el primer paso y este es un consejo muy importante en tu portador de diseño que cada vez que comienzas cualquier diseño Dr empezando por su blueprint, es marco de alambre. Es diseño a nivel de bloque. Yo lo llamé un diseño a nivel de bloque porque te voy a mostrar por ejemplo cómo se ve Y este es el consejo más grande que puede mejorar tu diseño. . No empieces tu diseño poniendo toda la textura y todas las imágenes en tu lienzo. Pero comienza con el diseño de nivel de bloque y si puedes comenzar con él con gran escala grises usando solo grises y negros, eso sería genial. Entonces permítanme mostrarles un ejemplo al final de esta lección, qué significa eso en realidad y cómo lo vamos a construir ahora. El técnico detrás de crear este diseño a nivel de bloque es que vamos a simplemente crear diferentes naves simples y ah, los vamos a colocar en las áreas donde vamos a poner algún contenido. Por ejemplo, si tengo ah, social like app o algo así o app de registro, sé que habrá, como cuatro o cinco miedos y uno evitar imagen de esa persona, o tal vez un botón sobre ahí. Entonces me voy de pie, creo diferentes formas para esos elementos y solo voy a poner esas formas por ahí en diferente nivel de énfasis. Entonces les voy a mostrar un ejemplo por aquí. Y veamos cómo he creado este nivel de bloque diseñado mostrando otro metido en un poco de diseño. Ahora, aquí puedes ver he creado un diseño a nivel de bloque usando este layout. Entonces, en realidad, yo corporativo este. No estoy seguro de quién es el diseño ¿Es esto porque creo que acabo de recoger esto? A lo mejor alguien de regate cualquier entero. Quien sea el diseñador, es un buen diseño. Y antes de que empieces algo así, puedes ver por aquí pongo algunos elementos aquí en tan solo cuadra naves. Entonces usando rectángulo de forma, Asari, elipse o forma de círculo para los siete. Nuestra imagen esta línea más grande, más audaz para rumbo que estas dos líneas para texto estas dos líneas para más texto y así esto va a estar muerto. Este va a ser el momento. Y estos son dos enlaces. Para que veas cómo he creado esto. También puedes crear en 18 solo usando Chris Kate. Y así, si puedes solo uso un tono más oscuro de negro o escucho algo así y usé fondo blanco . Tú también puedes hacer eso. Así que sólo usé pocos colores. Tan solo dedo del pie hazlo y puedes decir interesante. Pero te aconsejé que primero intentes usar solo escala de grises. Entonces te voy a mostrar un recurso de sitio web donde puedes encontrar muchos diseños a nivel de bloque y empezar desde el Así que déjame mostrarte ese sitio web. Por lo que este es un sitio web llamado usted un patron hub dot com. Y si navegas por aquí, puedes ver si voy a esta página como esta. Todos están viendo estos diseños a nivel de bloque por aquí. Por lo que si haces click en cualquier diseño puedes ver aquí está la imagen de nivel de bloque O R versión fuera de ella . Y aquí puedes ver la versión real o versión diseñada fuera de eso para bloquear y diseñar bloque y diseño Así que aquí es Aquí es donde vas a empezar tu diseño para que puedas ver por aquí lo es. También asegúrate de que estos son muchos elementos de estas muchas secciones de contenido que hay en tu diseño. Por lo que se va dedo del pie ayuda. Será mejor que los organices, mejor que crees un nuevo o bien fuera, y quizá sepas dónde está el botón. Por ejemplo, como este, hay un botón. Entonces veamos algunos ejemplos más como este. De acuerdo, para que puedas ver por aquí. Este es un diseño de nivel de bloque muy simple, y este es el diseño final. Entonces si intentas usar este diseño a nivel de bloque, te va a ayudar mucho en la colocación y creación de diseños sencillos y de gran aspecto. Entonces eso es todo por esta lección. Trata de empezar con el diseño de nivel de bloque e intenta usar solo crea escalas como puedes ver por aquí. Están usando solo pastar diferentes tonos de grises. En los artículos más importantes están cosas así. Están, ah, un poco más grises o algo así. Ahora mismo. Creo que está usando este Stark un gran para texto, aunque es más ligero o aquí. De todos modos, esta es su interpretación o duro y preparación. No lo sé. Se puede ver a otro patrón por aquí. Ideales, app. Y así es como se usan todos estos mecenas. Por lo que el mayor alejamiento de esta lección es comenzar con el nivel de bloque diseñado va a mejorar mucho tus diseños. Si tiene alguna pregunta, háganme preguntas. Pasemos a la siguiente escucha. 10. Métodos de generar ideas de diseño: siempre que comiences algún diseño sobre lo primero que vas a hacer en Gorder es ese espacio negro en tu cabeza. No eres capaz de generar ninguna idea. Entonces, ¿cómo dedo del pie obtener ideas diferentes? Te voy a mostrar diferentes maneras. He estado pensando mucho en ello, y también leí un libro al respecto. Un soborno de Alan Lipman. De acuerdo, todos modos, así que lo primero que tienes que hacer es conseguir un papel y un lápiz. Entonces, ya sea aplicación móvil, diseño, diseño local o cualquier disposición que estés dibujando o algo así, no lo intentes. Dedo del pie, Um, ten miedo. Que no se puede dibujar es que no se puede usar lápices y papel. Simplemente sal por ahí, consigue un lápiz y un papel, y empieza a dibujar tus diseños, tus ideas y este es el primer paso. OK, entonces te voy a mostrar algunas técnicas sobre Harto generar ideas diferentes a partir de una idea. De acuerdo, así que lleguemos a eso. Después de que termines con bolígrafo y lápiz, vas a crear un tablero de humor o recolectar inspiraciones. Por lo que antes de comenzar cualquier diseño necesitas dedo del pie obtener algunas ideas de otros diseños. Entonces este es otro paso así para los tableros de humor. Puede utilizar un sitio web llamado Nice Start com. Te voy a mostrar sólo un vislumbre de ello. De acuerdo, así que aquí puedes ver esto es un tablero de humor que te he mostrado previamente en las lecciones anteriores . Es así como quiero que este proyecto vaya en destrucción. Yo quiero algo de estilo Ford como éste. Quiero algunos artículos destacados como este. No puedo. Esta es la, um, um, zona de pie de página. Estos son los colores que quiero. Así es como quiero que se vea un botón. Y realmente me encanta esta compartir púrpura y blues. Entonces esta es la dirección en la que quiero ir. Por lo que antes de iniciar cualquier proyecto intentó crear un tablero de humor, bocetos, bocetos que también puedes crear incluye bocetos en este. De todos modos, hay otras cosas, como los valores de marca. ¿ Qué? A qué dirección Vas a ir Ya sea que los valores de tu marca sean atentos, confiables, confiables, creativos o lo que sea. Será divertido, serio, solo capaz o confiar en algo así. Por lo que tu diseño va a reflejar eso también, aquí tenemos otra dragalina del negocio. Estamos ayudando a las pequeñas empresas a cuervar con nosotros. Entonces esto es otra cosa de todos modos, Entonces así es como vas a crear un dedo más tablero, sacar al equipo de tu diseño? El mayor error que he visto a muchos diseñadores que cometen es que no intentan contratar a alguien o no tratan de consultar con alguien. Entonces siempre que empieces un diseño, cuando vas a conseguir ideas frontera de una mente. Por lo que intenta pedir prestado en mente. Puedes preguntarle a tu esposa. Puedes preguntarle a tu amigo dedo del pie, ponerte , ponerte, sentarte contigo y cerebros Tormenta en algunas ideas, puedes conseguir sus ideas, sus opiniones. Entonces una mente dos mentes son mejores que una mente. Entonces siempre que incluyas a alguien, a tu padre, madre, tu madre,a tu por qué para cualquiera, incluso ellos no están relacionados con el diseño puedes agregarlos porque estás diseñando para los usuarios finales las personas que te rodean. Por lo que intenta consultar con tus hijos. Son tus hijas o tus amigas que ¿Qué opinas al respecto? ¿ Cuál es tu idea? Trata de dibujarlo para que siempre te ayude a conseguir más ideas. Y en su técnica es la lista de mapeo mental fuera de las ideas. Entonces, por ejemplo, si estoy creando nuestra ropa infantil, puedes decir logo o branding. Entonces lo que voy a tratar de hacer es y con qué direcciones puedo ir. Entonces a la izquierda, puedes ver tengo la sensación de la ropa del niño así que los niños son muy delicados y son como flores. Por lo que voy a tratar de usar la sensación fuera de comodidad, cuidado y especial. Por lo que estas palabras clave arty que se pueden utilizar para obtener más ideas. Por otro lado, si voy al dibujo, por ejemplo, por ejemplo, si veo que los niños normalmente dravid líneas muy irregulares, sus formas son muy sobre las personas mayormente dibujadas sobre su familia sobre los diferentes animales lindos. También, podemos dibujar diferentes flores. Eso todos estos conceptos se pueden utilizar para conseguir las ideas de branding para la ropa de este niño, por lo que también puedes ir en muchas direcciones. Podrás crear más nórdicos como aquí tenemos empate y sensación. Si tienes algo más, como o tal vez princesa. Por ejemplo, si estás diseñando para niñas, cerebro o niños pequeños, puedes ir a Princess and Prince algo así. A lo mejor esta es otra dirección. Entonces así es como ustedes hombres mi mapa mental lista fuera de ideas y generan diferentes bocetos y diseños sobre esas ideas. Por lo que una vez que dibujas estos, te vas del dedo del pie. Simplemente trabaja en uno o pocos de ellos para conseguir la dirección. Por lo que para establecer la dirección podrías seleccionar solo uno de ellos son para apagarlos. Entonces empieza tus ideas, acuerdo? Ahora hay una idea bajo la cual pensé mucho en ello, y es así como el dedo del pie genera múltiples áreas a partir de un solo área. Entonces, por ejemplo, creé este logo esta gota como por ejemplo, ahorrar agua ayunando puedo hacer es lo que puedo hacer con él. O puedo rotarlo. Puedo apretar este símbolo. Puedo combinar y diferentes símbolos con él. Por ejemplo, puedo combinar una mano con el símbolo así que diga que es seguro ahorrar agua, o puedo mostrar la gripe fuera de orden, um, en ella. De acuerdo, así que hay y múltiples ideas. Pero lo que vas a hacer es que vas a tomar una forma simple o idea única y tratar de aplicar todos estos diferentes efectos en ella diferentes. Intentas rotarlo. Intentas duplicarlo. Intentas multiplicarlo. Tu dedo del pie probarlo lo sesga. Intentas fluirla. Intentas estirarlo. Intentas ocultar diferentes secciones fuera de él, y tratas de combinarlo con diferentes, más formas o una idea diferente. Por ejemplo, uno es el agua cuando es seguro, por lo que ahorrando puedes mostrar una mano. Se puede mostrar foso de un niño que la gota de agua está goteando en su boca. Algo así. Entonces así es como se crean ideas diferentes. Prueba dedo del pie, parte de una sola idea y trata de aplicar todas esas cosas diferentes sobre ella, y tendrás muchas ideas. 11. Ejemplos de generar ideas: No. Te voy a explicar todo lo que has aprendido con esto. Simplemente idea simple. Entonces lo que hice aquí es que estoy, por ejemplo, diseñando un logo para la sociedad de la vivienda o tal vez alguna inmobiliaria, it Y bien, que puedas ver al fondo si ves qué? Aquí. Tengo algunas ideas mente mapeada casa y casa. Ah, yo que podría ser un nido porque yendo hacia la idea del pájaro, podría ser un edificio o departamento, y podría ser una carpa para vivir. Y podría ser un corazón si vamos un poco viejos tiempos. O tal vez algo así. Entonces a partir de todas estas ideas, probé dedo del pie hacer diferentes bocetos o aquí Hey, Como puedes ver, combiné dedo del pie, um, cosas. Uno es dext y otro es la forma. Entonces esto es lo que dije que tratan de combinar dos cosas. Entonces esta es una combinación off en el lado izquierdo, se puede ver que he escrito multiplicar. Por lo que he acostumbrado a las casas y las he hecho mirar juntas, conectadas junto con bond o algo así. Entonces esto se está multiplicando. Entonces dos casas, entonces tenemos este nido. Se pueden ver dos áreas por aquí, dos naves diferentes y dos estilos diferentes. Uno es este nido de aves, y éste se ve un poco más que como una casa s. entonces voy a descartar esta idea al final. De acuerdo, entonces aquí tenemos escondidas y mostrando diferentes áreas. Thes dos secciones. Déjame mostrarte estos dos puedes ver por aquí he escondido la parte inferior del hogar. Pero se puede ver sólo mirando estas formas. Tu mente va a completar eso. Esta es casa de igual manera por aquí esto es otra vez estoy mostrando y escondiendo pocas áreas de esta casa, agregando una más en la parte superior. Podemos refinar eso al final en Adobe Illustrator. ¿ Algún otro software? De acuerdo, entonces otra vez, aquí tenemos las ideas de departamento. Uh, aquí tenemos un departamento con las diferentes ventanas en él, y aquí tenemos una versión simplificada de departamento. Por lo que también puedes usar simplemente lucha, técnica, dedo del pie, simplificar diferentes formas. Por ejemplo, solo uso un rectángulo para las ventanas en lugar de mostrar rectángulos más pequeños porque en tamaños más pequeños, esto se verá mejor. Entonces así es como se generan múltiples ideas a partir de una sola idea. Aquí tienes un caso de estudio. En realidad diseñé logotipos para este chimpancé de la casa y Ah, y se puede ver al chimpancé. Todo aunque en el chimpancé es básicamente lograr Benzie. No estoy seguro de lo que realmente significa, pero mi cliente dice que queremos algo así. Por lo que puedes ver aquí intento dedo del pie combinado para dar forma. Por lo que básicamente estaban ahorrando dinero ahí. Se puede decir en comprar casas, por lo que esta forma de casa y esta libra brillar señal de moneda es para ahorrar. Aquí está sólo el contorno virgen y pelos en la iteración de diseño Para esta de aquí puedo ver lo roté y creé nuestro se puede decir perspectiva, perspectiva fuera de eso. Entonces aquí se puede ver esto también está adjunto House gym y Y este bar en realidad el verde o naranja. Está actuando como la línea central fuera del borde. Y luego déjame mostrarte algunas ideas más Aquí Puedes ver otra idea. En realidad, no me gusta eso Este lado izquierdo fuera que va demasiado arriba. Creo que debería ser un poco más pequeño. De todos modos, estas son dos ideas más y así es como se ve. Ah, um guardia. Estas son pocas presentaciones sobre. Realmente importan. Siempre que presentes, lo vas a presentar así. Entonces así es como puedes conseguir diferentes ideas. Este es un método de combinación aquí combiné en y forma fuera de una casa. Esto es perspectiva. Intento rotarlo, iteré un intento de crear un efecto de TV o perspectiva. Ver fuera que el pelo de la casa es otra vez combinación apagado. Dos ideas, ideas diferentes. Es así como obtienes ideas diferentes. Permítanme mostrarles aquí algunos ejemplos más. Se puede ver esto es que obtuve de 99 diseños, y aquí se puede ver empresa inmobiliaria. Y de nuevo se está multiplicando usando diferentes formas multiplicadoras. Tres barcos vuelven a multiplicar dos lados diferentes fuera de una casa mostrando Ah, esto es de nuevo. No estoy seguro ¿Qué es esto? De todos modos, estas miradas crean flujo usando flujo. Este es un uso de piso en este grupo de inversionistas de inicio domiciliario. Y ah, Entonces tenemos esta gestión de propiedad Peterson diseñada por un acuoso y se puede ver de nuevo. Se trata de una combinación fuera de dos ideas. Uno es estos edificios y otro es esta casa esta es otra vez casa. Esto es una perspectiva. Más se puede ver de nuevo. Está usando para formas s y esta sección por aquí. Esto parece una casa otra vez. Multiplicar. Realmente me gusta. Las áreas de ocultación son el fondo. Simplemente mostrando la parte superior fuera de la casa. Y en realidad tiene sentido que esto sea casa. Me gusta mucho este logo. En realidad, los uso de Google. Se puede s así que no estoy seguro de lo que son diferentes. Se puede decir autores fuera de estos diseños, pero realmente buenos diseños solo para mostrarte lo que realmente significa. Entonces así es como puedes obtener ideas diferentes y puedes generar múltiples ideas a partir de una sola idea. Espero que hayan disfrutado de esta lección y de un guardia y corte mucho fuera de ideas para crear algunos diseños e ideas de aspecto sobre logotipos y diseños. Espero que hayan aprendido mucho. Pasemos a la siguiente lección. 12. Tono de tu diseño: Todo diseño tiene un equipo un tono y hay una dirección, dirección específica y no y tema fuera de cada diseño. Entonces, ya sea diseño de aplicaciones móviles, ya sea un diseño de sitios web o un proyecto de tendencia, debes cuidar el tono de tu diseño. Por lo que hay muchos tonos. He visto a unos cuantos fuera de mis alumnos preguntándome eso Intenta crear algo sobre eso para que puedas ver tu diseño podría ser mescaline. Femi nine Childish luce clásico y también puede lucir Morgan, o puede lucir saludable y puede parecer deportivo. Por lo que estos son tonos diferentes fuera de tus diseños. También he hablado de esto en mis canchas de tipografía, fuera de voces diferentes y tonos fuera de tus tipografías. De todos modos, les voy a mostrar algunas técnicas. Entonces hay piedra y hay emociones. Entonces, ¿qué? En realidad, tu diseño está reflejando, así que o podría ser inspirador o refleja libertad o es muy grave. ¿ Cuál es la emoción? Se trata de una muestra a tu cliente o al usuario. Nevada Leach luce muy confiables. Importa. Demuestra que se trata de una organización muy poderosa. Ah, ¿ es muy divertido o es muy creativo. Por lo que estas son diferentes reflexiones que vienen de tu diseñado. Por lo que la sintonización de tu diseño en realidad depende del negocio y de los usuarios. Entonces si, por ejemplo, estás diseñando para ataques mentirosos eso abogados de o impuestos de Entonces, ¿cuáles son las emociones o el agua que hueso o cuál es la dirección en la que quieres ir? Por lo que debe ser masculino. Debe ser un diseño serio. Debe ser justo para el y también sería invitante. Por ejemplo, quiero que mis usuarios toe intenten contactarme. Entonces no quiero que sea demasiado grave que no intenten siquiera ponerse en contacto conmigo o no intenten llenar mi formulario. Además, queremos mostrar autoridad que conocemos este negocio y tenemos el poder y tenemos la nominación y podemos resolver tu problema. Por lo que todas estas cosas se van a reflejar en ese diseño. Permítanme mostrarles algunos ejemplos para que podamos conseguir estas ideas más penetradas en nuestros pequeños cerebros. Ahora, este es un ejemplo, y se puede ver el tono y el equipo fuera. Todo el diseño está basado en papel. Entonces, ¿por qué es eso? Porque este plagio Avenger waas básicamente un plug in y en realidad era para los escritores de contenido , y protege el contenido para que puedas ver la fuerza utilizada sobre el cabello y el todo este pegatinas en papel diferente. Estos clips en puedes ver estos Step Lear o clips. Todos estos están mostrando el contenido para que puedas ver estos son algunos indicios más por aquí que todo este diseño se basa en papel. Por lo que los escritores de contenido son últimamente a papel porque el derecho su contenido primero en el papel, su mayoría y S O, Este es el Este es mi diseño. Creo que es vieja, pero lo hice por un Facebook y fui otro. Puedes ver otro diseño para mismo plagio en emprendimiento Es éste lo puedes ver aquí Tenemos diferentes formas y flechas diferentes. Todo esto está escrito a mano como fuerza garabateada. Por lo que puedes ver así es como toda la dirección fuera de tu diseño puede cambiar cuando el equipo y el logotipo y todo se presume muerto. Entonces así es como puedes ver estoy usando todos los colores colores casi similares de aquí verde. Esta parte pulir o este color rojo púrpura en este tablero por aquí para mostrar alguna importancia o algo así. De todos modos, así que este es otro diseño. Déjame mostrarte un anuncio más. Este es un anuncio de variada salud de Estados Unidos, y se puede ver cómo se ha trazado todo este diseño. Y el tifus es que te tienen verano? Esto se ve muy suavizado. Afecta columna guía amigable para el verano. Entonces esto es serio, sub Bert, y esto es agradable. Y lo mismo que puedes ver oirás. Los colores son casi los mismos de este logotipo de la salud de Veritas. Y ah, el golpe de imagen es muy calmante. Por lo que toda la dirección es tranquila y un efecto calmante y confiable para el usuario. Por lo que se puede ver el color azul inicia la confianza y se utiliza mayormente en confianza, confianza y 50 y algo así. Aquí está uno de mis diseños que hice para algún cliente y creo que lo advertí. Yo no soy yo no lo soy. No recuerdo, pero creo que quiero este concurso. De todas formas, se puede ver que esto se trata de Trader Plaza, y todo el equipo es, uh, muy elegante. Se puede ver que esta imagen se ha utilizado sólo para aclarar el contexto. Entonces esto se trata de negocios o de invertir. Para que se pueda ver a una persona usando este periódico escrito muy grande por aquí negocios. Y también tenemos este video por aquí voz el video 92 y se puede ver también esta selección de cuatro este tipo. Es grave. Por lo que no es muy divertido relacionado. Se puede ver por aquí. Este es todo el diseño, la dirección fuera de su diseño es un poco iconos planos, pero no tan planos. Pero se puede ver claridad vestida y ah, así es como he creado todo este equipo. El verde es la seguridad. Entonces si estoy invirtiendo y algo podría estar buscando seguridad, algo así. Se puede ver cómo se ha trazado toda esta sección. Para que puedas ver. Um, así es como diseñé este Ah, todo el equipo y la dirección que puedes ver solo usando estos dos colores rojo y verde. Ah, naranja significa emoción y verde significa seguridad. Entonces así es como se ha presentado toda esta página han y esto es un atracón de préstamos. Se puede ver que este diseño es totalmente diferente a otros diseños los cuales te he mostrado había basado en texto o en papel, pero este equipo no está basado en papel. Entonces así es como estas diferentes direcciones y emociones y ah, estos diferentes, ah, huesos de diseños que tenemos eso es todo para esta lección. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 13. Escala de importancia en tu diseño: Otra cosa, que he visto a muchos diseñadores haciendo mal, es que no saben cuál es la importancia de la escala off en cualquier diseño? No, ¿por qué? Esto es muy importante porque hay cosas diferentes que son importantes y que son diferentes en diferentes diseños. Situaciones. Por ejemplo, en una revista al aire, se podría dar la importancia del dedo del pie del tema principal, o tal vez del pie la idea principal porque es dama para vender algo. Pero cuando estás diseñando alguna página de aterrizaje, la escala de importancia podría ser dada a otra cosa. Entonces, ¿cuáles son las reglas básicas? Entonces si quieres dar algo escala, entonces escala significa que esa será la parte más dominante o la parte más grande. Déjalo ir los demás artículos de tu diseño. Entonces lo primero es que cosas importantes que son importantes en tu diseño, ya sea impuesto de copia, si se trata de testimonios, si se trata de algún logotipo, si se trata de algún video, quiere destacar esa cosa por lo que será más grande con respecto a los otros elementos relacionados o a su alrededor. En segundo lugar es que podría ser más brillante, o tal vez tiene un color diferente al resto fuera de los artículos en la playa. Entonces este es concepto muy importante, escalar la importancia. Una cosa más es que no debe haber una pelea entre múltiples cosas importantes. Por lo que la importante escala de importancia debe ser una habilidad de arriba a abajo o, más importante, a lo menos importante. Por lo tanto, ten eso en cuenta que todas las cosas en tu diseño no son importantes. Debe haber una escala. Se necesita construir una escala de que esta cosa sea la más importante que ésta que ésta , y ésta es la menos importante. Entonces aquí hay otra técnica que utilizo normalmente y que utilizo mayormente en las páginas de aterrizaje. Entonces lo que hay que hacer es el contenido más importante. Ya sea copia o quieres dar el mensaje fuera de tu sitio web, quieres moverlo a la parte superior de tu diseño. Entonces por eso había un concepto fuera por encima de lo engañado. Por lo que Ford significa que 700 píxeles son a veces 800 píxeles. El Ford estaba en realidad en una altura de página, que era, ya sabes, necesitas dedo del pie, tira de él, verás el siguiente contenido. Entonces esto es grande, básicamente el concepto de que si tienes algo importante quieres el tuyo, dedo del usuario. Visualizarlo al instante, por lo que debe estar en la parte superior. Y es que debe estar agarrando la atención del usuario al instante y se debe mover a la parte superior en el orden fuera escala de importancia. Una técnica más es si quieres darle algo de importancia también puedes usar puede confiar. Aprenderás mucho sobre el contraste en la siguiente sección, así que lo vamos a dejar ahí mismo. Pero significa que debe ser diferente al resto fuera de los artículos en tu diseño. Si alguna vez lees algún periódico y en artículo blawg, has visto que los encabezados son muy más grandes y son fácilmente escaneable y son letra más grande dedo del pie todos los diferentes impuestos y otros elementos en la página porque se van para captar la atención. Ellos son el deporte, son más fáciles de apoyar al deporte, y están destinados a ser más grandes porque los usuarios van a escanear. Así es. Hace que sea más fácil escanear todo. Entonces esta es otra forma de hacer esto y una cosa más. Mi curso de tipografía tiene una escala para tu escala de tipografía de tipografía, diferentes tamaños, que nuevamente está relacionado con este tema, que es escala fuera de importancia. Entonces si quieres aprender más sobre la tipografía, puedes mirar ese curso. De igual manera, en mi curso de tipografía, he hablado de escalas de tipografía, que es que este tamaño de texto por ejemplo, 16 píxeles son 12 puntos. Va a ser por mi impuesto y 56 puntos o 56 cerdos. Voy a usar para mi rumbo más grande. Por lo que este es el nivel de importancia en el texto. Entonces vamos a usar la tipografía. Escalas en tus diseños dedo del pie ilustran esta escala de importancia y también una cosa más. Si quieres conocer más sobre tipografía, escalas y tipografía en general, puedes echar un vistazo a mi tipografía para escuelas de diseñadores y desarrolladores. Este es un tema muy grande, así que no quiero dedo del pie discutirlo cabeza. Entonces espero que hayan aprendido a usar y cómo dedo del pie lo que en realidad es escala de importancia. Te voy a mostrar ahora diferentes ejemplos. Entonces permítanme mostrarles algunos ejemplos y para que sea puntera hacer este concepto más digerible. Entonces aquí está mi diseño para mi propia tierra. Ux I d tarjeta. Este es mi sitio web y se puede ver esta es la parte frontal y la parte trasera fuera de la tarjeta he diseñado tarjeta de visita y y aquí se puede ver en la parte frontal se puede ver lo que es más importante. Es la imagen de la marca. Por lo que quería a Toby mi logo el más grande por aquí. Entonces el segundo se puede ver la segunda cosa que vas a notar en este diseño va a ser ¿Estás aprendiendo? Y luego está la porción de Señor, que es quiero que el usuario lea al final, que es el sitio web. De igual manera, si miras el otro lado y puedes ver que el pelo mi más área promedia y la mayoría los colores se usan en los ocho primeros. Aquí puedes ver qué aquí, donde se aprende el texto, riel diseño y habilidades de cortejo y mejorar tu dólar. Pero así en el inicio, quería a Toby como mostrarte cómo hacerlo de acuerdo Pero creo que sí. Será un muy largo por supuesto. Entonces yo Oh, lo hice. Me enfoqué en el diseño de todos modos, para que puedas ver la zona más dominante por aquí. ¿ Es éste que éste? Otra vez excitante. Este es el logotipo. La versión más simple fuera de mi versión local más pequeña. Y luego mi contacto es para que puedas ver aquí. Quiero darle el mensaje al usuario de que quiero que hagas esto o aprendí esto de mí. Entonces así es como es la escala de importancia. En realidad puedes ver usado si has notado Por aquí puedes ver el tamaño apagado. El texto también es más grande. También el espacio que está tomando todo el tamaño, el tamaño fuera. Este elemento es más grande que todos los demás elementos que lo rodean. Entonces así es como se utiliza la escala de importancia. Por lo que no puedes hacer que todo sea colorido. Si hago estos, puedes decir este texto a continuación y también este impuesto a continuación. Er este borde, mucho colorido que el usuario que la escala de importancia, en realidad va a desplazar. Por lo que no será una escala de importancia. Pero será una pelea de importancia entre dos elementos. Entonces así es como se utiliza la escala de importancia. Permítanme mostrarles un ejemplo más. Entonces aquí hay otro ejemplo, que es, Ah, landing page, que he diseñado recientemente y se puede ver por aquí la sección más prominente o el área más prominente. ¿ Es éste el hogar fuera asequible y fácil de usar signings digitales y generadores de captura. Además, puedes ver la diferencia entre los tamaños de este texto a continuación y este encabezado es demasiado si recuerdas correctamente o con precisión. Mis últimas lecciones fueron sobre la diferencia en escala que se va dedo del pie crear contraste , por lo que diferente entre tamaños fuera distracción este Texas demasiado. Es por eso que se ven geniales. Tienen mucho contraste. Cualquier esperanza, Entonces se puede ver la segunda zona más prominente es ésta. Entonces si con precisión supongo es que esta sección que es y conseguir libertad o literatura ahora en realidad está recibiendo más atención porque tiene otro color, que es esta ciudad y llamar a la acción. Pero y así básicamente se puede ver que se trata de una página de destino y el propósito fuera de la página de destino es que se quiera que el usuario se inscriba por la libertad. Por lo que quiero educar al usuario y luego quiero inscribirme. Entonces este es mi objetivo real en este diseño. Entonces para seguir ese objetivo, quiero usar la escala de importancia. Yo quiero estos artículos. ¿ Son estos dos ítems para ser más dominantes que otros? Entonces así es como haces eso. segundo lugar, si nos fijamos en esta zona el contraste entre el fondo que es muy oscuro, y este este color de primer plano une el color de las pilas es demasiado. Por lo que esto también está creando más contraste dedo del pie sacar la atención del usuario. Entonces si volvemos a mirar estas áreas, se puede ver que son igualmente importantes. Entonces todo es igual. De igual manera, estos son igualmente importantes. En realidad son repetición. Hablaremos de esto en el siguiente apartado. Y ah, si nos fijamos en esta sección, quiero que se vea este video y se puede ver que es más importante. Por lo que la escala de importancia se ha desplazado a ésta. Es más grande. En el interior. Está tomando casi el 70% del espacio. Um entonces todos son casi importantes. Yo quiero los importantes, Toby Big Branch, como el arte alto. Y son un gran obstáculo. Por lo que quería moverlo en la parte superior. Entonces vea, se puede ver así es como en realidad hacemos todos estos esta escala de importancia. Es así como lo usamos. De igual manera Otro ejemplo es que diseñé este Ah, pasado para empresa médica que waas i u k doctores app de valuación y se puede ver u escuchar Combiné tres conceptos los cuales podrías haber escuchado en mi última lección generando ideas cuadro documento y Dr Y ahora se puede ver combinando estos tres símbolos se va a hacer este ícono y se puede ver incluso en este ícono, el elemento más dominante es el elemento más importante es este Plus firmar el medio fuera esta caja para que puedas ver aquí tengo su escala de importancia destacando este medio. Entonces espero que no hayas aprendido mucho sobre la escala de importancia. Y estos son ejemplos suficientes. Si quieres saber más, aprende más. Si quieres preguntarme algo me puedes preguntar Pasemos a la siguiente lección 14. Proximidad en el diseño: principio de diseño: el camino. Uno de los grandes conceptos en diseño es el principal off proximity. Ahora ahí Waas, un científico o psicólogo llamado Get Start, y estos y este es uno de sus principales. Investigó sobre la psicología humana de la percepción, y una de ellas es el agrupamiento. Esto se usa mucho en diseño, por lo que si lo haces o lo usas en un sentido diferente al que no se va dedo del pie, obtén una pantalla de información muy buena o agradable o el diseño, así que asegúrate de que lo estás usando con precisión. No, se puede ver en la parte inferior se ven diferentes estas secciones, y se puede ver claramente que estas dos secciones están separadas o diferentes, pesar de que son los mismos círculos. Por lo que todos son círculos, pero son parte o no se les considera un solo grupo porque hay dos razones detrás de ello. El número uno es la distancia, el espaciado. Se puede ver que estos están, ah, muy lejos de los rojos. Los azules son señor lejos de los rojos. La segunda diferencia entre ellos es de un color diferente, por lo que se puede ver este principio fuera de la proximidad o agrupar este principio fuera de la proximidad debe aplicarse con precisión. Por lo que siempre que estés diseñando, puedes usar los elementos separados del dedo del espacio en blanco. Puedes usar colores para separar los artículos. Puedes usar diferentes formas para separar elementos. Aprendamos más sobre la proximidad. Hay otra cosa que debes tener en cuenta. Cuando estás agrupando elementos en tu diseño que deben estar relacionados entre sí , deben estar fuera de información similar. Por lo que información similar relacionada con la información que debe ir de consuno debe ir de consuno. No intentes mezclar todos los artículos diferentes ni ponerlos en un solo espacio y decir: Oh, Oh, he usado la proximidad porque toda la información debe estar en un solo lugar. De acuerdo, para que agrupar el tuyo juntando tu Chungking fuera de información, diferentes secciones. Deben tener sentido. Por lo que también se llama chunking o información, y es uno fuera de lo básico o, creo, grandes conceptos fuera de ti un diseño porque tienes dedo del pie y crear ah, mucho apagado. Hay mucha información que tiene diferentes propósitos. Eso necesitas dedo del pie agruparlos juntos en diferentes trozos. Ahora aquí hay pocas técnicas que puedes usar mientras estás diseñando para crear diferentes chatarra, o grupos o secciones número uno es tratar de usar el espacio en blanco. Por lo que ahora puedes ver si miras a esta diapositiva los ojos de la parte superior separados por una línea de 10 a la parte inferior de esta diapositiva. Por lo que el fondo o la comida o fuera del tobogán está haciendo que tus diseños egreteau sean impresionantes por Mohammed s y omnipresentes. Y la sección superior es el contenido. Para que veas que estoy usando el espacio en blanco del cabello para crear diferentes secciones. Además, estoy usando esta línea junto con este espacio en blanco para tener sentido que esto sea separado y la sección superior sea separada. En segundo lugar es que hay que despejar diferentes secciones, por lo que las secciones es de nuevo. Se pueden crear secciones utilizando el espacio esposa o diferentes colores. Secciones también es algo similar, como crear diferentes chatarra fuera de la información. Entonces en realidad estás creando diferentes secciones usando el espacio en blanco, usando colores, usando líneas usando diferentes formas. Por ejemplo, podrías intentar usar el dedo del pie Ah, rectangular, o tal vez ah, forma hexagonal o algo así para separar la parte superior por una con una porción abajo. Por lo que podría haber muchas cosas que podría usar sombra. Podrían usar sombras ahí. Podría usar mucha sombra en las porciones superiores quienes separaron que está por encima de esta sección, que está por debajo de ella. Entonces así es como vas a crear diferentes grupos y trozos. También puedes usar líneas. También puede usar bordes para crear la sección o separar esa sección. Por lo que hay muchas maneras que te voy a mostrar en la siguiente lección. Pocos ejemplos, pocos diseños. Entonces este concepto se aclaran o estos conceptos y se penetran más en sus mentes porque esto es muy importante. Esto es realmente, realmente importante que haya visto muchos diseñadores. Estoy haciendo esto mal en muchos lugares, así que veamos algunos ejemplos, Así que pasemos a la siguiente lección. 15. Ejemplos de uso de la proximación en el diseño de la aplicación de la aplicación web y: cosa es el primer ejemplo que te voy a mostrar. Se trata de un rediseño fuera de una tarjeta. El logo no está diseñado por mí. Pero diseñé rediseñé las tarjetas porque los autos viejos eran muy se puede decir muy anticuados. Además, da algunos toques dedo del pie este logo como este ah dorado, bordean alrededor de ella alrededor de la forma fuera de la línea de todos modos. De acuerdo, así que ahora se puede ver en el frente descartar en el fondo Gun, gestión patrimonial, soluciones privadas de gestión de patrimonio. Se puede ver este es el tagline y lo que hace esta empresa y el logo. Entonces mantuve toda esta información en bloque de fondos para que fueran juntos, Así que los hice más cerca el uno del otro lado. Se puede ver en la parte trasera toda la información está en deuda con el contacto. Entonces esta es la pistola L. A. A. Marty. Este es el nombre presidente y CEO que número de teléfono y fax. Además, se puede ver en la parte inferior izquierda separé el correo electrónico. Andi, creo que los correos electrónicos deberían ser tal vez solo la información de contacto, pero creo que debería ir por separado porque es una comunicación letra dedo del pie Elektronik . También puedes, mi yo podría también enumerar por aquí su página web Mundo libre Eso Así es como diseñé este auto. Por lo que puedes ver podrías haber visto muchas tarjetas de visita y puedes ver toda la información información de contacto. El nombre siempre va unido en una dirección y se agrupa en alguna zona. Entonces así es como utilizas secciones de chatarra o agrupación en tu diseño. Veamos otro ejemplo. Esta es una aplicación hasta ahora smarts fuera de las pantallas de IAB para apagarlas. Yo diseñé recientemente y puedes ver si lo miras por aquí, puedes ver que el Chungking tiene se usa mayoritariamente en ti, un diseño en su mayoría diseño de aplicaciones y sitios web. Porque se puede ver que hay muchas cosas. Están pasando muchos controles. Hay mucho icono off. Hay mucha información, ah, mucha interactividad. Por lo que se puede ver la sección superior por aquí, que es la barra de estado y son diferentes. Iconos dedo del pie hacen acciones diferentes a las que tenemos esta área. Esta sección que está relacionada con la información y que se trata del sofá. Por lo que este hasta ahora nombre. Title estado diferente fuera del hasta ahora si está conectado seguro o algo así. Esta es la información sobre el sofá y en la parte inferior se puede ver esto Esta sección esta es una sección separada y estamos usando alguna sombra de luz que esta ah adaptable papá bar está en realidad separada de esta sección. También, el color fuera de éste El color de Bagram es diferente a éste. Esto es, creo, por qué Esto es un poco gracia blanco a rojizo tres blanco. De igual manera, si miras por aquí, este resorte de botón en realidad es tener muchas sombras. Por lo que muestra que está separada del fondo. Se eleva desde el fondo y es diferente del fondo. Y ahora si miras esta pantalla si presionamos esta primavera en Gran Bretaña van a aparecer 12345 ítems de menú . Entonces al presionar este botón, estos controles van a aparecer y están más cerca de este botón porque todos están relacionados entre sí. Por lo que se han agrupado. Tenemos agruparlos juntos. De igual manera, si miras esta pantalla aquí tenemos en la pantalla de la izquierda. Se puede ver que he usado esta pequeña línea por aquí. ¿ Por qué? Lo usé para separar la sección superior a la inferior. Ahora, si miras de cerca, la sección superior es dedo del pie selecciona diferentes semillas en el sofá inteligente y la sección Borden es en realidad todos los ajustes que puedes hacer con el asiento. Entonces así es como estoy usando la chatarra. Se pueden ver todos los controles que están relacionados con los asientos están en la misma zona y también en la misma sección. Por lo que he creado en realidad 123 y cuatro secciones fuera de esta pantalla. Abajo uno es para controles de tabulación y luego el superior es en realidad el título Título Apt. Entonces la segunda sección es hasta ahora Nombre y diferentes semillas. Entonces esta tercera sección es en realidad todos los controles más tarde demasiado hasta ahora y semillas. Para que puedas ver así es como realmente usas el diseño de puntera de la basura y agrupación, tus pantallas, tus diseños, tus páginas de aterrizaje, tus sitios web También puedes ver en el otro lado del lado derecho puedes ver este fregadero música. Esto se puede decir que la caja de conformación pop up y pelos se puede ver la sección superior, que es sólo la información, se separa de la parte inferior, que es área interactiva o los botones por líneas simples. Además, el color es diferente, por lo que puedes ver que hay. Están usando líneas para crear secciones y también están usando colores. Entonces así es como usas a tu grupo. Diferentes artículos. Saltas diferentes piezas de información y creas diseños de aspecto impresionante. Si tienes alguna pregunta que hacerme a continuación, pasa a la siguiente dentro. 16. Alineación en el diseño: aquí hay otro principio off design, que se llama alineación. Entonces, ¿por qué la alineación en realidad es tan importante? Porque todos somos humanos y esto está construido en nuestra naturaleza. O es en nuestra psicología natural, psicología humana que amamos la simetría, así que algo. Entonces se alinea. Entonces algo más. Nos gusta eso cuando algo está dispuesto en Ah, una simetría en forma simétrica en un rectángulo en un círculo. Nos encanta que algo sea irregular o no en alineación. Ah, ¿te has puesto las cosas aquí y allá en tu diseño. No vamos a ir de pie así. Entonces esto es muy importante. Y he visto a muchos diseñadores haciendo mal alineamiento. No saben alinear diferentes artículos. Y cuando tengas ah, buena alineación en tu diseño, se va a lucir equilibrada, por lo que esto es muy importante. Ahora hablemos de equilibrio, simetría y alineación un poco en más lo hizo. Lo primero es que si estás tratando de centrar, alinear tu texto, estás centrando tus botones. Estás centrando alineando todo en tu diseño frente a sus diseños donde estás usando alineación de bordes o ahí en el lado izquierdo como para la alineación de bordes o el lado derecho, por lo que la alineación en la alineación de borde a borde va a ganar. Entonces cada vez que si intentas dedo del pie, alinea tu texto en el lado izquierdo o en el lado derecho, van a lucir más potentes que el diseño de alineación de línea A centrado. Así que asegúrate de que intentas alinear tu dext y tus encabezados y tus imágenes en una línea invisible, así que ten eso en cuenta. Del mismo modo, si puedes usar formas, puedes usar especiales. Se puede repetir ese dedo del pie de alineación, crear simetría. Entonces si algo se hace de manera similar en la columna izquierda fuera de tu diseño en el lado izquierdo de tu diseño, puedes repetir eso y crear un patrón similar en el lado derecho. Por lo que esto se va a ver más equilibrado. Por lo tanto, trata de crear patrones similares. Formas similares, diseños similares y repetirlas. Se usa repetición dedo de una línea y equilibra tu diseño. Trata de crear SMA tratada. Otro concepto es la alineación de lectura visual, que es que vas a alinear tus cosas en la base fuera de su visual. Espere. Entonces qué pesado es. Entonces si miras estos dos ejemplos en la parte inferior, puedes ver el rojo es una forma irregular entre formas diferentes, similares, que es cuáles son las azules. Entonces, en realidad, utilicé un cálculo matemático mediante el uso de photoshop y trato de centrar alinearlo en la parte superior por aquí, se puede ver que el espaciado entre a la parte superior se ve duro. Entonces si miras de cerca esta sección roja la forma roja puedes ver ahí ese círculo en el lado derecho y el lado izquierdo que no están teniendo la misma cantidad de espacio. Además, se puede ver que parece que está más en el movimiento en la parte superior. Y es más pesado en la parte superior que en la inferior, por lo que se puede ver que esto va a suceder. A esto se le llama alineación visual del peso. Entonces vas a usar tus ojos, tus ojos de diseñadores, y lo vas a alinear usando no solo no no usas el tapete, sino ignorándolo. Entonces vas a usar algo fuera de tu cerebro del corazón y lo vas a alinear mejor. Por lo que ahora se puede ver en la parte inferior por aquí. He intentado alinear el espaciado entre ellos. uso de mis ojos son la alineación visual del peso y se puede ver que se ven más equilibrados. Además, he tratado de mover esta sección roja de la misma hacia abajo para que se vea más equilibrada que antes. Por lo que este es otro concierto, que se llama visual variada Alineación. También es más tarde para Smith Tree and Balance, y espero que no hayan aprendido mucho sobre simetría y alineación. Veamos algunos ejemplos. Pasemos a la siguiente lección. 17. Ejemplos de la alineación en el diseño: por lo que les voy a mostrar algunos de los ejemplos de alineación y simetría que hemos aprendido en la última lección. Y aquí hay algunos ejemplos. Entonces si miras esta tarjeta, que rediseñé, puedes ver por aquí en el lado derecho, ves que este nombre, título y número telefónico de hecho, están alineados con una línea invisible por aquí en el lado derecho, por lo que todos están alineados en una sola línea. De igual manera, si nos fijamos en este, esto también está alineado dedo del pie una línea imaginaria por aquí en el lado izquierdo y este espacio y este espacio a la izquierda y a la derecha. Ambos espacios son iguales, por lo que se utiliza para crear algún equilibrio. De igual manera, si lo miras o lo miras y la primera sección frontal manejo de patrimonio arma, soluciones de gestión de patrimonio privado en la tarjeta de frente lejano, puedes ver por qué he alineado el manejo de cinturón de armas con riqueza privada soluciones de gestión. Este es un eslogan, o se puede ver lo que hace la empresa con el nombre de la empresa porque se va de pie crear una imagen más fuerte que el centro alineando estos dos a continuación para que puedas ver, esto en realidad es una simetría. De igual manera, en el lado izquierdo y derecho, estoy usando la misma longitud fuera de la misma barra verde, repitiendo la misma puntera de sección alinearla y se alinean en una sola línea similar. Están alineados juntos. Por lo que esta gestión de riqueza de armas está alineada con estas dos barras verdes de la izquierda y la derecha, por lo que puedes ver así es como vas a lograr alguna alineación en tu diseño on. De igual manera, si miras la arquitectura y el trabajo fuera de todas las arquitecturas y grandes y diferentes arquitecturas, edificios , casas diferentes, vas a ver mucho fuera del cementerio. En ellas, se puede ver cómo tienen usando diferentes formas y cómo están equilibrando su diseño. Hay cosas a la izquierda y luego a la derecha. Hay cosas que se repiten una y otra vez, y también se puede ver que lo son. Están alineados adecuadamente con algunas líneas imaginarias, o puedes decir líneas rectas, por lo que van a lucir elegantes cuando estén alineados así en simetría y usando algún equilibrio. Aquí hay otra imagen fuera de una iglesia, y se puede ver cómo se ha utilizado la alineación. Se puede ver incluso en las baldosas del piso se puede ver la alineación de unas secciones diferentes . También la alineación del asedio y la alineación fuera de las paredes. Y se pueden ver los pilares. Todo está alineado con algunas reglas estrictas o línea estricta, línea imaginaria de líneas rectas. Por lo que se van a quedar muy bien cuando se vayan dedo del pie use con alguna alineación. Déjame mostrarte otro ejemplo, que es, ah, ah, e commerce y el sitio web de comercio electrónico de Creative K A R E a T v de dribble. Y esta es una gran agencia de diseño y puedes ver te voy a mostrar cómo se ha utilizado esta alineación y cómo se están pegando líneas rectas del dedo del pie para crear diseños de aspecto impresionante . Entonces voy dedo del pie voy a mi para tienda, y voy a dibujar unas líneas por aquí, unas guías para mostrarte cómo se ha utilizado. Entonces dibujemos una línea por aquí en esta zona y también por encima de la cabeza así. Por lo que ahora se puede ver claramente que esta sección, toda esta sección está alineada puntera esta línea azul por lo que Así se ha utilizado esta alineación izquierda . Opiniones, precio del título, número de artículos en una tarjeta, incluso la acción lo alinean con una línea recta. De igual manera, por aquí, se puede ver esta colección casera Esta parada, um, sendero. Se ha alineado a esta imagen. Si bajas, puedes volver a ver. Estas líneas se han alineado. Se alinea la línea de la izquierda con esta imagen. Y ah, así es como están usando la alineación. Por lo que puedes ver ahora cómo toda esta sección, esta sección de producto se está alineando a dos líneas o aquí. Así que asegúrate siempre que estés diseñando algo, estás usando una alineación adecuada y también adecuada expresando puedes ver que hay mucho espacio en blanco entre los elementos, incluso por aquí estamos aquí y por aquí y por aquí y por aquí. Así que ten eso en cuenta y serás tus diseños se verán más grandes con solo usar esta técnica de alineación que intentó alinearla con una sola línea y se quedará genial . Por lo tanto, ten eso en cuenta. Déjame mostrarte un ejemplo más. Ahora bien, si miras esta pantalla que está en Adobe x t. diseñé esto. Se puede ver que hay en línea imaginaria. Si hago clic aquí y luego en el layout, se puede ver cómo todo este diseño ha sido el layout. Por lo que está cayendo líneas a la izquierda y a la derecha Así se puede ver a la izquierda estos todos los artículos , esta carga, la parada Hasta el momento. Título desmontado. Um, papá bar y se pueden ver las pilas. Todos están alineados a esta línea de izquierda. Entonces puedes ver así es como estoy usando la alineación en todas estas pantallas en el diseño de aplicaciones móviles y de manera similar por aquí, lo mismo Sucede no se han hecho de igual manera por aquí. Por lo que puedes ver así es como realmente usas la alineación y la alineación de líneas. Trata de pegarte con una línea recta y tus diseños se verán geniales. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente Escuchar 18. Contraste en el diseño visual: Si quieres ser el mejor diseñador o el mejor diseñador, entre otros, lo único que necesitas dominar es usar el contraste en tus diseños. Ahora en el mundo del diseño, creo que ese contraste es el rey. Entonces si crees que tus diseños no se ven muy elegantes o puerta no estallaron, no muestran el pop. De hecho, son los otros Dorsey dicen Wow, esto es un gran diseño. A mí me encanta. Esto se debe a que no has usado correctamente el contraste. Ahora te voy a mostrar algo fuera del jarrón. Puedes lograr contraste en tu diseño ahora cómo puedes lograr contraste. Por lo que hay muchos tipos diferentes de contraste. Al igual que, por ejemplo, si tienes una cosa muy grande en tu diseño y una cosa muy pequeña, cosa similar. Por lo que van a tener mucho contraste fuera de tamaño. De igual manera, una cosa es muy brillante, muy afilada, y otra es aburrida. Por lo que este es el contraste de color off. Entonces el contraste de forma podría ser todo. redondea un cuadrado y de repente una carga. Bill Burton. Entonces este es el contraste fuera de la nave. Además, puedes usar el posicionamiento de contraste off así Si algo está elevado y tiene mucha sombra, está en primer plano y algo está en el fondo. Por lo que también es el contraste de posición. De igual manera, se puede utilizar la posición y se puede utilizar encadenar la posición de un elemento de un respeto al otro para crear algún movimiento para crear algún contraste. Entonces si quieres unas similitudes amplias, por ejemplo, estás listando cuatro iconos o cuatro secciones y son ah, alineados con la parte superior allá con la alineación superior. Entonces todo está alineado. De repente te mueves uno de ellos o hacia fuera de ellos como 10 píxeles por encima de los otros dos. Entonces no, estás creando algún contraste e interesante tu diseño. De igual manera, se puede utilizar el espacio en blanco. Puedes usar una gran cantidad de peleas base en algún lugar y algunas en algunas porciones fuera de tu diseño, puedes usar menos. Por lo que siempre que uses mucho espacio en blanco alrededor de algo, va a crear mucho contraste. lo que aquí hay un ejemplo fuera de contraste con los colores que puedes ver o él. Tenemos el medio Vidor Círculo, que es blanco y negro. Tienen mucho contraste entre ellos porque son totalmente dos lados separados los colores. De igual manera, en el lado derecho rojo, se puede ver rojo y azul. Tienen mucho contraste. Pero por otro lado, del lado izquierdo, estamos usando el contraste. No es demasiado, pero estamos usando algún tono más oscuro de azul y un tono más claro de por lo que hay muchas maneras puedes usar puntera de contraste con el uso de colores. Aquí está el contraste con el tamaño. Se puede ver los gastos generales. Nosotros y todos estos círculos. Ahí son iguales, mismo color. Pero el tamaño es diferente. Entonces si trato de hacerlo estoy usando algún ocultamiento de texto o estoy usando un párrafo de texto. Entonces puedo alterar. Su tamaño es mucho para crear algún contraste entre el encabezamiento y el párrafo. Ahora veamos algunos ejemplos para ilustrar este concepto de contraste y verlo en diseños reales para que puedas tener algo más de comprensión de este concepto de contraste 19. Uso de ejemplos de contraste bien: déjame mostrarte diferentes usos fuera del contraste y entero Podemos mejorar nuestros diseños usando y confiando usando algunos ejemplos y casos prácticos Así puedes ver que estamos aquí. Esta es básicamente una página de aterrizaje que diseñé hace un tiempo, como hace cuatro y cinco años. Y puedes ver si miras esto en la primera sección. Hay muchos tipos fuera de contrastes que estoy usando. El 1er 1 que voy a discutir es el contraste de color. Por lo que se puede ver en el lado derecho el formulario. Tiene mucho contraste desde el fondo. El fondo es ligero y el frente de esta forma es muy diferente de todo el fondo. De acuerdo, así es como podemos usar el contraste de color, Reinharz algunos elementos. De igual manera, si miras a esta persona, ahora mismo es muy dominante y muy diferente de los antecedentes. Por lo que tiene mucho contraste. Incluso el contraste en el texto fuera del color y el fondo también es demasiado Del mismo modo, si miras el lado izquierdo, estoy usando el contraste entre los tamaños fuera de mi fuerte tan tamaños tifus Puedes ver el encabezado y el tamaño del texto tienen mucho fuera de escala diferente. Entonces el contraste entre su escala el tamaño es demasiado. Entonces esto es un interés generador. De igual manera, si nos fijamos en estas tres secciones principales resaltadas, se puede ver que estoy usando de nuevo el contraste de tamaño y también algunos agregando algún contraste de color para resaltar estos tres elementos. Ahora bien, si miramos esto una sección de clientes satisfechos, está diseñada de manera muy diferente. Y me llegó la idea de otro sitio web de computadora o de este sitio web. Por lo que de igual manera, en este apartado , se puede ver ah, se destaca cada testimonial de cada cliente porque es muy diferente de los antecedentes. Por lo que el fondo tiene apelación. Uh uh textura sobre repitiendo textura sobre ella, lo cual es genial. Tan grande es un color pálido más cerca dedo del pie blanco y puedes ver por aquí a nuestros clientes satisfechos. Se ven elegantes en esto porque tienen colores muy agudos, muy brillantes. De igual manera, por aquí estamos usando un contraste off primer plano y fondo. Entonces algo está apareciendo. Está más cerca de nosotros. Se eleva desde el fondo se puede ver por aquí y ah, fondo. Por lo que se ve genial. Además, los colores son muy nítidos. Se puede ver donde aquí colores brillantes azul no tan brillante, pero son muy diferentes del fondo. De igual manera, por aquí se puede ver de nuevo. Usé un rectángulo, un dedo de la forma Ponga un poco de contraste entre este fondo y esta sección. Por lo que significa que esta sección es diferente de los antecedentes. Entonces así es como usas el contraste. He usado el contraste en este diseño. Veamos ahora algunos ejemplos más. Este es otro ejemplo que he diseñado recientemente y se puede ver claramente en la sección superior que se han utilizado muchos contrastes de color fuera. En esta carga se puede ver u oír es muy dominante y muy negro. Y el fondo por aquí, el int codicioso es muy claro y cuando el ingrediente está oscuro por el lado izquierdo, se puede ver el texto es claro en él. Por lo que está creando mucho contraste de color dedo del pie obtener algún factor adecuado y para obtener algún gran efecto. De igual manera, si volvemos a mirar esta sección por aquí, estoy usando ah, mucho contraste de color, diferentes colores para captar la atención y mantenerla separada de los demás. Entonces este es condominio de hospitales por lo que se ven diferentes y captan más atención porque estoy usando mucho contraste. Colores muy nítidos. Muy se puede decir muy dominante. Estos colores no son colores de factura, por lo que están atrayendo mucho. De igual manera, si nos fijamos en el tamaño del encabezado aquí y en el tamaño del texto, tienen mucho contraste entre ellos porque en realidad son fuerza diferente. Lo primero es que sus estilos son diferentes. Uno es ah, un poco fuera de arena conjunto de humanista. No voy a hablar con más detalle sobre esta fuerza, pero son fuerza diferente. El ayuno es la diferencia entre ellos su estilo, sus estructuras diferentes. En segundo lugar es que su tamaño es diferente. Entonces estoy usando la habilidad de contraste off. Por lo que el texto es muy pequeño. El rubro es muy grande s O. Esta es la diferencia entre ellos que lo está haciendo más interesante. Segunda cosa que quieres recordar siempre no recordarás dónde aquí es que cualquiera que sea tamaño de fuerza para ti que utilices en tus diseños, debe ser legible y legible desde una distancia normal. Por lo tanto, ten eso en cuenta. Puerta Intenta ser demasiado artístico y en el usuario final podría no poder leer tu página web de Rapid. Eso sería inútil. Ahora hablemos del pie de página fuera de este diseño y la cabeza puedes volver a ver. Estoy usando colores muy nítidos y creando algo de contraste por aquí. Este pie de página, la sección inferior, tiene mucho contraste entre los colores. Y también una cosa más es que este color puede confiar. Tiene alguna relación. Entonces si estás diseñando algo que necesitas para superar esta relación que se decolora en este fondo es legible y reconocible o no. Entonces esto es muy importante. Uno de los conceptos importantes. Voy a disparar link. Intentaré enlazar la página web. Creo que es la relación de color ceniza de color punto racial com, supongo. Entonces. Es necesario probar el color de fondo y el color anterior para ver si estos asesinos tienen relación de contraste y si este texto se puede leer en dispositivos pequeños o no. Entonces aquí de nuevo, en esta sección, estoy usando mucha confianza de Caloocan, y también estoy tratando de usar algún contraste off alineación que puedas ver u oír de nosotros está un poco lejos de este párrafo. De igual manera, nuestros productos El rumbo está un poco lejos de aquí. Entonces por qué lo he movido. Ah, un poco a la izquierda o este texto a la derecha para crear algún interés. Entonces este es nuevamente el contraste entre el posicionamiento fuera de los elementos y estoy usando eso para mezclar en mi diseño un poco más interesante. Veamos algunos ejemplos más. Podrías haber visto este diseño Ah, muchas veces. Y Ah, este es mi proyecto reciente. Todavía estoy trabajando en ello y se puede ver qué diablos otra vez. El contraste es el rey por aquí. Ya puedes ver si vas a esto, ¿verdad? Correcto. La mayoría de pantalla. Y se trata de instrucciones, en realidad. Por lo que hay instrucciones de video e instrucciones de ataques para que puedas ver u escuchar este color amarillo sobre este fondo blanco. Y este marrón oscuro, tienen mucho buen contraste. Por lo que significa que son interactivos. Son botones. Son artículos posibles. Son artículos capaces. De igual manera, si miras la parte inferior por aquí, esta Ah, esa barra donde necesitas presionar diferentes elementos de pestaña para navegar, están resaltados con azul marino, azul marino oscuro, color azul. Por lo que hay mucho contraste. Por lo que si puedes dominar este color, contraste y contraste entre tamaños y el concepto de fondo y primer plano, puedes marfilarte unos diseños. Diseños web, aplicación móvil diseña todo. Entonces otra vez, en el lado izquierdo si miras a este seis Tío Gunter Así que significa que este es mi asiento de Tío Gunter . Entonces este el cabello estoy usando algo de sombra. Por lo que la sombra en realidad lo está separando del fondo. Entonces es el concepto de fondo de primer plano. Por lo que estoy tratando de crear contraste entre los elementos de primer plano y de fondo. Entonces algo está pasando. Esto es contraste de posicionamiento. Algo está lejos del fondo. Entonces creo que has aprendido mucho sobre este contraste y cómo puedes usar eso. Permítanme mostrarles un ejemplo más. Este es el último, y de verdad te encantará. Veamos trabajar a algunos de otros diseñadores porque creo que solo soy un principiante. Entonces veamos a algunos diseñadores y equipos más maduros fuera de los diseñadores porque los equipos normalmente tienen mayores ideas y nivel de diseño diseñado por creador. Entonces este es un diseño en el que realmente me encanta. Esto es por Nicholas Solar tú y puedes ver por aquí que está. Creo que ha utilizado este ah contraste de color y el contraste entre tamaños de tipo de nuestra manera brillante para que puedas ver los tamaños de tipo fuera cosas importantes como este nuevo valor de casa es a más grande y un fuerte diferente. Y se ve genial. Todas las demás fuerzas que puedes ver son iguales o Regina y costo y son sabios se hace. No hay inversión, creo. Y todo esto y se puede ver la parte inferior es totalmente diferente. Se trata de invitar. Entonces estas son las opciones. Por lo que esta es la información más importante. Por lo que lo destacó mediante el uso del color azul estrellado mediante el uso de tableros más grandes tamaños de tecnología de texto y por supuesto que coincida con esta tipografía, coincidencia o coincidencia de pañales es crear. Veamos algunos ejemplos más por aquí. Aquí. Si miras este botón naranja en la parte inferior, puedes ver esto al instante agarra la atención de que este artículo es diferente a todo esto. Esto es una carga. Este es un elemento interactivo. Por lo que en su mayoría ese es otro diseño que detiene el diseño. Está usando colores muy sutiles, pero en dejar un color dominante. Por lo que esta es una gran técnica y diseño. Voy a crear más ad vastas conferencias sobre ello sobre el uso sutil de los colores en la siguiente sección, que voy a estar creando y haciendo y mejorando y añadiendo dedo a las escuelas una y otra vez manera similar, por aquí. Contraste fuera tamaño del texto está por aquí. Este rubro medio es demasiado grande. Este texto es pequeño en. Esta imagen está captando la atención. Hay mucho contraste entre el fondo de primer plano, teniendo algo de sombra a su alrededor para que le dé algo de profundidad y posicionarlo en la parte superior este fondo. De igual manera, por aquí, hablemos. Esta es la carga y esta es la única sección interactiva por aquí. Por lo que hay mucho contraste off posicionamiento y luego tenemos color. El contraste y el tamaño son contraste de tamaño entre escala de contraste. De igual manera, esto se ve muy bien y aquí se puede ver de nuevo el contraste entre los tamaños de texto, los medios públicos. A mí me encanta. Hay mucho contraste entre los elementos de fondo de primer plano, los tamaños del texto. Son realmente encantadoras. Siguiente pasar a este fax. Se puede ver qué aquí. Realmente me encantó este sitio web. Es muy minimalista y y ah, uso fuera de la tipografía es impresionante. De igual manera por aquí, si miras esta pantalla, el contraste de color es fácilmente visible. Se puede ver el lado izquierdo es en realidad que hay barra o la sección ¿Estuviste? Se va a pasar más interacción, después la segunda barra y luego la tercera sección. Por lo que tiene tres secciones separadas por estas líneas y claro contraste entre la sección mayor y las intersecciones. Por lo tanto, siempre que intentes usar contraste de color o contrastes de tamaño, asegúrate de que estás usando y no más de usarlo. Entonces si algún color es como por aquí, se puede ver este eon color azulado. Se ha utilizado en los botones de Lee para que puedas ver u oír. ¿ Escuchar? Hemos estado en la arena en, uh, aquí la tenemos en los amigos y también en este amigo. Todo esto se trata de usar contraste, tamaño apagado, posicionamiento, color y ah, todas las demás cosas, fondo de primer plano. Espero que hayan disfrutado de esta lección. Si tienes alguna pregunta que hacerme, pasemos a la siguiente lección. 20. Uso de la repetición en el diseño: Hablemos de la repetición en el diseño. Ahora la repetición significa que te vas del dedo del pie. Repite el mismo estilo, las mismas formas similares y los mismos colores son puedes decir lecturas similares cueros en tu diseño una y otra vez, y te va a acercar más al diseño simétrico y equilibrado. Además, la repetición va a tener más sentido porque, por ejemplo, por ejemplo, si estás diseñando una página de aterrizaje y tienes un signo de Gran Bretaña aparte enriquece pantalla y cada vez que intentes dedo del pie, usa ese verde similar botón. El usuario va a pensar que se trata de esto y este es un elemento interactivo. Necesito una patada en el dedo. Necesito tocarlo. Por lo que la repetición en tu diseño va dedo del pie. Comunicar dedo del pie al usuario que tu diseño es consistente, por lo que la consistencia va a venir con la repetición para que puedas repetir diferentes formas. Por ejemplo, si utilizabas elipse a formas para tus imágenes de avatar, vas a usar los mismos barcos de elevación en todo tu diseño. De igual manera, sus secciones , por ejemplo, las alturas y arrancó sus elementos. Puedes repetirlas. Se pueden repetir diferentes colores. Vas a arreglar diferentes colores Por ejemplo, si mi sitio web es web de comercio e, tengo Ah, um botón naranja para agregar a tarjeta. Necesito usar eso justo en Añadir al carrito no para los otros mensajes o alguna otra las cosas . De acuerdo, así que ten eso en cuenta. La repetición en el diseño puede ser de muchas maneras estilo, formas y colores y líneas de secciones. Ya puedes repetirlas. El problema es, si intentas repetir lo mismo una y otra vez y es muy similar a lo mismo . Por ejemplo, dos secciones fuera de tu sitio web. Son muy similares en estilo y todo lo que se va dedo del pie crea una pérdida a menudo solo para que tu diseño empiece a parecer aburrido. Entonces hay una técnica que te voy a dar es variación. Pero vas a repetir eso con un poco apagado. Variaciones son usos una petición, pero con alguna visión. Por ejemplo, cuando me ves en mi curso de tipografía, utilicé un esquema de color inverso para algunos fuera del texto. Por lo que se llama asesinos repetidos son espacio, pero a la inversa. Entonces, por ejemplo, si estoy usando esto del lado izquierdo, puedes ver que soy tú. Te amo. Está escrito en rojo y se puede ver en el lado derecho. Trato de crear algún interés. Estoy usando el mismo color. Las mismas formas, todo. Pero trato de crear un poco más de interés, y resalté esta sección L por amor. Y así es como puedes crear diferentes variaciones pero limitándote a la misma repetición o misma repetición de espacio, color y diferentes secciones. Nadie importante es que la repetición no debe ser solo con tus colores o las formas , sino también con de ella y las altas caminatas y también el espaciamiento entre elementos. Por ejemplo, su cada sección fuera de su sitio web o su logotipo Cada tiene algún espacio arriba y abajo. Necesitas mantener eso consistente en todo tu diseño. Por ejemplo, si has diseñado un sitio web que va a estar en el móvil que se va a usar en tabletas o iPhones o iPads, debes pensar que tanto espacio debe estar a su alrededor, o este porcentaje de edad de el espacio debe estar a su alrededor para que se vea prominente o puede hacer que se vea genial. Por lo que necesitas usar diferentes secciones. Puedes usar esas secciones con el uso de colores, o puedes usar algunos, um, cueros. Y arreglaríamos los momentos destacados de Heiser y leeríamos. O tal vez algunas ratios que esta imagen va a ser en este racial de este tamaño, y puedes usar eso en tus diferentes secciones. Por lo que este tipo de repetición se va a encontrar en muchas secciones. Por ejemplo, páginas, sitios web, páginas web. Existen diferentes secciones, por lo que cada sección tendrá alguna repetición fuera de diferentes espacios. Diferentes encabezados, diferentes colores de encabezamiento por lo que van a repetir. Entonces en la primera sección, por ejemplo, de los colores escondidos negro, tal vez en la siguiente sección. El asesino que se esconde es blanco, pero aún así del tamaño fuera del escondite igual. Por lo que estás usando el tamaño de la repetición. De igual manera, por ejemplo, si en tu primera sección tu encabezado, has dejado algún margen superior o encabezado superior, por ejemplo, 200 píxeles, vas a dejar el mismo en el siguiente apartado. No, he visto esto en mucho más grandes diseñadores que este es un problema muy grande. He visto muchas veces que los diseñadores nerviosos o los diseñadores de gran nombre. No tratan el espacio en blanco como un bloque de contenido. Entonces cada vez que veas algún espacio en blanco o espacio vacío, no creo que esto no sea Ah, bloquea tu elemento de diseño. Esto también es un bloque, por lo que vas a repetir ese bloque de diseño espacio en blanco, y vas a usar esta repetición en tu diseño y te vas de dedo. Usé el dedo del pie de repetición del espacio vicio, crear ritmo vertical y espaciado horizontal y espaciado vertical. Entonces lo que es el ritmo vertical es cómo tus elementos se van a espaciar en dirección vertical unos de otros. He hablado mucho de este ritmo vertical en mi curso de tipografía. Entonces si estás interesado en usar cómo usar esa tipografía y cómo hacer que tu diseño interesante y material de diseño, puedes echar un vistazo a mi curso de tipografía. Ahora voy a cambiar a muchos ejemplos, así que vamos a ver muchos ejemplos. Te voy a explicar cómo he utilizado el espacio en blanco y cómo hemos utilizado diseños de números de repetición , por lo que todo esto tiene sentido para ti. Entonces pasemos a la siguiente lección 21. 08 ejemplos de repetición: Entonces aquí hay algunos ejemplos donde voy a ilustrar el concepto fuera de la repetición en su diseño. Ahora, si miras la pantalla de la izquierda o aquí la pantalla completa de la izquierda, voy a empezar desde aquí y se puede ver que este top nunca se detuvo en un bar donde tenemos el título de la aplicación es en realidad el mismo que éste. Entonces en el 3er 1 Así que en el lado derecho y en el lado izquierdo, están usando lo mismo. También en el medio es lo mismo, pero sólo del tamaño del fuerte. O puedes decir que el patrón es un poco diferente. Ahora bien, si miras esta pantalla izquierda, puedes ver los elementos que estoy repitiendo. Se puede ver esta muy 10 línea en la parte superior. Se está usando la separación o pelo de nuevo en la siguiente sección para que veas que lo estoy usando puntera separar mis dos secciones. Entonces esta es la repetición. Este es el mismo estilo, mismo elemento de línea que estoy usando y repitiendo para separar mis secciones. Ahora, si miras, um, estos botones, estos botones, puedes ver todos fuera de ellos todos los botones de control que están dentro de la pantalla. Son, uh, elipses. Por lo que todos son círculos, el botón de la tienda, el declive. Pero en este odiar pero en estos controles a controles, todos son consistentes. Tienen repitiendo su repitiendo la forma off y un círculo. Entonces todos son elipse. Por lo que se puede ver esta es la repetición fuera de forma. Entonces estoy usando la misma forma en todo mi diseño por todos los lugares. Incluso puedes ver esta forma en la función de memoria. Entonces si puedes ver 1234 o liderar, esto es en alemán, realidad. Entonces thes son para posiciones de memoria que puedes establecer para que puedas ver incluso en estas posiciones de memoria , estoy usando el mismo elemento de diseño que está en círculo. Y si miras mi tipografía, puedes ver muchos sofás. Esto también es tener algo de suavidad en ella. No es muy atrevido. Por lo que este es un juego dedo del pie, este círculos. Ahora hablemos de repetición off colores. Ahora puedes ver cómo podrías estar riendo detrás mientras ves este video porque claramente puedes ver muchos colores. Diputado, por aquí. Ahora, si miras esto para la piel de la izquierda. Este color azul marino azul oscuro se está utilizando como relleno para todos los controles primarios. ¿ Para que veas qué? Aquí. Relájate. Esto está seleccionado. Por lo que tiene esta camisa azul oscuro. Tal vez no puedas verlo, pero ahora mismo, en mi pantalla, en mi pantalla, esto es muy oscuro, cercano al negro marino, color azul. Y también puedes ver esta pestaña de navegación izquierda. Se activa. Por lo que todos estos tienen los mismos colores. De igual manera, si miras esto hasta ahora dentro de esto, tiene ah, color azul claro, que es de nuevo se puede ver en esta actividad pero en estas actividades, pero y así estamos aquí. Y esta naranja es en realidad que he usado para la calefacción porque era un concepto un poco diferente , Así que no repetí en los colores azules por aquí. Está bien, está bien. Ahora pasemos a esta pantalla media. Ahora se puede ver claramente se puede ver que se trata de dos videos. Creo que tres videos y están usando el mismo botón de título de estilo para reproducir la misma altura y anchura. Entonces también, puedes notar que el espaciado entre ellos se puede ver espaciado entre todos estos tres videos es mismo espaciado más cosquillas. Entonces este es un concepto más. De igual manera, si miras a la izquierda y a la derecha de todas estas pantallas, puedes ver el contenido interno. Tienen el mismo margen y brecha, por lo que la izquierda y la derecha son iguales. Por lo que hace un diseño más equilibrado, y se pueden ver también los iconos. Estos están usando la obra Burton's que están usando color amarillo, y dentro está nuevamente nombrando en el lado derecho. Se puede ver que nuevamente estamos usando el mismo color verde para la activación que estas cosas han sido activadas o estas están encendidas y por aquí otra vez, este color amarillo, mismo color amarillo para elementos interactivos. Entonces es básicamente mi segundo regular, y se puede ver u escuchar estos. Esto también es interactivo, pero estoy usando un poco. Se puede decir de color marrón más oscuro por aquí. De acuerdo, entonces estos té están usando el mismo patrón, mismos tamaños de tipografía. Todo es igual, y se puede ver así es como usamos las repeticiones. Por lo que la repetición es una parte integral de cualquier que un diseño que necesitas para arreglar los cuatro tamaños. Si algo está usando para el encabezado, debe usarse para encabezar todo tu diseño. remojo. La repetición se va dedo del pie. Crea consistencia en tu diseño, así que asegúrate de usar una repetición de la manera correcta. No, echemos un vistazo a este diseño. Por lo que vamos a cubrir el concepto fuera de la repetición con alguna variación. Y ahora se puede ver por aquí a la izquierda estoy usando otra vez lo mismo. Este es uno de los mayores escondite. Pero el fuerte que estoy usando por aquí se usa para encabezamientos en todo mi diseño. Por lo que este es el mismo vado de diferente tamaño. En esto es el mismo Ford y el mismo tamaño para todas las secciones, el cuarto y el tamaño es parecer por lo que puedes ver esto va a crear algo de consistencia en tu diseño. De igual manera, si miras esto, he creado alguna separación con algunos colores. Entonces estoy usando matador de chatarra aquí agrupando usando algunos colores y separando estos dos. Pero si miras de cerca aquí, los espacios entre elementos es muy complicado. Así que ten eso en cuenta que puedes ver u oír la forma siente que tienen el mismo espaciado entre ellos. Pasemos a por un corto, pero les voy a mostrar cómo van a funcionar todos los espaciados y cómo he trazado todo este diseño. Entonces si miras esto por aquí, puedes ver este espacio desde arriba por aquí es casi similar a este lugar por aquí. Por lo que son iguales arriba y abajo. De igual manera, si miras este ritmo, es indiferente. Y también se puede ver si este espacio es casi igual al espacio de aquí. Por lo que estoy usando la repetición fuera del espacio vertical o el espacio blanco del cabello. Y de igual manera, se pueden ver las brechas entre estos cuatro. Ellos son repetición. Por lo que ahora puedes ver aquí estoy usando cuatro colores diferentes. ¿ Por qué es eso? El problema es que si trato de usar el mismo color una y otra vez, podría ponerse aburrido. Por lo que para crear algunos, puedes decir algún interés interesante en tu diseño. Intento usar diferentes colores por aquí para que veas que se ven más naturales y son más atractivas. Son más coloridos, captan más atención. De igual manera, éste waas al final. Tan solo. Por lo que traté de usar algún otro color para ello. Ahora, aquí tenemos el reverso reverso off off off off nuestro esquema de colores y estoy usando fondo oscuro y en los colores claros superiores. Por lo que esta es otra variación que puedes hacer. Pero se puede ver que esta es nuevamente la sección y también este espacio entre diferentes secciones es el mismo. De igual manera, éste vuelve a ser blanco y hay mucho off cos iconos son sus logotipos por aquí. Entonces tenemos otra vez. Se puede notar el espaciado. ¿ Te diste cuenta del espacio? Este es paso muy importante por lo que puedes ver estoy usando mucho espacio en blanco arriba y abajo. Son casi lo mismo. Entonces si aclaro algo como esto para que veas cómo esto está creando un rectángulo perfecto . Echemos un vistazo a algunos ejemplos más eso para ilustrar idea fuera de la repetición. Se puede ver este es otro diseño que podría haber visto en unas cuantas veces más en este curso. Entonces se puede ver esto, pero otro aquí, del mismo color. Se usa la misma carga en muchos lugares como este por aquí, por aquí. Y también en esto suscríbete nadie. Por lo que se puede ver que los mismos colores se repiten una y otra vez. Esta línea en la parte superior de este rubro se repite una y otra vez. Eso te puede mostrar aquí es la línea en la parte superior de esta navegación más y aquí la tenemos otra vez, otra vez, las líneas que puedes ver para mostrar los encabezados No son azules, así que son un poco diferentes con algunos variación otra vez, la línea en la parte superior aquí otra vez, la línea en la parte superior. Entonces así es como usamos la repetición en nuestros diseños. Además, puedes mirar diferentes colores. Por ejemplo, Grados gracia se han utilizado en muchos patrones diferentes y los colores de fondo aquí otra vez, grave con algún patrón. Y así es como todo este diseño ha estado luciendo en conjunto consistente. Y así es como vas a usar consistencia en tu diseño mediante el uso de la repetición con colores, formas, líneas, tipografía, tamaños, 22. 08 ejemplos de repetición: Entonces aquí hay algunos ejemplos donde voy a ilustrar el concepto fuera de la repetición en su diseño. Ahora, si miras la pantalla de la izquierda o aquí la pantalla completa de la izquierda, voy a empezar desde aquí y se puede ver que este top nunca se detuvo en un bar donde tenemos el título de la aplicación es en realidad el mismo que éste. Entonces en el 3er 1 Así que en el lado derecho y en el lado izquierdo, están usando lo mismo. También en el medio es lo mismo, pero sólo del tamaño del fuerte. O puedes decir que el patrón es un poco diferente. Ahora bien, si miras esta pantalla izquierda, puedes ver los elementos que estoy repitiendo. Se puede ver esta muy 10 línea en la parte superior. Se está usando la separación o pelo de nuevo en la siguiente sección para que veas que lo estoy usando puntera separar mis dos secciones. Entonces esta es la repetición. Este es el mismo estilo, mismo elemento de línea que estoy usando y repitiendo para separar mis secciones. Ahora, si miras, um, estos botones, estos botones, puedes ver todos fuera de ellos todos los botones de control que están dentro de la pantalla. Son, uh, elipses. Por lo que todos son círculos, el botón de la tienda, el declive. Pero en este odiar pero en estos controles a controles, todos son consistentes. Tienen repitiendo su repitiendo la forma off y un círculo. Entonces todos son elipse. Por lo que se puede ver esta es la repetición fuera de forma. Entonces estoy usando la misma forma en todo mi diseño por todos los lugares. Incluso puedes ver esta forma en la función de memoria. Entonces si puedes ver 1234 o liderar, esto es en alemán, realidad. Entonces thes son para posiciones de memoria que puedes establecer para que puedas ver incluso en estas posiciones de memoria , estoy usando el mismo elemento de diseño que está en círculo. Y si miras mi tipografía, puedes ver muchos sofás. Esto también es tener algo de suavidad en ella. No es muy atrevido. Por lo que este es un juego dedo del pie, este círculos. Ahora hablemos de repetición off colores. Ahora puedes ver cómo podrías estar riendo detrás mientras ves este video porque claramente puedes ver muchos colores. Diputado, por aquí. Ahora, si miras esto para la piel de la izquierda. Este color azul marino azul oscuro se está utilizando como relleno para todos los controles primarios. ¿ Para que veas qué? Aquí. Relájate. Esto está seleccionado. Por lo que tiene esta camisa azul oscuro. Tal vez no puedas verlo, pero ahora mismo, en mi pantalla, en mi pantalla, esto es muy oscuro, cercano al negro marino, color azul. Y también puedes ver esta pestaña de navegación izquierda. Se activa. Por lo que todos estos tienen los mismos colores. De igual manera, si miras esto hasta ahora dentro de esto, tiene ah, color azul claro, que es de nuevo se puede ver en esta actividad pero en estas actividades, pero y así estamos aquí. Y esta naranja es en realidad que he usado para la calefacción porque era un concepto un poco diferente , Así que no repetí en los colores azules por aquí. Está bien, está bien. Ahora pasemos a esta pantalla media. Ahora se puede ver claramente se puede ver que se trata de dos videos. Creo que tres videos y están usando el mismo botón de título de estilo para reproducir la misma altura y anchura. Entonces también, puedes notar que el espaciado entre ellos se puede ver espaciado entre todos estos tres videos es mismo espaciado más cosquillas. Entonces este es un concepto más. De igual manera, si miras a la izquierda y a la derecha de todas estas pantallas, puedes ver el contenido interno. Tienen el mismo margen y brecha, por lo que la izquierda y la derecha son iguales. Por lo que hace un diseño más equilibrado, y se pueden ver también los iconos. Estos están usando la obra Burton's que están usando color amarillo, y dentro está nuevamente nombrando en el lado derecho. Se puede ver que nuevamente estamos usando el mismo color verde para la activación que estas cosas han sido activadas o estas están encendidas y por aquí otra vez, este color amarillo, mismo color amarillo para elementos interactivos. Entonces es básicamente mi segundo regular, y se puede ver u escuchar estos. Esto también es interactivo, pero estoy usando un poco. Se puede decir de color marrón más oscuro por aquí. De acuerdo, entonces estos té están usando el mismo patrón, mismos tamaños de tipografía. Todo es igual, y se puede ver así es como usamos las repeticiones. Por lo que la repetición es una parte integral de cualquier que un diseño que necesitas para arreglar los cuatro tamaños. Si algo está usando para el encabezado, debe usarse para encabezar todo tu diseño. remojo. La repetición se va dedo del pie. Crea consistencia en tu diseño, así que asegúrate de usar una repetición de la manera correcta. No, echemos un vistazo a este diseño. Por lo que vamos a cubrir el concepto fuera de la repetición con alguna variación. Y ahora se puede ver por aquí a la izquierda estoy usando otra vez lo mismo. Este es uno de los mayores escondite. Pero el fuerte que estoy usando por aquí se usa para encabezamientos en todo mi diseño. Por lo que este es el mismo vado de diferente tamaño. En esto es el mismo Ford y el mismo tamaño para todas las secciones, el cuarto y el tamaño es parecer por lo que puedes ver esto va a crear algo de consistencia en tu diseño. De igual manera, si miras esto, he creado alguna separación con algunos colores. Entonces estoy usando matador de chatarra aquí agrupando usando algunos colores y separando estos dos. Pero si miras de cerca aquí, los espacios entre elementos es muy complicado. Así que ten eso en cuenta que puedes ver u oír la forma siente que tienen el mismo espaciado entre ellos. Pasemos a por un corto, pero les voy a mostrar cómo van a funcionar todos los espaciados y cómo he trazado todo este diseño. Entonces si miras esto por aquí, puedes ver este espacio desde arriba por aquí es casi similar a este lugar por aquí. Por lo que son iguales arriba y abajo. De igual manera, si miras este ritmo, es indiferente. Y también se puede ver si este espacio es casi igual al espacio de aquí. Por lo que estoy usando la repetición fuera del espacio vertical o el espacio blanco del cabello. Y de igual manera, se pueden ver las brechas entre estos cuatro. Ellos son repetición. Por lo que ahora puedes ver aquí estoy usando cuatro colores diferentes. ¿ Por qué es eso? El problema es que si trato de usar el mismo color una y otra vez, podría ponerse aburrido. Por lo que para crear algunos, puedes decir algún interés interesante en tu diseño. Intento usar diferentes colores por aquí para que veas que se ven más naturales y son más atractivas. Son más coloridos, captan más atención. De igual manera, éste waas al final. Tan solo. Por lo que traté de usar algún otro color para ello. Ahora, aquí tenemos el reverso reverso off off off off nuestro esquema de colores y estoy usando fondo oscuro y en los colores claros superiores. Por lo que esta es otra variación que puedes hacer. Pero se puede ver que esta es nuevamente la sección y también este espacio entre diferentes secciones es el mismo. De igual manera, éste vuelve a ser blanco y hay mucho off cos iconos son sus logotipos por aquí. Entonces tenemos otra vez. Se puede notar el espaciado. ¿ Te diste cuenta del espacio? Este es paso muy importante por lo que puedes ver estoy usando mucho espacio en blanco arriba y abajo. Son casi lo mismo. Entonces si aclaro algo como esto para que veas cómo esto está creando un rectángulo perfecto . Echemos un vistazo a algunos ejemplos más eso para ilustrar idea fuera de la repetición. Se puede ver este es otro diseño que podría haber visto en unas cuantas veces más en este curso. Entonces se puede ver esto, pero otro aquí, del mismo color. Se usa la misma carga en muchos lugares como este por aquí, por aquí. Y también en esto suscríbete nadie. Por lo que se puede ver que los mismos colores se repiten una y otra vez. Esta línea en la parte superior de este rubro se repite una y otra vez. Eso te puede mostrar aquí es la línea en la parte superior de esta navegación más y aquí la tenemos otra vez, otra vez, las líneas que puedes ver para mostrar los encabezados No son azules, así que son un poco diferentes con algunos variación otra vez, la línea en la parte superior aquí otra vez, la línea en la parte superior. Entonces así es como usamos la repetición en nuestros diseños. Además, puedes mirar diferentes colores. Por ejemplo, Grados gracia se han utilizado en muchos patrones diferentes y los colores de fondo aquí otra vez, grave con algún patrón. Y así es como todo este diseño ha estado luciendo en conjunto consistente. Y así es como vas a usar consistencia en tu diseño mediante el uso de la repetición con colores, formas, líneas, tipografía, tamaños, 23. Estudio de CASo: desgin de la tarjeta de escala gris: Ahora voy a crear un aspecto impresionante, guardia de visita o tarjeta de visita, y te voy a mostrar cómo puedes diseñar usando todos los principios y todas las técnicas y elementos fuera de diseño que te he enseñado en las lecciones anteriores. Y además, esta va a ser mi próxima misión. Entonces en este momento vamos a diseñar esta tarjeta usando Adobe para una tienda, y creo que esa herramienta de software adecuada para diseñar tarjetas imprimibles de impresión es Adobe illustrator. Pero aún así, creo que en obedecer para la tienda se puede acostumbrar. Entonces nos vamos a sumergir para la tienda, y voy a crear básicamente tres variaciones diferentes fuera de esto y voy a dar los pies a mostrarte cuáles son las direcciones de diseño o lo que quería o el equipo fuera de este diseño o ville it? Cuáles son las propiedades de este diseño, ya sea fuerte, divertido, creativo o lo que sea, Así que empecemos ya sea fuerte, divertido, divertido, creativo o lo que sea, y empecemos a crear esta tarjeta de visita de aspecto impresionante que se sumerge para la tienda. De acuerdo, ahora, para iniciar este diseño, vamos a ir a archivar nuevo y vamos a ir a imprimir dedo del pie, y el tamaño que estaremos agregando es de 3.75 pulgadas para 10. La altura será a 5.25 Así que 0.25 es en realidad el margen de sangrado y el margen de raza significa que esta porción se va cortando dedo del pie cuando los autos están impresos Jessica. Después de eso, prueban dedo del pie, los cortan en forma de auto, y esta es la zona de raza que se va a cortar y fuera de la tarjeta. Entonces lo vamos a agregar a nuestro diseño. De acuerdo, entonces vamos a seleccionar este tablero de arte ahora mismo. Si seleccionas tableros de arte, solo pasa al artículo. Si lo vamos a convertir para verlo. Michael Itron. De acuerdo, así que presiona sobre despejado. Démosle un nombre guardia de visita o tarjeta de visita. Está bien. Y prensa lindo. Entonces aquí tenemos el primer tablero de arte. Esto es ah, frente, lado apagado, otra tarjeta y que zoom hacia fuera. Y también vamos a crear la segunda supresión. Apenas este plus y tendremos la segunda obra de arte. Entonces en este momento estamos en primer tablero de arte. Entonces lo primero que vamos a hacer es que vamos a diseñar algún plan, entonces el plan va a ser Necesitamos algunas rejillas y guías. Necesitamos algunas cajas, puntera alinear las cosas para eso. Vamos a ir a ver nuevo diseño de guía y dejarme mostrarles cómo he creado todo esto . Estos tipos. Entonces vas a usar. Déjame mostrarte aquí. Cuatro problemas y la canaleta Gretel es básicamente el espacio entre las columnas que puedes ver por aquí. Estas son las canaletas entre las columnas. Por lo que hay 41234 columnas y el gobernador es de 0.1 a 5. Entonces así es como estoy probando el diseño del dedo del pie, mi disposición ah. Y estoy usando cinco filas, que es de arriba a abajo 12345 filas. Y la canaleta entre ellos es 123450.67 Así que aunque quieras usar la canaleta fuera 0.1 a 5, depende de ti. Diseñémoslo así. Depende de ti. Está bien. Entonces no creo que tanto cortador te esté yendo de pie útil porque aquí no tenemos demasiado contenido. Por lo tanto, recuerda la lección con las capas diseñadas con contenido. De acuerdo, así que esto es todo y vamos a presionar. OK, De igual manera, vamos a hacer lo mismo con este en bastante diseño y se va a estar por aquí. De acuerdo, Así que una vez dormimos esto puedes ver que estos están activados. De acuerdo, así que empecemos. Y primero vamos a usar nuestra herramienta de texto y ah, usemos sólo la lista negra. Entonces así es como quería mostrarles mi proceso de diseño. Entonces voy a ir con 1 40 pixeles, muy grandes cuatro tamaño y el extranjero que estoy seleccionando o tifus que estoy seleccionando es Roboto. ¿ De acuerdo? Por lo que antes de empezar de nuevo diseño, necesitamos dedo del pie. Asegúrese de que nuestro qué? Nuestros cuerpos, Nuestro equipo de diseño en la dirección. De acuerdo, entonces mi empresa es una empresa de diseño con experiencia de usuario y quería lucir muy fuerte, potente, creativa y sencilla pero moderna. Por lo que quiero transmitir mi mensaje. Usar la sencillez en él no debe ser demasiado sencillo. Pero se ve moderno y elegante y quiero demostrar que somos lo suficientemente poderosos y fuertes dedo del pie resolver tus problemas. Entonces el fuerte, basado en todas estas cosas, el tipo al que me enfrento es roboto porque es muy elegante y es muy moderno. Es poderoso sensorial formado y por el poder que voy a usar con el toro Tiefest. Entonces para esto estoy usando negrita condensada roboto 1 40 picks está bien, así que vamos a crear esta ficciones empresa use able. De acuerdo, así que voy a alinearlo en el medio así. Vamos, Lee a de selecto. De acuerdo, ahora, si miras por aquí, tenemos 1234 columnas y puedes ver que mi texto casi encaja en la columna media. Entonces lo voy a alinear por aquí, la línea de base fuera de mi teléfono o morir cara. Voy a alinearlo en mi papel. La base fuera de esta habitación. Por lo que podría haber adivinado que estoy usando la escala de grises negra y vital. Entonces este es el primer paso, OK, ahora voy a usar es el segundo tiefest. Por lo que quería ser muy elegante, y quiero mucho contraste. Por lo que el contraste será en la talla dos. Entonces lo que hice es seleccionar la fuente Sands Pro, que es uno de mis favoritos. Tenedores temían Fuerza y yo seleccioné. Es como la vida. Es como estilo, porque por qué hice eso porque quería tener mucho contraste fuera entre los entre estos dos tipos de letra. Por lo que diseñamos lo alineamos en el medio y vamos a seleccionar un poco fuera regular para ello así . Entonces este es nuestro diseño en escala de grises. Esa es una línea por aquí. A lo mejor en medio de este grupo. Entonces o bien puedes seleccionar esta regla así y luego seleccionar esta y nosotros y tú la puedes alinear en el medio así. Ya está en medio. De acuerdo, entonces tenemos que elemental aquí. De acuerdo, Así que solo estoy usando un punto, que es nuestro va a ser nuestros labios. Y voy a usar una elipse por aquí sólo para enfatizar la fuerza. De acuerdo, entonces esto va a ser Hagámoslo 41 vixens. De acuerdo, así que me voy de pie, muévete. Al igual que en la misma línea. Se puede ver la alineación. Uno 123 Ocultemos el semicolon de mando y control de la cuadrícula, creo. Colin, no estoy seguro de que vaya a enumerar rumbo por aquí. El atajo por aquí. De acuerdo, así que también puedes ir por aquí y mostrar y ocultar a tus chicos para que esto en realidad sea nieve proyectada . No es un gran credo del norte, pero los chicos realmente ven son los guardias. Este es en realidad el atajo. De acuerdo, entonces tenemos estos dos elementos, así que asegúrate antes de empezar a diseñar tu tarjeta. Ya sabes lo que vas a poner por aquí. Entonces tenemos dos elementos. Sólo un tagline y ah, es nuestro texto. ¿ De acuerdo? Ahora, para crear un poco de interés y equilibrio, me voy de pie porque puedes ver que estoy usando mucho espacio en blanco en la parte superior de la derecha y la izquierda solo para enfatizar esta pieza y dedo del pie. Consigue un poco. Se puede decir algún interés. Voy a usar esta sección inferior. De acuerdo, así que esto va a ser así. A lo mejor así, algo así. Entonces este es nuestro diseño real fuera sobre el diseño, o puedes ver la escala de grises diseñada. De acuerdo, Ahora pasemos a este, y voy a depender de las rejillas. De acuerdo, Entonces lo que voy a hacer es una cosa más. Necesito dedo del pie que te diga aquí que este margen esto en realidad es inseguro. Ábrelo bien y para hacer cualquier cosa. OK, entonces el alto esto dejó esta derecha? Y el fondo, podrían cortar cuando se imprimen los. Entonces lo que necesito hacer es así que voy a usar el dedo del pie. O este bloque de aquí para mi texto o lo que puedo hacer es que o bien puedo usar esto. Entonces si uso el lado derecho, lo voy a alinear con esta línea de la derecha. Entonces si estoy tratando de usar la alineación izquierda, voy a usar por aquí. ¿ De acuerdo? Entonces ahora lo que tengo que hacer es ir de pie a poner nuestras cubiertas justo aquí, y ah, y ah, fuerza son de nuevo la recompensa. Oh, estoy usando. Entonces estaré usando Robot por aquí. Por lo que aquí tenemos tablero de Roboto. Entonces esta vez voy a usar negrita o negra? A lo mejor El talic negro más cercano primero negro y tenemos el negro. Entonces voy a usar mi nombre s y y voy a usar el título en la misma línea CEO o y en la siguiente línea, voy a usar mi número telefónico con algún espacio. Este es mi número de teléfono real y este es mi correo electrónico. Y una cosa más. Eso es agregar algún lado de rep ficticio por aquí. Usar Ámbar. No sigas en algo así. De acuerdo, Así que ahora si lo miras por aquí, estoy usando el principio fuera del dedo del pie de proximidad. Asignar todas las cosas de manera similar y cerca entre sí. Porque todos estos son contacto. Lo es. Algo que voy a hacer es que no quiero que este texto sea tan grande. Entonces voy a usar 36 creo que 36 look rate. Y además voy a usar cambiarlo a regular, así que no quiero que sea demasiado atrevido. Además, quiero que sean linea. La altura será un poco. Yo quiero acercarlos un poco más. 48. De acuerdo, entonces aquí tenemos el básicamente fuera. Veamos a cuánto está de aquí. Entonces voy a hacer que sea una línea a esto. 1234 Eso son cinco. Hagámoslo algo así. Se ve genial. De acuerdo, así que esto va a ser resaltado, así que voy a usar un color negro más oscuro por aquí para este. Entonces, amigos míos, este es el layout para el layout en escala de grises fuera de mi diseño en mi tarjeta. Es así como debes comenzar tus diseños y puedes ver que se ve bastante simple. Ahora, en la siguiente lección, vamos a agregar algunos colores y algún experimento con los fondos y todas esas cosas , así que , pasemos a la siguiente lista. 24. Estudio de casos: finalización de el diseño de la tarjeta: la última lección. Lo que hicimos fue crear una escala de grises fuera de nuestro primer diseño, que es nuestro diseño de autos de negocios. Ahora, en este siguiente paso, lo que vamos a hacer es que vamos a agregar algunos colores y algo de interés. Vamos a enterrar nuestro diseño. Entonces en algunas texturas, o tal vez algunos mecenas a ella para crear algún interés y algún equilibrio, ya has visto que cuánto espacio en blanco realza realmente tu diseño. Por lo que tengo muy menos contenido en esta tarjeta y mucho espacio en blanco. Por lo que se va a enfatizar en la única información en su tarjeta de auto. Entonces lo que quiero es, quiero hacer que mi impresión de marca sea la primera impresión en mis clientes de que estamos invitando a empresa. Entonces para eso, vamos a usar, um, mecenas. Está bien. Está bien. Así que empecemos y añadamos algunos agregamos un poco de color recto y profundizamos en este diseño y en todas esas cosas de diseño visual. De acuerdo, así que ahora voy a saltar a mi tienda de fotos, así que empecemos. Está bien. Ahora, aquí. Se puede ver esto es el, um aquí es donde nos fuimos. Por lo que aquí en este arte aburrido. Voy dedo del pie empezar a agregar algunos colores. Entonces mayormente lo que vas a estar haciendo es que quizá ya tengas el negocio, uh, logo por aquí. Entonces? Por lo que podría que ya tengas eso. No necesitas, ya sabes, usar nuestros, ya sabes, sabes, colores inventados de ti mismo. Entonces me voy a ir con este color azul y este agudo color rojo. De acuerdo, entonces estoy corregido. De acuerdo, así que aquí está. Y déjame ver. No estoy seguro de que simplemente no me parezca alineado. De acuerdo, Entonces, sí, no está alineado adecuadamente. Entonces aquí lo tenemos ahora, Así. De acuerdo, Entonces una cosa más es que si miras de cerca, puedes ver que esta utilizable junto con la muerte, esta puerta. Por lo que toda esta sección no está centrada. Entonces aquí tenemos más espacio. Y aquí tenemos menos espacio. O así aquí tenemos a la izquierda, tenemos más espacio. Y a la derecha, hemos dejado menos carne de vacuno. Entonces lo que voy a hacer así controla Comando D para diseccionar. Está bien. Entonces los voy a agrupar juntos esta utilizable y esta elipse Vamos, G y yo voy al centro. Alinearlo. Controla a cada uno o puedes usar éste por aquí, ordénalo para seleccionar todo el tablero de arte y luego usa esto. De acuerdo, Así que asegúrate que estás seleccionando este grupo, así que voy a nombrar logo. Vamos, D dos d selecto. Y ahora creo que está en medio. Escondámoslo y veamos si se ve genial. Por lo que se ve genial. no hay nadie. Usemos un poco de gris azulado por aquí en lugar de usar solo a la vieja gris llana, he visto a muchos de mis alumnos. Tratan de usar azul recto Lo siento, El puro grande Que es esto Por aquí. No intentes usar su intento de mezclarlo con algún color. Como por aquí. Entonces algo como esto se ve muy ligero. Entonces voy a usar un poco más oscuro o como este Este looks crear. Ahora puedes ver esta cara de troquel elegante o delgada. Tiene mucho contraste con este tiefest utilizable. Por lo que son Están buscando crear también están buscando modernos Este juego de arena de pro a Santa. Perdón, Sentido pro Se ve genial. También, esto todo gorras. Roberto Ford se ve genial. De acuerdo, entonces, uh, esta parte está hecha. De acuerdo, entonces aquí tenemos justo este cabello rectángulo, que también es un poco de color azul Ah Gresh. Muy ligero. Voy a ver si está alineado adecuadamente. Voy a ir dentro de la mitad de esta esta regla. Entonces estoy usando casi 1.5 filas. Entonces vamos a esconder nuestros 100 s o se ve crema. Vamos a mover este lado. Está bien. Ahora de este lado, lo que voy a secar es que voy a revertir mi esquema de color. Entonces aquí tenemos colores blancos y contrastados en él, y aquí voy a revertir mi esquema. Por lo que el siguiente uso crea un rectángulo por aquí. Este va a ser nuestro esto. Pongámoslo esta historia tecnológica y voy a seleccionar todo este texto. Y ahora mismo voy a usar este color, que está pálido. Por qué decolorar algo así. De acuerdo, entonces para este CEO, lo que voy a hacer es por éste. Voy a usar el vital puro sólo para resaltarlo o hacerlo separado de los otros tres. Además, si quieres hacer algo, puedes reducirlo como 42 tal vez algo así. Y también este 1er 1 la voy a alejar, así que voy a cambiar la línea. Altura. 48. Esto no estoy seguro de por qué me está pareciendo demasiado grande. Entonces voy a ir con 32 en lugar de 36. Por lo que esto se ve genial. Um, ahora siento que este contraste de talla entre el CEO y éste se ve bien. De acuerdo, Así que o puedes usar este negro, o puedes usar el mismo dedo azul por aquí para este par de tierra. O también se puede hacer. Una cosa más es que puedes reducir el brillo por aquí. Entonces esto es lo mismo tú 21. Y lo que puedes hacer es intentar reducir el brillo, y voy a ir con 30. Ah, son Let's Él tenía 25 años. Por lo que esto parece cuadrado. Estos son los colores, ¿ ves? 100% magenta, 90% amarillo, 42 y negro 52. Siguiente aumento El negro a 65 son 70%. De acuerdo, entonces podemos usar algo así, pero parece muy listo. Oscuro, Así que me voy a ir con 65 o tal vez 60%. De acuerdo, Así que aún así, 60% se ve demasiado oscuro. Saturación 55. Voy a reducir la saturación del dedo del pie 70% algo así. Entonces No, este es un color diferente, pero es en la misma línea de color o el mismo color que waas antes estábamos usando a 21. Por lo que en realidad estamos usando el tono más oscuro y opaco del mismo azul. Por lo que aquí está nuestra primera versión fuera de tarjeta. Entonces, uh, ahora puedes ver que se ve genial, pero tal vez esto se ve demasiado grande. Entonces me voy a ir con 42. Se puede ver lo que estoy haciendo. Yo me estoy alejando. Así que acerque, aleje. Entonces me estoy acercando y veo que esto en relación a éste se ve demasiado grande. Así que probé dedo del pie reducir el tamaño. Entonces ahora lo que voy a hacer es así que estoy usando todo lo que te he enseñado Acercar, alejar El contraste entre diferentes tipos de letra cómo el contraste de color está revirtiendo los colores. Todo bien, entonces no, Lo que tenemos que hacer aquí es que necesitamos crear algún interés. Entonces por aquí este tablero de arte, se puede ver que se ve muy aburrido y muy se puede decir, tal vez navegando. Entonces lo que tenemos que hacer aquí es por esta parte inferior. Voy dedo del pie arrastrar algunos. Se puede ver a algún patrón o aquí, pero el patrón que buscaré es invitador. Entonces esto se ve muy, se puede decir, muy sencillo o muy formal. Por lo que quiero conseguir algo de diversión o creatividad e invitar en acción a esto diseñado para eso. Lo que hice es tener a este patrón, que obtuve de ah, mercado creativo creativo mercado dot com. Y realmente me encanta esto. Cómo han sido estos marcadores, ya sabes, dispuestos oscuros, toman marcadores. Y creo que esto puede estar relacionado con el diseño de la experiencia del usuario porque usamos mucho marcadores . Entonces lo que hice es intentar arrastrarlo a mi tienda de fotos por aquí así, y este es el patrón. Acabo de moverlo por aquí arte u opción clave para replicarlo. Y lo voy a alinear con esto. Por lo que es básicamente un patrón repetitivo, Así que va dedo del pie para ello perfectamente con la otra parte fuera de él. Entonces ahora vamos a esconder este fondo, ¿ y puedes ver? Permítanme acercar el punto de esto. De acuerdo, así se puede ver que aquí tenemos la competencia entre el foco primario fuera de este diseño, que es que no quiero que el usuario mire demasiado este fondo, así que solo quiero este utilizable y esta área para estar en el foco. Entonces lo que voy a hacer es ir de pie, uh, tú algunas superposiciones de color en esta. Por lo que el color de capa de texto excesivamente. Y voy a usar algo, algo grandioso azul como este. Y copia de nuevo este estilo. Básico por aquí base la última vez. Por lo que ahora se puede ver esto es un poco se puede ver el contraste entre las formas en la parte superior. Tenemos todas, um muy rectangulares, formas muy estilizadas y muy terminadas donde están. puede decir que son formas muy regulares, y aquí tenemos formas irregulares en la parte inferior. Entonces este es en realidad el contraste entre estas dos cosas. Por lo que agregué esto para agregar algo de creatividad y algunos simples menos en el diseño que somos una agencia de creación digital creativa digitalmente, algo así. Por lo que esta también es supuestamente experiencia de usuario. Entonces así es como logré crear estos diseños. Por lo que se ha terminado este ejercicio. Y el siguiente paso, lo que vas a hacer es que te vas de dedo descargar alguna tarjeta de visita moke up. Entonces, ¿qué? En realidad un marcado es Déjame mostrarte. Esta es la tarjeta de visita Markoff que estoy usando. Para que puedas ver u oír que se trata de una tarjeta de visita. burlan. Y estos son en realidad objetos inteligentes. Entonces si haces doble clic aquí, te va a mostrar que así es como vas. Toe basó su tarjeta por aquí. Entonces déjame mostrarte lo que hice. Por lo que en realidad seleccioné este tablero de arte. Control Comando A y Ah, copia debe. Y fui a esta base tratada por aquí. Por lo que puedes ver ahora no es una línea porque no tiene área sangrante. Por lo que controlar un centro. Alinearlo. ¿ Y así es como vas a conseguir tu diseño? Vamos, D on de select y usemos Sí, Ve cómo se ve. Por lo que aquí tenemos esta tarjeta utilizable. Se puede ver cómo se ve. Si quieres ajustar algo por ejemplo, si quieres moverlo un poco hacia abajo, no lo estés. Se puede decir que no se limite por estas gran línea. Entonces voy a usar algo como esto. Y también voy a usar movido un poco hacia abajo. Hay uso de algo así y ver si se va a quedar mejor. A continuación, prueba esto. Moverlo en el medio. Comando de Control. ¿ Ver? De acuerdo, así que esto se ve mejor porque nos hemos movido un poco hacia abajo y también por aquí. Esto se ve genial. Es, um Jane, esta, esta capa del dedo del pie. En realidad, compro estos. Entonces si lo eres, si estás pensando que el del luce esto se ve genial. Siguiente me cambia este color y show, ya sabes. OK, entonces así es como se ve mi tarjeta, y se ve crear. Ahora lo que voy a hacer es que lo voy a exportar seguro para web y la imagen será. Se puede ver imagen, altura y anchura es demasiado. Entonces voy a usar algo tal vez 1500 y me voy a exportar así, y eso es todo. De acuerdo, entonces aquí tenemos esta tarjeta de visita. Ahora bien, así es como lo diseñamos. Y así es como vas a usar alguna tarjeta de visita moke up. Así que intenta usar un mocha extraído con dentro de un tamaño soportable, que fácilmente puedo tener. Intentas exportarlo en un tamaño variable de visita y aplaudido en la siguiente asignación. Por lo que la próxima asignación será crear esta tarjeta de visita para ti. Puedes usar tu nombre, tu ficción, es compañía o cualquier cosa que quieras. Vale, Así que espero que hayan disfrutado de esta lección y cómo logré crear este diseño y cómo llegué a este diseño sobre cómo uso diferentes colores. Cuál fue el proceso detrás de mi diseño y cómo usé rejillas y guías y todo el diseño . Entonces si tienes alguna pregunta que hacerme, estaré sumando muchas lecciones, nuevas lecciones en el futuro y, uh, uh, hasta entonces, nos vemos pronto. Ponte enfermo y sigue creando diseños 25. Proyecto → Diseño de tarjetas de presentación: Ahora me has visto creando mi proceso de diseño y cómo creé el simple guardia. Ahora ex Jordan y tú vas a crear algo similar en. Yo quiero que creéis algo mescalino, poderoso, fuerte. Y sin embargo Morgan y creativo así diseñaron una tarjeta usando cualquier color. Así que asegúrate de que los colores también van a, ya sabes, resuenar con este mismo equipo. Entonces lo que dije es fuerte en lo creativo y todo lo que trata de encontrar los colores que van a igualar a este equipo. También trata de encontrar déficits que van a igualar a este equipo. Fuerte, creativo en y Martin. Por lo que estas son las palabras clave T. Te voy a dar tarjeta de diseñador, empresa factiosa o la tuya usando tu propio nombre Diana algo. O John Doe o lo que quieras usar. Intenta usar un lema de uno encabezando tu nombre tal vez, y tus datos de contacto. Está del otro lado. Trata de diseñar esta tarjetas de dos caras. También voy dedo del pie enlazar el archivo de la tarjeta que he utilizado el archivo Photoshopped. Se puede utilizar cualquier software. Tú te quieres si quieres. Ah, diseño usando ilustrador o lo que sea. No me importa. Sólo necesito ver los congeladores. Y Ah, Así que eso es todo lo que estaré deseando ver tus diseños y esta asignación. Entonces, empecemos. No. 26. ¿Qué sigue?: muchas gracias por tomar esta clase. Si tienes alguna duda con respecto al diseño o respecto a esta clase, siempre puedes preguntarme en la sección de comunidad. Además, no te olvides del dedo del pie derecho. Algunos revisan algunas palabras lindas. Entonces para mí, Así que puedo, ya sabes, conseguir algo de inspiración para crear más clases como estas en. Y además no te olvides del dedo del pie echa un vistazo a mis otros cursos porque lo son. Tengo muchos cursos sobre diseño de UX, diseño interfaz de usuario y freelancing y diseño visual. Entonces hasta entonces, nos vemos pronto en la siguiente clase. 27. El efecto encuadre con la imagen → tema avanzado: Voy a hablar de un poco fuera de Vasto. Se puede decir tema avanzado, que es efecto de encuadre ahora efecto de encuadre. Y quizá lo hayas visto, pero no sabes cómo usarlo correctamente. Entonces voy a explicarlo Muchos ejemplos en esta lección que cómo puedes usar el encuadre afectan de manera efectiva mientras estás diseñando para sitios web de referencia, laboratorios móviles o cualquier cosa que estés diseñando. Por lo que podría haber visto fotografías colgadas en su casa o habitación o en la casa de su familiar . Entonces lo que hace es que necesitas dedo del pie poner mucho espacio en blanco o algún contenido alrededor tu foto. De acuerdo, entonces para el encuadre significa que, por ejemplo, si estás diseñando algo o tienes algunas características listadas en un sitio web, por lo que estás diseñando para la sección de características. Entonces lo que vas a hacer es que vas a usar ah, enmarcar fuera er médico, o tal vez algunas líneas o tal vez espacio en blanco y agregarlo alrededor de ese contrato. Por lo que vas a enmarcar tu contenido al igual que una foto se enmarca dentro del marco fuera esa foto. De acuerdo, entonces se va dedo del pie. De qué se va a OK, por lo que va a enfatizar eso y lo va a hacer más prominente y diferente al resto del contenido en tu sitio web o aplicación móvil. Mucha gente a la que no saben cómo usar correctamente quién espacio en blanco del espacio en blanco se puede utilizar como dedo del pie del marco. No necesitas,ya sabes, poner ya sabes, algún marco de color o tal vez algún marco duro alrededor de tu contenido. Se puede utilizar el espacio en blanco. Ah, mucho espacio Y alrededor de tus elementos. Elementos de diseño puntera los hacen lucir, se puede decir enfatizado y audaz. De acuerdo, entonces podrías haber visto que hay marcos de fotos donde cuando la foto es son el texto en ellos es muy pequeño y hay mucho espacio en blanco a su alrededor. Entonces cuando pones mucho espacio en blanco alrededor de algo, se va del dedo del pie. Dale más énfasis y se verá más limpio o más elegante. Se puede ver aquí he diseñado una caja de prueba muy pequeña no o ninguna cisterna. Y podrías haber visto a este tipo de cajas de papa o algo así. Entonces si creas mucho espacio libre en blanco alrededor de ellos. Lo es. Se van a quedar geniales. Así que ten eso en cuenta que poner mucho espacio en blanco va a ayudar a tus diseños. Y realmente no lo intentes. Ya sabes, creo que esto es demasiado. Intenta usar todo lo que puedas. Entonces ahora nos vamos con el dedo del pie. Ver algunos fuera de los ejemplos. Ahora, podría haber visto este ejemplo muchas veces porque este es el reciente que diseñé de todos modos, Así que puedes ver en este diseño si miras esta sección, es un fusible asequible, escalable, deporte libre. Hay un marco blanco que está conteniendo todo este contenido y se puede ver que se enfatiza desde el fondo. Entonces estoy usando en realidad el efecto de encuadre. Entonces déjame mostrarte el marco. Entonces este es el marco, y se puede ver cómo estoy usando mucho espacio en blanco alrededor de mi contenido. Y también estoy usando color blanco y alguna sombra alrededor de él. Por lo que para resaltar este marco que es elevado y es diferente del fondo. Ahora echemos un vistazo a esta sección por aquí, y puedes ver aquí tenemos diferentes tarjetas fuera del uso de diferentes productos digitales Sinus , y puedes ver si miras uno de ellos. También es el efecto de encuadre uso off. Entonces el concepto de tarjeta, que fue diseñado por Google Material design y ah, mucho fuera se puede ver que se utiliza muchas veces encendido en todos los APS móviles. Es básicamente el efecto de encuadre, por lo que están usando un marco de puntera de marco, su contenido dentro de él. Echemos un vistazo a este ejemplo aquí. Como pueden ver, he diseñado este tablero. Y si miras de cerca, estoy usando un marco muy grande en la parte superior de un dedo del pie de imagen borrosa. Mostrar esto. Se puede ver el tablero de escondones y déjame resaltar eso. Entonces este es mi marco, Vale, Así que puedes ver este es mi amigo y todo el contenido a su alrededor. No solo estoy usando vie color para que puedas ver el espacio por aquí y el espacio por aquí a la derecha y a la izquierda. Se está utilizando como marco para que veas que tenemos algo de espacio en la parte inferior, a la izquierda y a la derecha, y en la parte superior Así que estoy usando el efecto de encuadre para resaltar esta área de contenido principal o sección de contenido principal fuera de este dashboard por aquí Por lo que puedes usar todas estas tesis concepto de encuadre de muchas maneras. Se puede ver que estos botones han sido resaltados. Marcos pequeños que estoy usando por aquí. Podrías estar riendo ahora mismo. Entonces, uh, este es en realidad el efecto de encuadre que sobra. Deja espacio a su alrededor así y resalta el contenido entre él. De igual manera, estoy usando un cuadro muy grande alrededor de todo mi tablero. Entonces veamos algunos ejemplos de otros diseñadores porque creo que solo soy un gran nerd. Entonces veamos algunos diseñadores de experiencia más. Entonces el primer ejemplo es de este diseñador, Anwar Hussain, y creo que diseñó esta página de aterrizaje y está muy brillantemente diseñada. Muy bonito, muy sencillo. Claramente fuera. Buen uso off colores. Y si miras esta sección por aquí, déjame acercarme a esta sección. Por lo que aquí tenemos esta sección atenta frente de membresía Gatien y consola. Por lo que este es en realidad el efecto de encuadre uso off. Por lo que este contenido, se puede ver que está dentro de un marco otra vez. Si nos fijamos en otra sección a mí mostrarte. Uh, estamos waas que OK, entonces este quiero recibir actualizaciones Darse de baja en cualquier momento. No hay spam. Por lo que puedes ver esta sección para suscribirte también está usando efecto de encuadre en Dhere. Tenemos de nuevo el contenido del efecto de encuadre dentro de este marco. Entonces no pienses nunca que ese marco es solo puedes decir Ah espacio en blanco para que puedas usar cualquier color como aquí. Ha usado algunos colores a su alrededor Colores muy pálidos. También puedes usar algunos mecenas a su alrededor. Déjame mostrarte algún ejemplo Por aquí podrías haber visto esto antes y puedes volver a ver los ojos en el centro. Está usando el efecto de encuadre. Por lo que esto está haciendo que se vea genial Espacio a su alrededor. Al igual que un marco de fotos. Permítanme mostrarles más ejemplos. Aquí tenemos éste. Se puede ver esto por aquí Imagen por dentro y simplemente se ve como un marco de fotos. Ahora aquí se puede ver que el diseñador está usando un marco para enmarcar esta foto y se puede ver el espacio alrededor. Esta fotografía sólo se ve como un marco de fotos. De igual manera, este texto también está dentro de este marco se puede ver. Por lo que este es el uso fuera del efecto de encuadre de nuevo. No confundas que El encuadre de fester hecho se puede utilizar sólo con el espacio en blanco. Puedes usar mecenas a su alrededor. De acuerdo, así que aquí en este paquete, atrás está diseñado. Se puede ver que esto se ve muy bien. Es de Mamba Studio y, Ah, Ah, me encantaron sus diseños. Se puede ver que esta información del centro que es última Selva Cafe. Orgánica. Ah, está rodeado de la textura. O puedes ver al patrón tejón a su alrededor. Por lo que este es un hermoso patrón y un gran diseño de producto diseño de embalaje de producto. Y aquí puedes ver que están usando en realidad a este patrón para el efecto de encuadre. Por lo que están enmarcando esta sección de plano fuera naranja amarilla y este texto y enmarcarlo con algo de textura. Entonces este es en realidad el contraste. Este centro uno realmente está jugando, y afuera está todos los mecenas. Entonces este es otro, realidad, en el concepto que les he enseñado contrastar. Por lo que aquí puedes ver Míralos de cerca. Se ven geniales. Este es en realidad el efecto de encuadre de nuevo. En el marco es demasiado grande. Y la imagen es demasiado pequeña. Por lo que se puede ver también, hay algunas partes superpuestas. Crear ejecución. Diseño claro. Realmente me encantó este paquete Diseño de paquetes. De acuerdo, entonces veamos un ejemplo más. De acuerdo, así que esto es de thes son múltiples honores Isabel Sosa y elenco solo te strode Londres Y este es un gran diseño de nuevo. Y aquí se puede ver el como usando el de nuevo el efecto de encuadre, pero un poco diferente. Entonces lo que están haciendo es que tienen Están usando esta textura que yo zoom usando esta textura en estas imágenes Estos mecenas y la están usando justo en la parte superior de la página para que el marco superior tenga esta textura y el resto fuera del marco no tenerlo. Simplemente tiene se puede ver sólo se puede ver la pieza del Voigt. Entonces, en realidad, están tratando de usar un concepto del que he hablado ah en mi otra lección, que está generando ideas donde el concepto waas para mostrar y ocultar. Por lo que están mostrando alguna parte y ocultando el resto de la parte. Por lo que aquí se puede ver muy gran diseño. Ojalá pudiera diseñar algo como esta gran ejecución, grandes combinaciones de tipografía, gran estilo, grandes colores, gran uso de efecto de encuadre con el uso de este patrón en general, un gran diseño. Entonces eso es todo lo que espero que hayas entendido ahora el concepto de efecto de encuadre y cómo puedes usar eso en tus APS móviles, Web, abs, abs, sitios web o lo que sea tu diseño. Por lo que pronto en la siguiente lección, espero estar haciendo más lecciones como estas para este curso. Y ah, hasta entonces, sólo sigue observando y mejorando. No olvides presentar tus tareas y nos vemos pronto en la siguiente lección.