Transcripciones
1. Introducción al curso: Hola amigos, bienvenidos a este curso. Mi nombre es Samira y soy UX y diseñador de productos. He diseñado este curso para principiantes que quieran aprender sigma para el diseño UX UI. En este curso, te voy a llevar en un viaje desde el requerimiento del cliente hasta entender qué es una alambrada, que es el requisito que se ilustra. Y luego diseñando este sitio web absolutamente desde cero. Vamos a usar el aprendizaje haciendo metodología, lo que significa que cuando estoy creando esto, puedes seguir este diseño exacto del curso. Y vil estás haciendo eso, aprenderás todas las características y funcionalidad de sigma. Una sugerencia que me gustaría hacer en este punto es hacer este curso y practicar lado a lado. Si tienes dos monitores como este, entonces puedes disparar un monitor Fichman uno y usar el otro para correr el curso. Si no lo haces, puedes usar un móvil o una tableta y ejecutar el curso en la aplicación móvil y usar tu computadora para trabajar en sigma. Estoy muy emocionado por tu viaje de aprendizaje sigma. Voy a conseguir esta introducción corta y empecemos. Nos vemos en la siguiente clase.
2. Preparación del entorno: Déjame saltar al aprendizaje real. Pongamos primero el medio ambiente. Yo quiero llamar su atención sobre dos expedientes, a que voy a referir en los enlaces de esta conferencia. Entonces uno es el archivo del libro de trabajo, excelente estudio en el extranjero. El archivo del libro de trabajo. Este es el archivo es algo con lo que vas a usar para trabajar. Cuenta con el informe del cliente, tiene el wireframe. He proporcionado los wireframes para que se vuelva un poco fácil para el diseño final. Y luego obtendrás áreas de cuaderno de trabajo para hacer tu propia paleta de colores para establecer la propia tipografía. También incluí las imágenes por aquí. Y entonces aquí se puede iniciar el diseño real. Y el segundo archivo que he incluido en la sección de recursos es el archivo de referencia en el que este es el archivo que he usado para realizar este diseño. Entonces verás esta paleta de colores que he diseñado para trabajar el curso igual, que también puedes diseñar conmigo. Se puede ver la topografía, que he dicho, y se puede ver el diseño final en esto. Por lo que básicamente he proporcionado dos enlaces. Entonces lo que quería hacer es dar click en un enlace. Entonces eso es algo como esto va a pasar. Por lo que una vez que haga clic en un enlace de proyecto y acaba de entrar, en
primer lugar, se requiere que inicie sesión con FISMA. Fisma trabaja en un navegador. Fisma tiene aplicación también. Te recomendaré que descargues la aplicación. Tan bien, así que una vez que hayas hecho clic abajo los recursos, algo como esto se abrirá. Ha significado ser un archivo de solo vista. Entonces este es el archivo del libro de trabajo que tienes. Entonces lo que tienes que hacer es ir aquí en la sección de
solo factura y tienes que duplicar esto a tus borradores. Entonces por esto, lo que pasará es cuando dupliques este archivo, este archivo se copia en tu fig mis borradores y se convierte parte de tus archivos recientes o de cualquier proyecto que tengas actualmente en marcha. Entonces solo voy a duplicar esto a mis borradores. Y una vez que eso suceda, solo
puedo abrir esto. Y verás que ahora se ha abierto y esto es completamente editable. Tiene pequeño enfoque guiado también. Yo sólo puedo ignorar eso por ahora. Pero entonces podré hacer cambios a la forma en que quiero en este archivo. Entonces básicamente quiero que uses estos enlaces para llegar a los archivos. Alternativamente, voy a descargar los archivos y también proporcionar un archivo zip para que puedas descargar físicamente esos archivos y tal vez incluso subirlos o importarlos a sigma. De acuerdo, entonces creo que esto es suficiente para configurar el medio ambiente. Nos vemos en la siguiente clase.
3. Si tienes problemas para importar los archivos: apaga la alarma, no se puede abrir el archivo del libro de trabajo después de descargarlo de la conferencia anterior. Estoy tratando de encontrar una solución rápida para eso. Pero mientras tanto, siempre se pueden
utilizar los enlaces que se proporcionan en la conferencia anterior, así
como esta conferencia en la descripción para abrir directamente el archivo del libro de trabajo o el archivo de referencia. Como saben, para sigma es herramienta colaborativa en línea. No es necesario descargar los archivos e importarlos exclusivamente. Simplemente puedes usar estos enlaces y obtener, llegar a aprender todo lo mejor.
4. Mundo HELLO: En esta lección vamos a explorar las características muy básicas de sigma y tratamos de entender la interfaz de usuario sigma. Pero antes de eso, quiero que te asegures de que estés usando este archivo, que es excelente estudio en el extranjero, el archivo del libro de trabajo. Por el bien de la repetición, sólo
me gustaría decirles de nuevo que este va a ser el archivo que van a utilizar a lo largo del curso para diseñar. Por ejemplo, este archivo tiene estas páginas por aquí. Tiene el resumen del cliente, tiene la estructura alámbrica, la paleta de colores. Esta es sólo una estructura. Podrás seguirme en las metas y crear tu propia paleta de colores. Lo mismo para la tipografía, algunas imágenes. Y esto va a ser un lienzo en blanco donde diseñas. Por lo que quiero instarles a que mantengan este archivo abierto y sólo sígueme y déjenos tratar de entender el fig, mi interfaz. Cuando aprendemos la codificación, el primer programa que enseña es el de hola mundo. Hola mundo no es más que una simple introducción al mundo de la codificación. Vamos a hacer algo similar para el diseño. Por el momento que quiero hacer diseño solo un par de pantallas fuera de una app. Y voy a tratar de usar tanto como las características como pueda. Entonces vamos a ver. Te presentaré a sigma. Entonces este es todo el espacio de trabajo. Esto es con lo que tenemos que trabajar. A estos se les llama las herramientas de la región. Seleccionaré la primera legión dual que es de un marco. En FISMA, el modo impar se llama marco. Tenemos todas estas opciones a la derecha. Por ejemplo, puedes elegir un marco para un teléfono. Se puede elegir un marco para una tableta versus presentación de escritorio, reloj, papel, etcétera. Simplemente seleccionaré son el marco para el teléfono. Hagamos iPhone 11 pro. Entonces una vez que hago clic en eso, consigo este marco por aquí, que también se convierte en mi tablero de arte. Por lo que esto buscará exactamente en el iPhone una vez que hayamos completado el diseño de la app. Si puedo, aquí, puedo hacer doble clic en esto y quizá pueda leerle este arte. Me gustaría renombrarlo pantalla de inicio de sesión por ahora. Pantalla de inicio de sesión. Entonces para nuestra app, que actualmente solo estamos diseñando para nuestra app Hello World. Esta va a ser la pantalla de inicio de sesión. Ahora, iré a la herramienta de texto y solo daré clic en cualquier lugar, y solo escribiré login. Realmente funciona de manera muy sencilla. Es bastante sencillo. Y ahora voy a cambiar su fuente. Para hacer eso, puedo ir a este panel de diseño por aquí, y luego puedo ver texto. Por lo que esta área está relacionada con la, todas las manipulaciones que queremos hacer a través del texto. Simplemente voy a aumentar el tamaño de la fuente de 12 a 80. Una vez que yo, una vez que hago eso, se
puede ver que se ha incrementado el tamaño de la fuente. Volveré a ir a las herramientas de forma. Seleccionaré la línea y luego simplemente dibujaré casualmente línea debajo de ésta. Ahora, cuando estoy dibujando la línea, se
puede ver que se va bastante Hayward. Pero si presiono Shift mientras arrastro eso, entonces el tipo de línea se encaja en ángulos de 4590 grados. Bastante cool. Característica de esto. Entonces sólo voy a dibujar una línea, ¿verdad? Hazlo un poco, ya sabes, tener alguna apariencia de una pantalla de inicio de sesión. Ahora, queremos hacer lo mismo para captar también el recurso de contraseña, ¿verdad? Entonces una forma rápida de hacerlo ya que seleccionaré ambos elementos como este, solo
voy a arrastrar y voy a presionar Enter en mi teclado. Y luego haremos solo duplicarlo así. Simplemente lo estoy arrastrando simplemente. Y entonces sólo escribiré contraseña por aquí. Bastante simple. Entonces, no se preocupen chicos, sólo
estamos una especie de retoque con la interfaz. Todo el aprendizaje real va a suceder en las próximas conferencias. Y voy a ser mucho más detallado y voy a ser un poco lento también para que lo puedas resolver como estás aprendiendo. Entonces eso te va a ayudar a construir las habilidades
así como a no pasar mucho tiempo después revisándolas. De acuerdo, así que volviendo a esto, ahora lo que puedo hacer es que necesito agregar un botón por aquí que diga tal vez entrar. Entonces, ¿cómo hacer eso? Entonces voy a ir a las herramientas de forma como rectángulo de actor. Y sólo dibujaré rectángulo aleatorio. Entonces lo bueno de sigma es que si estoy, si empiezo a mover este rectángulo, sólo me
va a mostrar la guía para la alineación, esta línea roja que se te ve. Entonces sólo lo voy a alinear aquí. Y quiero, siempre quiero cambiar el color de esto. Entonces para hacer cambiar el color, volvemos a ir al panel de diseño y seleccionamos en el relleno. Por lo que una vez que
hago click en esto, llego a elegir cualquier color por el que quiera. Nuevamente, solo usa este deslizador para pasar por cualquier gama de colores. Escogeré esto. De acuerdo, esto suena mucho cerebro, así que cerraré esto. Como puedes ver, el color no ha sido cambiado. Para que esto se vea como un botón, voy a añadir un radio de esquina. Esto sucederá sólo aquí. Sólo voy a llegar tarde 20 pixeles para que parezca un metal. A lo mejor voy a hacer 30. Le dará un aspecto más redondeado. De acuerdo, y ahora con el fin de ponerle texto, voy de nuevo a la herramienta Texto y voy a escribir aquí y otra vez alinearlo simplemente arrastrándolo. Y así, hasta el momento hemos creado una pantalla de inicio de sesión muy rudimentaria de tipo. Ahora una cosa muy cool de sigma es que sigma te permite descargar muchos plugins que te ayudan con el flujo de trabajo. Te mostraré cómo descargar los plugins. Entonces si solo vas a la barra de estado, ya
hay un bar plugins sin dios. He descargado todos estos plugins forrajes para este curso y para mi FISMA. Por lo que para poder descargar un plugin, es necesario ir a Administrar plugins. Y luego si tú, estos son los plugins que he instalado, te
voy a recomendar que instales gradientes web. Cuantificador y salpicar estos tres plugins. Entonces la forma básica de hacerlo es ir aquí. Y luego sólo busca el plugin. Al igual que por ejemplo, si quiero descargar y salpicar, solo
buscaré esto. Y los ves splash plugin. Ahora mismo está instalado que mi sistema. Pero si solo haces clic en esto, como por ejemplo, ya que verás tal botón, si no lo tienes instalado, se instala en un solo clic. No tienes que hacer nada. Y una vez que vuelvas a tu hoja de trabajo, estará ahí. Entonces solo voy a abrir el icono si conecto ahora mismo. Entonces y solo encontraré un ícono, ícono si plug-in te permite encontrar algún ícono. Entonces voy a una especie de descargar esto. Esto me gusta mucho. Descargaré esto por 200 pixels. Cerraré esto y sólo lo colocaré aquí. Enfriar medio. Entonces así es como acabamos de lograr diseñar una pantalla de inicio de sesión muy rudimentaria de algún tipo. Por lo tanto, vamos a genes de este color al que podemos cambiarlo. Si quieres emparejar esto con el color del botón, solo
puedes elegir el seleccionador de color. Puedes hacer click aquí ya que puedes ver los colores cambiando. Si quieres algo un poco más vibrante, puedes ir por un gradiente lineal. Y puedes elegir una especie de dos colores diferentes de familias diferentes y luego tratar de, ya
sabes, solo taza jazzy, ya sabes. Ok. Entonces esto se ve genial, ¿verdad? Tan bien. Entonces sigamos adelante. Diseñemos una pantalla más. Sólo por diversión. Solo estamos tratando de retocar. No hay camino correcto, no
hay camino equivocado por ahora. Entonces seguiré adelante y ahora quiero crear otro a bordo. Entonces la forma de hacerlo es que quizá pueda duplicar este tablero de arte también presionando Comando D. Y verás lo mismo a bordo estallando por aquí. Simplemente puedo eliminar esto haciendo clic en el retroceso o eliminar cualquier teclado que estés usando. Entonces con el fin de agregar una historia más, y volveré a la herramienta iFrame. Y voy a añadir el iPhone 11, Bruce verde otra vez. Y ahora esto va a ser una especie de página de producto, ya sabes. Entonces esto va a tener cualquier imagen. Por lo que de nuevo, está este hermoso plugin llamado Splash. Simplemente te mostraré lo fácil que es agregar una imagen. Entonces voy a ir a plugins. Selecciono y chapoteo. De acuerdo, entonces, pero antes de eso simplemente dibujaré rectángulo por
aquí para que pueda colocar directamente mi imaginado a este rectángulo. Entonces iré a la herramienta de rectángulo desde las herramientas de forma. Voy a una especie de sólo mantener un rectángulo por aquí, alineado centralmente. Y luego voy a buscar en este plugin. Buscaré zapatos. Y oh, esto es genial. Creo que solo usaré esta imagen. Por lo que poner esta imagen en este rectángulo es tan sencillo y con solo hacer clic en él y ver que obtienes tu imagen por aquí. Y solo, usaré un campo de texto para solo mencionar algún precio. Parezco aquí. Escribiré dólar 350. Suena bien, para tan vibrantes zapatos califica, estos son Nike como Ok, así que no hay distracciones. De acuerdo, entonces necesito solo hacer unos botones muy grandes tal vez, pero justo ahora. Por lo que voy a entrar en el dual rectangular Otra vez. Seleccionaré el rectángulo. Y luego voy a volver a seleccionar el rectángulo grande. Voy a redondear los bordes a toddy de esta zona. Y con el fin de renunciar a este color, voy a usar otro plugin ahora mismo. Se llama gradientes web. Gradientes, y este plug-in ya tiene algunos gradientes a granel. Entonces solo voy a seguir desplazándome hasta encontrar un plug-in que me guste mucho. A lo mejor me gusta este. Por lo que voy a hacer un click en esto y se puede ver que tenemos un gradiente a esto. Voy a usar una herramienta de texto. Y ahora mismo, sólo
voy a alinear esto en el medio. Y así no tenemos pantallas demasiado rudimentarias de nuestra app. Rápidamente intentaré resumir esto. Añadiré un marco más a través de las herramientas de región. Y yo sólo voy a escribir éxito por aquí. Y me limitaré a alinear esto. De acuerdo, así es como acabamos de armar algo retocando con sigma. Con el fin de acercar cualquier parte. Lo que vas a hacer es que puedes presionar Z o Z y luego simplemente puedes arrastrar un cuadrado como este, y luego simplemente se hace zoom a esa zona. Si quieres usar tu rueda de desplazamiento en el ratón, puedes presionar el comando y luego desplazarte hacia arriba, desplazarte hacia abajo para clasificar el zoom y alejar. Y luego si quieres agarrar esto y como hacer que se deslice, entonces puedes usar el mango. La herramienta de mano te permite simplemente agarrar y deslizar las tablas de arte alrededor y solo puedes presionar Escape para soltarte. Una de las características frescas de sigma es también que higo avaro prototipado. Entonces veamos a qué nos referimos con eso. Entonces, así que un evento de usuario, el usuario llega a este AP Hill, él o ella verá esta pantalla primero y luego entrarán e irán a la página. Y luego cuando hagan clic en comprar, ahora recibirán este mensaje de éxito. Este es el flujo muy básico que actualmente tenemos frente a nosotros. Entonces para hacer eso, fui a ir a la sección de Prototipo. Y entonces sólo tengo que conectar los botones a los destinos. Al igual que por ejemplo, si quiero, si el usuario hace clic en enter, el usuario debe ir a esta tasa de pantalla. Entonces sólo voy a cronometrar este tablero de arte. Y si el usuario hace clic en este botón, deberían ir a esta pantalla. Y eso es todo. Entonces ahora solo repasemos lo que hemos hecho hasta ahora. Simplemente jugueteando dando click en la pestaña presente por aquí. Si hago click en presente, solo me va a mostrar la app. Veamos cómo se ve. Ok, entonces esto está en realidad en un marco de iPhone. Entonces si hago clic en entrar, me muestra esta pantalla. Si hago clic en comprar ahora
, me muestra éxito. Entonces esto es, esta es la operación muy básica de sigma. A lo largo de las próximas lecciones, vamos a agregar muchos matices a esto. En la UX de la UI diseña esa herramienta. Es sólo una parte de ello. comprensión del proceso es la mayoría de conocer y practicar el diseño UX de la interfaz de usuario. Entonces en las próximas conferencias, lo que vamos a hacer es que vamos a pasar por el proceso de entender pasos desde el breve cliente hasta conocer la estructura alámbrica, hasta establecer la topografía de la paleta de colores, y luego saltando a su diseño. Estoy muy emocionado por tu viaje a sigma y te veo en la siguiente clase.
5. Comprender el requisito del cliente: Ahora vamos a echar un vistazo al informe del cliente para facilidad de uso, he incluido el resumen del cliente en esta página en el excelente libro de trabajo de estudio en el extranjero. Para hacer zoom dentro del resumen del cliente, o bien puedes presionar comando en Mac o Control en Windows y usar la rueda de desplazamiento del ratón. O hay un truco ordenado en el que puedes presionar Z o Z y luego simplemente arrastrar una selección y luego verás que se acercó a la selección que realices. Un resumen de proyecto es esencialmente algo que el cliente te envía, el cliente envía a un diseñador. Típicamente es un documento de Word. Por ejemplo, en este documento se
habla del nombre de la empresa que es excelente estudio en el extranjero. Cuál es el objetivo es que construyamos una página de aterrizaje para la nueva página web de la empresa. En la página del héroe hay componentes. Está todo ahí en este requisito. Para poder deslizar esto, puedes agarrarlo usando la herramienta de mano y
puedes especie de moverte alrededor del cartón como quieras. Ahora bien, este informe del cliente se ha convertido en una alambrada, y he incluido ese wireframe en este archivo en particular. Al finalizar el curso, nos tomaremos unos diez minutos rápidos sobre cómo hacer una alambrada. Pero para tu aprendizaje ahora mismo, creo que puedes usar esta página de aterrizaje Bagram, que ya he incluido. Pasemos por el alambrado realmente rápido. Y entonces empecemos el proceso de diseño real. Usaré z y luego solo haré una selección. Entonces básicamente estamos hablando de la portada de la página web. Aquí va a haber un logo. Va a haber esta barra de navegación. Esta es la copia en dos tamaños de fuente para morir caras. Estos son los iconos sociales que se mencionan en el breve del cliente. Esto significa que aquí va a haber una imagen. El cliente ya mencionó en la breve del cliente que les gustaría una foto de una chica que está universitaria yendo porque esto va a ser así porque esto va a ser sitio web de estudio en el extranjero. Estos son los servicios que actualmente cuentan. En la página web. También hay detalles de algunos próximos eventos universitarios. Estos son los países que cubren. Va a haber cuando testimonial y luego está este último llamado a la acción como estás listo para realizar tus sueños? Y entonces el botón es aplicar no, para ti o si voy al breve cliente ahora mismo, verás que exactamente todas las cosas están cubiertas en esto. He usado este informe muy cliente para crear ese wireframe. Y sólo para darle un vistazo de lo que va a venir, si abre el excelente estudio en el extranjero archivo sigma de referencia, que he dado. Entonces este es el diseño final que he creado a partir de ese wireframe. Y esto va a ser todo el vidrio, en donde estarás aprendiendo a convertir ese wireframe. Estarás aprendiendo a convertir este wireframe y hacer un diseño como este. Eso es todo por ahora. Nos vemos en la siguiente clase.
6. Palleta de colores y colores primaria: Va a haber una lección muy interesante. En esta lección, vamos a diseñar nuestra paleta de colores. Lo que he hecho es que he incluido una plantilla en esta página,
la página de la paleta de colores. Vamos a ver de qué se trata esta plantilla. Entonces esta es la plantilla. Esto es esencialmente un diseño automático. lo cubriremos a medida que avancemos en este curso. Y éste tiene un color, ahora mismo, éste. Y luego tiene diez lata del color. Entonces cuando le agregas mordida a un color, se convierte en su tienda. Entonces el propósito de esta plantilla es, por ejemplo, digamos si cambio de color yendo a los colores de selección y tal vez eligiendo rojo, entonces verás que obtendrás todos los tendones de rojo, que tenemos para los cuales tenemos planeados. Te diré el propósito detrás de esto. Los propósitos tal vez mientras estás diseñando, encontrarás que tal vez esta lectura en particular es para Gaudí o dos en tu cara. Y querrías algo así como una resistencia más leve. Entonces tal vez te gustaría que esto vaya en tu documento. Entonces para hacer una elección muy visual, lo que hacemos es básicamente tomar color y luego hacemos decenas de Puppet. Simplemente haré Comando Z o Control Z para deshacer esto. Y ahora hablemos más de colores. Vamos a hacer cuatro tipos de colores, colores primarios, colores secundarios, colores terciarios. Y luego vamos a hacer pastoreo. Veamos cómo podemos hacer eso. Por lo que voy a duplicar esto que van a ser dos colores primarios porque el logo para la empresa Excellence estudio en el extranjero tiene un gradiente lineal. Vamos a comprobarlo rápidamente. Copiaré este logotipo de la página de imágenes a la página de la paleta de colores. Lo pegaré aquí. Y si voy a analizar la película por aquí, verás que es un gradiente lineal. Y el gradiente lineal es de este color en particular, que es este valor, a este color en particular, que es este valor. Entonces lo que vamos a hacer es que nuestros colores primarios van a ser los dos colores que forman el gradiente del logo. Esto será sincrónico con los lineamientos de marca o los colores de marca que tiene la empresa. Veamos cómo podemos hacer eso. En primer lugar, voy a seleccionar este conjunto de colores. Y luego lo voy a duplicar presionando Comando D, porque van a haber dos colores. Voy a renombrar esto como colores primarios haciendo doble clic aquí y escribiendo colores primarios. De acuerdo, grilla. También van a haber dos colores secundarios. Entonces y nada, solo creemos todo el asunto de la plantilla. Voy a acelerar esto. Yo sólo voy a duplicar este más. Y veo venir aquí los colores primarios. Simplemente lo bajaré. Simplemente lo encaja en su lugar, es realmente genial con esto. Obtienes que obtienes cuadrículas cuando estás tratando de mover elementos por ahí. Voy a renombrar esto como colores secundarios con el fin de renombrar esto. Ahora, cuando selecciono esto, se resalta el globo ocular correspondiente por aquí. Puedo renombrar esto como colores secundarios. Ahora quiero duplicar más esto. Entonces lo que haré es presionar la tecla de opción o la tecla alt en Windows. Y cuando haga eso, repente
verás que el cursor, ahora
hay dos cursores. Ya sabes, verás el doble cursor espejado o pierna. Eso sólo significa que cada vez que arrastras algo, simplemente lo duplicará. Aquí vamos. Voy a renombrar esto rápidamente como colores terciarios. Ahora los colores terciarios, ya que hay dos colores primarios, hay dos colores secundarios, solo
cubrirán eso en un poco. Pero los colores terciarios son básicamente colores de acento y típicamente usamos para iconos. Entonces, ¿por qué no tener montones de colores terciarios? Por lo que posiblemente tendrá seis colores terciarios. Sólo estoy duplicando Por Comando D. Y está pasando. Y luego haremos algo de espacio para nuestros grises. Voy a presionar la tecla Opción o Alt en Windows. Y yo voy a hacer pastar este. Fantástico. Por lo que viniendo a los colores primarios, voy a presionar Zed y simplemente arrastrar esta selección para que se haga zoom para nuestro beneficio. Entonces la forma que voy a hacer es que desde aquí voy a copiar el código de color azul. Y lo voy a pegar en el color de selección. Después de seleccionar esta primera fila. Yo lo voy a pegar aquí. Y tenemos nuestro primer color primario. Para el color secundario, voy a hacer lo mismo. Voy a elegir el otro código de color. Y lo voy a pegar aquí. Por lo que sí tenemos nuestros colores primarios. Veamos cómo hacer los colores secundarios, los colores terciarios, y la gracia en la siguiente clase.
7. Colores secundarios y colores TERciarios: En la última lección, creamos estos colores primarios. Y mientras los
creamos, los basamos en el esquema de color de este logotipo. Entendamos ahora ¿por qué hicimos eso? Entonces básicamente colores primarios de la mayoría de los elementos en el diseño visual. Eso va para encabezamientos, que va para cualquier enlace, cualquier componente importante, cualquier llamado a acciones, etc. Y es bueno que eso sea sincrónico las directrices generales de marca sobre los colores de la marca para que se vea bien. Y esa es la razón por la que elegimos los colores primarios de nuestro logo. Empecemos a hablar de los colores secundarios. Es una regla general que los colores primarios y los colores
secundarios sean complementarios entre sí. Y con eso, quiero decir que los colores secundarios y los colores primarios, crean este look armónico. Ahora cómo encontrar colores que son complementarios a estos dos colores. Entonces básicamente lo que hago es usar una herramienta realmente buena llamada como color Adobe. Entonces vamos a comprobar rápidamente qué se puede hacer. Entonces solo voy a seleccionar la rueda de color. Voy a navegar a la rueda de color del punto de color adobe.com. Y mientras esto se está cargando, ok, así que esto ha cargado. Por lo que la forma más rápida de hacerlo, la forma más rápida de obtener un color de cortesía es siguiendo este método. Entonces voy a seleccionar este código de color. Y luego lo voy a pegar por aquí. Y luego he presentado, me muestra
que este es el color. Y encima, por aquí, tiene muchas opciones para aplicar la regla de armonía de color. Para que pueda ir monocromática, en donde me va a mostrar sólo frase de sombra del mismo color. Puedo ir a tríada, que es una combinación de tres colores. Y luego vengo a cortesía. Entonces cuando vengo a cortesía, así que todos los demás colores son complementarios a esto. Entonces voy a elegir posiblemente este color como mi primer color de cortesía. Entonces voy a copiar este código de color por aquí. Y lo voy a pegar en el color de selección por aquí. Y voila, sí tenemos nuestro primer color secundario. Voy a repetir el proceso para el segundo color secundario. Voy a copiar esto y pegarlo aquí. Y luego tomo este código de color y pegué en el color de selección y wallah, si piensas que este color es un poco demasiado verde, tal vez sea demasiado fluorescente, entonces siempre podemos cambiar usando esta, esta opción. Y tal vez esto sea más un look Mac, y tal vez yo seleccionaré esto. Entonces ahí vamos. Entonces ahora tenemos dos colores primarios y después tenemos a colores secundarios. Entonces hablemos de los colores terciarios. Pero antes de eso, vamos a entender rápidamente dónde vamos a utilizar los colores secundarios? Vamos a utilizar los colores secundarios para las piezas de acento mayormente. Y voy a recuperar las piezas de acento y me referiré de nuevo a estos colores secundarios como y cuando estamos diseñando en las próximas lecciones, llegando a los colores terciarios, los colores terciarios se utilizan realmente con moderación en todo el diseño. vamos a utilizar para los artículos en su mayoría. Entonces el ancho de onda, que creo los colores terciarios es que estoy usando la misma rueda de color Adobe. Entonces voy a copiar esto y quizá lo pegue aquí. Y luego iré por unos colores compuestos. Y luego voy por unos colores compuestos. Entonces elijo los colores que me gustan de esto. Y voy a empezar a hacer los dados tres colores. Eres libre de elegir los colores que quieras. Tan solo asegúrate de que estos no sean los tonos o latas de los colores primarios y secundarios. Básicamente, sólo los vamos a usar para iconos. Entonces ahí está eso. Voy a acelerar un poco esto y nos vemos en la siguiente clase.
8. Terciario: Por lo que estos son los colores terciarios que he creado usando exactamente
el mismo proceso que mostré en la conferencia anterior. Puedes usar estos mismos colores en tu diseño. Se pueden hacer referencia a estos del archivo de referencia que he compartido como parte de esta clase. O puedes usar el mismo proceso y hacer tu propio calendario. Te recomendaría mucho que trataras de llegar a tantas ideas de color que puedas usando el color B de Adobe y convertirlas en tus colores terciarios. Estos se van a utilizar sólo para iconos para al menos nuestro diseño. Y vamos a ver a qué se les puede llegar. Ahora hablemos de la grasa. Pastar. Se. Esto es, en nuestro caso, los
vamos a utilizar para nuestras formas anti fases. Básicamente, este primer color es negro total, como podemos ver. Y ahora estas son como las cosas del mismo color. Como pueden ver, estamos,
estamos reduciendo la opacidad de ese color en un 10% cada uno. Entonces, entonces básicamente, lo que me gusta hacer es que me gusta tener el color gris original en mis diseños sea una función de mi color primario. Entonces déjame mostrarte lo que hago. Esto no es muy duro y rápido, pero creo que son unos muy bonitos nuevos de tener. Entonces lo que voy a hacer ahora mismo es que voy a hacer un rectángulo por aquí. Y luego voy a, voy a usar mi color primario como núcleo de este rectángulo. Entonces voy a copiar esto y lo voy a pegar por aquí. De acuerdo, entonces tenemos un rectángulo en color primario. Voy a duplicar esto. O puedo hacer eso haciendo el comando D o puedo usar la opción en la llave del altar. Voy a duplicar esto. Y luego voy a hacer este negro. ¿ De acuerdo? Y ahora cuando voy a súper imponerles a los dos. Por lo que si ahora ves claramente, sólo
voy a acercar esto. Entonces si reduzco la opacidad del negro, entonces empieza a parecer una fusión entre el color negro y el azul. Eso lo haré al 50% para que lo veas, es casi, se puede ver el 50% del azul que hay. Entonces eso es demasiado, que eso no es genial. Pero si hago el 90%, entonces esto es lo suficientemente grande. Y esto definitivamente es un tono más claro que el 100% negro. Entonces ahí vamos. Por lo que me gustaría usar este color para mi área gris. Y lo que voy a hacer es que voy a elegir esto. Voy a usar el recolector de color. Y yo sólo voy a dar click aquí. Por lo que ahí lo tenemos. Entonces esto no es todo negro, esto no son los seis ceros, pero esto es el 000318. Entonces ese va a ser nuestro color gris. ¿ De acuerdo? Muy bien, entonces en esta sección, lo que hicimos fue diseñar por completo nuestra paleta de colores. Contamos con colores primarios, tenemos colores secundarios, colores terciarios, y grasa. Esto, estamos listos con nuestra paleta de colores. Y a partir de la siguiente lección, vamos a sumergirnos en profundidad en el proceso de diseño real. Nos vemos en la siguiente clase.
9. Selección de tirar y tipos de gusto: Hemos diseñado esta hermosa paleta de colores. Centremos nuestra atención en la tipografía. tipografía es esencialmente todo lo que tiene que ver con el tipo de texto, tipografías y fuentes que vamos a estar utilizando en nuestro diseño. Por aquí, ya verás. Y por supuesto estoy acercando presionando zag y luego arrastrando una sección. Entonces básicamente, esta es una palabra extraña en la que vamos a seleccionar nuestra tipografía para los encabezados. Estoy alejando presionando comando. Y luego estoy usando la rueda de desplazamiento en mi ratón. Y luego estoy arrastrando esto presionando la barra espaciadora, y luego solo estoy arrastrando usando el clic izquierdo en los memos. Entonces básicamente vamos a tomar dos caras tipo, una para encabezamientos y otra para texto corporal, que haya una variedad natural y qué iones en el diseño. Entonces vamos a hacer algo llamado como escala de tipo, que es organizar los tamaños de fuente de una manera que todo se vea armonioso. Y luego nos estaremos metiendo en estilos de encabezamiento y encabezamientos de párrafo. Ya sabes, qué vamos a usar exactamente o ediciones de
párrafo así como para texto de párrafo. Vamos a sumergirnos realmente rápidamente con el fin de escalar. Con el fin de simplemente alejar a un 100% de escala. Lo que puedes hacer es usar un atajo llamado buque estadounidense uno. Entonces cuando hago turno y uno, se acerca para encajar. Ok, empecemos ahora. Por lo que vamos a elegir una tipografía para nuestros encabezados. Déjame quitarme esto del camino. Está bien, genial. Entonces una de las principales preguntas es, Hey, ¿qué tipo de tipografía consideramos? ¿ Qué es lo que deberíamos estar buscando? Cómo encontrar la tipografía es cómo seleccionar los teléfonos. Entonces todo el mundo tiene su propio método. Yo quisiera mostrarles mi método. Siempre voy al sitio fuentes de Google para elegir las tipografías. Vamos a configurar los formularios de Google. Entonces ahora mismo frente a mí, sí
tengo fuentes dot google.com, que es la página web del Google Fund. Y en este sitio puedes previsualizar muchas fuentes. Algo curioso de las fuentes es que si vas a las categorías, entonces el serif y sans-serif, que significa sin serif, son los dos tipos básicos de fuentes que tenemos que elegir. Entendamos rápidamente qué es un serif y qué es, ¿qué es un sans-serif? Entonces si acabo de anular la selección de todo esto, entonces déjame simplemente acercar esta pierna realmente en BC, esta base en, bajo esta letra a o esta l ¿Ves esta base? Por lo que a esta base se le llama serif. Entonces en todas las tipografías, familia
Serif, eso bases siempre ahí. Además, si observas cuidadosamente el grosor del trazo, el trazo del pincel del trazo de la pluma, varía, ¿verdad? C. Entonces esta línea es. Un poco más delgada que esta línea, y así sucesivamente, así sucesivamente. Básicamente, como regla general, utilizamos fuentes serif cuando imprimimos algo en papel, especialmente a un tamaño de fuente muy legible. Serifs, legibilidad mejorada cuando está en papel. Pero si estamos hablando de algo para mostrar en pantalla, siempre
debemos ir por sans-serif. Nuevamente, como uno puede usar definitivamente fuentes
sans-serif en papel y fuentes Serif en la pantalla también. No hay regla dura y rápida, sino algo así como rubato, que es bastante moderno, fuente o tipo de letra
sans-serif. Realmente se ve bien en pantalla. Entonces básicamente, definitivamente puedes pasar por todas estas fuentes para hacer elección para el, para la forma que deseas incluir en tu diseño. Voy a seleccionar Poppins para mis encabezados. O personalmente me gusta esta fuente y tal vez esa sea la razón con la que voy a elegir que puedas elegir cualquier otra fuente, estilo
tipográfica que te guste. Y por el cuerpo, por la tipografía, que voy a hacer por el cuerpo. Voy a elegir la canción abierta. Entonces volvamos a por fase sigma y pi desde los rubros. Voy a usar Poppins. Entonces déjame escribir Poppins Para los encabezados. Eso es acerca de lo correcto. Y déjame seleccionar la fuente. Déjame seleccionar una tipografía, Poppins. De acuerdo, ha cambiado, y entonces sólo lo mantendré 55 para que sea del tamaño de partida correcto. Ahora, China es una actividad muy visual. Por lo que me gustaría imaginar primero ver los diferentes estilos de tipografías. ¿ Cómo se ven para tener una idea de qué y cuándo y cómo voy a usar esta tipografía en particular en mi diseño? Entonces para eso, solo voy a duplicar esto posiblemente tres veces. Voy a hacer eso presionando Comando Z o Control G,
perdón, Comando D y Control D. Vale, así que ahora mismo, este estilo es medio por aquí. Yo me he convertido en regular, y esto va a ser semi audaz. Entonces ahora, si puedes ver hay tres jerarquías en los pesos de la tipografía. Y creo que me encantaría que esto siguiera como mi rumbo principal hacia lo antiguo. Ok, ahora hagamos el mismo proceso para el texto del cuerpo. Para el texto corporal, he decidido ir por MS de código abierto Así que sólo voy a escribir aquí eso. Y seleccionaré la tipografía a OK. Genial. Algo que hay que recordar aquí son estos dos, ambos tipos de letra son bastante comunes y estaban precargados. Y vienen con sigma. Si optas por obtener cualquier otra fase de TI acostumbrada, entonces necesitarías instalar esa fuente en tu sistema primero. De acuerdo, entonces para legibilidad y mujeres, vaqueros
azules son 255. Y me interesaré, de nuevo, combatir
visualmente los debates unos contra otros sólo para ver cómo se ve. Entonces voy a duplicar esto POR comúnmente. Y déjame simplemente seguir cambiando desde tarde. Dos, regular semi negrita, negrita, extra negrita, metálica tal vez. Ok, pero sí tengo una idea. Por lo que la mayoría de las veces me voy a quedar con ya sea este peso, el ligero. De acuerdo, entonces eso es por los encabezamientos y el texto corporal que me enfrento al que hemos elegido. Esto de aquí es Poppins. Esto se va a utilizar para los encabezamientos. Y es aquí cuando se trata de canción abierta, que se va a utilizar para el cuerpo. Está bien, moviéndonos. Entonces ahora hablemos de algo llamado como piel tipo es tipo escala. Averiguémoslo. Déjame llevarte a este recurso web realmente bueno llamado como tipo scale.com. Es una calculadora visual. Como puedes ver, todas estas fuentes están dispuestas de una manera particular. Ahora solo exploremos qué es eso. Hagamos eso para Poppins, que es nuestra tipografía de encabezado. Y tomemos la base como 1818 puntos. Y la escala va a ser mayor. Tercero, es decir 1.25. Entonces si observas cada una de las progresiones son 1.25 veces la anterior. Por lo que esto crea esta hermosa armonía de las escalas de tiempo. Y entonces es muy agradable a la vista. Todo no es proporción. No tienes que preocuparte es mi rumbo en proporción al cuerpo, que es proporcional al subtexto. Entonces todo está cubierto aquí. Entonces esto exactamente es lo que se llama como escala temporal. Y entonces vamos a usar esto con el fin de establecer la jerarquía del fuerte para nuestro propio diseño. Voy a hacer eso copiando esto en mi cuaderno de trabajo sigma. Y sólo lo pegaré al azar aquí. Y como puedes ver, estos son los tamaños de fuente que realmente estamos buscando. Permítanme acercar a esto. Por lo que el 54, que va a ser cincuenta y cinco cuarenta y cuatro treinta y cinco, veintiocho, veintidós punto cinco y dieciocho. A mí me gusta el evento 24 en esto. Entonces permítanme mostrarles cómo podemos hacer estos cambios. Entonces en el tablero de arte de la escala temporal, lo que voy a hacer es que sólo voy a escribir cualquier texto aleatorio. Escribamos excelente estudio en el extranjero. Y luego voy a convertir esto en nuestra,
nuestra fase de tipo principal, que es Poppins. Y luego voy a duplicar esto seis veces. Entonces voy a combinar las seis veces. Y luego voy a cambiar el aspecto de fuentes de esto. Entonces déjame hacer esto al 255. Esto sería 43. Y voy a alejarme un poco. Esto va a ser 35. Esto va a ser 28. Voy a revisar esto a 2422.5. Es una preferencia personal. Puedes optar por apegarte a esto estrictamente. Y esto va a ser 80, que es 80. Entonces esta es nuestra escala de tiempo. Ahora esta es la muy bonita progresión armónica que
tenemos yendo con nuestras caras de ojos y los tamaños de fuente. Y esto definitivamente se va a traducir en un mejor diseño. Entonces permítanme simplemente borrar esto y en la siguiente lección, vamos a usar estas mismas tres cosas. Nuestra selección extranjera o selección de Taipei para encabezamientos, texto
corporal, así como la escala temporal. Y vamos a usar eso para crear los estilos de encabezamiento y párrafo, texto de párrafo. Nos vemos en la siguiente clase.
10. Estilos de encabezado: Bienvenido de nuevo. En la última lección, sí meta si la tipografía forma los encabezados, texto
corporal, así como el esquema de tipo. Ahora hemos visto que la escala de tipo es la progresión armoniosa de los tamaños extraños, lo que da una muy buena API visual. Ahora, lo que vamos a hacer es que vamos a convertir estas tuberías, mata encabezamientos son los encabezamientos aviones. Veamos cómo hacer eso. Entonces voy a seleccionar estos. Entonces en un par de formas de seleccionar, o bien
puedo ir manteniendo pulsado Shift y luego yendo, seguir dando click. Pero solo puedo hacer controlar AR comúnmente así. Y ahora lo que tengo que hacer es que tengo que empezar
bayes de nuevo a los estilos de encabezamiento por aquí porque esa es su área designada para los estados de cabecera. Entonces veamos cómo se podría hacer eso. Entonces voy a mantener presionada la tecla Alt o la tecla Opción. Entonces verás a ese Nobel Carson. Y entonces podrás sacar esto. Pero con el fin de insertar eso en este encabezado estilos, con el fin de insertar usando el auto-layout. He grabado abajo mando Jasmine, y luego los sostengo, vamos. puede ver que se ha hecho azul de repente. Me está preguntando si estalló por debajo o por encima de la postura de adición. Voy a caer de azul y voy a dejarlo. Ya verás que ata la barba y hace los estados de cabecera. Entonces seguiré adelante y eliminaré esto para que ahora lo que he hecho es que esencialmente he duplicado esto. Pero ahora estos están dispuestos a ser nuestros estilos de encabezamiento. Por ejemplo, este podría ser el encabezamiento uno. Encabezamiento uno. A mí me gustaría ser una junta de líderes. Se trata de un Poppins 55. Pero yo vagaría, será como Boulez esto. Entonces solo voy a copiar las propiedades y lo voy a pegar aquí. Entonces ese va a ser mi rumbo, HOMBRE. Vuelvo a hacer este rubro dos. Creo que el epígrafe dos también debería ser audaz. Por lo que voy a volver a copiar sus propiedades. Voy a basar tu TA. Esto es rumbo h3. El rumbo tres puede ser normal. Esto se dirige por ahora. Podemos ir tanto en profundidad a los encabezamientos que no éramos. Pero básicamente lo que estamos tratando de hacer es que estamos tratando de conseguir una progresión armoniosa de los tamaños extraños. Y esto podría ser finalmente los rubros seis. Entonces, entonces sí, así que estos son los estilos de encabezamiento que tengo creador. Tienes libertad absoluta para crear tus propios estilos de encabezamiento. Tan solo asegúrate de que estos estén absolutamente dentro. ¿ Cómo nombramos a ese maestro que oh, espera, creo que me he perdido este dial. Entonces sí, esto no debe ser 55, esto debe ser 43 de acuerdo a esta escala temporal. Entonces voy a solo, yo, justo aunque, me formé antes de D3. Genial. Para que puedas jugar con él, cualquier progresión que te guste. Se puede ir a la página web de la escala temporal y luego se puede jugar con las diferentes opciones que tengo un poco. Pero con fines de diseño, voy a usar estos. En su lugar. Ahora se acerca a la última parte de la tipografía que tenemos que afirmar que lo que estamos haciendo para hacer más encabezamientos de párrafos. Batygin tienen encabezados o no son los encabezamientos reales buscados de ese punto en la perra atendida, luego BBN en su diseño. Entonces voy a elegir el encabezamiento tres, el estilo encabezamiento tres encabezamientos de párrafo maya foto. Voy a copiar las propiedades y las propiedades aquí. Grit. Y luego de ese texto de párrafo, voy a elegir la fuente 24. Voy a copiar las propiedades y pegarlas aquí. Pero si puedes ver que acabo de hacer los estilos de encabezamiento para los Poppins, pero me gustaría canción abierta en mi bolsa suficiente texto. Entonces solo voy a cambiar la cara del tipo de fuente a canción abierta. Y luego te vas. Entonces todo esto se trata de la topografía que
vamos a preocuparnos por la forma en que estamos diseñando peleada por proyecto. Nos vemos en la siguiente clase.
11. Configuración de una cuadrícula y cuadrícula: Ahora que hemos ordenado, la topografía se dirigirá al diseño. Tenga en cuenta que en la página de imágenes, he guardado todas las imágenes que vamos a utilizar en nuestro diseño. Posteriormente en el curso, estaré fuera de curso cubriendo también
cómo agregar imágenes de fuentes externas. Y ya hemos visto qué podemos hacer con los plugins, y también estaremos usando bit de plug-ins. Entonces sin más preámbulos, vayamos a la página de diseño y empecemos nuestro diseño. En primer lugar, nos gustaría hacer un tablero de arte o un marco para ese asunto. Para eso, puedes ir a esta región para seleccionar fotograma, o puedes presionar F en el teclado. Y luego obtendrás este cursor con el que podrás arrastrar un marco. Antes de hacer eso, podemos ver que hay muchas opciones dadas aquí más
tamaños de marco a través de teléfono y tableta y escritorio y lo que sea. Para ello, voy a elegir un encuadre aleatorio. Entonces voy a dibujar un rectángulo aleatorio. Y voy a ir a esta región donde voy a ajustar el ancho a 1600 píxeles. Estoy tomando 1600 pixeles. Antes de este proyecto, puedes elegir elegir directamente algunos, algunos preestablecidos reales como un escritorio o una tableta o un móvil en base a tus requerimientos para este proyecto, tomaremos 1600. Ahora, estableceré la longitud de este tablero de arte en 5 mil porque este va a ser un sitio web desplazable largo, página de la página web. Y así pensé que sólo para empezar, empecemos con la abundancia. ¿ De acuerdo? Entonces ahora que lo ha hecho el tablero de arte, lo que vamos a hacer es que vamos a colocar una cuadrícula en este tablero de arte. De nuevo, estoy usando Zed y arrastrando, usando mi ratón para acercar. El propósito de la cuadrícula es realmente alinear los elementos dentro de una manera mucho agradable de mirar. Iré a la, seleccionaré este R. Y luego iré a la sección de cuadrícula de diseño por aquí. Y sólo voy a dar click en él. Como se puede ver. Ahora mismo, la cuadrícula de diseño es visible por aquí. Simplemente acercaré y alejaré. Se puede ver la cuadrícula. Para los fines de este proyecto. Voy a ir por la rejilla vertical. Por lo que voy a dar click aquí. Y voy a conseguir una cuadrícula de columnas. Entonces como se puede ver que estas son las columnas. Voy a reducir aún más la opacidad al 5% para que esto no se vuelva intrusivo. Y voy a centrar estas columnas. Escojamos 12 columnas para empezar, porque realmente se vuelve fácil alinear elementos. El ancho de cada columna podría ser de 72 píxeles. Eso está en sincronía con lo que estamos tratando de hacer. Y la canaleta, que es la distancia entre dos columnas. Por lo que este podría ser 32. De acuerdo, entonces estamos todos preparados con la grilla. El motivo detrás de que he elegido 12 columnas es que puedo, cuando estoy usando 12 columnas, puedo organizar quizás dos objetos, tres objetos para objetos, y seis objetos en una línea. Entonces esa es la principal ventaja de elegir 12 como número de conteo para el número de columnas. Obviamente puedes encender y apagar la cuadrícula
haciendo clic en este icono para apagarla y volver a iniciarla. O puedes usar el atajo de teclado Control G. Tiene el mismo efecto. Ok, entonces ahora terminamos con nuestro Ad Board y la grilla. Entonces, en primer lugar, lo que nos gustaría hacer es colocar el logotipo. Por lo que si vas a la página de imágenes, verás este logotipo tipográfico. Voy a copiar ese comando C, y lo voy a pegar aquí usando Comando V. Y me gustaría mantener el logo en la parte superior, en la parte superior a la izquierda. Pero me gustaría alinearlo como de manera adecuada a los bordes, así que voy a elegir 64 píxeles. El motivo detrás de usar 64 es el getter es 32. Por lo que el doble de mejor sería 64. Entonces solo voy a modificar las x e y's de esto. Esto significa que este valor X significa la distancia desde este borde hasta este logotipo. Si haces click en Alta, entonces podrás ver si solo lo pones en
papel y luego simplemente pasas el mouse alrededor, verás eso diferente. Entonces mira si puedes ver aún es 90 y los ejes 90. Entonces mi d es esta distancia. Entonces lo haré 6464 días de m. Entonces con esto, hemos colocado nuestro logo en su lugar. Nos vemos en la siguiente clase.
12. Hacer la barra de navegación: En la última lección, aprendimos sobre la configuración del fueraborda, la
configuración de las rejillas, y luego colocamos este logotipo, 6464 píxeles equidistantes de la x y la y. así que ahora solo iremos a la alambrada y entenderemos qué, lo que necesitamos para sumar más. Entonces hablemos de esta barra de navegación. Por lo que esta barra de navegación aparecerá en la parte superior de su página de diseño. Entonces lo que hago es simplemente copiar este comando C y lo pegaré en mi diseño. Y entonces sólo puedo alinearlo con respecto al logo que acabas de colocar. Esa es una forma de hacerlo. Pero les mostraré una ola que es más reutilizable y quizá una mejor manera para la estética general que vamos por. Entonces voy a elegir la herramienta de texto a partir de aquí. También puedo hacer clic en P en mi teclado y aparece la herramienta. Y luego sólo voy a escribir,
escribir los nombres de los elementos en la barra de navegación. Entonces eso se trata de nosotros. Tenemos un elemento. Ahora voy a duplicar eso. Podría hacer eso con el comando li y luego simplemente arrastrarlo hacia abajo. O podría simplemente, quería duplicarlo tres veces más. Podría simplemente presionar la tecla Opción o la tecla. Y luego cuando veo el cursor Nobel,
cito, de nuevo, lo arrastra hacia abajo. Y entonces podría simplemente copiar y pegar con el Comando C, Comando D. Y así aquí están los cuatro elementos, esencialmente estos elementos de los que estás hablando. Entonces voy a escribirlas. Estos son los servicios. Estos son los testimonios y este botón es para la aplicación. Genial. Entonces ahora cuando estamos, por lo que estos son actualmente elementos individuales como se puede ver, pero los queremos juntos como grupo. Entonces la forma de hacerlo es que solo puedo seleccionarlos todos. Podría hacerlo de manera individual. Y después de haber hecho eso, uso o
voy a hacer clic con el botón derecho y voy a dar click en agregar auto-layout. O puedo usar Shift y aid para agregar capa de orden. Entonces una vez que hago eso, se
puede ver que todos estos elementos están en un solo diseño. Ahora, el auto-layout es la característica más cool de sigma que
puedes usar como casi para cada elemento y ahorra una tonelada de tiempo. Ahora, como, como se puede ver que estos están apilados uno encima del otro. Estos son verticales, pero queremos que sean horizontales para nuestro caso. Entonces si voy a la sección de auto-layout por aquí y puedo dar click en este botón. Esto dice dirección horizontal. Y voila, los tenemos en nuestra dirección horizontal. Se trata de espaciar entre artículos. En este momento son 46, es un poco arbitrario, pero puedo elegirlo para ser 64 y ver lo igualmente espaciado que parece eso. También puedo experimentar usando may quizás 32 porque ese es el ancho de canaleta. Pero creo que 32 está un poco abarrotado, así que me voy a quedar con 64. Yo sólo hago Comando Z para deshacer. Y ahora si observas, si observas estos elementos, entonces estos están usando la tipografía rubato, pero esta no es la tipografía que hemos seleccionado. Entonces lo que podemos hacer es ir a esa topografía. Y quizá quisiera usar el encabezamiento para, que es medio y 28 para mi barra de navegación. Por lo que voy a copiar estas propiedades. Y yo iré al diseño. Seleccionaré todos los elementos. Entonces la parte genial de esto es ahora que es un auto-layout. Es, intentas seleccionar todo lo que hay dentro de él. Pero si presionas el comando y solo mantienes el ratón a algo en algún elemento, entonces tienes la capacidad de elegirlo individualmente. Entonces, entonces voy a seleccionar todas las entrañas del elemento usando el comando a. Bueno eso seleccionará todo y luego voy a pegar las propiedades. Entonces vamos antes de que realmente lo coloquemos, me gustaría revisar el color. Es negro puro ahora mismo si puedes ver aquí. Pero como hemos decidido en nuestra topografía que vamos a utilizar un único, o mejor dicho lo hemos decidido en nuestra paleta de colores, vamos a utilizar un compartido muy único de Negro. Entonces básicamente esto es ese tono. Entonces, y así este tono de color está por aquí. Y entonces está pasando a través al 90%. Entonces voy a copiar esto y voy a ir al diseño. Y sólo lo pegaré aquí. Leerlo sólo cambiará el color por sólo literalmente sólo un poco mucho. Pero esto será más congruente con nuestro esquema de colores original. También voy a hacer esto al 90%, por lo que da un efecto realmente bueno. Y ahora con esto, puedo colocar esta barra de navegación y la
alinearé de acuerdo a las líneas de cuadrículas que ya nos proporciona sigma. Entonces sí, así que todo se trata de configurar la barra de navegación. Voy a borrar esto. Ok entonces nos vemos en la siguiente clase donde estaremos empezando a llenar el texto.
13. Dirigidos y estilos de texto: Bienvenido de nuevo. En la última lección, sí
aplicamos esta navegación, pero una cosa que me perdí es que necesitamos alinear esta barra de navegación de tal manera que este extremo sea de 64 píxeles de este extremo. Entonces la forma de hacerlo actualmente es si presiono la tecla Alt o la tecla Opción C, puedo ver que está a 184 píxeles de eso. Permítanme acercar presionando zag y esto. Ok. Entonces si presiono la tecla Opción en la tecla Alt, puedo ver que está a 184 píxeles de eso. Y ahora si presiono la tecla de dirección en mi teclado, si presiono a la derecha, entonces se puede ver que tiene cuando hizo tres. Ahora, cada vez que haces 101, de igual manera, si sigo presionando a la izquierda, se va a cambiar sólo en impedimentos de un píxel. No obstante, si presiona shift al hacerlo, y luego presiona la dirección q0, entonces va a cambiar en los incrementos de diez píxeles. Entonces como queremos que esto sea 64, estoy dispuesto a solo hacer uno hecho el volumen 64. Entonces solo haré control G, quité la rejilla y solo echaré un vistazo. Y esto definitivamente se ve aseado. De acuerdo, así que el mejor de nuevo. Y ahora vayamos a la alambrada para empezar realmente a poner los elementos de texto, los encabezados en este diseño final. Y para eso tenemos que ir a la alambrada. Esto es, este va a ser el tema de esta lección. Por lo que se nos da esta copia. Te ayudamos a construir tu sueño. Y entonces esto, estamos en libertad de consultar etcétera. Entonces lo que voy a hacer es que voy a copiar las cosas y lo pegaré al azar. Por aquí. Este es un elemento diferente. Este es un elemento diferente. Entonces solo copiaré esto y solo pegaré el texto también. Ok. Entonces ahora lo que necesitamos hacer es alinear esto al inicio de la cuadrícula así. Y esta va a ser nuestra tarifa de primera partida. Entonces cuando estamos haciendo nuestro primer rubro, ya
hemos asignado el valor para eso en nuestra topografía. Entonces si vas a la tipografía y si, si selecciono este rubro uno, entonces voy a copiar estas propiedades. Y luego vendré al diseño y voy a pegar estas propiedades en esto. Y entonces tenemos muy audaz 55 bind bache en semi frontera. Este va a ser nuestro principal el rubro principal, el texto principal. Es decir, y este va a ser el subtexto de eso. Entonces para esto, voy a elegir el árbol de cabecera, que es 35 calabazas medianas Barnes. Y yo copio. Voy a copiar las propiedades. Y luego iré al diseño y pegaré las propiedades aquí. Y como pueden ver que se ha movido a ella tiene humor así como tiene genes, el término extranjero, entonces voy a mantener esta sobrecarga. Hay otra forma de hacerlo en especie de simplemente copiar propiedades y pegar propiedades. Comprobemos rápidamente qué es eso. Entonces voy a deshacer todo esto. Yo estoy haciendo Comando Z. Así como pueden ver, así que aquí hay mucho deshacer. Está bien. Entonces sí, así que no lo he hecho todo. El otro camino que quería mostrarles es si voy a la tipografía y cuando sé que este va a ser mi rubro uno. Entonces lo que puedo hacer es crear un estilo de texto. Te mostraré lo que quiero decir con eso. Por lo que este rubro uno va a conseguir textil. Entonces para eso, lo que puedo hacer es hacer clic en este ícono de estilo y puedo dar click en este signo más que dice crear estilo. Y escribiré esto como Encabezado uno. Y si creo este azulejo, entonces eso se convierte en el estilo. Entonces básicamente hay una creación de componentes una especie de cosa sucediendo que en él guarda Encabezado uno como textil estadounidense para que pueda seleccionar cualquier texto y luego aplicarlo a eso. De igual manera lo haré por tasa de Rumbo tres. Entonces sólo iré por aquí. Por lo general vendré más un irate rumbo tres. Enfriar. Entonces la forma más fácil de hacer eso es entonces iré al diseño. Seleccionaré mi Texto, y luego sólo iré a este ícono de estilo. Y luego voy a dar click en esto y ver que tenemos 55 Poppins. Yo iré aquí, sólo daré click en el rumbo tres, y luego sí tenemos eso también. Y puedo quedármelo aquí y estamos bien para irnos. De acuerdo, entonces básicamente hablamos de estilos de encabezamiento en esta lección. En la siguiente lección estaremos agregando un diseño automático a esto y también agregando la imagen. Y bajo eso te veré en la siguiente clase.
14. Crear fondo y pegar la imagen: Atrás. Antes de seguir adelante, sólo
revisemos la estructura alámbrica en busca de unos. Entonces básicamente lo que hemos hecho es que hemos puesto el logo, la barra de navegación, y estas dos líneas de texto es lo que hemos puesto en nuestro diseño principal. Esta imagen de ranura de tiempo, tenemos que insertar una imagen por aquí, y luego hay un llamado a la acción Cortes postúlate ahora. Y tenemos que hacer eso también. Y entonces esta lección hará exactamente eso. Entonces vamos a la página de diseño ahora. De acuerdo, así que acabo de examinar la imagen que quería insertar. Entonces esta es la imagen que queremos copiar en la cosa del diseño. Antes de hacer eso, sólo
intentemos darle jazz a esta página incluyendo algunos elementos de color. Voy a hacer una vez que seas libre de elegir cualquier otro Sky lineal ese barco. Tú, verás, verás el patrón y luego podrás aplicar tu propia creatividad para crear tus propios fondos. Lo que voy a hacer actualmente es que voy a elegir la herramienta Ellipse. Podría incluso presionar en mi teclado. Y con esta herramienta puedo dibujar un círculo. El modo de hacerlo es hacer clic y arrastrar. Entonces mientras estoy dibujando, puede ver que está haciendo una elipse centrada esta tomando la nave de acuerdo a cómo estoy arrastrando. Pero si presiono shift en mi teclado, entonces crea un círculo perfecto. Por lo que no hay una medición de regla dura y rápida a esto. Voy a crear un círculo como este. Y luego para llenarlo, voy a crear un gradiente lineal, que va a coincidir con el logotipo, el sector de colores que tiene el logo, que son básicamente colores primarios, como lo hicimos crearlos en nuestra paleta de colores. Entonces volviendo a esto, voy a llenar esto, lo
haré, voy a hacer un gradiente lineal. Y cuando estoy haciendo el gradiente lineal, sólo
voy a ir a la paleta de colores, Seleccione el color primario. Ven aquí, pega aquí. De acuerdo, entonces tenemos uno de color y volveré a la paleta de colores. Escogeré el color secundario. Y tú vuelves aquí y yo voy a pegar el código de color todavía. Y tenemos nuestro gradiente. Pero gradientes, de dónde llegamos a este eje que tenemos nos da la opción de ordenar la forma en que ese gradiente, que interactuar con todo. Entonces este fin es aunque MyTime, como podemos ver, que este es el diez más ligero de este overhead de color. Para que puedas jugar con esto tanto como quieras y elegir un gradiente que crees que se vea más halagador. De acuerdo, entonces creo que esto lo va a hacer por mí. A mí me gusta así. De acuerdo, así que ese es mi gradiente. Entonces ahora lo que voy a hacer es que lo voy a hacer un poco más transparente. Entonces voy a hacerlo 60% opaco. Nosotros, voy a sumar esto a un pasaje o al 60%. ¿ De acuerdo? Entonces lo que hago es que sólo intentaré crear un elemento o de lo que
oyó que nos va a ayudar a poner acento. Hacer al revés es imagen monja. Simplemente duplicaré esto usando el pavo. Volveré a duplicar esto. Mantendré esta cosa en la parte superior absoluta. Lo llevaré al frente. Y para sólo añadir un acento, lo que voy a hacer es que voy a revertir
los gradientes no están dispuestos a hacer el azul como lo de la batalla de luz. Y entonces, vale, así que esto es solo una pieza de acento y definitivamente puedes hacerlo de la manera que quieras. Creo que esto me gusta y podemos jugar con esto ahora con esto solo como bolsa, lo que voy a hacer es que voy a pegar, voy a copiar esta imagen Comando C y pegarla. Y pegarlo por aquí. Y creo que esto proporciona un aspecto un poco equilibrado a esto. Entonces si solo vuelvo a la alambrada ahora, puedo ver que he puesto este logo, la barra de navegación, estas dos líneas de texto e imagen. Ahora sólo sumemos la convocatoria a la acción que se aplica ahora. Y lo haremos en la próxima clase. Nos vemos en la siguiente clase.
15. Botón de acción: Hasta el momento hemos diseñado tanto. Y una cosa que suelo seguir es hacer clic en este botón Play en la parte superior de aquí. Eso me da la vista real en vivo o el prototipo de lo que he diseñado. Y se ve así hasta ahora. Yo tiendo a hacer eso. Tiendo a mirar eso en la pantalla grande para que pueda existir como mi juicio visual. Si encuentro eso, si algo está apagado, si quería agregar solo cualquier cosa, si tengo alguna retroalimentación improvisada para mí, sólo
puedo incorporar eso. Entonces esto se trataba de mirar el adelanto. Ahora, volvamos a nuestro diseño principal. Y ahora lo que haremos es que vamos a sumar un llamado a la acción, como hemos visto en el marco del laboratorio. Hay un llamado a la acción limpio llamado como planeta. Y luego están estos iconos sociales. Entonces en esta lección vamos a boo, sumar estos dos elementos. Vamos a los diseñarlos con el fin de diseñar ese botón. Yo quiero elegir un proceso que sea muy popular. Podría simplemente copiar ese botón, pegarlo aquí y luego hacerle algunos ajustes superficiales. Pero quiero empezar de cero. Y para eso, creo que voy a ir a la herramienta Text takes tool también se puede activar escribiendo T en el teclado y voy a escribir aplicar ahora por aquí. Si ves el Postúlate Ahora actualmente está en el Roberto me enfrento. Iré a mi tipografía y creo que escogeré Poppins medium, este rubro para dos b Escogeré rumbo para que sea el estilo para mi llamado a la acción el cual se aplica ahora sólo voy a pegar eso. Por lo que ahora puedes ver esto aplicar ahora botón teniendo la propiedad de texto de Poppins y medio ahí. Para convertir eso en un botón, puedo usar un hack muy limpio del auto-layout, el cual puedo activar pulsando Shift minúsculo. O podría simplemente hacer clic derecho y hacer clic en Agregar diseño automático. Entonces cuando agrego un auto-layout, lo que sucede es esta pieza de texto, esta cadena de texto, se convierte en un componente, se convierte en un botón. Y estos son los ajustes de diseño automático. Lo que puedo hacer es agregar relleno de 32 pixeles. Entonces si puedes ver hay relleno ahora 32 píxeles de todos los lados a este botón. Pero los botones por lo general no son tan voluminosos. Entonces voy a ir a esta sección, alineación y relleno. Y luego voy a especie de hacer el relleno 16 en los bordes verticales y 30 a uno los bordes horizontales. Por lo que presiona Enter. Entonces eso se ve bien. Para darle a esto una frontera, porque ahora mismo es sólo una forma, pero no tiene frontera. Entonces iré a la sección de trazo, trazo. Voy a dar click en esto y luego tal vez borde de dos píxeles para tener. Entonces, está bien, entonces ahora tenemos un botón rudimentario con esto. Es bastante similar a la que se encuentra en el marco alambrico. Pero para que sea como un botón adecuado con un llamado a la acción, Lo que voy a hacer es que voy a dar la vuelta a las esquinas de AI alrededor de ellos a posiblemente un 100. Y este tipo de botón se llama como botón de píldora. Entonces ahora, como se puede ver, la carga está tomando forma. Este es un llamado a la acción. Un llamado a la acción. Básicamente tenemos que usar el color primario. Entonces voy a elegir el color del texto para que sea el color primario. Puedo seleccionar eso de la paleta de colores. Este es el cuarto cuarto color primario. Copiaré esto y vendré a su diseño. Y luego lo pegaré por aquí. Y ahí lo tenemos. Este es nuestro botón. Al mirar el botón en este momento, siento que un par de maneras de mejorar este material. Todo lo que quisiera desafiar la opacidad de este tifus. Lo bajaré a posiblemente 80%. De acuerdo, ahora eso tiene un padrón muy agradable y esto es similar a los antecedentes que están viendo. Entonces esto es más congruente ahora. Y entonces me gustaría simplemente dejar caer una flecha en eso, sólo un pequeño artículo. Entonces para eso, usaremos yo cuantifico. Tenemos, sí cubrimos eso en las lecciones anteriores. Por lo que iré al plug-in y luego voy a dar clic en icono. Escogeré una flecha para un ícono, quiero una flecha derecha. Por lo que esta es la flecha derecha y ninguna altura de 36 píxeles parece adecuada. Entonces solo voy a importar el artículo. De acuerdo, entonces ahora que el ícono es importante, lo que haré es cambiar el color a la llamada a la acción en sí. Ya copié eso y luego voy a convertir esto a un d. Vale, ahora, con
el fin de insertar esto en este botón, esto en realidad es un auto-layout. Lo que voy a hacer es que voy a arrastrar esto. Pero mientras arrastro eso, si presiono la tecla de comando, entonces me deja insertar directamente en esto. Entonces si solo lo dejo caer, ahí tienes. Entonces esto se ve bastante limpio. Hmm. Entonces así es como hemos creado nuestro botón y la llamada a la acción. Ahora lo que tenemos que hacer es añadir una capa a esto ahora mismo todos estos textos se colocan bastante arbitrariamente y no hay relación real entre el espaciado entre ellos. Por lo que eso se puede ordenar fácilmente. Lo que podríamos hacer es simplemente seleccionar los tres elementos. Y luego podemos agregar un, otro auto-layout por turno a. Y cuando hago eso, puede ver que esta cosa ya tiene, ahora
tiene un ancho de línea fijo. Y entonces puedo estar ajustando el espacio entre elementos a 6060 píxeles. Y tal vez 60 píxeles se ven un poco de cresta. Entonces si hago eso a 72 pixeles. Y ahora hay como una mirada armónica a nuestra página. Ahora, todo es una especie de juntarse en este punto. Entonces de eso se trata para esta lección. En la siguiente lección, estaremos agregando los iconos de las redes sociales y luego comenzaremos a diseñar para las siguientes secciones. Nos vemos en la siguiente clase.
16. Próxima sección y autolayout: Atrás. Antes de seguir adelante, vamos a aplicar alguna sombra de gota a este botón de llamada a la acción para que en realidad parezca un enlace en el que se puede hacer clic. Aquí te explicamos cómo hacerlo. Tienes que seleccionar el botón. Yo lo he hecho haciendo doble clic dentro de este auto-layout. Y luego iré a efectos. Y el efecto es la sombra de gota. Ahora mismo lo mantendremos en la configuración predeterminada, que es como 44 desenfoque. Y cuatro en el eje y de la sombra, que es como, que cae en dirección vertical pero hacia abajo. Entonces de eso se trata sólo lo mantendrá en el nivel predeterminado. Y si puedes ver ahora este botón en realidad parece un enlace clicable. Entonces voy a presionar turno uno, zoom para encajar. Y entonces otra vez voy a presionar y arrastrar y escuchar al respecto. Entonces ahora que hemos terminado con la construcción de esta sección, vayamos rápidamente a la alambrada y veamos que tenemos que sumar estos iconos sociales. Y después de que
hayamos hecho eso, iremos a la siguiente sección de la página del héroe, que son las universidades destacadas. Añadamos los iconos. Ahora. Lo que he hecho es que he guardado estos iconos en la página de imágenes. Por lo general lo que pasa es que tienes que descargar estos iconos de cualquiera que pueda ver y luego usarlos en la imagen. Para facilidad de uso, acabo de guardarlos en la página de imágenes. Voy a pegar los iconos así. Yo los derribaré. Y ahora, de nuevo, para alinear todos estos iconos horizontalmente, vamos a utilizar la herramienta mágica del auto-layout. Yo los seleccionaré a todos. Perdo desplazado. Entonces se decidió un auto-layout, y sólo voy a ir a la configuración de auto-layout y voy a dar click en la dirección horizontal. Y tienes todos los iconos en dirección horizontal. Cambiaré el espaciado entre los dos eigen espaciado entre elementos a 32 píxeles. Y esto tiene un aspecto y tacto uniformes. Y voila, incluso puedo poner en la cuadrícula presionando el control g con el fin de ver que estoy alineando el consentimiento a la cuadrícula así. O tal vez esto esto en relación a la esta carga no se ve simétrica. Por lo que sólo me mudaré de nuevo y elegiré la simetría central a ambos elementos. Voy a cambiar de la cuadrícula y voy a dar click en el botón play solo para ver cómo es el prototipo, son los, cómo van dando forma a los diseñadores. Y creo que se está acercando de una manera realmente buena. De acuerdo, grado entonces iré al cuaderno de trabajo y ahora vamos a diseñar para el siguiente ítem, que es el destacado en la pestaña de universidades desde el wireframe. Entonces para eso voy a ir a la página de diseño. Lo que voy a hacer en este momento es que voy a crear secciones dentro de esta misma página. Para hacer eso. Primero trato de hacer algo en la pantalla y luego traté de explicarlo a medida que avanzamos. Voy a construir un rectángulo. Y rectángulo como éste. Entonces este rectángulo pero lo va a hacer, va a cubrir esta capa de la imagen. Porque nos gustaría porque esto,
este Crawford las imágenes bastante buenas y estándar en este momento. Por lo que voy a usar sólo esta capa extra, forma
extra de un rectángulo para romper la página en laminados legibles. Y luego voy a trabajar encima de esto. Entonces veamos qué se tiene que hacer ahora, si voy a la alambrada, veré que está escrito Universidad destacada, así que necesito escribir universidades destacadas por ahí. Pero antes de eso, lo que haré es cambiar el relleno de este de este rectángulo que es el color. Y lo cambiaré por algo más sabroso como esto. Esto en realidad es un documento y color. Este E phi, si incluso E5 es uno de los grises que ya hemos definido en nuestra paleta de colores. Entonces esto se ve un poco sombrío. Y ahora con el fin de escribir universidades destacadas por aquí, voy a ir a la herramienta Texto para hacer clic dentro este rectángulo para que se convierta en parte de todo este rectángulo. Y voy a escribir universidades de largometraje. Entonces mientras estoy escribiendo universidades de largometraje, Islands center lo alinean así. Esto es lo suficientemente bueno. Estilo de encabezado para nuestra característica Universidad. Esto se toma directamente del subtítulo de este elemento. Si bien lo que me gustaría retocar es que me gustaría hacerlo un poco menos opaco. Entonces voy a cambiar la opacidad al 80%. Veamos cómo se ve. Creo que esto se ve bien. Si podemos modificar la tipografía y un tamaño de fuente a medida que avanzamos cuando solo seguimos probando lo que estamos hechos. Entonces ahora además de esto, lo que tenemos que hacer es añadir
los cuatro logotipos de las universidades que son características. Por lo que sólo los seleccionaré así. Yo los copiaré. Llevaré a su página de diseño. Estoy copiando usando Comando C. Haré un comando v aquí, así que los he pegado. Entonces ahora estas cuatro imágenes, normalmente antes de FISMA, lo que necesitamos hacer era ordenar manualmente,
enviarlas, y luego preocuparnos por la distancia entre las imágenes y todo. Pero gracias al fig, el mío, gracias al auto-layout, es tan sencillo. Ahora déjame mostrarte. Voy a seleccionar a los cuatro. Y voy a hacer auto-layout ya sea haciendo clic derecho y haciendo clic aquí, o puedo usar lo del turno EIA también. Por lo que voy a dar click aquí. Y auto-layout creado. Iré a la configuración de diseño automático. Haré la reacción horizontal. Y ahí lo tenemos. Y Central y yo hacemos una alineación central. Ahora que lo pienso, me gustaría un poco de separación entre ambas imágenes. Entonces todo lo que necesito hacer es ir aquí, que es espaciar entre artículos. Yo linspace los 16 píxeles entre ítems. Se ve un poco menos. Entonces puedo chocar esto hasta 32. ¿ De acuerdo? Y creo que esto se ve bastante decente. Simplemente voy a añadir acabo de hacer ahora mismo. Lo que se puede hacer es que también puedo hacer un auto-layout de esta forma para que todos los demás espacios y se cuide, pero eso no es necesario en este momento. Posiblemente vamos a echar un vistazo a todo. Y agruparemos todos los componentes y estandarizaremos todos los espaciados al final de este proyecto una vez que lo hayamos diseñado por completo. Entonces, así que sí,
así, hasta el momento hemos diseñado dos artículos principales. Una es la página del héroe y la segunda es la sección para las universidades de largometraje. Echemos un vistazo rápido a esto haciendo clic en Play. Esta es una práctica realmente buena para hacerlo porque te da una idea justa de lo que estás tratando de construir. Y creo que esto está llegando a una muy buena forma ahora mismo. Entonces eso es todo para esta lección. Nos vemos en la siguiente clase.
17. Diseño de cartas de funciones con diseño automático: Espero que estén siguiendo hasta ahora. En esta lección, vamos a diseñar más. Vayamos rápidamente a la página de wireframe y veamos qué tenemos delante. Entonces básicamente tenemos esta sección por ahora y veamos qué hacemos con ella. Básicamente, mi idea es representar todas estas características que la excelencia tiene en las tarjetas. Y vamos a hacer las tarjetas usando auto layout, que es la mejor característica de FISMA. Empecemos. Empezaré seleccionando todo y solo copiaré eso a bordo de la página de diseño. Por lo que acabo de ser muy sucio trabajo de copiar y pegar. Por aquí, apago la grilla por ahora concluyendo G. ¿De acuerdo? Ahora este nuestros servicios va a ser nuestro rumbo para la sección. El rubro de sección, como ya lo hemos decidido, va a ser un rubro tres. Entonces cuando vamos a un rubro tres, Esto sirve como nuestro encabezamiento de sección. Este va a ser el subtexto de este rubro. Por lo que asignaremos esto como rumbo a. Es muy fácil una vez que eliges estos textiles. Y si solo hago rumbo y voila, tenemos esto agregando c completo por aquí. Se puede ver que esto es, esto encaja bastante bien. De acuerdo, entonces ahora la tarea a la mano es convertir estos en cartas. Y básicamente, voy a hacer el proceso para este consejero de carrera uno. Y luego también repetiré eso para las admisiones universitarias y luego se puede hacer por el resto. Y eso va a ser mucha libertad creativa en Mundo. Entonces sigamos adelante y básicamente empezaré por duplicar esto. Entonces presionaré altar en el teclado. Simplemente duplicaré esto y luego eliminaré todo este texto corporal de esto. Simplemente voy a quitar todo el espacio, todo el espacio en blanco de él. Y yo haré el ancho de auto por aquí. Ahora para esto, este va a ser el rubro del oso conmigo. Estoy seguro de que actualmente no se puede visualizar cómo se ve la curva, pero vamos a llegar. Entonces voy a asignar esto de la misma manera que este estilo. Y esto se dirige a, para nosotros. Entonces solo haré un rumbo para aquí. Voy a ir al texto y voy a seleccionar aquí. Haré Rumbo cuatro. Tan bien. Por lo que sí tenemos nuestra consejería de carrera rumbo por aquí. Y luego copiamos esto, ¿verdad? Por lo que ahora voy a quitar la parte de consejería de carrera de esto. Retira el espacio extra también. Y éste va a ser el texto del cuerpo o el texto del párrafo. Ahora si vas a nuestra topografía, veremos que el texto del párrafo es la canción abierta a las 24 horas de espera, 2446. Entonces sólo voy a copiar esto. Voy a copiar la propiedad y solo pegaré la propiedad para esto. Y ver tenemos el Open Sans y a las 24, voy a hacer un rápido ancho de auto para esto haciendo click aquí el 8 de octubre. Y luego voy a cortar el ancho y se puede ver el flujo de texto. Esta es una característica genial. Viene con diseño automático. Y voy a guardar tres filas de texto para que haya uniformidad. Entonces ahí está eso. Ahora queremos un llamado a la acción aquí. Falta en el marco alambrico, pero este guardia va a enlazar a alguna página de la página web. Por lo que va a haber una llamada a la acción aprender más. Entonces iré al diseño, iré al diseño, lo haré. Entonces, ¿verdad? Entonces tenemos que diseñar una llamada a la acción. Aprende Más. Y lo voy a hacer usando la herramienta de texto. Usaré T en el teclado, y solo escribiré Más información. Entonces como puedes ver, el Aprender Más no está en la ciencia abierta tenía 24. Esto va a ser un botones CPA, así que preferiría que fuera en Poppins, que es nuestra tipografía primaria la cual usted ha decidido. Entonces voy a sólo cuatro 1s tipo Poppins por aquí. Cuatro alfileres en medio ahí se ve bien. Simplemente reduzco el peso en, haré el tamaño de la fuente a 22. Creo que esto se ve un poco mejor. Entonces como se trata de un llamado a la acción, éste debe tener el color primario. Entonces voy a llenar, y luego voy a seleccionar este color, que por cierto es nuestro color primario, que usted ha seleccionado. El genial de sigma está en esta caja, grandes mis zapatos, la clase de documentos. Y en los colores del documento, mantiene todos los colores que están presentes en este documento. Entonces si observas, estos son los mismos colores que hemos creado en nuestra paleta de colores. Por lo que ahora que se selecciona el color primario, solo
voy a reducir la opacidad al 80% y luego solo le agregaré un poco de sombra de gota. Entonces voy a ir a efectos y voy a hacer el drop shadow 44. Por lo que esto de hecho parece un botón que se puede hacer clic. Ahora, lo que voy a hacer es también voy a añadir una flecha, justo el tipo de flecha que hemos guardado al CTA original aplicar ahora llamada a la acción. Entonces para hacer eso, lo que haré es dar clic en el icono del plugin. Si yo, voy a buscar una flecha, iré por un escritor otra vez esencialmente. Pero esta vez, como los tamaños de fuente son 22, voy a mantener la altura de la flecha 222 también. Y sólo voy a importar este ícono. Por lo que como se puede ver, el icono es importado y se importa. Entonces sí, así que una vez que el ícono sea importante, sólo
voy a traer que me meto en el marco uno. Esto es sólo una pequeña cosa que hacer para ver que no todo está en mal estado. Esto no es tan importante. De todos modos. Voy a volver a dar esta flecha, el color de la marca, el color del CTA, que es este de aquí. Entonces ahí vamos. Entonces tenemos nuestra flecha así como cuál está cotejando en color con disciplina, aprende más CDA, ¿verdad? Entonces para ahora convertir esto en una tarjeta, hablamos en un principio que estas van a ser cartas ahora. Entonces lo que voy a hacer es que voy a hacer este Aprendizaje más CPA un botón de estilo de diseño automático. Entonces solo voy a presionar turno a. Así que se agrega el auto-layout con, voy a presionar 16 aquí, 16 para el relleno en todos los lados. Ahora lo que voy a hacer es que voy a tomar esta flecha, esta pequeña flecha, voy a redimensionarla. Voy a hacer 22,
10-22 alturas para que se haga un poco más grande en tamaño. Y luego voy a arrastrarlo a este diseño presionando comando. Entonces cuando presiono comando, me permite poner elementos en los diseños de auto. Ahora que se puede ver que esto se convierte en un botón, un diseño. A pesar de que se puede ver que la flecha es ligeramente más alta que la Aprender más. Por lo que esto se puede resolver yendo a este menú por aquí y presionando esto. Entonces creo que esto Aprender Más CTA está listo. Entonces para ahora convertir esto en tarjeta, lo que vamos a hacer es hacer otro auto layout de todos estos elementos. Y luego lo vamos a llenar de blanco y luego poner algo de sombra de gota. Veamos cómo hacer eso. Entonces voy a empezar por seleccionar estos tres elementos. Estoy dispuesto a hacer Shift a, eso es para auto-layout. El auto-layout sí agregado. Ahora después de haber agregado el auto-layout, iré a la sección de relleno, y le voy a añadir un relleno de 16 píxeles para que
veas que hay espacios alrededor del texto. Y luego como siguiente paso, voy a introducir algo de filtrarlo. Entonces cuando hago clic en llenar, el predeterminado Phil es el del blanco. Entonces ahora todo este asunto tiene un relleno blanco, llene. Y luego voy a ir a efectos y voy a aplicar el efecto drop shadow. Ahora como puedes ver, incluso con un muy mínimo, un efecto predeterminado de sombra de gota, en realidad
puedes ver que está tomando forma de una carta. Tenemos que acentuar más eso. Entonces voy a ir al menú drop shadow y voy a cambiar lo borroso a 30. Y luego voy a cambiar el cable 215. Y ahí vamos. Por lo que tenemos nuestra primera tarjeta lista para consejería de carrera. Un par de puntos a mejorar para esta tarjeta, que me vienen a la mente es esto aprender más necesita estar alineado a la izquierda. Entonces sólo voy a seleccionar ese elemento. Y este es un tema del relleno en sí. Entonces me voy a ir aquí y voy a cambiar el relleno izquierdo a 0. Y mientras hago eso, se puede ver el Learn Moodle apenas se desplaza a la izquierda tampoco. Es mucho más de lo que soy. Una de las cosas que realmente podría agregar un
sabor realmente bueno a este diseño va a ser un icono. Entonces, y mareas e iconos, van realmente bien juntos. Para esta consejería de carrera, tenemos que encontrar un ícono contextual. La consejería de carrera es todo sobre la conversación. Se trata de un diálogo. Por lo que voy a ir a mi efecto de icono plug-in. Y voy a buscar algo así como un mensaje. Un mensaje. Yo puedo, creo que esto puedo, me gusta esto. Yo podría. Eres libre de elegir lo que yo quiera. Y luego voy a elegir el icono itis 64 pixels. Y cuando haga eso, sólo
voy a importar el ícono por aquí. Nosotros icono se importa, como se puede ver. Ya ves. Entonces el ícono está justo aquí en este elemento y este auto-layout, esto fue porque teníamos esta seleccionada, después importamos el ícono. Lci pudo haber aterrizado en cualquier parte de esta página. Tan cool. Ahora bien, si recuerdas, mientras estábamos diseñando la paleta de colores, habíamos decidido que todos sus colores terciarios es algo que vamos a usar para iconos. Los colores terciarios son colores llamaradas. Entonces volveré al diseño y
voy a elegir un color terciario para este pequeño ícono. Entonces déjame ir a la paleta de colores. Creo que iré con este color. Por lo que voy a seleccionar el ColorCode. Y voy a ir a Design. Y lo voy a pegar aquí. Y cambia el color. Y voy a hacerlo 80% opaco. Y todo lo que tengo que hacer esto es la caja de diseño automático, así que solo tengo que arrastrarla y hacerla simplemente sentarse ahí. Entonces así es como el archivo está listo para acentuar aún más el aspecto de la tarjeta. Lo que puedo hacer es sacar radio de coordenadas de 20 píxeles. Entonces esto sólo va a hacer estallar al guardia. Entonces aquí vamos. Esta es la tarjeta sobre la que hemos diseñado. Ahora tenemos que colocar la tarjeta en la pantalla. Entonces para eso voy a activar de nuevo la grilla por el control g. Y voy a tomar esta tarjeta y la voy a alinear a la cuadrícula. Entonces así es como hemos creado esta tarjeta. Lo que voy a hacer ahora es que voy a repetir todo el proceso para la guardia de admisiones universitarias también. Y luego voy a parar esta lección. Y luego puedes hacer el mismo proceso para el resto de las tarjetas. Entonces, empecemos. Voy a apagar el, mayor presionando
el control G. Y voy a duplicar esto, esta caja. Entonces voy a presionar alter y sólo voy a duplicar. Por cierto, si has conseguido el ahorcamiento del proceso, entonces puedes detener este video ahora mismo y ponerte a trabajar en tus tarjetas o puedes iniciar el siguiente video también. Por lo que ahora volviendo al proceso, voy a borrar estas líneas. Voy a simplemente quitar todo el espacio en blanco y darle algo de ancho automático. Y voy a dar el estilo de texto como rumbo. Con el encabezamiento para el estilo de texto. Yo me voy a llevar esto y voy a quitar el rumbo de esto. También voy a acabar con todo el espacio extra del que hay. Voy a darle un ancho de auto. Sí, esto va más allá de las líneas. Y luego le voy a dar el estilo de texto de párrafo que hemos tomado, que es la fuente Open Sans. Para que pueda, lo que puedo hacer es poder seleccionar estas propiedades y puedo copiar estas propiedades. Simplemente lo pegaré aquí y las propiedades están pegadas. Lo que también puedo hacer es sacar esto y los creadores se amontonan de esto. Puedo nombrarlo como mi estilo de párrafo. Y se crea el estilo de párrafo. Vamos a hacer esto en tres líneas. Entonces básicamente lo que voy a hacer es simplemente redimensionar esto y convertirlo en tres carriles. Voy a alejarme presionando control y mi rueda de desplazamiento. Y cuando hagan eso, entonces simplemente copiaré este elemento. Acabo de duplicar este otro. Presionaré y luego lo sacaré. Lo guardaré aquí y el fin de semana. Simplemente agrega un diseño automático a esto. Haré turno a para agregar el auto-layout. Esto es mucho elaine. Voy a recoger 16 pixeles de relleno. Esto está saliendo muy bien. Voy a darle llenar el defecto. Phil va a ser blanco. Y luego voy a ir a los efectos y voy a reventar el efecto drop shadow con el desenfoque como 30 y y valor para ser 15. Entonces también voy a llevar el radio del jardinero a 20 pixel y el guardia está listo. Pero espera un minuto, no hemos agregado el artículo. Entonces para agregar el ícono, lo que voy a hacer es ir a mi plug-in, icónico phi, y voy a buscar universidad. Entonces creo que se trata de un artículo decente para la universidad. Puedo conseguirlo por la altura 64. Y yo sólo voy a importar esto. Entonces cuando importe este ícono, lo que necesito hacer es que este ícono viene en su propio, su propia bota de arte. Entonces tengo que hacerlo, y esta es la tasa de iconos, así que tengo que añadir esto al marco 29. Y entonces puedo simplemente borrar esto hacia afuera desde aquí. Simplemente puedo cambiar el color a cualquiera de los colores terciarios que me gustan. Iré a la paleta de colores y tal vez elija una universidad descolorida. Y vamos a copiar esto. Y lo voy a pegar aquí. Haré la opacidad al 80%. Y luego sólo voy a mover este icono a la parte superior de la línea. Y así tenemos una segunda tarjetita. Listo. Voy a parar esta lección en Munich. Y te pediría que hagas todas estas tres cartas tú sola. Cuando una de las formas de hacer eso como posiblemente para simplemente duplicar esta capa así, y luego tratar de simplemente
escribirla para que no te metas con ninguno de los trabajos que hemos hecho. Lo que también se puede hacer es que se puedan referir a estas capas en el material de referencia que he proporcionado para que se pueda tomar, se
puede hacer referencia directamente a las tarjetas que ya se habían hecho y posiblemente las ingenierías inversas y aprender de ellos. Entonces creo que pararé esta lección por ahora.
18. Agregar fondo a las cartas: Bienvenido de nuevo. Supongo que estás en una página similar y en realidad has trabajado prohibir a Dios estos guardias por ti mismo. Está bien si hay una pequeña diferencia entre lo que estás viendo en la pantalla en este momento y la producción de orina. Definitivamente hay libertad creativa autonómica con nosotros con los colores terciarios especulares con respecto a los tamaños de fuente, etcétera. Entonces la parte importante es que tengas las cinco cartas ahora mismo delante de ti para que podamos proceder y podamos sumar nuestras piezas de acento. Hablemos un poco de fondo como pieza de acento. Entonces si, si no es por este fondo de los colores,
los tres círculos que ponemos con ese gradiente, esta imagen se vería realmente, realmente hecho. Entonces VOD, esos colores lo están haciendo actualmente, es que están proporcionando un fondo y están proporcionando un acento que es muy agradable a la vista. Entonces vamos a hacer algo del mismo tipo por aquí. Y solo para mantenerlo juguetón, la imagen estaba en el lado derecho del eje. Entonces pondremos nuestra pieza de acento en el lado izquierdo. Para poner esa pieza de acento, voy a seleccionar la herramienta de círculo,
la herramienta de elipse que es. Y voy a dar click y arrastrar. Como se puede ver, es como fluir libremente. Está formando una forma de elipse de flujo libre, pero en el momento en que presiono shift, simplemente
se bloquea en una forma y eso es un círculo. Entonces voy a tomar este círculo y lo colocaré justo aquí. Ahora, con el fin de ponerle un gradiente, última vez habíamos elegido todos los colores primarios. Esta vez vamos a usar una manera un poco más eficiente. Entonces está este plug-in llamado como gradientes web. Y voy a dar clic en gradientes web y sólo voy a revisar los gradientes que tienen en archivo. Creo que el Ashwin lluvioso es bastante congruencia con nuestro esquema de color primario. Por lo que sólo voy a dar clic en esto. Y voila, tenemos que cualquier Ash Villa aquí mismo. Añadiré justamente la transparencia en este. Voy a añadir justo la opacidad. Es decir, lo haré 50% opaco. Y entonces solo duplicaré esto para un efecto. Voy a presionar más viejo o control u opción. Y luego voy a duplicar esto. Y solo por diversión, voy a cambiar el gradiente en este también. Abriré ese mismo plug-in. Y ahora tengamos un poco de color de cortesía para el plugin. Creo que podemos conformarnos con esto. Tentador como tu, que es bastante similar a uno de los colores terciarios que has seleccionado. Entonces si hago eso, se trata de esto. Voy a volver a cambiar la opacidad al 50%. Quizás bajaré el relleno al 80% también. Y ahora lo que tengo que hacer es hacer click en ambas piezas y tengo que enviarlas a atrás. Y así,
acabamos de transformar
la forma en que acabamos de transformar se ve esta pantalla con sólo añadir esos dos actos y piezas. Nos vemos en la siguiente clase.
19. Crear tarjetas de otra manera de la siguiente sección: Antes de sumergirnos en el siguiente bit, vamos a previsualizar rápidamente lo que hemos hecho hasta ahora. Daremos click en este botón presente. Y entonces vamos a ver uno es a uno avance real de nuestro trabajo. Mirando hasta ahora, tan bien. Ha, está bien, así que esta es nuestra página de héroes que has diseñado. Todo se ve bastante aseado. El, esta es una segunda sección que hicimos, que fue más destacado universidades que algunos logotipos universitarios igualan espaciado entre cada una de ellas. Y esta es la tercera sección que diseñamos, que tiene sobre nuestros servicios. Y luego diseñamos estos guardias desde cero. Y luego también agregamos este elemento visual. Entonces con esto, empecemos ahora a trabajar en el siguiente apartado. Y para eso, vayamos rápidamente a la alambrada y entendamos lo que sigue. Por lo que hemos diseñado para esta sección principalmente, que son nuestros servicios. Por lo que la siguiente sección está próxima en eventos de USD. Entonces voy a usar el patrón bastante similar de operaciones que estaba usando antes. Voy a seleccionar todo. Y yo sólo voy a copiar esto. Iré a la fase de diseño y lo voy a pegar en algún lugar aquí. ¿ De acuerdo? De acuerdo, ahora, la tarea a la mano es convertir esto en sección
como realmente visualmente atractiva de este sitio web. Entonces para eso, en primer lugar, lo que voy a hacer es que voy a hacer un rectángulo y un rectángulo de este color. Entonces básicamente el escenario que vamos por nosotros. Ahí hay una sección blanca con alguna pieza de acento colorida, y luego hay una sección gris rectangular la cual no tiene acento alguno. Entonces otra vez, ahí, está esta pieza blanca. Y ahora entonces otra vez iremos por un Greenpeace por aquí. Entonces voy a dar click y sólo dibujar rectángulo aleatorio. No estoy dispuesto a prestar mucha atención a las dimensiones por ahora. Y puedo usar el recolector de colores. Y un recolector de color solo elige el color en el que haces clic. Por lo que voy a dar clic aquí. Y así tenemos grande ese color. Entonces con esto, lo que haré es copiar este elemento en este rectángulo. Simplemente arrastraré esto. Necesito mandar esto para atrás primero para que las capas no sean molestas. Pero ahora voy a copiar esto por aquí. Usaré la alineación central. Y entonces esto es básicamente el Rumbo tres, que hemos utilizado aquí para nuestros servicios. También podemos usar esto, que va a ser no exactamente el rumbo tres, esto es Poppins y 28. Entonces esto tiene que ser un rubro cuatro. Permítanme sólo revisar la topografía. Sí, sí lo hace. De hecho, rumbo cuatro, se
puede ver Poppins en 28. Entonces permítanme simplemente crear esta pila llamada como rumbo para que podamos usar esto sin problemas. De acuerdo, y entonces, así que voy a usar rumbo para, para esto. Genial. Y voy a estar usando este estilo, que de nuevo se dirige para ese texto debajo de él. Entonces me lo voy a llevar aquí. Y luego voy a dar un click en estilo. Y yo iré por rumbo. Si bien ahora el problema aquí es lo que está sucediendo es que tanto el encabezado como un subtexto tienen el mismo tamaño de fuente, mismo colorante, mismo bit. Entonces quizá lo que me gustaría hacer es que me gustaría aumentar este tamaño porque de todos modos, esto va a ser como un encabezado de sección. Entonces lo hago un rubro tres. Lo alinearé en el centro. Y lo bajaré un poco para que no esté abarrotado. Bien. Revisamos lo del auto-layout, tal vez al final para que podamos estandarizar el espacio. De acuerdo, así que ahora adelante, esta es la información que queremos representar por aquí. Y esto tiene que ser en un formato muy atractivo visualmente. Entonces para eso, lo que podemos hacer es diseñar una tarjeta, pero no vamos a seguir el mismo proceso que utilizamos para diseñar estas tarjetas. Veamos otra forma con la que podemos crear una tarjeta. Empezaré con la Herramienta Texto. Entonces solo voy a presionar T en mi computadora. Y luego voy a escribir el 24 de abril por aquí. ¿ De acuerdo? Entonces 24 de abril, entonces lo que podemos hacer es convertir eso en una especie de botón. Entonces voy a hacer es cambiar a, que hace el auto layout. Y una vez hecho el diseño automático, puedo elegir el relleno. Y esta vez voy a usar uno de los colores terciarios. Decidimos que estaremos usando colores terciarios para iconos así como para pequeños acentos. Vamos a tratar esto como un artículo. Entonces voy a ir a paleta de colores. Y quizá me gustaría usar este color. Este color suena bien. Entonces voy a usar este color en particular al 30% de opacidad. Voy a copiar esto. Voy a ir al diseño, y luego voy a hacer clic en esto en la película. Y voy a llenar este 230. Creo que podría usarlo un poco más ligero, así que quizá haga 20%. Está bien, eso se ve bien. Aunque ahora lo que siento es que esto necesita algo de espacio para respirar. Es como sentirse un poco atrapado. Entonces voy a aumentar el relleno a 16 píxeles y luego curvar el radio a tal vez diez píxeles. Grado. Esto se ve bien. Esto se ve absolutamente bien. ¿ De acuerdo? Entonces avanzando, lo que voy a hacer es que voy a tomar el texto de aquí y voy a pegar este texto junto a éste. No queremos esto 10:00 AM a 02:00 PM. Por ahora. Lo presentaremos de mejor manera. Y para esto, voy a simplemente hacer clic en el ancho automático para que especie de
que se vuelva a cambiar el tamaño de la caja y la caja se redimensione. Y ahora lo que voy a hacer es cambiar la rúbrica dos rumbo. Entonces iré aquí y daré click en el rumbo cuatro. De acuerdo, mi rumbo ha cambiado. Y luego sólo por simetría, intentaré traer esto así. Y a medida que estoy moviendo la caja, ese texto fluye por dentro. Y ahí vamos. Entonces tenemos este 24 de abril y la Universidad de Australia Occidental. Por lo que hemos escrito estos dos componentes de la tarjeta que estamos tratando de crear. Voy a seleccionarlos a ambos. Ve por un cambio de diseño automático. Ok, si puedes ver esta unidad de Australia Occidental está ligeramente por encima de la línea de simetría para esto. Entonces para abordar eso, voy a dar clic aquí, que es la opción de alineación y relleno. Y lo voy a traer en el medio. Entonces eso es todo. Entonces así es como hemos creado este componente en particular. Tenemos mucho texto bajo eso. Entonces lo que haremos es usar algún tipo de proceso similar. Voy a copiar este texto. Voy a pegar este texto por aquí y lo arrastraré de una manera que sean legibles. ¿ De acuerdo? Y luego voy a usar la opción de texto de párrafo. Ver hemos usado la opción Texto de párrafo por aquí también, que es la fuente Open Sans al 24 Legler. Entonces voy a usar el texto del párrafo en este. Entonces iré a los estilos de texto y voy a hacer estilo de párrafo. Y está bien, así que tienes esto dice, vale, así que básicamente cuando estoy visualizando este botón, son esta tarjeta, quiero que esta tarjeta esté vinculada a tal vez un calendario o tal vez lista de correo o algo así. Por lo que requerirás una llamada a la acción. Simplemente haré doble clic aquí y luego pincharé dentro. Y luego voy a duplicar esto. Voy a presionar la tecla Opción. Y luego lo voy a traer por aquí. Y sí tenemos nuestro pequeño llamado a la acción para sumar a esto. Y ahora lo último que queda es sumar la hora, que es de 10:00 AM a 02:00 PM. Entonces voy a copiar esto y pegarlo aquí. Es decir, voy a hacer el ancho automático en este para que se vuelva manejable. Voy a alinear esto por aquí. Y volveré a usar el estilo de párrafo para esto. A pesar de que ahora, aunque ahora piénsalo, quizá sólo podría añadir un poco de peso a esta tipografía. Pero si ven por aquí, la opción se ha ido porque hemos elegido un textil preseleccionado. Entonces para recuperar esa opción, lo que vamos a hacer es dar click aquí, lo que dice separar el estilo. Entonces como detestamos este estilo, de nuevo, sale todo lo de las opciones de texto. Y luego voy a simplemente Hacerlo semi audaz, ¿de acuerdo? Y creo que esto se ve un poco mejor que el peso de línea anterior. De acuerdo, entonces con el fin de simplemente agregar algo más de estilo a esto, lo que voy a hacer es que voy a conseguir un ícono de un reloj que significará el tiempo. Entonces para eso, voy a ir al icónico phi. Daré clic en un ícono. Si yo de la lista de plugins, voy a buscar relojes. Y tal vez me gustaría elegir esto, agregar 24 píxeles de altura. Y luego solo voy a importar el ícono y está aquí. Por último, lo que puedo hacer es seleccionar ese icono. Y luego lo voy a arrastrar y ponerlo junto a mi sección de tiempo. Y solo para que sea un poco más uniforme, voy a añadir un auto-layout desplazado. Si puedes observar el reloj se ha inclinado hacia arriba. Entonces lo que voy a hacer es ir a este apartado y tratar de bajarlo y todo centrado y alineado. Simplemente alinearé esto con, voy a alinear este elemento a nuestro llamado a la acción. Aquí vamos. Por lo que quedan un par de pasos ahora. Entonces para hacer una carta real, real fuera de ella, lo que vamos a hacer es que vamos a usar otro rectángulo. Por lo que elijo un rectángulo. ¿ Me dan siquiera prensa R? Y luego voy a dibujar un rectángulo como éste. Lo que voy a hacer es que voy a llenar esto de blanco porque eso es lo que quiero hacer. Y luego lo voy a mandar al revés. Entonces como lo estoy enviando hacia atrás capa por capa, se
puede ver todo ha comenzado A pop y venir al frente. Sigue haciendo esto hasta que todos los elementos aparezcan frente a mí. Y voila. Entonces aquí es donde pasa toda la navegación. Y en las, en las clases futuras les voy a enseñar cómo podemos organizar mejor esto, cómo podemos agrupar elementos juntos. Pero por ahora lo que voy a hacer sólo con este propósito. Entonces voy a seleccionar esto y voy a seleccionar todas las capas dentro. Y luego voy a hacer comando G para crear un grupo. Entonces ahora que he creado este grupo, todos estos elementos se moverán juntos. De acuerdo, así que como esto es una tarjeta, lo que vamos a hacer es que vamos a dar un radio de esquina de 20 píxeles para que aparezca alrededor de ella en la esquina. Y entonces también voy a dar el efecto de una sombra gota. Para drop shadow, voy a mantener 30 como el desenfoque y 15 como el y. exactamente como hemos hecho por estas cartas. Entonces así es como un guardia que hemos creado. Para poder colocar esta tarjeta en este diseño, lo que puedo hacer es reactivar esa cuadrícula haciendo el control G. Y luego otra vez, quizás alinearla al inicio de la cuadrícula. Voy a desactivar la rejilla usando el control G otra vez. Entonces ahora que estamos aquí voy a parar esta lección en un minuto, y les voy a solicitar que hagan un auto similar para este evento desde la Universidad Monash y nos vemos en la próxima conferencia.
20. Construir la siguiente sección con imágenes y cartas: Supongo que usted ha creado una, tal tarjeta de la que hablamos en la última conferencia. Entonces, ahora sigamos adelante. Pero antes de seguir adelante, quiero señalar a su atención que no hemos implementado el scroller, que está presente en el wireframe en nuestro diseño. Este scroller en realidad le da al usuario la idea que hay más por venir y de ahí que el usuario pueda desplazarse. Podría simplemente copiar este pergamino por aquí y llamarlo un día. Pero me gustaría diseñar esto desde cero para que
podamos ver otro método de usar elementos, usar formas, así como usar auto-layout. Entonces para crear esto desde cero, voy a elegir la herramienta Elipse. Pude haber hecho clic en mi teclado también. Y voy a dibujar una elipse, más bien, voy a dibujar círculo. Entonces para dibujar un círculo, voy a seguir presionando Shift. Y entonces tal vez me detendría en cualquier lugar. Ahora, esto parece que dice humungoso, voy a hacer de estos 16 pixeles. Entonces una vez que hago estos 16 pixeles, esto se ve un poco pequeñito y posiblemente del tamaño que estamos buscando actualmente. Entonces lo que voy a hacer en este momento es que voy a duplicar esto usando mi tecla Opción. Y sólo haré cuatro círculos tan pequeños, que son bastante análogos a lo que estamos tratando de diseñar. Ahora, quiero oscurecer este círculo y voy a usar quizás un color primario para eso. Entonces iré por aquí y ahora voy a seleccionar este color primario de mi color de documento. Y como último paso, voy a seleccionar a todos. Y sólo voy a añadir auto-layout. Presionaré turno a y se agrega un Auto Layout. Escogeré el espaciado entre elementos a 16 píxeles. Y me centraré en alinear esto solo seleccionando. Y así es como conseguimos un pergamino. Genial. Entonces sigamos ahora y vayamos a la alambrada para ver qué nos tiene la siguiente sección para nosotros. Por lo que con mucho lo que hemos hecho es que hemos cubierto los próximos eventos universitarios. También hemos agregado el desplazador, y ahora tenemos una pestaña Países para ser diseñados frente a nosotros. Esto va a ser, habrá tres imágenes. Ahora, estas tres imágenes serían sobre los países que el cliente quiere que mantengamos en la página. Y luego va a haber otro pergamino. Entonces, solo saltemos a esto. Como de costumbre, sólo voy a copiar esto. Y yo voy, y voy a pegar esto en mi diseño. Yo me llevaré esto aquí. Voy a borrar esto porque lo hemos diseñado. Ahora, los países parecen un encabezado de sección. Entonces creo que lo colocaré aquí y voy a usar ese estilo de texto de la rúbrica tres. Para que así, realmente sale como realmente sale como un encabezado de sección. Ahora después de eso, quiero que se concentren aquí. Por lo que estos tres elementos tienen que estar en tándem. Tiene que haber una tarjeta para esto. Y esto va a ser un elemento cuando va a haber cuando la imagen por aquí. Entonces, solo diseñemos esto desde cero. Para eso voy a activar la rejilla por control g, esencialmente. Por lo que quiero alinear esto a la izquierda. Entonces lo que voy a hacer es que ahora voy a hacer dibujar un rectángulo. Y a partir de aquí voy a dibujar un rectángulo. Aquí voy a dibujar un rectángulo que abarca cuatro líneas de cuadrícula. Yo estoy haciendo cuatro porque tenemos Dwell Gridlines. Y entonces de esa manera podremos diseñar para tres rectángulos. Entonces ahora este rectángulo va a ser donde se va a albergar nuestra imagen. Entonces hay múltiples formas de poner imágenes en un rectángulo, pero por ahora, voy a usar el plugin llamado como splash. Y voy a seleccionar y chapotear. En un plug-in sin empalmar. Simplemente acelera el flujo de trabajo cuando se intenta importar imágenes. Entonces sólo voy a buscar a Canadá. Ni siquiera puedo buscar un satélite, Toronto o Vancouver, o algo así. Pero esta imagen se ve un poco más fría. Entonces lo que voy a hacer es que sólo voy a dar click en esta imagen. Y luego verás venir la imagen por aquí. Simplemente cerraré esto y salpicaré plug-in. Ahora, tengo que construir el resto de los elementos que está estudiando Canadá. Y sólo voy a arrastrarlo por aquí y el subtexto detrás de estudiar Canadá. Para hacer mi vida más fácil, lo que voy a hacer es que voy a hacer directamente tomar estos estilos. Voy a copiar estas fichas del encabezamiento así como para el subtexto. Y lo voy a pegar por aquí. Entonces hagámoslo. Voy a copiar las propiedades. Voy a pegar las propiedades aquí. ¿ De acuerdo? Y yo también voy a copiar las propiedades de ese subtexto. Y yo lo voy a pegar aquí. ¿ De acuerdo? Por lo que ahora con el fin de convertir estos tres elementos en una tarjeta a, estaremos utilizando el mismo procedimiento que utilizamos para nuestras tarjetas de servicios, que es que vamos a combinar todos estos tres en un auto-layout. Voy a usar Shift a para eso para que veas que todo está reorganizado. Ahora, voy a añadir relleno de 16 píxeles. Y luego voy a añadir una película. Y la película va a ser de color blanco apagado. Entonces cuando estoy agregando un relleno y estoy haciendo el relleno, empieza a
parecer una tarjeta ya. Yo sólo voy a hacer un radio de esquina de 20 píxeles para que se encienda marron fuera de las esquinas. Y un efecto, voy a añadir una sombra de gota. Y para la sombra de gota, el desenfoque va a ser de 30 píxeles y el valor y va a ser de 15. Y así como así, nuestra tarjeta está lista. Simplemente deshabilitaré el control GRID_WIDCH G. Y se puede ver que tenemos una tarjeta. Entonces voy a parar esta lección ahora mismo. Y te pediré que trabajes tú mismo el resto de las cartas además de la barra de desplazamiento en la parte inferior. Y luego reagrupémonos en la próxima conferencia para diseñar las secciones posteriores. Nos vemos en la siguiente clase.
21. Hazlo tú mismo para el resto del diseño: Supongo que has diseñado todas estas tres cartas tú mismo desde el título que diseñé en la sesión anterior. Yo había hecho bastantes modificaciones a estos guardias, sobre todo con los remeros, para que se vea un poco cohesionado. Te pediré que pruebes eso también. Ahora bien, esta es la sección donde el fondo es blanco y necesitamos agregar algún elemento visual a esto. Entonces básicamente lo que voy a hacer es simplemente copiar el elemento visual que he diseñado antes. Déjame mostrarte cómo. Entonces estoy hablando de estos dos círculos. Por lo que hago click en ellos. Seleccionaré ambos círculos y los voy a duplicar usando la tecla de opción. Y voy a arrastrarlos hasta aquí. Y yo solo diré imprimirlas y me quedaré con una así, la otra así. Y y creo que sí, creo que ya terminamos. No creerías cuánta diferencia hizo solo tener una pequeña pieza de acento en el diseño. Y esto sólo consigue que el trabajo se haga muy bien. Presionaré el botón Mayús para acercar a caber. Y si puedes ver, esto es tan armonioso. Por lo que todas estas piezas de acento en el héroe miden a la derecha, luego en la siguiente carta, a la izquierda, en la siguiente carta a la derecha. Entonces, así está eso. Entonces antes de entrar en las siguientes secciones del diseño, lo que quiero hacer es que lo pruebes todo. En el próximo par de secciones. Estas van a ser las mismas técnicas que hemos utilizado hasta ahora para diseñar tanto. Entonces sólo voy a llevarte a la hoja de referencia que ya he incluido. Y sólo vamos a repasar lo que hay que hacer. Y te voy a pedir que lo hagas tú mismo. Tómese un tiempo para practicar sobre lo que hemos aprendido. Y siempre puedes llegar a mí si hay alguna dificultad. Si quieres alguna orientación, puedes dejarme un mensaje y te ayudaré a superar tu obstáculo. Por lo que sólo voy a dar clic en esta hoja de referencia y sólo voy a acercar. Entonces básicamente lo que hemos hecho es que hemos terminado como diseñar juntos hasta la pestaña Países. También hemos incluido estos dos círculos para elemento visual. Por lo que en el siguiente apartado, va a haber un testimonio. Para el testimonio, vamos a seguir este patrón de ese ofrecen gran fondo gris. El, estos son nuestros encabezamientos y estos son nuestros subtítulos. Y esta es una tarjeta que hemos diseñado. Entonces si vas a la alambrada, verás que ahí ya se da el testimonio. Es el mismo testimonio, misma persona. Entonces todo lo que se ha hecho por los diseñadores finales. He agregado esta imagen de un chapoteo, y he elegido esto como el encabezado y esto como el cuerpo. Este es el mismo pergamino, que es, están por todas partes. Entonces esa es esta sección de testimonios. En el siguiente apartado, hay una sección muy corta y hay un llamado a la acción llamado como listo para perseguir tu sueño. Este va a ser nuestro rumbo uno, Poppins 55. Y entonces este es el botón Aplicar ahora que hemos diseñado aquí en la primera página. Por lo que este es el mismo botón Aplicar. Y luego esta sección, es sólo el pie de página. El fotón se da en los wireframes. No está en el realmente el pie de página se da en el documento de requisitos del cliente. No está en el marco alambrico, pero de todos modos, esto es solo un rectángulo simple pintado con texto en color primario como invitación. Y estos son los elementos. Por lo que esto efectivamente completa todo el diseño de la página web que hemos realizado. Y quiero pedirte que hagas todos estos elementos tú mismo y pruebes esto. Vuelve a mí si te enfrentas a alguna dificultad. Y te veré en la siguiente clase.
22. Gracias: Oigan amigos, gracias por completar este curso y ver esto hasta el momento. Sinceramente espero que hayas aprendido algo de valor y estés usando sigma para hacer diseño de UI y UX. Estoy en proceso de crear adiciones a este curso. En primer lugar, estoy dirigiéndome a los comentarios de los clientes y cambia aspecto de las cosas. He mostrado este diseño exacto a cinco a seis personas que están en la industria en este momento. Y he reunido esa retroalimentación y estoy en proceso de crear videoconferencia como parte del propio curso. Y estoy planeando completar eso para el 28 de febrero de 2021, que es este año. Y también voy a aumentar el curso con un proyecto más, de immovible por lámpara. Este proyecto de aplicación móvil se completará para el 15 de marzo de 20211 cosa especial que este proyecto de aplicación móvil va a tener es que vamos a explorar la parte de componentes, los componentes reutilizables, que son sigmas puntuales, core fortalezas. Por lo que vamos a cubrir esa parte completamente en este proyecto de aplicación móvil. Y también vamos a hacer algunos prototipos. Entonces nos vemos en la siguiente clase es.
Saumitra Newalkar, Product Designer and Figma Enthusiast
