Clase magistral de Adobe Xd: diseña una aplicación móvil y un esquema de página para sitio web

1. Introducción a la clase: Adobe X'd es una solución todo en uno tú x tú I para diseñar sitios web, móviles, APS y más. Eso significa que puedes crear marcos de alambre vivos en vivo para diseñar y trabajar a través de viajes de usuarios , para crear simulacros creíbles para presentarlos a los clientes o para ampliar tu portafolio para incluir más experiencia de usuario y tablero de interfaz de usuario. Como diseñador gráfico creativo digital, nuestro desarrollador web aprendiendo esta herramienta puede ampliar tu marketability y te ayuda a adaptarte a la alta demanda, trabajos más lucrativos y tú x Este vidrio es una parte diseño gráfico, Web diseño y diseño UX ey ya que incorporan todas las disciplinas necesarias juntas para crear proyectos creíbles del mundo real en esta clase diseñarán un sencillo diseño de sitio web de escritorio y aprenderán a usar las herramientas de prototipado para crear interacciones entre todos los informes de diseño. Para crear un wir franc de trabajo sin fisuras, quien también aprendió la herramienta de repetición de cuadrícula para hacer crear diseños complicados, una brisa en el nivel intermedio de esta clase creará una aplicación móvil pensará nuestras personas de usuario para crear dos viajes de usuario únicos para crear un diseño totalmente diseñado y pulido. Aprenderemos las características de auto animate y otras características de transición para crear menú, efectos de deslizamiento hacia fuera y botones que se vean reales y auténticos. Todo lo que estás viendo aquí podrás hacer al final de esta clase. Entonces únete a mí para lecciones que subirán tu ganancia de diseño y te darán la ventaja en los próximos años y más allá a medida que tú X y tu Y se convierten en la piedra angular de tu conjunto de habilidades de diseño . 2. Comienzo: bienvenido a Adobe X'd. Vas a estar muy cómodo con este programa si ya estás familiarizado con Photoshopped o ilustrador o incluso en diseño. Una vez que conoces un producto de adobe, es muy fácil adaptarse a otro adobe. orgullo en el mismo caso está aquí, y si ya estás acostumbrado a ilustrador venir a este programa, todo está muy simplificado. Notarás que no hay muchas herramientas en tu barra de herramientas. Muy pocas opciones aquí a la derecha, y eso es todo. Es un sistema muy sencillo, y va a ser muy fácil. Toe aprende esto y prestamistas del dedo del pie muy rápido después de que ya hayas aprendido tal vez un programa más complejo , como en un ilustrador de Adobe Photoshopped. Esto va a parecer una brisa. Por lo que quería. ¿ Te puede dar un pequeño tour rápido usando algo que ya he creado para una marca que estuvimos trabajando en una clase anterior y lessen llamada Parson Dynamics, que es un conglomerado industrial. Entonces tengo lo que ves Diferente tablero de arte. Entonces tengo la página principal, que va a ser característica aquí en la columna Izquierda, y pude agregar nuevos tableros de arte que serían todas las subcategorías o las otras páginas Web de este sitio web. Por lo que tienes dos ventanas principales en el dhobi X'd tienes la ventana de diseño que estaban en momento, y esto mostrará Aquí es donde armamos están diseñados para armar una tipografía , se expusieron , nuestras columnas y seguimos adelante y configuramos todo gráficamente individualmente. Y luego tienes lo que se llama la sección de prototipos. Por lo que solo pasas al modo prototipo yendo y cambiando al prototipo. Y así es como vinculamos todos nuestros diferentes tableros de arte juntos para que podamos hacer un marco de alambre en vivo . Entonces te voy a mostrar un ejemplo. Aquí arriba hay un botón de reproducción, así que te muestro lo que hacen todas estas conexiones enlazadas. Entonces esta página principal y te mostraré tipo de, como hacemos una Web, un poco de diseño Web juntos para especie de aprender el programa te mostrará que tenías un enlace todo arriba, y es muy fácil. Se ve complicado, pero no te intimiden. Este es uno de los programas más fáciles que he aprendido en el último par de años. Por lo que todos estos diferentes artículos un enlace. Por lo que esta opción uno esta ha vinculado todo el camino a esta opción. Entonces cuando el usuario haga clic en cualquier lugar de este botón, van a ir a esta página. Lo mismo con la opción dos. opción dos se va a quedar hasta esta página, y la opción tres va a bajar a esa página Y la razón por la que somos capaces de vincular las cosas como podríamos ganarnos la vida, respirando alambre Web frito. Vamos a seguir adelante y dar clic en el botón de reproducción. Notarás que el botón de reproducción estaba justo aquí en la esquina superior derecha. Vamos a previsualizar nuestro prototipo. Wow. Como dije antes de que todos estos aire se unían juntos. Entonces voy a seguir adelante y dar clic en Opción uno. James podría ir derecho a la longitud que está ligada al tablero de arte que está vinculado puedo hacer clic en el botón de inicio y eso también está vinculado Puntos de vuelta a la página principal. Lo mismo para la opción dos, y podría hacer para tamizar diferentes transiciones. Entonces te das cuenta de cómo hice clic en opción para que se desliza muy bien a la de izquierda a derecha, y puedes configurar diferentes transiciones para tener en lugar de solo aparecer que tiene bonito tipo animado de efecto suave. Lo mismo con la opción tres, y eso podría bajar de arriba a abajo. Entonces esto es lo que vamos a estar creando juntos lo que creó todo desde cero. Y te vamos a mostrar cómo trabajar con tipografía, cómo configurar tus activos, que son realmente importantes. A continuación, está configurando tus activos para que no tengas que seguir recreando el mismo activo o ensamblar y otra vez. Y puedo mostrarles cómo su global para empezar incluso abrir un nuevo documento y empezar . Vamos a ir a archivar. Acabamos de empezar un nuevo documento. Podríamos hacer esto con cualquier tamaño, pero voy a hacer una típica página Web 9 20 por 10 80, y luego te mostraré cómo podemos hacer que esto se adapte a una pantalla más pequeña muy fácilmente. Pero vamos a seguir adelante y hacer nuestro diseño basado en un sitio web de 9 20 por 10 80. Sigamos adelante y pinchemos en ese tamaño en particular, y se va a abrir. Por lo que creó este primer tablero de arte para nosotros, y vamos a estar creando muchas tablas de arte para poder modificar este borde artístico desplazado alrededor para simplemente hacer clic en el nombre y puedes cambiarlo y luego puedes alejarlo . Tengo mi trackpad en mi laptop. Soy capaz de tipo de acercar, anunciado para poder obtener el tamaño. Y esto será muy útil porque hay algunos diseños Web o algún conjunto de aplicaciones móviles tendrá de 20 a 30 veces incluso 50 tableros de arte diferentes, todos transicionando y enlazando de diferentes maneras. Por lo que es muy importante ponerse cómodo con tener múltiples tablas de arte y tener una especie de sistema organizado cuando empezamos a crear múltiples tablas de arte. Entonces aquí está nuestro primer tablero de arte. Estas podrían ser tus páginas de inicio. Realmente vamos a sentir una especie de averiguar cómo adaptar nuestra marca parson Dynamics a la Web. Entonces vamos a empezar por arriba. mí me gusta diseñar en la parte superior y tipo de trabajo mi camino hacia abajo, así que está empezando con el elemento más importante, que va a ser una especie de nuestra barra de gallo. Vamos a seguir adelante y agarrar una herramienta de forma. Vamos a piel son una especie de herramienta de rectángulo. También tienes una herramienta de círculo. Y si estás familiarizado con el ilustrador, esto será una brisa. Entonces solo unas cabezas crean una barra simple que va a ser nuestra nab nuestra y yo tenemos por aquí a la derecha, Ahí es donde todo tipo de tus propiedades van a seguir adelante y doble click. Yo soy Phil, y puedo cambiar ese color. Por lo que quiero poder adaptar algunos de mis colores hex de mi marca que desarrollamos. Entonces voy a volver a Illustrator estaba trabajando recientemente en un póster y voy a agarrar algunos de estos colores. Entonces aquí hay un par de tipo de retroceso en el tiempo. Aquí hay un poco, un poco de lío, pero solo necesito adaptar algunos de estos colores. Aquí hay una especie de amarillo encontrado en este póster que como que nos gustó para la marca. Y voy a hacer doble clic en ratones viendo Illustrator y sólo voy a agarrar este código hexadecimal. Vamos a meterlo en X D. Vas a ir a llenar y reventar nuestro código hexadecimal. Eso va a ser amarillo, y sólo voy a dibujar otra caja. Para que podamos poner aquí nuestro pop morado, agarrar nuestro color morado el cuaderno este reloj e ir a llenarlo y ponerlo. Entonces ahora tenemos nuestros dos colores. Lo genial de esto es que podemos guardar estos colores y nuestro panel de activos, que va a estar aquí abajo en la parte inferior izquierda. Verás activos, vamos a dar click en activos y va a haber un pequeño menú pop out a la derecha. Vamos a añadir estos colores a nuestros activos. Por lo que sólo vamos a resaltar un color va a hacer clic derecho y añadir activos de dedo de color. Por lo que agregó son código hexadecimal morado y ahora vamos a hacer lo mismo con nuestro color amarillo naranja , y vamos a agregar ese color a los activos. Entonces ahora si dibujo alguna forma, puedo ir a mi panel de activos aquí en la parte inferior izquierda, y podré recordar cualquiera de los colores que necesito. Así que ir de cabeza y configurar tus estilos de fuente y todo lo que necesitamos en tu panel de activos realmente ayuda a tipo de hacer que el proceso vaya mucho más rápido cuando estamos haciendo muchas páginas diferentes, para que puedas ver que tenemos nuestros activos de colores establecidos arriba. Pero también hay estilos de carácter. Podrías tomar una fuente titular en particular. Si te gusta ese tamaño y tipo de letra en particular, puedes guardar los estilos de carácter y recordarlo en cualquier momento, lo cual es genial si quieres configurar todos tus encabezados y hacer tu H una h dos h tres. Si alguna vez hizo CSS. Estarás muy familiarizado con esos términos y símbolos. Podrías dibujar símbolos e iconos y poder guardar esos símbolos y cargar esos en todos tus tableros de arte. Y lo que es genial es su global. Entonces si cambio, si hago un pequeño símbolo de una casa y decidí cambiar ese símbolo, lo cambiará en todas las diferentes tablas de arte. Y cuando tienes 50 tableros de arte diferentes, es realmente agradable tener, tipo de esa estilización global. No tenemos que cambiar cada símbolo una y otra vez, y así lo haremos como terminamos este sitio web. Entonces vamos a seguir adelante y conseguir este estilizado aquí brazo en lugar de una barra amarilla que va a hacer una barra morada. Entonces en mis activos, Panelistas poco aquí abajo en la parte inferior izquierda van a seguir adelante y dar click en púrpura para hacer eso una barra morada. Y quiero traer mi dedo logo, tenerlo en el centro o en la izquierda. Entonces aquí es donde vamos a traer algunos de sus activos. Por lo que el logotipo, un archivo de logotipo PNG transparente sería un activo. Y así soy ilustrador, y aquí hicimos un diseño local para nuestro logo de Parsons. Y ya tengo esto en dos tableros de arte diferentes en Adobe Illustrator. Tengo una versión en blanco y negro, pero tengo, um, cambiado. Entonces tengo uno en especie de gris y luego uno y blanco. Entonces voy a necesitar esa blanca para ir encima de una barra de color. Entonces todo lo que hice es solo exportar, y voy a conseguir estos como PNG transparente con el tipo este logo top. Podríamos hacer un PP más alto. Yo Eso es extranjero. Resolución superior. Esto no va a estar en la web hasta el momento, pero eventualmente llegamos a pensar en el tamaño del archivo y no hacer un PNG demasiado alto y tamaño de archivo para que podamos asegurarnos de que no tenemos tiempos de carga súper altos. Pero por ahora en el concepto en proceso de diseño, está bien, vamos a seguir adelante y traer ese activo. Entonces solo voy a traer a mi buscador. Vamos al escritorio y arrastramos a estos tipos. Entonces aquí está nuestro 1er 1 para salir adelante, hacerlo mucho más pequeño, y luego traer nuestro blanco. Parece que tengo que hacerlo de uno a la vez. Adelante, hazlo más pequeño y adelante. Correcto. Haga clic y guarde estos en mis activos. Entonces voy a hacer click derecho y hacer un símbolo. Entonces eso va a aparecer en su panel de activos ahora es logo. Voy a hacer click derecho y hacer un símbolo. Por lo que estos aire ahora traían sus símbolos y yo podría hacer este logo negro y yo podría hacer este blanco local. Puedo recordar estos logotipos en cualquier momento, así que realmente no los necesitamos en este momento. Podría seguir adelante y sacar esto y tengo mi logo blanco. Podría sacar el negro si necesitara ponerlo aquí abajo para que esos activos pudieran ser recordados en cualquier momento. Entonces ahora voy a hacer doble clic en esto y tipo de conseguir el tamaño correcto. Esto es Podemos acercar y realmente tener una idea de los tamaños de píxel. Entonces, ¿ves cómo envié esto por ahí? El smart guides tipo de kick in, insoportable ver el espaciado para ver 8 16 ¿Cuántos píxeles hay en el margen izquierdo y en el margen derecho? Es 853 así que puedo seguir adelante y especie de centro que en tal vez hacer las dos tres. Y aquí es donde podría necesitar redimensionar un poco mi pequeña imagen para asegurarme de que vaya perfectamente. Ahí hay una especie de nuestra barra superior. Nos vamos a centrar más en sólo una especie de conseguir un diseño terminado. Nos confinamos a encontrar para encontrar dos detalles más adelante para que pudiera usar mis teclas de teclado de todos un empuje solo un pixel a pixel o dos. Puedo llevarme mi teclado, teclas de flecha y tipo de ponche ahí arriba golpeando hacia abajo. Te darás cuenta de los diferentes píxeles que hay entre el espaciado aquí, y eres capaz de hacer algunos pequeños ajustes que se supone que tratan de arrastrarlo tipo de broches de presión un poco. No eres capaz de obtener la misma precisión 3. Imagen héroe: Entonces me alejo y quiero tener una idea de lo gruesa que quiero que sea mi barra de navegación superior . Entonces si alguna vez quieres hacer cambios de minutos en lugar de tratar de averiguar dónde está un píxel en particular arrastrándolo, vas aquí al panel de propiedades y soy capaz de hacer que esta altura de 100 píxeles y conseguir un poco más precisa colocación. De acuerdo, así que ahora vamos a hacer que nuestra imagen de héroe son una especie de nuestro principal tipo de pancarta o araña que estará en nuestra página principal. Por lo que tengo aquí una nueva imagen que quiero usar y bajar a descargas. Y adelante, recuerda esa imagen y sólo dragón aquí dentro, igual que cualquier otro activo. Está bien, así que aquí está mi imagen de héroe. Voy a seguir adelante, arrastra esto como una foto completa, y una cosa que podríamos hacer la arrastró hacia adentro, y podríamos redimensionarlo de esta manera haciendo doble clic en él, pudiendo hacer recorte y averiguar el tamaño correcto. Pero tengo algo aún mejor que hacer. Adelante y borra eso y vamos a dibujar una caja. Básicamente estamos dibujando donde queremos que esto pueda ir. Entonces ahora que tenemos una caja, vamos a poder arrastrar nuestra foto y va a poblar la caja perfectamente. Vas a ir y traer de nuevo nuestra imagen de héroe. Simplemente arrástralo termina, va a estallar muy bien y así podemos hacer ajustes haciendo doble clic sobre él y deslizándolo arriba, deslizándolo hacia abajo, que ya está al máximo. Pero podríamos hacerlo más lejos y acercarnos si quisiéramos. Ya terminamos. Haga clic fuera. Voy a tratar de encontrar la colocación adecuada para nuestra foto. Y una vez más, confinamos ciertos tamaños también. Por lo que queremos agregar tal vez algún texto en la parte superior de la imagen, tener algún texto en vivo que se mostrará. Entonces voy a seguir adelante y agarrar la herramienta de tipo. Vamos a seguir adelante y sólo hacer una caja, y yo voy a hacer Ah, vamos a ver, ¿a qué van nuestros taglines? Agarra nuestro tagline de nuestro cartel. De acuerdo, rediseño de la industria. Entonces eso es todo el tagline es Pop de nuevo en la industria X'd rediseñado Ve y haz que esa caja limitadora sea un poco más grande y especie de cambio. Toma nuestra herramienta de flecha tipo de lo envió arriba. Vamos a hacer doble clic y hacer de este un Phil blanco, y también tienes una opción de sombra aquí también. Entonces si sientes que realmente no está saliendo, vas a dar click en la opción de sombra para añadir una sombra clara, claro que podemos cambiar la distancia de esa sombra. Y también el desenfoque aquí sea para Blur, y también podemos hacerlo más fuerte. Acabamos de hacer doble clic tipo de sombra tipo de cuadro de transparencia ahí, y podemos hacerlo más fuerte para que conserve 16%. Podríamos hacerlo 33%. También puedes cambiar el color de la sombra de gota igual que cualquier otro programa de adobe. Entonces digamos que queríamos que esto colapsara y alineado al centro. Podríamos hacer eso simplemente arrastrando esta caja el cuadro limitador, haciéndolo un poco más grande y luego subiendo al centro de alineación en nuestro panel de propiedades aquí mismo en nuestro panel de propiedades de texto. Y también podríamos cerrar la brecha con dejar entre el espacio entre las diferentes líneas de tipo, por lo que se va a hacer aquí mismo en esta zona. Entonces digamos que es 1 41 puede estar cerrado. El vacío. Por lo que solo se siente un poco más fuerte y como unidad unida, igual que con el diseño de maquetación. Estoy haciendo los mismos fundamentos del diseño de maquetación de impresión que estoy con el diseño Web tipo de pensar en cómo ambos son muy similares. Entonces al igual que con cualquier otro objeto, puedo resaltar mi foto y añadir un poco de sombra de gota para que puedas ver un poco de Ah, bonita sombra de gota que se agregó ahí, voy a ir a despegar un pequeño borde. Parece que hay un pequeño borde delgado alrededor de la foto, que acabo de hacer clic y quitar. Entonces ahora vamos a hacer tres casitas que se encuentran y sean y sean capaces de ser enlazadas a otras sub páginas. También vamos a terminar teniendo que los elementos del menú aparezcan arriba. Pero vamos a hacer una especie de diseño Web Web muy simple sólo para empezar. Te voy a mostrar un truco realmente genial. Entonces vamos a seguir adelante y desarrollar una caja exactamente como la queremos, y vamos a poder usar la herramienta de repetición de cuadrícula para replicar eso una y otra vez tanto como quisiéramos. Entonces solo vamos a crear una caja. Pero vamos a poder crear todas las cajas después de eso muy, muy fácilmente. Entonces vamos a seguir adelante y agarrar nuestras herramientas cuadradas, hacer una forma sencilla, y puedo agregar esquinas redondeadas a esto. Así que lucha contra el tipo de zoom. Agarro especie del área del círculo aquí en la esquina y la arrastro hacia abajo para crear cualquier tipo. ¿ Dónde has hecho una forma de píldora perfecta? O puede simplemente a una curva muy, muy leve, en la que creo que solía estar esto cuando tenía esta manzana de Caracas realmente afilada hizo ese tipo realmente popular de ese bonito, liso, borde redondeado biselado. Pero a medida que ha pasado el tiempo, hemos adaptado un poco más de una curva más nítida donde casi apenas se ven . Eso es algo más lo que es tendencia en estos días. Para que pudiera hacer de esto un relleno o podría hacer un poco de sombra, tener una sombra. No quiero un borde, así que tengo que desabrochar borde tipo de ver cómo todavía tiene un poco de sombra de gota y tiene apenas un poquito de bisel la esquina redondeada. Entonces ahora vamos a hacer tal vez una imagen en la parte superior y tal vez algún texto para hacerles saber a qué se vinculará esa próxima página Web. Entonces sigamos adelante y creamos una caja que será donde nuestra foto será arrastrada y quiero mostrarla truco rápido. Entonces ahora mismo, tengo todas las esquinas tipo de curvas al mismo tiempo, y voy a hacer de esto un color diferente para que puedas ver esto en acción. Entonces hagámoslo rojo para que veas cómo lo hacen todos al mismo tiempo. Pero ¿y si solo quiero uno como esquina redondeada? Voy a mantener presionada la tecla de opción o la tecla antigua cuando haga clic en la que quiero ser más redondeada y voy a dar clic en eso, y podría hacerlo es formas independientes. Entonces si quiero hacer este maíz a su alrededor y esta esquina, solo estoy sosteniendo la opción Orochi todo el tiempo que podría simplemente editar individualmente estos. Entonces ahora como que tengo más de una forma tipo interesante, pero voy a mantenerlos todo redondo y sólo por el bien de ello, Así que voy a ir dar click en este go tipo de comando Z comando Z tipo de volver a mi historia vuelta a donde estaba blanco. Adelante y agreguemos nuestra imagen. Voy a agregar un pequeño marcador de posición para por imagen y así voy a hacer de este un color diferente para que pueda especie de ver qué está pasando, y quiero hacer que esta esquina coincida con la caja detrás de ella. Entonces solo voy a mantener presionada la llave de perno u opción porque solo quiero manipular esta esquina superior derecha y voy a igualar la esquina. No necesitamos frontera. Entonces solo uno conectando que mantenga pulsado el todo tipo de clave coincidió con ese fondo. ¿ Va a ser aquí donde residirá nuestra foto y poder jalar esto hacia abajo y vamos a seguir adelante y arrastrar en un dragón fotográfico? Estas personas hablando desde el entorno de la industria y ahí tienes. Quiero cambiar el recorte oscuro DoubleClick y podré cambiar el recorte esa manera. 4. Repetir cuadradas: Añadamos otro cuadro de texto. Agarra la herramienta de texto, adelante y teclee. Hagamos sólo la opción uno por ahora. Podemos descifrar detalles más adelante sobre lo que queremos decir. Entonces solo vamos a hacer un Phil y recordar, ya tenemos nuestro color guardado. Entonces si vamos a ir a nuestros estilos de globo, que está aquí abajo en la parte inferior izquierda, vamos a poder recordar en opción naranja o podemos hacer unas opciones moradas. Hagamos nuestro color amarillo naranja y bajemos esto a la opción uno. Debe hacer esto un poco más pequeño. Vamos a ir aquí a nuestro panel de texto y hacer que ese 55. Eso es bastante grande. Entonces hagamos que esto sea seguir ajustándose hasta que podamos encontrar el tamaño adecuado. Y una vez que nos va bien, podemos ahorrar. Este es un estilo global. Bueno, entonces bajamos a nuestros estilos. Podemos hacer click derecho y hacer agregar activos de dedo estilo carácter. Simplemente voy a añadir este estilo de personaje. Entonces si alguna vez quiero volver a sacar esto, puedo sacarlo fácilmente con ese mismo tamaño y mismo color. Hagamos esto un poco más largo y agreguemos otro pequeño cuerpo, copia o copia de párrafo, um, a nuestros artículos. Entonces vamos a seguir adelante y sacar la herramienta de texto, pero vamos a hacer clic y arrastrar y hacer un cuadro de texto de párrafo. Voy a agarrar un texto genérico que tengo aquí mismo y copiarlo y pegar. Asegúrate de que mis herramientas de texto vuelvan a salir. Pega. Vamos a necesitar cambiar esto de manera significativa para ser nuestra copia corporal. Simplemente voy a destacar todo lo que voy a pasar a, uh, mi estrella global de mi panel de activos y dar clic en mi gris y hagamos este ferrocarril. Eso es lo que estábamos usando en nuestro cartel para nuestras copias corporales. Vamos a usar eso para una copia de párrafo. Hagámoslo significativamente más pequeño, tal vez 14 ar 15 en este caso. Y hagámoslo una espera regular. Son un medio en este caso Castaignos tipo de juntarse lentamente. Entonces ahora vamos a cambiar la alineación. Podríamos hacer una alineación central, o podemos subir y hacer una alineación a la izquierda y necesitamos cambiar ese dejar o entretener entre espaciado. Entonces voy a ir aquí mismo en esta zona y seguir adelante y probar 18 Ver cómo funciona eso . Se puede ensanchar un poco más para tener algún espaciado agradable, pero no demasiado. Entonces eso funciona como cualquier otro cuadro de texto. Y y diseñador o ilustrador podría seguir adelante y pop esto aquí abajo. No quiero que sea tan largo. Entonces sólo voy a tener que sean dos frases simples. Lo suficiente como para tipo de explicar un poco más lo que el usuario necesita hacer o lo que estará aquí cuando el usuario haga clic en este botón. Creo que voy a hacer una alineación central aquí porque no tengo mucho texto. Entonces hagamos alineaciones de centro de alineación. Agradable. Cuando tienes cuadros de texto más pequeños, cuanto más grande sea el cuadro de texto, más alineación a la izquierda tiende a funcionar un poco mejor. Entonces voy a cambiar esto para no tener ah huérfano. Se llama Huérfano. Es todo por sí mismo. Sólo una palabra. Se ve extraño. No queremos que esto. Queremos revelar la brecha para que no tengamos huérfano, y también podemos cambiar tus píxeles está sucediendo automáticamente cuando arrastro. Haz que tus guías inteligentes estén pateando en su aviso. Ese tipo de línea azul de color de vástago Eso significa que esto va a estar alineado en el centro con esa caja blanca. Lo mismo que podría seguir adelante y arrastrar esto hasta que pudiera conseguir algo de alineación central. Ya estoy bien para ir. Entonces déjame seguir adelante y cambiarlo todo sobre esta caja porque una vez que empecemos a repetirla ,vamos a estar creando muchas versiones diferentes de esta caja. , Entonces vamos a conseguir esta caja perfecta. Antes de empezar a repetirlo dio a conocer la brecha. Te das cuenta de cómo es una especie de adaptación automática de la foto a cuando la hacemos de un tamaño diferente . Entonces voy a alejarme para poder tener una buena idea del diseño para que incluso pudiéramos hacer cuatro otro lado de la parte inferior. En las lecciones hacen tres por ahora. Y creo que podré expandir eso un poco más blanco. Tenemos que pensar en las opciones móviles. Entonces cuando esto sí colapsa en la opción móvil, tenemos un diseño responsive. Esto se va a mostrar primero, y se va a apilar para que puedas tener el 2do 1 aquí en el 3er 1 aquí. Por eso. No tienen imagen a estos. Se ve un poco redundante en un escritorio, pero cuando sí tienes vista móvil, esa imagen, junto con el enlace hace una especie de ayuda en lugar de solo tener un símbolo. Pero sí, podríamos hacer iconos personalizados en lugar de una foto. No tenemos que tener fotos, pero solo para este caso, sí lo tenemos. Entonces aquí está el truco genial. Se llama Repetir Grid. Entonces voy a seguir adelante y agrupar esto como una sola unidad. Así que acabo de hacer clic derecho y lo agruparé, y llegué a seguir adelante y hacer clic en esta cuadrícula de repetición por aquí en la columna superior derecha. Entonces ahora va a tener este tipo de barras que podría ampliar. Entonces lo voy a expandir hacia la derecha y te darás cuenta de que sigue repitiendo la misma caja una y otra vez. Y puedes seguir adelante y hacer 45 si quieres, Pero vamos a hacer tres. Y lo que es genial de esto es que puedo pasar a esta columna y podré cambiar el espacio de píxel entre la columna para hacerlo justo para que pudiéramos tener 90 píxeles entre las columnas y lo mismo va para aquí abajo, yo en realidad puede hacer una rosa. Podría hacer muchas, muchas filas. Entonces esto es tan fácil poder hacer conceptos de aplicaciones móviles cuando tienes tal vez, sí, estás haciendo una aplicación móvil y tienes muchos datos, tal vez datos de usuario que estás listando y lo haces en una bonita caja estilizada. Podemos crear cientos de estas cosas muy fácilmente mediante el uso de esta herramienta. Entonces solo queremos tener una fila, así que basta con dar click en un solo tipo de tamaño peor, una carretera y estamos listos para salir. Por lo que ahora mismo, estas mudanza es una unidad. Entonces digamos que quiero iniciar la actualización del dedo del pie tipo de algunos objetos aquí. ¿ Cómo me tipo de esto desvinculado? Vamos a hacer click derecho y trabajar yendo a un nuevo grupo de cuadrícula. Entonces ahora se va a tratar de nuevo como elementos individuales. Ya no se vincularon como lo estaban cuando teníamos la opción de repetición de cuadrícula encendida. Por lo que en nuestro va a poder rastrillar click y modificar nuestras opciones. Entonces opción dos, una opción tres Y una cosa que quiero hacer, guardo aquí mi estilo de personaje para mi opción Un titular Pero quiero poder decir mi copia de párrafo. Entonces voy a destacar eso. A ver si puedo seguir adelante y seleccionar la casilla click derecho y tú para ir a añadir estilos de carácter a los activos. Y ahora tengo mi copia de párrafo. Y luego voy a hacer de este mi encabezado. Esto probablemente podría ser H dos encabezado para probablemente tendrá un tamaño más grande, que será este aquí arriba. Sólo tiene el derecho Haga clic fuera de él rápido otra vez y derecho Haga clic y vaya a ver agregar estilos de carácter a los activos. Este podría ser nuestro H uno. Este será nuestro tamaño de cabecera más grande y luego el H amarillo dos será nuestro próximo tamaño hacia abajo y luego tendremos un h tres n h cuatro Alguna vez hemos hecho codificación CSS. Ya sabrás todo sobre eso. Por lo que me gustaría cambiar las fotos de todos estos para que solo pudiéramos seguir adelante y sacar a nuestro buscador. Vas y encuentras la foto adecuada para estos Just dragon in. Si quiero cambiar tu recorte, hago doble clic y puedo tipo de zoom en un poco más. Mis fotos 5. Crear el pie: por lo que estamos haciendo aplicación móvil o aplicación Web. mock ups son simulacros de producto digital para clientes. Queremos hacerlo de una manera amigable con el presupuesto. Solo estamos tratando de sacar la idea de cómo queremos que se vea el sitio web y cómo fluye y cómo se encuentra con la demografía objetivo y nuestras personas de usuario que desarrollamos. Realmente queremos asegurarnos de que el sitio web se vea bien, pero queremos hacerlo de manera oportuna. No queremos gastar mucho dinero en el concepto de cara porque aún tenemos que desarrollar esto. Y a veces eso significa contratar a un desarrollador para codificar esto y conseguir que esto se convierta en una realidad, a menos que seamos realmente buenos en eso, también. Pero no siempre se espera que diseñemos y conceptuemos, sino que también codificemos. Es inicio loco. Tenemos que empezar a especializarnos, pero de todos modos, así que necesitamos hacer las cosas en un asunto oportuno. Entonces voy a tratar de mostrarles algunos trucos del oficio para especie de acelerar ese concepto en proceso. Entonces cuando volvimos aquí, tengo que ir adelante en un círculo simple, mantener pulsado el turno para hacer un círculo perfecto. Vamos a dar click en repetir cuadrícula. Sólo voy a hacer tres. Pero esto es exactamente lo que acabamos de hacer aquí abajo. Pero te voy a mostrar un pequeño truco. Entonces en lugar de arrastrar cada foto como lo hice yo, podrías acelerar un poco el proceso si ya conoces las fotos que quieres cargar y en cierto orden. Entonces estoy tomando tres, fotos que han resaltado en mi buscador, y las estoy arrastrando hacia ese primer círculo, y automáticamente se poblará con todos ellos. Entonces eso funciona realmente bien, si quieres hacer algunas tomas de perfil genéricas, así que tal vez tengas algunos tiros a la cabeza o tomas de personas y tienes quizá 20 círculos pequeños que ella creó la cuadrícula de repetición. Podrías dragar 20 tipo de genérico todos los diferentes tiros a la cabeza lo arrastran ahí dentro, y van a poblar esa fila entera de 20 lo cual realmente será útil cuando estés haciendo desarrollo de aplicaciones móviles. ¿ Tendrías muchos usuarios? Entonces sólo un pequeño truco del oficio. Ahora es el momento de hacer un simple pie de página. Entonces en este momento estamos un poco atascados con este tipo de tamaño 9 20, pero sabemos que hay algo llamado debajo del pliegue. Entonces cuando cargues una página web, esto es lo que verán. Pero también hay formas en que pueden desplazarse hacia abajo. Y Seymour Entonces, ¿cómo diseñamos más bajo que esto cuando ya estamos en el corte? Vamos a seguir adelante y dar click en nuestro nombre principal aquí para tablero de arte. Vamos a bajar aquí a desplazarnos, y vamos a asegurarnos de que esté puesta en vertical. Y así esto nos permitirá tirar esto hacia abajo para poder hacer cosas por debajo del redil. Entonces esto es lo que la gente tendrá que desplazarse con la boca para ver. Cosas tan menos importantes, realidad. Pero vamos a hacer el pie de página. Entonces este va a ser el punto donde cuando cargaron en su navegador, esta es la línea que termina. Vamos a hacer un simple pie de página. Adelante y sólo podemos agarrar ese bar. Puedo aguantar viejo para opción. Adelante y copia eso. Ahora podemos convertirlo en un color sólido. Podríamos incluso hacerlo de ese color amarillo, ordenar nuestro panel de estilos y hacerlo amarillo? Depende. Yo quiero uno. Creo que probablemente se veía un poco mejor ya que podríamos hacer un gris claro, pero creo que un morado se vería bien. Entonces ahora que tenemos especie de nuestro panel de activos se abre, damos clic aquí para obtener nuestro panel de activos. Contamos con nuestro logo y blanco y negro. Adelante, poblad con nuestro logo blanco. Tenlo aquí abajo en la parte inferior cuando vamos a poder agregar o contactar información. Entonces ahora que tenemos nuestros estilos de personajes van mucho más rápido, sigamos adelante y traigamos una copia de párrafo. Entonces vamos a seguir adelante y resaltar nuestro cuadro de texto. Vamos a seguir adelante y poner nuestro pie o columnas. Parece un tipo en especie de algún texto genérico. Entonces texto aquí, texto aquí, texto aquí sólo tipo de ser algunos enlaces. Voy, tengo mis estilos de párrafo. Vamos a seguir adelante y hacer clic en el estilo de párrafo, pero esto va a ser sobre fondos oscuros. Vamos a tener que establecer un tipo diferente de estilo de párrafo aquí, Así que voy a ir a llenar, seguir adelante y configurar esto. Cómo me gusta podría hacer diferentes columnas aquí. Obtendremos nuestras teclas de flecha con arrastrar algunos de estos elementos, y probablemente podamos hacerlo un poco más grande. Entonces hagamos ese 18 punto y tamaño. Cambiemos la brecha aquí, así que tenemos un poco de una brecha más grande. Es 2 30 Está empujando un poco más a 40 por lo que este podría ser tu tipo de texto de nuestro enlace. Entonces hagamos esto y arrastremos esa caja más abajo. Hagamos de esto un enlace, así que vamos a subir y convertirlo en un medio. Vamos a hacerlo liderando metálico y vamos a hacer una sensación amarilla abarcará nuestros colores y hacer amarillo. Y una vez que vayamos a hacer enlace aquí, va a hacer doble clic en este enlace. Un enlace a Blink tres Casi hacemos un enlace para Ok, así que ahora podemos hacer click derecho y podemos agregar que estilos de carácter toe activos y ahora tenemos otro estilo de personaje stop. Hagamos doble clic en esto ah, vincula fondo oscuro. Estos serán tus enlaces para un fondo oscuro y que podríamos hacer algo fresco, que es repetir cuadrícula, y podemos seguir replicando esos para hacer múltiples columnas. Eso son muchos enlaces, pero solo estamos haciendo ejemplo. A lo mejor nos deja hacer. ¿ Hace esto para Ah, vamos a hacer tres filas ahí mismo. De acuerdo, Podríamos hacer algo de texto de encabezado aquí, también, así que sigamos adelante y en agrupar ese objeto, tomemos esa opción. Tumbas podrían mantener presionada la tecla de opción y fueron capaces de conseguir ese pequeño cabezazo aquí abajo. Y hagámoslo un poco más pequeño. Entonces hagámoslo 25. Podríamos hacer eso blanco también, o me gusta. A mí me gusta amarillo tan bueno. Yo como que hago la repetición genial otra vez, ahorrarnos algo de tiempo. Hagamos tres y luego vamos a poder acercar y podríamos conseguir las columnas y hacer más anchas hasta que estén amables. Y aún así, a ver lo rápido que somos capaces de hacer eso. Un ilustrador tardaría mucho más. Ojalá Tal vez eso pase. Algún día. Traerán esta cuadrícula de repetición al ilustrador y Photoshopped. Eso sería impresionante. De acuerdo, Así que así, hicimos un pie de página rápido. Entonces digamos que quiero hacer algún tipo de foto de superposición gráfica genial sobre la parte superior del pie de página . Vamos a hacer eso a continuación. Por lo que ahora estoy cambiando años estoy de vuelta en Photoshopped. X'd es fantástico, pero no tienen un montón de capacidades de edición de fotos. Entonces por eso es agradable tener otro programa de edición de fotos para poder editar fotos para hacer transparencias y modos de fusión y tipo de hacer algunos efectos fotográficos geniales. Entonces vamos a hacer eso aquí con esta foto. Voy a seguir adelante y agarrar herramienta de rectángulo y crear una nueva capa. Y yo sólo voy a tomar la, uh, esta herramienta de reloj aquí y conseguir un doble Click it y tengo una copia y pega. Mi pequeño código hexadecimal que tengo para el morado fue básicamente conseguir mi muestra morada y voy a conseguir la herramienta de cubo de pintura, Adelante y rellena eso y voy a arrastrar esto por debajo. Simplemente básicamente voy a estar haciendo un modo de mezcla. Estoy seleccionando mi foto de color superior y estoy haciendo un modo de mezcla abajo a luminosidad o cualquiera que creo que se vería mejor. Bastante seguro que eso va a ser luminosidad, y sólo voy a hacer una especie de efecto de plumas. Por lo que solo estoy agregando una máscara de capa para obtener mi herramienta Grady int y haciendo un granulado blanco y negro en. Entonces cuando hagas blanco y negro sobre una máscara, podrás mezclarla, ¿ acuerdo? Y yo solo voy a reducir la transparencia sobre esto para que no compita con nada de mi pie o información, y siempre podríamos recortarlo anexo D. Así que no me preocupa eso. Iba a ir a afilar. Yo sólo voy a afilar un poco, conseguir una linda, afilada Kristen Crisp y una maldita charla de imagen. Entonces ahora estoy listo solo para decir que esto es un J. Paige y voy a traer esto a Adobe X'd y poder mezclar esto en Como me gusta vamos a ir pop a X'd y lo que voy a hacer es ir adelante y copiar y pegar mi pie de página contenedor así que voy a aguantar. Opción podría arrastrar una copia en la llamada cabeza y recortar Mi foto Cómo me gustaría. Voy a traer mi foto más reciente, este dragón adentro Y me dieron un doble click porque no me gusta donde lo recortó y voy a traerlo hacia adelante o hacia arriba. Simplemente lo voy a arrastrar por encima y enviar esto hacia atrás al sistema de capas. Entonces sólo voy a hacer eso sosteniendo mando y corchete izquierdo. Mi pequeño atajo. Funciona en todos los programas de adobe, y son débiles. Tenemos nuestro pequeño pie de página con nuestro plano de fondo de gente cool, y quizá quiera reducir la transparencia en ese. Entonces solo voy a seguir adelante y hacer esa sombra de trabajo, Pero reduzcamos la transparencia. Estoy aquí mismo en apariencia número de proyección que de vuelta para que no compita con información detallada del enlace. Está bien, así que necesitamos hacer una cosa más, y ahí se podrá iniciar dedo del pie enlazar nuestro objeto. Entonces una cosa que podríamos hacer es simplemente notar esto. Voy a agrupar tanto ese fondo, forma sólida como la foto que acabamos de arrastrar encima. Tengo un grupo esos juntos. Entonces esos se quedan juntos como una unidad pensé en ya sabes, y si extendiera esto aquí arriba Tipo de creado un tipo de diseño interesante. A lo mejor tipo de superposición. Entonces se puede ver como las sombras aquí abajo que podrían funcionar. pudiéramos hacer eso o tenerlo como lo tenía. A mí me gusta de esa manera. Hagamos eso. Así que vamos a sólo una especie de un cambiar automáticamente el tamaño de la foto dentro de ese contenedor automáticamente cambiar el tamaño es a medida que cambiaste más alto, lo cual es realmente genial. 6. Crear nuestra subpágina: De acuerdo, Así que acabo de hacer algunos pequeños ajustes y tenía esta sección inferior puede ir por encima de las tres cajas en lugar de tener el pie de página tipo de interactuar de esa manera. Por lo que ahora estoy listo para hacer un pequeño ícono, un pequeño icono de casa. Tiene que ser a la parte superior, derecha, Así que no importa en qué página esté, tengo este bonito ícono de casa donde puedo recoger de nuevo a la página principal. Entonces si estás familiarizado con Adobe Illustrator, ya vas a estar familiarizado con la herramienta pin Y así esto funciona exactamente de la misma manera en Adobe X'd. Entonces voy a seguir adelante y agarrar Voy a hacer un icono de casita. Entonces sigamos adelante y hagamos una especie de caja simple. Se va a despegar de frontera. Voy a hacer esto bonitas, esquinas redondeadas pero no demasiado redondeadas. Entonces solo esquinas realmente sutiles y quiero mantener presionada la tecla de opción y quiero hacer esas esquinas agudas porque ahí va a ser donde el techo va a ir. Realmente sólo necesito estas esquinas inferiores suaves. Entonces voy a tomar la herramienta de pasador y dibujar un simple techo a nuestra casa. Yo vengo solo podías ajustarlo. Y a diferencia de ilustrador, puedes hacer doble clic en esto. Se convertirá en la herramienta de curvatura con solo resaltar. Simplemente tienen la opción de herramienta de un pin. Por lo que hace doble clic. Se le dará la vuelta, y tienes tus asas donde puedes ajustarlo. Nikkan Doble click y se remonta a una forma puntiaguda. Yo puedo hacer cualquiera de estos redondeados haciendo tal cosa, Así que vamos a despegar la frontera y cambiarla a un Phil. Tenemos un icono de casita. Podemos ajustar esto. También puedes desarrollar esto en Adobe Illustrator, otro programa vectorial, y poder traerlo como un activo. Pero también puedes crear aquí. Pero si tienes Adobe Illustrator disponible, me gusta hacer todo mi tengo un poco mejor control de pluma, control herramienta pin y ill adobe illustrator, así que haré muchos de mis iconos ahí y traeré esto como una celda de carácter. Pero lo genial de X TV lo mantiene en vivo. Podrás animar a lo mejor partes particulares de un símbolo de ese algo que te interesa hacer. Entonces tuve este tipo de vida simple. Yo quiero hacer una puerta, Glenn, crear nuestra puerta. Queremos hacer de esto unas formas sólidas. Cambiemos eso para llenar. Hagamos un color diferente. Íbamos a puñetear esto, igual que en Adobe Illustrator. Queremos un ponche que fuera. Entonces voy a destacar Adelante, agrupa estos dos elementos blancos juntos. Voy a sacarle esto de esto, este fondo. Entonces ahí está la herramienta Pathfinder aquí arriba, igual que un ilustrador de adobe. Vamos a dar click en estos hasta que encontremos el correcto. Por lo tanto excluir la superposición, que es el icono de extrema derecha se hace clic en. Esto es igual que la herramienta Pathfinder. Yo le di un puñetazo. Por lo que ahora tengo mi ícono. Entonces voy a seguir adelante y hacer de esto el tamaño correcto así que es una especie de zoom hacia fuera, mantendría pulsado el turno y lo convertiría en el tamaño adecuado para nosotros. Parece que es mantener esas curvas e impuestos, por lo que a medida que lo hacen más pequeño, es adaptar esas curvas, lo cual no necesariamente quiere que yo quiera. Por lo que podría ser mejor hacer el tamaño del icono del tamaño que va a ser en zoom en lugar hacerlo más grande y hacerlo más pequeño. Pero eso no importa, porque puedo desarreglarlo y poder hacer el mismo efecto. Entonces sigamos adelante y ahí está mi pequeña casa. Yo Collins me aseguro de que le guste el tamaño de la misma. Eso está bien. Vamos a dar click en esto. Consiguió conseguir la posición correcta. A mí me gustaría alinearlo. ¿ Ves esa línea rosa? Cómo está alineando la izquierda de la esquina de los techos se está alineando con eso. Eso es lindo. Agradable estar en una grilla así. Simplemente podrías encontrar el posicionamiento correcto. Entonces voy a hacer este símbolo, así que voy a acercar, seleccionarlo. Voy a hacer click derecho y hacer un símbolo Así que descubriremos por qué es tan útil tener eso como símbolo aquí en breve. Por lo que ahora que tenemos nuestra página principal diseñada, aún necesitamos hacer un menú de navegación. Pero vamos a mantenerlo un simple tres opciones aquí abajo sólo por el bien de hacer nuestro primer proyecto juntos y convertirlo en un diseño web más simple. Entonces vamos a necesitar crear múltiples tableros de arte ahora. Por lo que hemos estado en esta ventana de diseño todo este tiempo y pronto vamos a estar cruzando hacia prototipo, lo que requiere múltiples tableros de arte diferentes para poder enlazar y en realidad hacer de esto un verdadero marco de alambre vivo mucho. Entonces vamos a crear un nuevo tablero de arte. Entonces esto es crear y las nuevas opciones de tablero de arte por aquí a mi izquierda, simplemente va a hacer clic en él y va a agregar una nueva opción dondequiera que haga clic. Entonces va a seguir adelante y agregar esa opción, que no tiene el pie de página. Entonces quiero hacer ir adelante y arrastrarlo hacia abajo. Por lo que tiene el pie de página, por lo que esta será nuestra primera opción de sub página. Entonces lo que me gusta hacer es seleccionar todos mis elementos y copiar y pegar. O en mi caso, voy a mantener presionada la opción y arrastrar. Adelante y consigue esto disponible. Por lo que ahora podría hacer mis sub menús. Por lo que cuando haga clic en la opción uno, esta será la página web a la que acudirá. Será nuestra página de aterrizaje para nuestro primer enlace aquí abajo, una opción uno va a mantener la mayoría de estos elementos como la navegación superior y el pie todos seguirán igual. Pero no voy a necesitar estas opciones. ¿ Qué? ¿ Necesitas ya mi foto titular? Adelante y borra todo eso. Por lo que ahora necesitamos hacer una página de aterrizaje. Entonces pensemos en el diseño para esto. Entonces voy a dibujar una caja de rectángulo para ser el contenedor de una imagen que va a existir por aquí. Y me gustaría usar esa misma imagen. Adelante y retrocedamos y veamos si no podemos arrastrar eso aquí. Vayamos a descargar City de nuevo. No se puede encontrar ese mismo tipo varios arrastre que aquí adentro Así que no se puede hacer doble clic y hacer el recorte correcto. Y voy a hacer un encabezado aquí, así que no creo que vaya a necesitar nada de esa información, pero vamos a seguir adelante y copiar y pegar algún texto genérico. Hagamos todo este bloque de copia en esta caja. Es necesario resaltar todo eso y convertirlo en mi párrafo para mi fondo blanco. Y hagamos un por esto. Creo que las alineaciones de izquierda van a funcionar lo mejor. Entonces sigamos adelante y acerquemos, hagamos una alineación a la izquierda. Voy aquí abajo y sólo haciendo una alineación a la izquierda. De acuerdo, entonces ahora Vamos a conseguir un texto de encabezado. Bueno, entremos. Agarra nuestro tipo de herramienta algo en genérico Ir y resaltarlo y sacar nuestros estilos. Hagamos una H one. Hagámoslo amarillo Ahora podría arrastrar mi caja de límite para poder conseguir todo mi texto Así que titular irá aquí mismo. Entonces eso es un bastante grande así que casi me pregunto si podría hacer en h dos o si necesitamos algo entre eso Así que déjame hacer H uno quiero hacer h dos y hacer un poco más grande Vamos a hacer un en medio tamaño Va a ser bueno para sub páginas Vamos a hacer un 60 esto se convertirá en hh también. Entonces voy a hacer click derecho y agregar ese personaje a mis activos Esto ahora va a ser H dos y esto será hh tres. Es como que necesitabas eso entre el tamaño del encabezado Haz que esa edad también. Yo sólo voy a replicar Trae esa caja limitadora aquí arriba. Simplemente voy a replicar esta copia de párrafo. Por lo que tenemos un poco más con qué trabajar. Está bien. No necesitas bastante asqueroso e breaks, así que acabamos de llegar Ahí vamos. Entonces hay una especie de nuestra sub página Probablemente traiga eso mucho más alto. No tenemos una gran área blanca cuando vieron por primera vez la página Web. Porque recuerden, este pie no va a ser visible. Van a tener Van a ser cortados justo por aquí. Por lo que necesitamos pensar en eso cuando estamos haciendo nuestro diseño. Queremos asegurarnos de que sea adaptable. Entonces si un titular largo realmente tenido estuviera aquí, seguiría quedando bien, porque no sabes el tamaño que van a tener los faros cuando estás en modo concepto . Pero ella quiere poder hacer un diseño que sea flexible que pueda lidiar con titulares cortos y titulares largos porque podríamos hacer cosas que se vean bonitas. Pero podemos poner frases cortas y largas en esa caja y sigue funcionando porque simplemente no sé cuánto va a ser esta frase. Por lo que queremos poder hacer que funcione con múltiples titulares, sus titulares más largos, vamos a seguir adelante y adaptar esto y hacerlo un poco más corto de un dejar entre espaciado entre las líneas para que pudiera estar preparado para poner titulares más largos aquí si el cliente lo necesita, así que eso ya está preparado. Bien. Por lo que podría necesitar seguir adelante y hacer clic en esto y agregar ese personaje a mi activo, Hacer esa edad también. Y si tengo uno viejo que tiene ese espaciado diferente y no quiero que ese estilo de personaje justo a la derecha, haz clic y borra y ya se ha ido. De acuerdo, entonces ahora tenemos eso porque vamos a estar copiando y pegando esto para hacer todas las demás sub páginas. Entonces nos aseguramos de que sea correcto, para que cuando tengamos titulares más largos, no nos sentemos ahí y ajustemos el liderato cada vez. De acuerdo, entonces vamos a hacer nuestro primer prototipo donde vinculamos gran longitud y creamos nuestro primer tipo de marco de alambre interactivo. 7. Cuadrícula responsiva: por lo que las rejillas son increíblemente importantes cuando empezamos a desarrollar múltiples tablas de arte y adaptamos nuestro diseño una y otra vez y más de 20 tiempos diferentes antes de ir a ese paso ganaría son realmente asegurarnos de que la página principal y nuestra primera sub página son realmente perfectos en una línea a la grilla, por lo que hay un par de formas de hacer. Hay dos tipos diferentes de cuadrículas que puedes llamar y X'd, Y te voy a mostrar el atajo de teclado para que obtengas un comando de retención y hagas cotizaciones para sacar la cuadrícula más grande, y vas a querer seleccionar el tablero de arte. Antes de que hagas eso, los atajos van a seleccionar el tablero de arte y el nuevo comando y luego mi cita, y te va a dar una cuadrícula pequeña y típica que verás en la mayoría de los demás programas de adobe. Y esto es realmente genial para el diseño y el bloqueo. Tenemos un comando completo y volver a hacer las cotizaciones para que se vuelva a bajar, y así esto es muy útil para bloquear, Pero también hay algo realmente genial para grid responsive. Entonces hay una grilla receptiva, y para llamar a eso, es lo mismo pero vas a agregar turno. Vamos a hacer turno de mando y la negligee, la cotización. Se va a poder levantar la respuesta de grilla y te darás cuenta. Y su panel, su panel de propiedades. Tienes una nueva opción de cuadrícula una vez que recuperemos la cuadrícula para que puedas cambiar la cantidad de columnas . Entonces ahora mismo va a ser tu respuesta predeterminada 12 colum de grid. Pero también podrías cambiar el canalón látigo la columna con e incluso podrías ajustar los márgenes si cambias a la cuadrícula de la caja por aquí a la derecha y siempre puedes volver a la predeterminada o él puede hacer por defecto para que puedas aplicar el mismo dedo del pie de cuadrícula todos tus otros tableros de arte, así que no lo vamos a personalizar de manera significativa. Pero vamos a cambiar el color para que no se interponga en el camino de nosotros tratando de poder adaptarlo a la cuadrícula. Entonces solo voy a reducir un poquito la transparencia de mi gran. Segundo, ver un poco más mi diseño, y ahora vamos a empezar a adaptar algunos de estos elementos a nuestra cuadrícula. Vamos a empezar con elementos específicos y tipo de trabajo mi camino abajo algún zoom escolar y especie de alineado mi logo a tipo de donde creo que sería una buena colocación en la cuadrícula y usando mis guías inteligentes que me van a ayudar a encajar a ciertos puntos y luego usando, como, teclas en mi teclado, mis teclas arriba y abajo e izquierda y derecha para ajustar. Entonces tal vez podríamos hacer un pequeño icono de casa y algo así lo llevó hasta el final de esta columna aquí . Lo mismo con nuestras cajas. Podemos seguir adelante y agrupar estas cajas. Se lo va a deslizar, rechazando mis teclas del teclado para obtener un control muy agradable sobre cuánto se desliza agrupando ese elemento. Se quiere poder deslizarlo por encima. Podríamos ajustar la pantalla si quisiéramos ir más allá no tener márgenes tan amplios a la izquierda y a la derecha. De verdad depende de ti. Qué tipo de rejilla que te gustaría tener. Puedes ir a la parrilla y cambiar esas opciones de Magna. Se acabó la diapositiva y tienen igual columna con izquierda sobre a la derecha y la izquierda. Muy bien, así que ahora vamos a asegurarnos de que los logotipos de arriba de abajo sean línea. Entonces voy a seleccionar primero el superior y seleccionar objetos todo el camino hacia abajo, conteniendo envíos, conteniendo envíos, objetos relámpago para asegurarme de que todos ellos estén centrados. Algunos por aquí en mi panel de línea solo para hacer un centro de línea. Todos esos son de línea. Voy a acercarme y hacer algunos cambios aquí. Creo que esto sigue en la cuadrícula de repetición. Entonces si quería desbloquear esos y empezar a cambiarlos individualmente, puedo ¿Dónde puedo cambiar la columna con para hacerlos alinear? Está bien. Y tengo que seguir adelante y hacer clic derecho en esta repito grilla y en grupo lo. Entonces ahora se van a convertir en sus propios elementos. Entonces ahora voy a centrar estos elementos, el encabezado y los enlaces inferiores. Lo mismo con esto. Está manteniendo el turno hacia abajo, seleccionando ambos. Y ahora puedo alinear estos en la cuadrícula. Entonces tal vez quiero thes tal vez alineados al final de esta columna, y lo mismo va con esta columna ausente. Agradable espaciado. Entonces si estoy poniendo el final de la cola por ahí, así que tal vez ponga el final del final. Donde Puede que sólo necesite hacer una alineación central aquí y una alineación central aquí. Entonces ahora que todo está realmente termina como te gusta, podemos empezar a pensar en nuestro prototipado e iniciar dedo del pie enlazar algunas de nuestras páginas. Yo quiero ir por aquí para abastecer la grilla aquí muy rápido. Vamos a dar click en mi tablero de arte. Nombre el. Voy a hacer mi pequeño comando, que es Ven, hombre cita para sacar mi grilla. Pero quiero traer mi puente receptivo. Entonces voy a hacer ah, turno de mando, cotización Y tengo la misma arenilla aplicada. Siempre puedes cambiarlo a predeterminado. Entonces si lo cambiaste el 1er 1 y quieres aplicar, digamos que cambias las columnas cuando quieras usar esa, solo tienes que hacer click aquí y podrías hacer por defecto. Y siempre que, uh, recuerdes la cuadrícula en un nuevo tablero de arte, hará el que modificaste. Entonces si quieres hacer una cuadrícula de 10 columnas y usar eso para todo como predeterminado, puedes seguir adelante y adaptar esto. Ya que el pie de página inferior es exactamente el mismo. Simplemente voy a hacer clic derecho y agrupar este elemento y seguir adelante y deshacerme de éste. Entonces, ¿por qué reinventar la rueda? El tiempo va a mantener la opción y conseguir que Ponla de vuelta aquí. Cualquier cosa para ahorrar tiempo. Quiero asegurarme de poder subir aquí a mi configuración para poder ver la posición Y es 10. 66 no va a dar click en este grupo, y son 10 77. Entonces lo que voy a hacer es copiar esto. Por qué la colocación en esta página principal, y la voy a adaptar a la que acabo de arrastrar para conseguir una colocación perfecta de una a la otra. Entonces solo estoy pegando mi colocación y, cual fue empujada un poco. Por lo que presionas enter. Entonces ahora va a estar exactamente alineado el uno con el otro. Bajen mi foto. Podríamos arrastrar su foto hasta aquí a la columna para que se alinee bien Lo mismo con nuestra tipografía, quizá podríamos hacerlo al principio de una columna. Podríamos arrastrarlo aquí. Tenemos mucho espacio en blanco y déjame arrastrar esto por aquí, y también quería poner otra línea aquí algo. Agarra mi herramienta aquí. Creo que tenemos mucho espacio en blanco. Necesitamos tener algún tipo de elemento para dividir todo y simplemente entrar en mis activos, haciendo de eso un color y despegando cualquier frontera en mi anuncio por defecto. Está bien, tan genial. Voy a seguir adelante y alejar y apagar la cuadrícula. Y también me di cuenta de que quiero hacer la segunda parte superior. Entonces voy a seguir adelante, deshacerme de estos elementos. Vamos a conseguir esta parte superior Exactamente cómo nos gusta. Podemos agregar enlaces de knave un poco más tarde, pero solo estoy haciendo un sitio web realmente simple al principio, sin demasiadas longitudes para mostrarte cómo funciona el prototipado de protesta. Vamos a mandar ese sistema al revés y estratificación que estoy sosteniendo ahora. Comando soporte izquierdo sosteniéndolo. Creo que tenemos una imagen de héroe. Por eso esto no es perfecto. Entonces vamos a seguir adelante y apagar son grilla receptiva. Voy a mantener pulsado el mando y luego cambiar y luego la comilla para que desaparezcan . Pero vas a necesitar seleccionar ambos de tus tableros de arte si tienes un ambos puestos. Entonces sólo voy a hacer turno de mando y rotación. Ahora ambos están apagados, y estamos listos para empezar a hacer prototipos y enlazar nuestra primera semana. 8. Prototipos: Voy a mover un poco mi tablero de arte a la derecha sólo para poder ver las conexiones un poco mejor. Ahora, he estado en modo diseño todo este tiempo, pero cambiemos al modo prototipo. Creo que estamos listos. Vamos a empezar a vincular algunos de estos hacia arriba, voy a hacer clic de distancia en mis paneles de activos. Puedo tener todo esto disponible. Entonces lo que quiero hacer es así como voy a vincular las cosas. Entonces cuando haga una vista previa en vivo y haga clic aquí para hacer vista previa de escritorio, podré interactuar con el sitio Web. Entonces lo primero que queremos enlazar es nuestra primera sub página, que podría ser la opción uno. Entonces voy a bajar el zoom aquí y te darás cuenta de que ves una pequeña tecla de flecha. Es así como vamos a ser capaces de vincularlo. Vamos a hacer clic en esta tecla de flecha en todo este cuadro cuando se haga clic en eso, donde hacer clic aquí abajo y hacer tap, que es básicamente un clip, Un clic y un arrastre es cuando arrastras con el ratón o con el dedo, y vamos a hacer una transición justa. Entonces va a cambiar de este a otro verde. Margaret, eliges un tablero de arte que vamos a elegir, el único que tenemos disponible, y te das cuenta de cómo lo vincula todo automáticamente. Y vamos a una animación que podríamos hacer, disolver. Podemos hacer que se deslice a las risas, luz a la derecha. Hagamos un tobogán a la izquierda para que pueda venir a mostrarte cómo se ve eso. Podrías cambiar la duración y hacer que se vea realmente elegante haciendo una duración más larga. Entonces tal vez pruebe un 0.8 y vea si eso no es demasiado lento o demasiado rápido. Y de eso se trata. Podríamos hacer en facilidad fuera. Ahí hay un par de diferentes. Podrías jugar con un par de estos aires nuevos dentro del último mes o dos con los que puedes experimentar. De acuerdo, entonces tenemos eso vinculado. Entonces ahora si vamos a vista previa en vivo o vamos a nuestra vista previa, esta es la vista previa de un sitio web que nos desplazamos hacia abajo. Eso está vinculado por lo que hacemos click a eso se va a deslizar hacia la izquierda, y luego nuestro sub tipo de página está disponible. Entonces, ¿ahora qué hacemos? Estamos atascados. Tenemos un bucle cerrado. Tenemos que hacer de esto un bucle abierto que vuelva a bucles de vuelta a la página principal. Por lo que queremos que este pequeño símbolo se pueda hacer clic de regreso a casa. Vamos a crear otro enlace. Entonces vamos a bajar a nuestra página principal. Queremos vincular esto de vuelta a casa. Entonces, ¿ves esta pequeña línea? Voy a hacer clic y mantener pulsado. Ve él y haz clic en eso de nuevo en cualquier parte de esta pizarra de arte. Haga clic atrás. Vamos a hacer de eso un grifo, que es un click. Voy a hacer de ella una transición. Uh, vuelve a nuestro 1er 1 Y aquí es cuando es agradable nombrar a tu tablero de arte, para que no te confundas. Entonces llamaría a esa casa, y vamos a hacer una diapositiva a la derecha. Entonces en lugar de deslizarse a la izquierda, se deslizará. Correcto. Por lo que parece que es dinámico en él recuerda automáticamente nuestra configuración, lo cual es fantástico. Por lo que ahora tenemos dos enlaces. Tenemos un enlace aquí y un enlace aquí. Adelante. Mira, todos sus enlaces van a rápidamente solo hacer doble clic en esto y teclear esto como casa y teclear esto como opción uno. Justo así cuando empiezo a vincularlo. Tengo nombres en contraposición a números aleatorios. Genial. Entonces vamos a previsualizar y ver nuestros enlaces y acción. Basta con dar click en la opción uno. Igual que eso. Tuvo esa bonita transición. Yo quiero volver a casa. Voy a dar click y podrás volver a casa. Y sí creo que esa demora es un poco demasiado escalonada. Se ve un poco torpe. Entonces si quiero editar una conexión en particular, eso es bueno. Haga clic en la conexión. Haga doble clic en él o simplemente rápido a la vez. Van a cambiarlo de nuevo a tal vez un 0.4. Cortarlo por la mitad. De acuerdo, voy a volver aquí y a cortarlo a la mitad, también. Por lo que ahora eso retrocedería vista previa del dedo del pie. Podríamos probarlo. Entonces veamos cómo nos gusta la transición. Es click. Se va a deslizar. Eso es un poco más rápido. Eran rápidos de vuelta a casa. Aquí vamos. Entonces ahí vamos. Ya tenemos una especie de marco de alambre de trabajo en vivo, que es tan genial esto tardaría tanto en hacerlo hace apenas un par de años. Y ahora mira lo rápido que pudimos hacer eso. Entonces la próxima vez que vamos a hacer un par de opciones más, vamos a hacer clic en todas esas juntas, y luego vamos a empezar a hacer otro proyecto después de eso. Así que vamos a hacer un par más de sub páginas y enlazar esas realmente rápido para que podamos tener una mejor comprensión de los prototipos y trabajar con múltiples tableros de arte. Entonces voy a crear un par de nuevos tableros de arte. Voy a ir justo aquí a este ícono y hacer un par de nuevos tableros de arte. Así que solo voy a dar clic justo debajo y luego volver a hacer clic y solo voy a deslizar estos justo por encima para que pudiera estar justo debajo de mis menús de sub página. Y eventualmente, cuando tienes 20 a 30 de las de estas cosas, necesitas crear tipo de flujo de usuario. Entonces vas a hacer que un usuario haga clic en una opción en particular, y eso entra en esta sub página, y luego los tendrás recorriendo algún tipo de embudo para llegar a cualquier meta final en la que necesiten estar. Por lo que esto eventualmente se verá igual que un mapa, y verás el flujo de usuarios que se recoge de tus personas de usuario. Podrás desarrollar si estás haciendo algo de diseño UX así que solo vamos a tipo de copiar y pegar son sub página y poder sacar algunas de esas fotos. Y así solo estoy acercando aquí y solo voy a mantener presionada la opción y arrastrar. Esperemos que esto pudiera chasquear a la ubicación correcta. Entonces notaste que pude arrastrarlo hacia abajo, pero todo debajo del pliegue, no es visible. Entonces voy a seguir adelante y seleccionar mi tablero de arte arriba y bajar para asegurarme de que esté en vertical, y sólo voy a desplazarme hasta el fondo. Yo voy a hacer lo mismo. Voy a seguir adelante y mantener presionada la opción Arrastra esto, asegúrate de que encaje dos puntos. Entonces tiene las mismas dimensiones o mismas colocaciones en el tablero de arte, y parece que necesito ir dar click en mi tablero de arte y bajar a vertical y solo asegurarme de que tengo todo debajo del pliegue, que sería nuestro pie de página. Entonces aquí están nuestras tres opciones diferentes. Siempre podemos arrastrar un poco nuestro tablero de arte para darles el mismo espacio entre los tableros de arte, lo cual podría ser útil cuando tengas muchas de estas cosas. Y así vamos a seguir adelante e intercambiar nuestras fotos. Entonces déjame ir a las descargas e intercambiar algunas de estas fotos con las obras de fábrica. Podría arrastrar esa y arrastrar ésta hacia adentro. Adelante y doble click para que pueda conseguir un mejor recorte. Está bien, esa está recortada. Ese se recortó bastante bien, y ahora estamos listos para enlazar estos. Por supuesto, todo el contenido terminará por necesitar ser cambiado. Así que vamos y la longitud se aliente en el modo prototipo. Así que acabo de cambiar al prototipo, y vamos a enlazar estos hacia arriba así opción para hacer clic y arrastrar hacia abajo. Eso va a enlazar la segunda página toothy y está memorizado configuración de Oliver para que no tengamos que cambiar eso, y vamos a subir arriba al 3er 1 y enlazar eso hacia abajo. Entonces si alguna vez quieres ver toda tu conexión vinculada, sigue adelante y selecciona el nombre superior del arte. Borden no pudo mostrarte todas las conexiones de cada una, y también necesitamos conectar ese hogar. Vuelvo a la página principal, así que sigamos adelante y vayamos a cada ícono. Asegúrate de que solo estamos seleccionando el ícono y vinculándolo de nuevo y vinculándolo de nuevo. Una última, lo vamos a vincular atrás, y ahora tenemos un círculo abierto donde concisan a Eichel y vuelven a la página principal de cada uno. Iremos y seleccionaremos por todos nuestros tableros y pudimos ver todas las conexiones que tenemos. Entonces ahora vamos a subir a la opción de vista previa y vamos a comprobarlo. Déjenme hacer esto más pequeño para que puedan verlo chicos. Así que consigue un click en la opción uno. Por supuesto, podríamos desplazarnos hacia abajo ahora, debajo del pliegue, haciendo clic en la opción uno. Eso lo tenemos por venir. Podemos volver a la página principal, click en Opción dos volver a la página principal e ir a la Opción tres. Y podríamos volver a la página principal para que puedas hacer esto más elaborado. Pero esto es sólo una especie de gran iniciador diseñado para acostumbrarte a la creación de prototipos. Y vamos a hacer prototipado mucho más complejo y vamos a poder hacer animaciones en el próximo proyecto Lo hacemos, que será una aplicación Web, concepto y yo quería repasar una cosa más antes de pasar a la más compleja proyecto. Y esos son tus símbolos. Por lo que creamos este símbolo con una siguiente E. No lo trajimos como símbolo ni lo trajimos como foto. Este es un objeto herbario de edición en vivo, así que en realidad puedo ir a esto. Ahbd son el símbolo. Haga doble clic en mi símbolo, y podré editar el símbolo en cualquier cambio que haga al símbolo o global. Entonces si cambio este símbolo a, digamos amarillo, te darás cuenta de que todos ellos en cada página se cambia a amarillo. Entonces eso es lo maravilloso de asignar símbolos es su global. Entonces me gusta el amarillo. Se ve realmente bonito. Puedo entrar con la herramienta pin y editarla más allá y haré todos los cambios en todos estos. que no tengas que sentarte ahí y copiar y pegar la casa cambiada a la siguiente tabla de arte . Todo es global. Entonces esto es todo. ¿ Esto hay un pequeño tipo de diseño Web? Se nos ocurrió una pantalla muy, muy, muy simple. Tres sencillos enlaces ni siquiera estaban haciendo una barra de aplicaciones, pero te mostraré cómo hacer animaciones y pullouts, menús de hamburguesas y todo eso en el próximo uh, proyecto, que será un desarrollo de aplicación Web cuando hablemos sobre el branding y han incorporado eso en especie de experiencia de usuario para un flujo de usuario que toma de nuevo un registro de usuario y los lleva a su destino final. 9. Comparte y repasar y: Entonces, ¿cómo presumo mi diseño? Aquí arriba hay una opción que se llama Compartir en cuclillas. Haga clic en compartir y hay un par de opciones que siempre podemos subir a archivar y exportar. Y podemos exportar las tablas de arte como un J. Packer, PNG o un PDF. Y podemos tener que ser múltiples páginas pdf. Entonces esto es genial si todavía estás en el tipo de la etapa de prototipado y necesitas dedo del pie, haz que un cliente marque un pdf. Esto es perfecto para ellos. Pero si quieres tener ese tipo de interacción en vivo, clicable, irás por aquí y nosotros sí publicaremos prototipo y podrás hacerlo. Hay un par de opciones diferentes, pero vamos a crear un enlace público, así que va a tomar tiempo crear una U R L que luego podamos enviar junto a otras personas. Ahora tenemos un enlace público. Podemos subir aquí hasta el ícono de Enlace. Tenemos nuestro enlace copiado a nuestro y luego podemos copiar y pegar eso en nuestro navegador, y se va a poder cargar están funcionando prototipo. Entonces ahora notarás que todo funciona exactamente como lo hace cuando estamos dentro de X T. Pero ahora estamos en un navegador, y así cualquiera puede ver lo que vemos en la sección de vista previa de X'd, y también podrías hacer comentarios. Vuelves por el cliente u otras personas con las que estás trabajando, y hay otra opción que te va a mostrar. Puedes hacer clic atrás en compartir y bajar a enchufar las especificaciones de diseño publicadas. Y así vamos a hacer esto y va a poder exportar todos nuestros diferentes ajustes para nuestro personaje. Los estilos son símbolos y colores, lo cual sería genial para compartir con el desarrollador que necesita conocer los códigos hex que necesitan, quien necesita saber sobre el dimensionamiento de la tipografía y tener algunos de los símbolos. Entonces eso es exportar Ahora, una vez que eso termine de exportar, hará lo mismo, copiará ese enlace y lo pegará en un navegador. De acuerdo, aquí está el enlace. Se copia el enlace. Adelante y probémoslo. Por lo que esto podría ser un poco diferente a la última. Va a poder mostrar nuestros enlaces. ¿ Quién podría volver a todas las pantallas? Va a mostrar al desarrollador cómo queremos que su usuario haga clic y fluya a través de todo. Entonces si este fuera un sitio web completo, podría haber 30 o 40 tableros de arte diferentes, pero podrán ver el flujo del usuario y cómo se supone que eso está vinculado. También puedes hacer click en los individuales, y tenemos todos los colores específicos y en realidad puedes hacer click en una copia el código hexadecimal . Por lo que esto es perfecto para un desarrollador que solo quiere dedo del pie. Ten todas tus especificaciones listas para usar. Muestra toda la tipografía que utiliza la tipografía y cualquier tipo de interacciones en las que mostrará especie de diapositiva y flexibilización. Les va a hacer saber todo lo que necesitan saber. Y también hacen clic aquí y hacen comentarios también. Entonces esto resulta muy útil cuando estás trabajando con ese desarrollador o si tú, tú eres el que va a estar desarrollando esto para convertirlo en una respuesta de realidad real. Dimensionamiento Obree. Esta es una gran adición a Adobe X'd. Ahora soy capaz de cambiar el tamaño de mi tablero de arte a un iPhone pequeño, por ejemplo, y ver cómo nos vemos en el móvil. Esto es muy importante para los desarrolladores y para que los clientes vean cómo las cosas se adaptan a tamaños más pequeños . Entonces sigamos adelante y creemos un nuevo tablero de arte. Ir clicado, crear nuevo tablero de arte y vamos a hacer un tablero de arte iPhone X. Arrastremos eso un poco más cerca de su página principal. Vamos a adaptar primero la página principal. Vamos a seguir adelante y seleccionar por todos los elementos en casa, y vamos a hacer un par de cosas primero antes de copiarlo y pegarlo ahí abajo para que podamos seleccionar por todos los elementos. Y si lo reducimos, automáticamente empezará a redimensionar todo para nosotros. Entonces vemos cómo se rediseñó la industria colapsa cuando la hago un poco más pequeña y todo está funcionando bastante bien. El aire de las tres cajas principales no se derrumba. Cómo nos gusta y eso está bien, redimensionamiento sensible, que tengo justo aquí a la derecha. Es dedo del pie en. Es bastante bueno, pero no es perfecto. Funcionará alrededor del 80% del tiempo, y siguen trabajando en esa característica y mejorando cada vez. Pero por ahora mismo se puede modificar principalmente cómo colapsan las cosas. Por lo que si pasas a tu respuesta de redimensionar después de seleccionar estas tres cajas puedes desclip bond fix con. Y así cuando hagas estos más pequeños, el con ahora será receptivo cuando lo reduzcas. Si haces clic en el azul de Bennett Highlights, eso significa que el ancho se arreglará a medida que lo redimensiones hacia abajo. Lo mismo para el gravamen de alta definición. Haga clic con una altura. Tanto el ancho como la altura se ajustarán a medida que lo bajen y serán cajas más pequeñas . Por lo que ahora podría traer algunos elementos uno por uno especie de adentro y ver cómo se derrumba. Podríamos destacar todo y hacer una copia e intentar redimensionarlo a ese tamaño muy pequeño . Pero el redimensionamiento sensible no es perfecto. No se va a ver al 100% así que vamos a tener que retocar las cosas de salud responder. Por lo que puede que tengamos que agrupar el pie de página juntos, agruparlo y pasar a redimensionar sensible. Y en lugar de tener en auto, puede que tengamos que cambiarlo donde tal vez el ancho sea fijo. Entonces cuando lo reduzcamos, el látigo se va a arreglar en lugar de no ser arreglado. Entonces tipo de prueba cómo reaccionan estos. Entonces cuando lo haces bajarlo y tiene el mejor tipo de combinación de colapsar y volverse receptivo, así que auto fue genial, pero juega con manual y ve cómo colapsan y ve cómo quieres que colapse en el móvil. No va a funcionar a la perfección, pero es un gran tipo para al menos empezar. Por lo que no tienes que redimensionarlo para cada talla manualmente y tipo de hacer algunas cosas automáticas . Entonces me gustó mucho cómo funciona esta porción superior. Entonces solo voy a copiar y pegar mi imagen de héroe top y mi encabezado y ahora lejos y me gusta como se derrumbó eso. 10. Diseño de aplicaciones móviles: configuración y Ux/Ui: Entonces ahora vamos a pasar por todo un desarrollo de diseño de aplicaciones y estás viendo justo aquí un poco de una marca que armé rápidamente, y podrías reconocer los iconos si has tomado clases anteriores o lecciones conmigo. Desarrollamos estos iconos todos en Adobe Illustrator, que es donde me reuní ahora. Entonces esta es la tipográfica original con la que empecé a trabajar, que es , como de Sands Black, y decidí redondear las esquinas para darle un tipo de apariencia más suave, juvenil y tipo de agregado este color diferente a indicar tal vez el centavo en la app de buceo. Entonces, ¿cuál es la app? Es para jóvenes millennials que están queriendo tener una aplicación de presupuestos muy simple. Entonces se llama Dime, y yo quería tener una tipografía muy simple que sea redondeada. Eso es grueso. Ese es Bolden. Eso simple porque toda la idea de la APP es tu dinero hecho simple, que es el tipo de eslogan, Así que todo va a ser simple en cuanto a nuestro diseño. Va a ser un buen flujo de usuario, muy fácil de usar. No es complicado. No abruma con mucha publicidad, tampoco, tampoco, así que también desarrollé un par de tipo de mallas radiantes aquí para quizá use elementos de fondo en nuestro diseño de APP. No estoy seguro de usar, pero desarrollé, um, para tener esos activos listos. Entonces algunas cosas que vamos a hacer vamos a pasar X'd y vamos a agarrar un par de estos colores y empezar a configurar algunos activos. Entonces cuando empezamos a diseñar, no tenemos que pensar mucho en estas cosas. Ya está cargado en X'd. Entonces empecemos a traer estos colores. Y así solo estoy seleccionando este primer color verde menta más claro y obtengo una copia de mi código hexadecimal y póngalo en X'd. Déjame hacerlo, Phil. Y ahora podría hacer click derecho adelante, quitar borde off click derecho y agregar color a los activos con el fin de hacer lo mismo con un poco de un color verde más oscuro o el verde azul. Supongo que sería poppin X'd. Va a crear una caja, asegurarme de que no haya pop de frontera en nuestro relleno haga clic derecho y agregue activos de colores, y ahora mis activos están cargados. Ya no necesito ninguno de estos objetos, así que se va a deshacer de eso. También traigamos a nuestro tipo de personaje. Entonces solo voy a escribir algunos genéricos. Sería una fuente de encabezado. No voy a hacer esto a partir de Sands. Entonces, Ese O Sands, Ok. Y voy a seguir adelante y añadir eso a mis estilos de personaje. Entonces voy a seguir adelante y seleccionar con terapia, ¿verdad? Haga clic y agregue activos de dedo del carácter y para que pueda agregar diferentes tamaños. Cuando empezamos, desarrollamos la app y nos hacemos una idea de tipo, podemos seguir agregando activos. Entonces ahora estamos un poco listos para empezar. Sólo hay una cosa más que necesito traer. Entonces vamos a entrar. El ilustrador. Yo quiero traer algunos de estos gráficos. Entonces lo que voy a hacer es que soy ilustrador. Simplemente voy a armar unos tableros de arte muy rápido para poder exportar esos es P y G's y tener esos activos disponibles. También voy a agarrar mi logo a, y no tendré un PNG transparente cuando traiga esos en dos adobe. Está bien. Y podemos traer esos también si quisiéramos. Entonces si quisiera tener ese ícono y también estos pequeños iconos, podría traer esos. Cuando esté listo, probablemente vamos a querer hacer uno que sea blanco también. Entonces voy a volver a entrar y añadir revertir estos hacia fuera. Déjame ver si no puedo hacer todo ese blanco y luego hacer uno este color y el otro pequeño punto del yo sería el color verde. Por lo que ahora otros serán blancos sobre un fondo transparente. Déjame solo exportar. Hagamos esto todo tipo de talla. Creemos que vamos a terminar usándolo en Guardaremos estos en nuestros símbolos. De acuerdo, Así que solo voy a hacer click derecho, click derecho y solo hacer cada uno. De acuerdo, entonces ahora tengo mi símbolo. Voy a hacer esto blanco. Esto se llamará Azul, y esto se llamaría Verde. Y una vez que hagamos todo este tipo de trabajo de fondo, cuando empecemos a diseñar, va a ir súper rápido. Entonces como puedes ver, creé un nuevo tableros de arte. Podría ser el iPhone 678 Sólo una especie de tener un poco de un tamaño más pequeño, más prominente por ahí está el iPhone. X sigue siendo una especie de salir por ahí. Así que pensé que diseñé para este tamaño y luego tipo de hacer algunos redimensionamiento responsive y mostrar cómo se vería en el iPhone X y otros tamaños y un androide Phillips primero comienzan con especie de algún bloqueo básico. Tenemos que empezar a pensar ahora en la experiencia del usuario y el flujo del usuario. Y así mientras estoy desarrollando esta marca, estoy pensando en la persona del usuario y aquí es donde nos sentamos. Aléjate un poco de ti, yo, que es interfaz de usuario, y empezamos a entrar en U X, que es experiencia de usuario. Entonces ahora estamos pensando en el flujo de usuarios y cómo se sienten y lo fácil que es usar el producto a medida que pasan por tipo de embudo o el tipo de experiencia ahí queriendo salir de la aplicación, que sería una aplicación de presupuestación. Entonces, ¿qué tan fácil es, es usar el? ¿ Podemos eliminar las áreas problemáticas? ¿ Podemos eliminar áreas de frustración que puedan desalentar a alguien? ¿ Podemos ofrecer grandes insights de inmediato para que puedan sentir que la aplicación realmente les está dando lo que quieren, que es una versión muy simplificada de una aplicación de presupuestos. Entonces cuando pensamos en el flujo del pie del usuario Pensamos en nuestro bebé. Nuestra primera vamos a desarrollar unas cuantas personas rápidas No vamos a entrar demasiado en ti. X fueron para enfocar un poco más en el lado u I en este proyecto en particular. Pero vamos a tener dos tipos diferentes de porcentajes de usuario. El hombre iba a ser joven es tener 25 años. Va a estar bien educado. Él realmente quiere una aplicación muy simple, fácil de usar. Su profesional, Está ocupado. No tiene tiempo para meterse. Quiere una simplificación de una app. También tenemos una mujer de 28 años que es madre de dos hijos. Ella también no tiene mucho tiempo. Por lo que ambas personas comparten un tema común, que no es mucho tiempo. Por lo que necesitamos capturarlos rápidamente con información que sea relevante para lo que están buscando. Entonces vamos a seguir adelante y desarrollar nuestro tipo de página splash log in page como quieras llamarla, porque cuando abres la app por primera vez la mitad del log y tienes que tener una cuenta tener esta app. Por lo que la página de inicio de sesión será nuestra primera página de inicio. Y luego vamos a tener a los usuarios que van a estar en esta página, y ahí es cuando vamos a tener dos tipos diferentes de flujos de usuario. Entonces el 1% del varón va a ir en un sentido, y la mujer va a ir tal vez de maneras diferentes. Tenemos dos tipos diferentes de flujos de usuario en este prototipos en particular. 11. Diseño de aplicaciones móviles: creación de casa: Así que ya hice un par de activos que pensé que harían un buen tipo de página de inicio de sesión de usuario colorido . Y así tengo estos dos activos. Ambos son radiantes. Mallas de mensaje. Creé un ilustrador de adobe, así que solo voy a estar re dimensionando esto hacia abajo. Y lo que podría hacer es crear un contenedor. Si quiero que esto ocupe toda la pantalla de la app, solo podría crear un contenedor de color, seguir adelante y quitar nuestra frontera, y podríamos su dragón en eso haría mucho más fácil redimensionar. Podemos duplicar, hacer clic y ser capaces de arrastrar esto a colores particulares que creemos que se verían geniales. Entonces ahora vamos a necesitar son dos usuarios. Entonces salgamos a buscar algunos círculos. Tenemos dos usuarios diferentes a los que puedes iniciar sesión. A lo mejor son marido y mujer, y así tendrán la APP, y podrías tener múltiples usuarios teniendo múltiples presupuestos dependiendo de tu familia. Por lo que esta podría ser una aplicación familiar en la que se te anime a tener el mismo tipo de cuenta, y puedes iniciar sesión con diferentes perfiles al igual que Netflix, donde tienes una cuenta. Contamos con diferentes perfiles y puedes iniciar sesión como familia. Y luego también hay un área conjunta donde se puede ver como finanzas conjuntas. Por lo que es una especie de forma realmente genial para las parejas jóvenes casadas tener una espera simplificada un presupuesto y trabajar en equipo. Por lo tanto, sube a diferentes Loggins. Uno para el esposo, uno para la esposa o dos personas diferentes. Y así vamos a conseguir que un joven iba a ir a descargas. Entonces aquí hay algunos tiros a la cabeza podría averiguar a quién pienso con mejor ajuste. Tipo de nuestra persona de usuario eran una especie de pensar en un chico joven. Podría ser éste, pero parece que está en sus 30. Entonces vamos a agarrar a este tipo. Lo vamos a dejar adentro. Voy a aguantar opción para mantener ese mismo tamaño. Voy a arrastrar a nuestra esposa aquí mismo, joven. Vamos a hacer doble clic y cortar de redimensionar. Estos disparos en la cabeza se acercan un poco alrededor de la cabeza. Entonces ahora mismo tengo una especie de frontera delgada aquí. Déjame ver si no puedo hacer que eso sea un poco más ligero zoom ins y especie de Ver, esto es cuando realmente consigues un zoom y averigua qué nos gusta. Por lo que podría hacer una sombra de gota aquí para estos Loggins, así que solo podría destacar ambos. Y durante una pequeña sombra de gota, tendríamos nuestro logotipo en la pantalla de inicio de sesión. Eso es bastante importante, sin embargo versión blanca. Esto es cuando se ponen a prueba cosas diferentes. Entonces me estoy dando cuenta, Oh, podría necesitar agarrar uno con el verde claro para ir con este tipo de esto se está mezclando demasiado. Entonces déjame agarrar mi otra versión. Entonces tengo mi otra versión aquí que usa el verde más claro para que eso saldrá un poco mejor. También puedo agregar quizás una sombra de gota a esto también, y vamos a necesitar tener alguna información de inicio de sesión. Por supuesto tenemos sus nombres. En lugar de sólo tener a una especie de gente sin nombre flotando por aquí, agarremos nuestra herramienta tipo. Podríamos empezar a definir un poco nuestro tipo, por lo que esto será tendrá que llegar a un nombre falso. Sólo le nombrará Bob. Sólo tendremos un apellido genérico para Bob M. Y esta es nuestra cara apretada de arena azo, que está en nuestros estilos de personajes. Pero sí vamos a tener uno que también es blanco. Entonces sigamos adelante y definamos nuestro tipo. Iba a ir Agarra esa herramienta de flecha. Traiga eso. Casi me pregunto si podemos hacer eso verde cuando tomas la herramienta cuentagotas de muestra o poco color verde. Y también quiero añadir ese verde verde de aquí. Tan solo toma una herramienta cuadrada y vamos a tomar la herramienta cuentagotas. Voy a llenar ese verde. Podríamos traer nuestro color de esta manera. Necesito traer ese tercer color verde. Entonces hagamos de eso un activo de color. Entonces ahí vamos. Ahora tenemos tres tonos verdes con los que trabajar. Volvamos a White y entonces tal vez solo hagamos el nombre de pila Verde. Y en realidad no me está gustando el como de Sands como minúsculas. Entonces lo que voy a hacer es experimentar con tal vez una elección de tipo secundaria que sea más delgada. Entonces tal vez solo ve con Helvetica solo por el bien de tener algo realmente sencillo. Adelante y llene su apellido. Entonces vamos a hacer un audaz Vale, sólo tenemos sólo audaz. Entonces me pregunto si Helvetica nuevo infierno la tika ¿ves si tengo una mayor cantidad de pesos? Sí. Por lo que Helvetica nueva tengo un poco más diferentes opciones de peso. Entonces me voy a ir negro y luego podemos ir ultra ligero con el apellido todavía Helvetica Nuevo do ultra ligero. Pero eso está bien demasiado delgado. Entonces hagámoslo delgada, Vea cómo funciona eso. Entonces una vez que estoy un poco contento con eso, podría aguantar, opción y arrastrar y hacer la suya. Y vamos a seguir adelante y agregar esto a nuestros estilos de personaje va a agregar los activos del dedo del pie del estilo del personaje , por lo que va a sumar todos estos pesos diferentes. Por lo que agregó a Bob como un estilo de personaje y a Smith como otro. Entonces voy a necesitar renombrar el. Entonces voy a renombrar estos muy rápidamente para poder definir qué estilo de personaje es cuál era capaz de tipo de nombre. Todos mis activos simplemente me hacen más fácil recordarlos y recordarlos. Por lo que también queremos que este apus sea simple es posible. Algunos estaban diseñando que lo estamos teniendo en cuenta. Por lo que queremos hacerles saber solo algunas otras cosas, que es esto una pantalla de inicio de sesión, por lo que tiene sentido que hagan clic en tu perfil de usuario. Pero a veces solo necesitas tener un tipo visual de guía para eso. Entonces vamos a enviar a estos tipos abajo o podemos enviarlos arriba. Esto es que vamos a jugar un poco con el espaciado. Podríamos romper nuestra grilla para que yo pudiera hacer comando y la cotización para subir nuestra grilla . Necesito seleccionar mi tablero de arte. Primer Comando incluyen ation, y eso nos ayudará. O puedo cambiar en mi cuadrícula receptiva haciendo cambio de comando en el trabajo de cotización para que eso nos pudiera ayudar a un tipo de tamaño de las cosas un poco. Y estoy jugando ahora mismo con diferentes formas de decir iniciar sesión porque inicia sesión. No es realmente de mi persona de usuario. Durante mucho tiempo en su antiguo tipo de término arcaico, Wesley usa algo un poco más suave y amigable, así que estoy haciendo la minúscula negrita. Pero también estoy diciendo que abierto porque eso es lo que queremos hacer es abrir la app y así no queremos que la app abierta sea tan grande que no se den cuenta de que tienen que hacer click en su sesión de fotos. Por lo que vamos a decir dar click en el perfil para cargar tus presupuestos aduaneros en verde. De acuerdo, Voy a hacer eso mucho más pequeño Steuer blanco claro y vamos a hacer una alineación central. Entonces quiero asegurarme de que haya mucho espacio para respirar y espacio en blanco con esto, incluso podríamos tener diamante en la parte inferior. Aquí es donde acabamos de obtener un experimento con lo que creemos que se vería bien. Podríamos hacer otro bar aquí porque yo sólo realmente quiero tener algún contraste con este deseo. Haga clic fuera del borde. Simplemente tenemos un rellenos haciendo un comando corchete izquierdo. Tipo de enviarlo hacia atrás y sistema de estratificación. Podría jugar con diferentes colores. Hacemos nuestra codicia, color va a tener un bar para ayudar a separar este gran espacio abierto. Y tal vez podríamos tener una flecha pequeña que se acopla hacia abajo. Entonces vamos a seguir adelante y crear un poco simple o activo que va a ser un estrecho, Así que voy a conseguir mi pequeña herramienta de alfiler. Yo sólo voy a dibujar un simple cero, y voy a hacer que eso le quite la frontera o realmente sí quiero la frontera. Hagámoslo un poco más grueso. Y vamos a hacer algunos bordes redondos a nuestras pequeñas líneas. Entonces ahora son bonitos y redondeados. Hagamos que pudiéramos hacer que cualquiera de estos colores. De acuerdo, entonces hay una pequeña flecha. A lo mejor que sea cuatro en lugar de tres. O podríamos tenerlo aquí en el blanco. Voy a reelaborar este elogio, y luego vamos a hacer nuestra primera animación, así que mantente atentos. 12. Diseño de aplicaciones móviles: animación de la página de inicio: Por lo que quiero jugar con contraste, realmente tener algo detrás de las imágenes de perfil. Por lo que el espectador realmente incide en esas imágenes de perfil, y ahí es cuando crezco. Pop bajó un poco el cuadro gris, por lo que intersex y realmente dibuja la mirada hacia el centro de la pantalla. Que es exactamente lo que quiero que el usuario vea primero. Entonces si este texto realmente pequeño, no es grande y abrumador, es muy suave. ¿ Quién abre hoy la app? Tiene una flecha que apunta a la derecha a los dos perfiles de usuario. También agregué un get lento que tu cuerpo hizo simple. Eso probablemente será un requisito por parte del cliente. Y también probablemente haya tal vez alguna información de derechos de autor que voy a necesitar poner aquí también. Entonces hago eso más pequeño. A lo mejor 10. Ah, está actualizado. Está bien, entonces tenemos esa pequeña información que probablemente será algo que debemos considerar . Eso sería un requisito. Entonces creo que esto es bonito y sencillo. No creo que quisiera ser más complejo que esto. Déjame jugar con la herramienta de pin aquí. Tan solo asegúrate de tener esto de la forma correcta. A mí me gusta. Podrías hacer eso suave. Podría hacer tal vez uno de sus suaves que No, es un poco aseado. Ese tipo de como una bonita interfaz sencilla. Tratemos de no ser demasiado complejos con esto. De acuerdo, dejemos eso en paz. Tenemos una especie de tener nuestra primera página, y así que vamos a hacer un poco de animación. Entonces lo vamos a hacer en animación para que cuando pases por encima o cuando haces clic en el usuario, como que salga un poco hacia adelante. Entonces cortas y tienes un poco de esa interacción. Por lo que no es sólo una portada rancia, estática. Entonces vamos a seguir adelante y crear otro nuestro tablero justo al lado, y esto podría incluso estar encima. Ya que estamos haciendo una animación. Cuando hago el flujo de usuario, cuando hago animaciones, me gustaría apilar. Y cuando dio progresión hacia meta final horno corte, le gusta ir a la derecha. Por lo que esto sólo será una animación. Eso está bien. Y cuando el usuario empuja hacia el siguiente paso, me gusta ir más allá a la derecha. Esto era una especie de mapa como elegido, pero se podía hacer. Maneras especiales propias. Uno, copia esto. Bajen todo eso. Y aquí es donde va a pasar la animación. Nos vamos a asegurar que esto sea una copia exacta, y todo esté en la misma posición, así que voy a cambiar esto muy ligeramente. Entonces, ¿así va a funcionar la animación? Voy a tener. Esta es la primera parte de la animación, y esta es la segunda pantalla de la animación. Entonces aquí abajo, voy a cambiar lo que quiero cambiar. Entonces voy a tener que este sea el estado final de la animación. Entonces quiero que sea un poco más grande, y quiero que sea nuestro top. Entonces va a ser el 1er 1 que va a ser seleccionado, así que quizás incluso quiera cambiar el nombre un poco. Ya veremos cómo se ve eso. Entonces ahora vamos a animar, y vamos a voltear al modo prototipo para hacer eso para que yo pudiera ir y voltearlo al prototipo. De acuerdo, Entonces así es como haces la animación cuando estoy en prototipo y voy a seleccionar lo que quiero animar. Entonces tengo esto Tienes tipo de perfil seleccionado, y voy a ir dar click hacia esta otra pequeña pieza de perfil y voy a tener este ser un auto animate. Entonces, ¿la transición se está moviendo de un clic a otro? Y se trata de animaciones donde se hace clic en auto animate y el destino ya ha sido seleccionado desde que lo arrastramos hasta allí. Queremos que esto sea una especie de Ah, solo mantengamos esta animación igual y veamos tipo de cómo se ve. De acuerdo, entonces vamos a ir a dar click para previsualizar la vista previa y ver cómo se ve nuestra animación. Entonces aquí está nuestra animación. ¿ De acuerdo? Entonces cuando haga clic en Bob Smith, irá adelante y lo traerá adelante, un animado a la siguiente diapositiva. Entonces ahora lo que tenemos que hacer es hacer clic en Sarah y que vuelva a la pantalla de inicio. Entonces digamos que pincharía sobre Bob Smith que va a seguir en su uso, tu viaje, y él va a iniciar sesión. Pero entonces, ¿y si hacemos clic en esto y queremos darle a la gente una opción para hacer click en Sarah porque hicieron clic en la equivocada? Entonces démosles esa opción a continuación. Entonces ahora sigo en modo prototipo, pero voy a necesitar crear un nuevo tablero de arte. Entonces voy a ir a diseñar y crear un nuevo tablero de arte. Correcto. Entonces esto será para su viaje, y va a ser un poco más grande. Ella lo es. Sarah Smith va a ir por aquí. Ya veré cómo no hemos escuchado a esos que se quedan en la misma línea. Puedes tener el perfil de Sarah adelante, asegúrate de que tengan un tipo de arreglo similar. Entonces voy a volver al modo prototipo van a estar cambiando mucho de ida y vuelta. Voy a seguir adelante y conectarme. Este va a ser su viaje. Todo va a ser el mismo auto animado y todo es igual. Por lo que ahora cuando hacemos click en vista previa con un clic sobre él, aún no se puede hacer clic atrás. Eso no lo hemos configurado, así que hacen clic atrás, podemos darle click en ella. Entonces ahora tenemos que hacerlo ciclar para que cuando estamos en la suya, vuelva a enlazar con el siseo. Esto parece complicado, pero en realidad solo está vinculando todo en un bucle. Entonces ahora tenemos Vamos a seguir adelante y moverla. Aquí es cuando empezamos a necesitar realmente mapear. Entonces este podría ser su viaje, y éste podría ser su viaje. Por lo que ahora van a empezar a abanicarse en diferentes viajes de usuario de personas. De acuerdo, entonces ahora tenemos que disolucionar hacia atrás, si acaso. Queremos volver de este tipo de viaje y volver con ella. Tenemos que darle a la gente la oportunidad de salir de él de inmediato. Entonces vayamos a la guerra en modos prototipos. Y ahora solo necesitamos enlazar esto de vuelta. Esto podría un enlace a la siguiente opción. Pero si hacen clic en Bob, vamos a conseguir un enlace hacia Bob. Entonces ahora esto sólo va a animar auto a Bob. Entonces ahora tenemos Si sigo adelante y alejo y selecciono todos ellos, como que veo como el viaje es el click en Bob. Bajan por el viaje de los bobs por lo que le dan clic, van a su viaje. Y luego si hacen clic en Bob , volverá al viaje de Bob. Entonces tenemos una más que hacer, y eso es dar click si dan clic en Bob. Pero realmente quieren hacer. Sarah, cuando haga clic en esto al viaje de Sarah. Entonces solo estamos creando este tipo de bucle gigantesco aquí entre todos ellos para que puedan tener un círculo abierto y no estén atrapados en un callejón sin salida. Por lo que ahora presionamos play. De acuerdo, así que digamos que quiero una ley cuya apertura hoy la app. De acuerdo, Bob abre la app Oh, espera en Sarah abriendo la app Oh, espera, espera. Bob está abriendo la app. Por lo que ahora se puede ver este tipo de ciclo abierto y sonido. Ahora, lo que tenemos que hacer es cuando vuelvan a hacer clic, se cargará en el viaje de Bob. Entonces ahora vamos a hacer podemos enfocarnos en Bob, o puedes enfocarte en Sarah. Pero sigamos adelante y centrémonos en Bob primero. Entonces sólo vamos a seguir entrando en el diseño y vamos a crear varias páginas diferentes . Entonces vamos a hacer clic en su página principal después de que inicie sesión estará aquí mismo. Vamos a trabajar en eso. Va a ser muy similar al viaje de Sarah, Así que vamos a seguir adelante y hacer un nuevo nuestro tablero justo al lado, y este será su primer paso después de que inicie sesión. Entonces ahora vamos a crear la pantalla de inicio para el presupuesto de Bob. Así que me fui de cabeza y copié y pegué. Vamos a tener el perfil de Bob, tal vez golpear algún tipo de turnos aquí arriba iría adelante y enviaría la pantalla. Que podamos hacer ese tipo de animación aquí arriba. Podríamos agarrar el nombre de Bob, hacer que aparezca en la lista. Simplemente tratando de mantener una especie de tema de diseño. Probablemente no necesitamos eso. Pero podemos hacer que eso sea otra cosa. Y tal vez tampoco necesitamos eso. No estoy seguro, pero no vamos a necesitar a Sarah a menos que queramos dar la opción de volver e iniciar sesión en algún lugar que probablemente esté aquí abajo. Por lo que queremos hacer esta información probablemente mucho más pequeña. Vamos a dar click en este. Así que te diste cuenta Cuando trato de cambiar el tamaño de este centavo, lo hace globalmente. Bueno, no quiero eso. Yo quiero desvinculado este en particular para hacerlo más pequeño sólo en esta página. Entonces, ¿cómo nos desvinculamos? Los estilos globales son símbolos globales. Vamos a hacer clic derecho y símbolo sin arreglar. Y ahora va a ser honesto y tipo de nivel. Entonces ahora puedo hacerlo un poco más pequeño, tal vez empujarlo hacia un lado. Podemos seguir adelante y acercar y asegurarnos de que obtenemos la alineación correcta. Y otra cosa que queremos hacer es ir y llamar a un parque o identificaciones. Entonces voy a hacer un comando va a hacer nuestras rejillas receptivas que comandan turno y cotización . ¿ Se puede usar eso como guía para ver cómo estamos haciendo alineando las cosas? Eso simplemente apagaría eso y encendería siempre que quisiéramos tener una idea. El retículo. Entonces ahora tenemos que averiguar qué es lo que Bob Smith podría ver en esta manzana. Déjame hacer su nombre un poco más grande. Hagamos que ese 33. A lo mejor no tan grande. Un atroz Vamos a hacer 27. Está consiguiendo el tamaño adecuado para esta interfaz. También queremos poder volver a la pantalla de inicio, así que voy a poner un pequeño menú de hamburguesas que va a poder deslizarse e ir a darte algunas opciones avanzadas para tal vez salir con el otro usuario. Vamos a hacer nuestro pequeño menú de hamburguesas Icono de Pullout. Cem va a agarrar un par de estas herramientas en forma y empezar a crear nuestro pequeño símbolo. No quiero tener una frontera en eso estaba haciendo clic eso. Agarré mis manecitos aquí y lo convierto en forma de pastilla. Hazlo un poco más corto. Y obtengo una opción de espera y obtengo otra opción de espera y obtengo otra para que podamos hacerlo. A simple es que podemos hacerla estilizada y hacerle diferentes niveles. Debilita Rompe aquí un círculo, especie de mantenerlo redondeado porque de acuerdo con el tema de nuestro logo, vuelves aquí abajo. Tiene estas esquinas redondeadas y algún tipo de mantener con el tema cuando estoy desarrollando los iconos también. De acuerdo, así que conseguí un grupo todos estos juntos como una unidad agruparlo. Vamos a hacer que sea del tamaño. Yo quiero tenerlo. Al final, algo de piel, una especie de cambio de retención. Por lo que todo tipo de escala hacia abajo juntos y una vez conseguir algo de colocación final en grupo decidiendo quiero tener un poco más de espaciado entre todos estos. Para que ese pudiera ser nuestro pequeño ícono. Adelante y agrupe esos juntos, encontremos el color correcto, podrías hacer lima, que iría muy bien con su nombre. Entonces ahora sigamos adelante y hagamos de esto un dimensionamiento, ¿ verdad? Porque, ya sabes, una vez que lo hagamos, global lo tendrá desagradecido. No quieres hacer eso. Esto va a estar en cada página. Entonces, um, agrupemos um, esto y solo estoy siendo muy quisquilloso aquí. Voy a hacer el espaciado entre cada uno de estos. Aun así, solo voy a seleccionar cada uno de estos y voy a subir a mi panel de alineación. Ya ves, si tengo la herramienta de alineación adecuada para hacer esto Ahí vamos. Entonces eso es centro de distribución horizontal. No tiene un pequeño nombre pop out, pero sé que en Illustrator funciona de manera similar. Entonces haces lo mismo yendo a distribuir la misma cantidad de texto entre ahí, asegúrate de que eso sea correcto. No lo sé. Parece que está un poco apagado ahí. Eso es 3.2 y eso es 4.2. Entonces no estoy seguro de por qué no lo está haciendo. Incluso eso gracias a Dios por guías inteligentes. Podemos conseguir que incluso los voy a volver a seleccionar a todos. Creo que finalmente estoy hecho click grupo, obtener el tamaño correcto y luego puedo agregar eso como símbolo y podría arrastrar eso así que es horizontal de su nombre. Eso podría verse un poco mejor, pero veremos qué más va a estar aquí Mientras empecemos a bloquearlo, vamos a cambiarlo, sacar mi turno de comando de cuadrícula, flotación y tal vez alinearlo con esa última columna. De acuerdo, entonces estoy contento con eso. Entonces hagámoslo un símbolo. Entonces derecha, click y voy a hacer un símbolo. Y ahora puedo recordar que en cualquier momento si queremos darle a eso una opción en la página principal, podemos hacer de eso una opción en la página principal. Pero creo que es solo una simple tenemos que saber quién estaba iniciando sesión primero. Entonces tratemos de darles menos opciones. Cuanto mejor 13. Diseño de aplicaciones móviles - pantalla de interior de tu usuario: antes de que me excite demasiado y empiezo a hacer la hamburguesa de la piscina de la información de diapositivas. Quiero probablemente terminar esta página de presupuesto primero para que pueda copiarla y pegarla y tener mi animación y tener la misma pantalla mostrada. Entonces hagámoslo ahora. Vamos a usar la cuadrícula de repetición para hacer un tipo de página realmente rápido aquí. Entonces llegué a crear algunas formas aquí, especie de ser su presupuesto. Voy a hacerle un poco flaco, porque tendremos eso bastante en una página para que no tengamos que desplazarse. Haces un poco de una pastilla en forma, pero no mucho. Lo que es genial es que puede mantener presionada la tecla de opción y simplemente hacer, Ah, unos trimestres. No tengo que rodearlos a todos para que podamos tener esa forma si pensamos que eso se ve genial. Pero como que me gusta todo redondeado por nuestra marca. Tienden a tener ese tipo de trabajo, Pero sólo voy a empujarlo. Entonces es una chica muy, muy sutil. Voy a quedarme con mi frontera, pero voy a lograrlo. Hagamos un gris muy, muy claro o hagamos un gris oscuro. Hagamos algo. Hagámoslo súper delgado. Ya lo tienes. Me pregunto si podría hacer un 0.5. Yo puedo, sí. Entonces solo tengo un borde muy, muy flaco. Podríamos hacer una sombra de gota, pero no sé cómo se va a ver eso. Esto podría ser demasiado pesado para este tipo de diseño plano simple que vamos a buscar. Hagamos de eso un gris claro. No del todo blanco. Eso es demasiado duro. Entonces justo a través de un poco de un tipo gris le da una apariencia agradable. Y así pongamos nuestro primer número cisplatino. Bueno, ¿qué podría tener que sólo hacer algunos llenar algunas conjeturas? Aquí pones 12 mil porque esa podría ser su cuenta bancaria. A lo mejor es Oh, ¿ serio? Bueno, yo sí tipo de chico y vamos a hacer probablemente necesitaría poner, um, un color aquí para un gris oscuro. Entonces sigamos adelante. Creo que tenemos uno justo aquí, Así que agreguemos ese a nuestros estilos globales. Apenas estoy dando click en nuestro gris y lo estoy agregando a nuestros activos de color aquí mismo, y podría poder hacer que nuestro tipo sea ese color. Esto va a ser una especie de su equilibrio, y entonces sólo vamos a aguantar. Opción. Esta será la cuenta bancaria número uno. Por lo que ahora necesitamos que el tipo sea lo suficientemente pequeño donde podamos caber un nombre de cuenta bancaria largo. Porque si diseñamos una app y alguien tiene un nombre de cuenta bancaria muy, muy largo, podría estropear todo nuestro diseño cuando empiecen a desarrollarlo. Por lo que necesitamos ser flexibles y ser capaces de tener nombres largos en nombres cortos y aún así tenerlo técnicamente funciona bien. Tenemos que pensar en el lado del desarrollo cuando estamos haciendo estos hermosos diseños para que sea práctico. Hagamos eso aún más pequeño. Probemos 16. Ahí hay una cuenta bancaria. Uno. Vamos a intentarlo. Podríamos o atrevir eso o debilitar el audaz. Tengamos un poco de contraste. Tenemos una delgada Que esto sea audaz. Bueno, ¿qué tipo de gusto? A lo mejor no toda una escuela. Probemos un medio metálico solo estaban experimentando con el diseño. Tengamos algún tipo de elemento de diseño que divida que podríamos poner una barra aquí para separar los elementos donde podemos tomar una caja sólida. Quítate la frontera y podríamos mandar eso hacia atrás para que el tipo esté frente a ella. Ten un poco de división aquí. Ya sabes, esa podría ser una opción. Hazlo mismo esquinas redondeadas. Adelante, haz que coincida perfectamente. Volvamos a meter esa frontera. Hagámoslo esa misma mitad, medio punto, tamaño y hazlo más suave u oscuro y solo obtén una opción de espera. Simplemente estoy creando la misma curva que la que tiene detrás. Para que eso pudiera traer contraste. Podemos hacer en lugar de un Phil blanco que incluso podría hacer que sean gris oscuro, Phil. Y que esto sea verde. Entonces podría ser, uh podríamos tener una flecha que indique que han aumentado recientemente. Así que vamos a seguir adelante y conseguir un ícono de flecha allí. Y una vez que desarrollemos uno de estos, vamos a usar la cuadrícula de repetición para crearlos todos en segundos. Entonces estamos pasando mucho tiempo haciendo este primer bar. Pero todos los demás bares sucederán realmente, muy rápidamente. Déjame ir y conseguir una especie de icono de flecha, o puedo dibujarlo aquí mismo en X D. Así que vamos a hacer eso para que podamos practicar. Ya que conseguir Arpin Tool era hacer una flecha simple. Nada demasiado emocionante. Adelante y llena eso y saca la frontera. ¿ Quién podría hacerlo redondeado? Podríamos hacer que esta forma de atractivo vaya con nuestro tema. Entonces la pequeña flecha que creé aquí mismo no lo habría acabado A lo hizo verde. Hice clic derecho y le hice un símbolo. Entonces si alguna vez necesitas recordar esa flecha, puedo seguir adelante y recordarla. Pero quería un poco pensar en los fundamentos de esta página. Por lo que esta página va a ser para presupuesto. Por lo que es bueno ser menos sobre tus cuentas bancarias en un poco más sobre tu presupuesto diario . Entonces para ah, presupuesto para presupuesto alimentario para eléctrico. Entonces eso es lo que vamos a estar creando aquí. Así que empecé a crear este primer cajita donde eso residiría, y en lo que hay que pensar es que tienes que pensar en el proceso de desarrollo cuando estás haciendo el proceso de diseño. Entonces tengo que pensar que estos 150 dólares podrían subir hasta los 10 mil por lo que necesitamos asegurarnos de que haya suficiente espacio para que esa cantidad de dígitos quepa en esa zona. Y lo mismo por aquí. Podríamos tener bastante tiempo. El usuario va a poder personalizar cuál es el nombre del presupuesto. Pero siempre podríamos limitar esos personajes. Por lo que puede que tengamos que limitarlo a lo que muchos personajes de cuidado condenen en esta área. O podríamos hacer que la cara tipo sea más pequeña y especie de poder tener un plazo más largo. Entonces tenemos que pensar en eso es que sé que mucha gente hace estos hermosos diseños con esta bonita tipografía grande, pero no están pensando en nombres de forma más largos que tengan que encajar en estos espacios pequeños. Entonces voy a seguir adelante y seleccionar todo esto es una unidad y lo que es genial de la respuesta del redimensionamiento, que es que lo tengo pulsado aquí mismo ya que podría hacer esto más largo, y se va a redimensionar automáticamente adelante y hacerlo más largo y ver cómo se está ajustando automáticamente. Entonces sólo voy a tener un poco de margen a la derecha y a la izquierda para poder aprovechar la mayor cantidad de bienes raíces de pantalla posible. Por lo que podría caber tantos personajes para el nombre por aquí. Algunos solo uno agrupando estos elementos y deslizándolos de nuevo dentro. De acuerdo, así que eso nos dará una cantidad máxima de espacio para quizá dos dígitos más aquí. Y entonces puedo tener un nombre bastante largo aquí. Entonces si me siento 100% feliz con esto, podemos empezar a hacer la grilla de repetición. Entonces déjame conseguir un poco más de margen aquí a la derecha. ¿ De acuerdo? Estoy usando mi panel de alineación aquí para ver si todo está alineado. Cómo me gusta. De acuerdo, entonces voy a seguir adelante y agrupar los cuatro juntos, ¿ verdad? Haga clic y agrupe. Entonces ahora esa es una unidad. Y aquí es donde me encanta usar para repetir grilla. Por lo que podría usar la grilla de repetición y seguir adelante y crear tantos como creo que tendrían en el presupuesto. Voy a sostener las columnas y colapsar que quiero. No quiero tener que apretado del espaciado. Entonces tal vez justo aquí, hagamos una más. Siempre podemos borrarlo más tarde. De acuerdo, Entonces ahora esto es ahora mismo. Un grupo Así que si quiero editar estos individualmente, solo hago click derecho y voy a desarreglarme la cuadrícula. Y ahora puedo volver atrás y cambiar algunos de estos dos títulos diferentes y para que diferentes números tengan un poco más de realismo. 14. Diseño de aplicaciones móviles - pantalla de interior de usuarios - Part2: Así que pasé unos minutos pensando en la funcionalidad de cada barra en cada línea de presupuesto, y quería crear algunos detalles. Por lo que queremos tener el presupuesto restante, pero también queremos tener aquí el presupuesto total. Queremos tener una indicación para que alguien pueda ir y cambiar el presupuesto total. Pero también queremos tener una indicación en dónde pueden hacer clic y mostrar quién está gastando el presupuesto, la esposa del esposo. Por lo que podríamos tener dos pequeñas indicaciones o iconos diferentes que vamos a necesitar crear para cada barra antes de ir a repetir cuadrícula y empezar a repetir todo. Quieres conseguir esta línea perfecta. Entonces voy a ir y tipo de tomar la herramienta de pin, y podría necesitar entrar en ilustrador para hacer un ícono más elaborado en otra fecha. Pero sigamos adelante y creemos una especie de flecha que pudiera indicar que se podría elevar o aumentar el presupuesto. Entonces tal vez solo una pequeña flecha, igual que creamos antes, hacen redonda alrededor de la gorra, tal vez la hagan un poco más pequeña, solo un pequeño indicio donde pueden sentir que pueden hacer clic en ella y cambiarla. A lo mejor si hacemos un verde lima, va a destacar un poco mejor. Esa herramienta cuentagotas tal vez podría probarlo de esa manera. De acuerdo, así que eso es una especie de indicación donde pueden pasar el rato y podrían cambiar el presupuesto total . Y ahora necesitamos un indicador más para poder hacer click para que esto pueda entrar en otro sistema de menús que pueda mostrar todos los artículos de comida que han sido gastados tanto por Bob como por Sarah . Por lo que ahora queremos tener transacciones detalladas aquí en la comida. Por lo que sólo necesitamos hacer un poco de espacio para ambos. Tengo que cambiarme. Está limitando cajas, así que no están ocupando tanto espacio. Pero déjalo donde pudiera tener títulos más largos justo aquí. Lo mismo con el presupuesto. Queremos una línea que a la izquierda aquí abajo para que pudiéramos hacer transacciones detalladas y seguir adelante y agarrar el símbolo. Todavía no lo he convertido en un símbolo. Acabo de crear el ícono ¿Querías hacerlo global todavía bastante. A lo mejor sólo hacer un verde supongo que eso es para las fronteras será. Hacer un relleno. Déjame hacer una frontera. Consigue la herramienta cuentagotas y muestra este azul. Ahí vamos. Podríamos hacer que esto saliera un poco más. Podríamos añadir otra pequeña pillera debajo. Hagamos un borde muy pequeño para volver a hacer un 0.5, y podría añadir una sombra de gota para efecto. Pero no sé si eso me está gustando demasiado. Hagamos la forma de la píldora y enviemos esto hacia atrás al sistema de capas. De verdad quiero que esto salga, así que vamos a ver. Prueba, Alinear. Vamos a alejarnos, a ver cómo se ve eso. Podríamos necesitar hacer el tipo un poco más grande para tener un medio sin luz usando y hagámoslo ocho. De verdad quiero asegurarme de que la gente sepa que ahí es donde pueden acudir para transacciones detalladas. Sí, veamos cómo se ve esto. Vamos a hacer click derecho. Vamos a agrupar esto y vamos a hacer la grilla de repetición. Vamos a ir a repetir grilla y sólo vamos a tirar hacia abajo. Es bueno replicarlo, y vamos a subir aquí y cambiar las columnas y vamos a replicar tal vez dos más justo ahí. Creo que eso se ve genial. Entonces voy a pasar unos minutos y algo así como ajustar algunos de estos diferentes por aquí, para que no diga comida una y otra vez. Tiene un presupuesto más realista. Por lo que estoy empezando a llenar todos los detalles para que esto sea lo más realista posible. Entonces cambio tipo de las categorías, y ahora tengo presupuestos realistas específicos. Entonces voy a querer llegar a un total aquí abajo. Entonces sigamos adelante y hagamos un poco más pequeño este logo. A lo mejor meter eso a la derecha. No pude necesitar más curso inmobiliario de pantalla. También podríamos hacer click en nuestro tablero de arte y hacer desplazamiento vertical y poder indicar que no tienes que mantener todo por encima del pliegue. Podríamos tener una opción de desplazamiento más larga, Así que no te preocupes demasiado por los bienes raíces, pero yo personalmente, me gusta caber todo lo que pueda en una sola pantalla. No tienes que desplazarte, así que vamos a tener un área total. Entonces solo vamos a seguir adelante y muestrear. Déjame desarreglarme este. Adelante y sostén. Opción Solo voy a muestrear mi número total. Voy a hacer eso blanco Y,por supuesto, por supuesto, todo atrevido. Por lo que realmente destaca entre los otros. Hagamos un negro condensado podría parecer un poco cool. El vamos a secar esto es probar un audaz Vamos a hacerlo un poco más grande en tamaño. Entonces intentemos 37. Alejaremos el zoom para que veas cómo se ve. Hagámoslo un poco más pequeño, tal vez 32. Este va a ser nuestro total, para que podamos seguir adelante y probar esto. Baja eso y hagamos que eso no sea tan grande. Hagamos eso 30. Podríamos intentar línea sólo para tener un contraste con sus colores. Amplíe. Va a ser total. Entonces vamos a tener que averiguar que sólo estamos recibiendo estimación por ahora. Así que digamos que han gastado alrededor de C 405 106 7 Aflojar unos 1400 dólares más o menos. Solo tomemos una pequeña conjetura aquí. Podríamos averiguar la cantidad real, y voy a seguir adelante y copiar la opción bajada de texto más pequeña. Ahora vamos a decir que han gastado por 14 50 quedando fuera digamos que su presupuesto total fue de 2200 meses. Vamos a necesitar que esto sea más grande y más audaz. Entonces hagamos de eso un peso medio. Hagámoslo 12 puntos y hagámoslo blanco. De acuerdo, entonces ahí está nuestra primera página de presupuesto para él para Bob. Y entonces lo que vamos a hacer fue Vamos a hacer nuestra primera pequeña animación. Vamos a hacer factible este sistema de muchos. Por lo que Bob clica, inicia sesión Esta es su pantalla de inicio. Y así ahora quiere tener otras opciones después de que haya visto su presupuesto. También vamos a enlazar botones de botón de transacción detallados. ¿ Al menos ibas a hacer dos de ellos? Y eso dará clic a una pantalla diferente que tendrá las transacciones detalladas para alimentos . Y además, vamos a tener uno más donde podamos cambiar el presupuesto. A lo mejor es un slider que sale o algo así, pero vamos a descifrar ese viaje del usuario mientras seguimos diseñando este 15. Diseño de menú de Popout: Ah, así que ahora vamos a hacer nuestra pequeña hamburguesa animada, Muchas que van a salir por si Bob quiere hacer algo más que hacer clic en estos botones. Él quiere volver al sistema de menús, así que vamos a crear necesidad de crear otro marco para poder hacer eso. Entonces hay una manera fácil de hacer eso y sentarse teniendo que crear uno nuevo y copiar y pegar como lo he estado haciendo. Podrías hacer clic derecho y copiar y luego basar Boom, así como así. Y tenemos que pensar en nuestro viaje de usuario. Por lo que este es él avanzando a través de su viaje de usuario. Por lo que vamos a poder hacer este menú de hamburguesas de este lado. Entonces aquí está la especie de truco para esto, y puede que necesite un poco más de espacio, así que puede que tenga que deslizar esto hacia el sur para el sistema de menús. Voy a seguir adelante y mantener todo esto unido. Voy a hacer click derecho y agruparlo. Entonces aquí está el truco para auto animar. Primero voy a hacer mi pequeño sistema de menús pop out y vamos a seguir adelante y hacer que su color rompa podríamos hacerlo un poco transparente, pero vamos a mantenerlo un color sólido por ahora mismo. Sólo voy a tirar de algún tipo genérico aquí. Se va a mantener la opción y traerla en la parte superior. Este será Vincular un enlace a Enlace tres y sólo tengamos tres enlaces simples. Bueno, vamos a hacer un enlace ¿por qué no llenar un poco este menú? Y pongamos un poco más de dejar o espaciar entre los personajes, que está justo por aquí, Eso será suficiente espaciado. Entonces, como un enlace para enlazar tres, no tenemos que tener el menú de hamburguesas ir hasta el final. Podríamos tener que bajar aquí, tener un pop out, y quizá también queramos bajar nuestro ícono con nosotros para que puedan cerrarlo. De acuerdo, entonces hay un pequeño menú. Entonces lo que vamos a hacer ahora es agrupar todos estos juntos todo en el menú, juntar un grupo y deslizarnos por aquí y todo aquí. Vamos a agrupar toda pantalla original. Lo conseguiremos un grupo y lo vamos a deslizar de la pizarra de arte y lo deslizaremos arriba justo aquí, justo donde queremos que se superponga. Entonces esto le va a dar la apariencia de que esto está saliendo y animación y cambiando esa pantalla sobre, Vamos a seguir adelante y hacer que se anime. Vamos a subir aquí hasta la cima. Esto va a ser lo que inicia la diapositiva hacia la izquierda, y vamos a hacer clic en eso todo el camino hasta aquí, y vamos a hacer de ella una transición. Y queremos que el contenido se deslice hacia la izquierda. Entonces queremos que esto pase a esto, por lo que esto saldrá a la izquierda. Entonces hagamos un empuje astuto a la izquierda. Nos queda un empujón y vamos a hacer una entrada y salida fácil, lo cual va a ser una buena transición. Y hagámoslo realmente rápido. Entonces solo vamos a hacer un 0.1 segundos y queremos que este enlace del dedo del pie de vuelta y poder colapsar el menú que acabamos de sacar. Entonces vamos a traer esto de vuelta aquí arriba, y ellos iban a hacer lo mismo, pero en lugar de empujar a la izquierda o qué? El elemento para empujar ese menú de vuelta a la derecha así que en lugar de izquierda vamos a hacer, ¿ verdad? Entonces es tener que soportar conexiones aquí, que va a ser una diapositiva que queda aquí, que va a ser un tobogán. Correcto. Entonces ahora voy a dar click aquí. Tan bueno ver mi adelanto de este tablero de arte en particular en lugar de tener que volver a los inicios y hacer clic aquí, poder previsualizar a partir de esa página. Entonces veamos cómo se ve esto. Vamos a hacer clic que se desliza bien con un clic atrás y que se desliza hacia atrás. Entonces tienes un tobogán, ¿verdad? Deslice a la izquierda. Entonces eso se ve bastante bonito. Y entonces podríamos incluso tomar esa sola página este marco aquí mismo, y podremos enlazar esas dos páginas diferentes a lo largo de nuestro diseño. Pero sólo queríamos mostrarle al cliente el tipo de cómo se vería la aplicación en cuanto al sistema de menús que salía, y pudimos hacer esto un poco bonito. Lo haremos a continuación, y luego podremos continuar con el diseño de nuestra app. Y seguí adelante y descargué algunos iconos y tipo de lo personalizó un poco a nuestra marca y a nuestro esquema de color. No voy a seguir adelante y usar esos como pequeños iconos de sentadillas. Esos grandes puntajes de crédito del planificador de presupuesto sean este ícono más adelante también. Un poco menos. Enviar icono de mensaje y cambiar usuarios. A mí me gustaría conseguir algunas flechas cruzando, pero siempre puedo sustituirlas en otro momento. Yo sólo voy a hacer estos un poco más pequeños. Ahora que los estoy viendo. No creo que lo necesite tan grande. Tan solo tener un pequeño ícono para ayudar al usuario a descomponer esa información y saber qué es . Entonces vamos a tener algunas líneas divisorias. Entonces solo voy a dar un paseo por aquí. Sólo voy a hacer unas líneas divisorias a través una vez que lo tenga. Cómo me gusta. Siempre puedo simplemente mantener la opción abajo y arrastrado hacia abajo otro sostener opciones esperanzas. Y otra cosa es que podríamos crear los tops y el mensaje. ¿ Y qué podría realmente hacer una grilla de repetición en esto también? Entonces si quisiéramos crear una caja y luego solo repetir la cuadrícula todo el camino hacia abajo y quiero agregar un poco de contraste, así que solo estoy cambiando algunos de estos Taub viejo sea la primera palabra podría ser audaz. Entonces ahora tenemos un poco más de un sistema de menús pulido. Sigamos adelante y guárdalo y veamos cómo funciona eso Cuando jugamos, aún debe seguir siendo igual, y también agregué una sombra de gota a esta caja para que parezca que se está superponiendo. Entonces tienes esta barra gris superior y te das cuenta aquí mismo. Esa bonita sombra de gota ayuda a llevar alguna definición al menú desplegable. Volvamos aquí arriba y veamos cómo se ve esto. Es juego de prensa, y vamos a hacer que salga y luego que lo haga estallar hermoso. Entonces ahora solo necesitamos crear todas estas páginas, y Lincoln probablemente no va a hacer todo eso en esta clase. Pero podríamos al menos vincular uno de thes y uno de cada uno tal vez uno de los detallados en transacciones y uno del presupuesto restante solo tipo de hacer algunos de esos para especie de ver cómo funciona este proceso y cómo realmente podría hacer de esto un totalmente funcional un prototipo 16. Menú de transacción: Por lo que ahora tenemos nuestro set de menú extraíble. Vamos a seguir adelante y hacer algunas de estas otras páginas que puedan empezar a enlazarlas. Por lo que tenemos este tipo de conectados. Pero, ¿qué pasa con las transacciones detalladas? ¿ Qué sucede cuando Bob o el usuario hace clic en transacciones detalladas? Bueno, lo que me gustaría que hiciera la app es cuando hagas click en eso muestra todas las transacciones recientes por comida. Entonces digamos que estamos haciendo el 1er 1 Y pero también dice quién gastó qué. Entonces, ¿lo gastó Sarah? Entonces, ¿se lo gastó Bob? Para que con quien compartas este hap, puedas ver quién está usando el presupuesto y cómo así? Lo que me gustaría hacer es enviar de esto yendo a otra página entera. Me pregunto si no puedo hacer un pequeño desplegable animado para mostrar Um, así que no tienes que salir de esta página principal. Se puede hacer algunas cosas y ver algunas cosas sin tener que cambiar a otra página. Entonces vamos a hacer algo parecido a cómo lo hicimos con esto y hacer un poco animado tipo de pop out box. Entonces vamos a tomar esto y replicado. Entonces estoy haciendo clic en el tablero de arte y voy a copiar y luego pegarlo a la derecha así que vamos a mantener todo intacto, pero vamos a hacer un pequeño desplegable tipo de caja que baja tipo de muestra todas las transacciones que ocurrió con la comida y tal vez un pequeño indicador de flecha donde puedan cargarlo a una nueva página si quieren ver toda la historia. Por lo que ahora tienen un poco de pobre caja sacada yendo. Yo quiero asegurarme de que esta comida esté encima de esa pobre caja. Entonces seguí adelante, creé un grupo fuera de esto, y puedo seguir adelante y hacer comando en el dedo del pie del corchete derecho. Envíalo a través del sistema de capas, poniendo fuera ponerlo encima, o puedes bajar aquí a tus capas y podrás ver todas tus capas con este objeto en particular que verás grupo y luego podrías deslizar todo el camino arriba arriba . Por lo que es la capa más superior que pude hacer mi pequeño atajo, y pude verlo subiendo por el sistema de capas hasta la parte superior. Sí, va a colapsar eso. De acuerdo, entonces ahora tenemos que averiguar de qué color queremos hacerlo. Vamos a traer nuestro panel de activos y jugar. Podríamos hacerlo. Ah, menú desplegable oscuro y tienen colores más claros. O podemos tipo de muestra. No tengo un gris claro en mis activos. Hagamos click en este color aquí. Voy a añadir ese grado ligero a mi culo. Ah , agregó un montón entero de ellos. De verdad sólo quiero uno. Entonces déjame traer una caja aquí cuando lo hagamos. Phil, déjame agarrar ese color. Saca la frontera ahora. Conseguí esa muestra y click derecho y hacer agregar color a los activos. Ahora ten una especie de color gris claro para que pudiéramos hacer estallar este color, que creo que podría verse mejor. Hagamos una linda frontera flaca 0.5 otra vez. Ahora vamos a hacer un poco de sombra de gota. Creo que vamos a necesitar que esa sombra de gota salga realmente sobre las opciones restantes. Por lo que esta será tu información detallada. Vamos a muestrear. Adelante y soy Grupo esto. Sólo voy a probar esta comida. Hold down Opción. Tengamos un grupo una vez más. Bien hecho. Opción arrastra. Este será nuestro primer artículo de comida y vamos a hacer la retícula para que no tengamos que seguir haciendo una y otra vez al cangrejo una línea aquí hacer especie de caja para nuestra primera transacción. Ahora haces de eso un bonito gris claro. Por lo que esta será la transacción uno. Entonces digamos que fue león de comida. Es una tienda de abarrotes donde vivo. Y digamos que no pudo colapsar eso hacia abajo. Agarra esta opción aquí y colapsemos eso para que no se interponga en nuestro camino. Haz que ese gris oscuro. Y digamos que gastaron 55 27 solo una especie de algunos números aleatorios. Hagámoslo más pequeño. Entonces hay contraste entre este principal y éste, así que hagámoslo más pequeño. Pero Boulder. Entonces hagámoslo 18. Pero hagamos una espera de petanca todo el camino, hagámoslo parejo. Hay línea de comida, pero también necesitamos tener una indicación de quién es el que gastó ese artículo yendo a desplazarse aquí abajo. Y este va a ser Bob quien lo hizo. Entonces Bob Smith hizo esa transacción. Pero hagámoslo más pequeño y audaz. Haz nuestra espera más audaz. Tenemos y lo hacemos aún más pequeño, tal vez 12. Hagamos de eso un color que realmente va a salir. Va a hacerlo de ese color. Entonces ahora eso va a indicar que Bob es el que gastó eso y vamos a hacer un par de pareja más y luego vamos a hacer su grilla de repetición. Entonces vamos a ver. Me pregunto si eso se vería bien. Negrita. Eso es demasiado. Demasiado fuerte. De acuerdo, entonces vamos a seguir adelante y dar click en todos estos artículos. Vamos a agrupar estos juntos, y vamos a hacer trampa un poco y hacer nuestra grilla de repetición. Vamos a arrastrar hacia abajo, sobre, sobre, sobre, sobre, sobre. Hagámoslo, um podríamos hacer cinco transacciones. Y colapsemos el espaciamiento entre él hasta que esté justo aquí. Y luego vamos a querer tener un poco más de opciones. Vamos a tener esto abajo, y voy a hacer una cajita aquí al final, y no estoy seguro de qué color todavía, pero necesito que sea alto contraste. Entonces tal vez el negro y esto va a tener una simple flecha encima, así que voy a seguir adelante y bajar esto. Consigue mi herramienta de lápiz, solo una pequeña flecha para que puedan hacer clic más para obtener todo el historial de las transacciones. Haz que ese color lima. Hagamos el borde lima, no para hacerla redondeada. Gorras redondeadas. Hagámoslo más grueso. No del todo tan grueso, tal vez tres y tal vez dos. Ahí está tu pequeña indicación de que podrías conseguir ese centrado alineado Go. Eso es un pequeño indicio de que podrían hacer más o también puedes jugar con el color. Podríamos tener un poco de humos o ver todas las transacciones para que podamos tener un visual así como una palabra. Va a bajar esto. Vamos a plantear eso en el sistema de estratificación. Sólo estoy sosteniendo ahora mando y corchete derecho. Puedo ir a capas y hacer eso para hacer esto más pequeño. Estos fueron todos estos pequeños detalles en los que tenemos que figurar. Entonces ver todos los detalles, y tal vez esta flecha, en lugar de bajar es a la derecha. Mirémoslo hacia la derecha y hazlo más pequeño. Hagamos que un tallix tenga no tienes ninguna cursiva pasando. Entonces hagámoslo, um, vivir metálico y hagámoslo un 10. Es bueno por ahora, así que podrían hacer ver todos los detalles, para que sólo un poco le dé una idea. Entonces los que están ahí Bob Smith y esto puede ser esto. Diga, esta es Sarah Smith, y vamos a hacerla abierta de un color diferente. Podría necesitar dedo del pie a diferencia de estos. Entonces ahora que estoy contento con esto, déjame en grupo la Cuadrícula y ahora podría editar cada uno individual. Hagamos eso con selecto estos dos y hagamos una sombra. Ahí vamos. Eso hace que se vea un poco más tres D y en capas. No estoy 100% seguro del rojo. Realmente ayuda visualmente que se destaque. Solo me pregunto si es un poco demasiado diferente al esquema de color que tenemos yendo, por lo que siempre podemos cambiar esos colores con bastante facilidad. Creo que podría necesitar enojarme que para acceder para que pudieras cambiar eso a la lima, que no puedes ver muy bien. Podría cambiarlo por el verde, y se podría decir a los diferentes usuarios. Hagamos eso. Creo que el rojo era un poco demasiado. Bueno, demasiado jarring. Pero por eso probamos las cosas para ver si funcionan. Entonces ahora hagamos esto fresco y animado. Entonces vamos a entrar en modo prototipo. Entonces ahora que estamos en movimiento prototipo, eso es ir adelante y aislar este botón porque ese va a ser el botón que vamos a hacer clic para poder cargar este particular miedo. Entonces, ¿qué? Este es su grupo juntos, así que sólo vamos a necesitar hacer click derecho y en agruparlo para que podamos tener acceso a Justice Button. Entonces ese es el botón. Queremos que el usuario presione para poder llegar a un costado, para estar para ir y dar click aquí. Y vamos a ver si no podemos hacer un auto animate y eso va a ser al click Para que el on tap gran facilidad de entrada, facilidad de salida. Vamos a probar eso y ver cómo se ve. Vamos a dar click en nuestro no se aburren aquí arriba para que podamos iniciar nuestra vista previa allí. Perfecto. Entonces casi parece que se desliza, ¿ no? Y así ahora todo lo que tenemos que hacer es que este botón haga click atrás. Entonces ahora mismo estoy atascado. No puedo moverme a ninguna parte. Entonces lo que queremos hacer es poder aislar este botón y vincularlo de nuevo a aquí . Entonces veamos cómo se ve eso. Sigamos adelante y pinchemos aquí y jugemos. Entonces ahora vamos a dar click. Tengo mi menú desplegable y quiero dar click atrás y estoy bien, Bueno para ir. Por lo que eventualmente vamos a tener que dar click sobre los detalles completos, pero probablemente no en esta clase en particular. Pero seguirías haciendo lo mismo, crear otro, se aburren y poder mandar eso en su camino a esa pantalla en particular. Entonces déjame solo en revisión, solo vuelve a lo que hice. Seguí adelante e hice un auto animate en ese, y no se tranquilizaron de entrada y salida y en un clic y luego simplemente hicieron lo mismo de vuelta. Entonces ahora vamos a guardar y ver qué tenemos hasta ahora para el viaje del usuario de siseo y ver si todo está vinculado cómo nos gusta. Entonces vamos a ver qué tenemos aquí, y hasta ahora tenemos viaje de silbido. Empieza aquí. Selecciona su perfil. Entra a su pantalla principal de inicio. Se puede hacer click en transacciones de detalle y él obtiene un menú desplegable. O puede subir y seleccionar este menú superior y conseguir una caja de salida, y los próximos pasos serán para averiguar a dónde van esos que no vamos a hacer. Todos ellos sólo irán a hacer uno. Y luego también lo que sucede cuando hace clic aquí o cualquier otro botón restante que necesite ser seleccionado y, por supuesto, probablemente llenará el suyo, que podría ser una copia de Hiss. Pero tal vez ella toma una dirección diferente y hace algo diferente aquí abajo con estos botones, y tiene un viaje de usuario diferente. Entonces lo hace sólo para especie de mostrar al cliente en amplia variedad de diferentes senderos de usuario. 17. Afina y enlazar nuestro diseño: así que consigue un click en play y veamos qué pasa. Entonces vamos a dar click en Bob's. Entonces consigue un click cuando lleguemos a entrar. Y digamos que queremos hacer el menú, ver qué es Echa un vistazo. De acuerdo, vuelve rápido y vamos a averiguar qué son las transacciones detalladas. Está bien, excelente y aún cocine de nuevo. Entonces eso es lo que hemos hecho hasta ahora y un par de cosas que podríamos hacer. Por lo que queremos hacer interruptor. Usuarios, tal vez puedan tener eso encendido para poder volver a la página principal. Podríamos tal vez hacer que este logo de diez centavos se pueda hacer clic atrás para que no tengamos que ir por aquí e ir a cambiar de usuarios para volver a esa página principal. Podríamos incluso tener foto de perfil de Hiss clicable de nuevo a la pantalla de inicio de sesión de inicio, o podría ir a ajustes. Entonces estas son todas las cosas que vamos a tener para averiguar cómo es ese flujo de usuarios. Entonces digamos que queremos que Teoh tenga usuarios de switch. Adelante y en Grupo. Creo que esto todavía está todo agrupado, así que digamos que queremos que este botón de usuarios de conmutador sea simpático. Por lo que tuve que separar estos de este gran grupo y tenerlo por su cuenta. Y quiero seguir adelante, tener esto enlazado todo el camino de vuelta a la pantalla de selección, y sólo queremos hacer una transición. Sólo queríamos ser un simple volver atrás. Podríamos tenerlo deslizándose hacia abajo o hacia arriba. Hagamos un empujón hacia arriba y veamos cómo funciona eso. Adelante y previsualice. Está bien, están en Bob. Vamos a su página. Vayamos a transacciones detalladas. Eso es genial. Vayamos al menú. Bajemos a cambiar de usuarios y volvemos a esa pantalla y luego podríamos ir a su viaje. Entonces antes de continuar, quiero asegurarme de que todo sea exactamente como me gusta. Porque si empezamos una vez empezamos a hacer más tableros de arte iban a estar copiando y pegando y replicando todo esto. De verdad queremos asegurarnos de que ahora sea bueno, así que no tenemos que volver atrás y cambiar. Muchos van hacia más adelante. Entonces voy a pasar los próximos 10 minutos como bien afinando mis selecciones. Ya he hecho un par de cambios por aquí. El tío no te había enseñado dónde mi desplegable y quería tener la capacidad de mostrar incrementos en el presupuesto causa otra pareja o esposo o esposa o quien se asocie en esta app contigo que también está compartiendo tu presupuesto. Podrían aumentar el presupuesto en una categoría particular. Por lo que realmente quería destacar que como algo que estaba separado de todas estas otras transacciones es algo especial. Entonces hice una especie de contraste más alto, fondo diferente del blanco y tipo de usado una pequeña flecha. Hicimos un par de lecciones atrás y después queríamos hacer una especie de perfil escogido en algún tipo de personalidad. Teoh a eso para que pudieran No. De acuerdo, esa es la persona que aumentó el presupuesto y también bajó, agregó un poco más. Coloca sombra aquí para que la pudieras ver por encima un poco mejor. Y pude hacer una especie de adelanto. Entonces qué, ¿ Por aquí para compartir? Y fui a publicar prototipo que pude probarlo en mi teléfono, y me di cuenta de que necesito hacer unas cosas un poco más grandes y la música retocar algunos colorantes. También en este pequeño enlace es demasiado pequeño. Entonces lo que necesitaba hacer es enlazar toda esta sección ah blanca a las transacciones detalladas para conseguir ese menú desplegable en lugar de ese pequeñito. Pero fue realmente difícil presionarlo con el dedo. Por lo que esquilar pasando a compartir, compartir el prototipo enviando vinculado a ti mismo, Ábrelo en tu teléfono. ¿ Cómo funciona? ¿ Cómo se siente? ¿ Necesitas hacer los botones más grandes? Por lo que necesitas como volver atrás y hacer algunas pruebas viniendo aquí y haciendo esto, compartiendo opciones y obteniendo ese enlace o incluso simplemente exportándolos como una clavija J aquí arriba. Y entonces podrías simplemente cargar esas fotos en tu teléfono y tipo de calibre. El tamaño de los botones son los demasiado grandes o demasiado pequeños. Por lo que pude volver atrás y vincular toda esta sección en lugar de ese pequeño botón a las transacciones de detalle. Entonces ahora me siento como este tipo de símbolo de dinero audaz y el tipo ligero de tipo OC reutilizado para los números era demasiado contraste, y como que se ve un poco voluminoso, Así que quería racionalizarlo. Por lo que tipo de cambio a una Helvetica nueva 22 a un peso medio en su lugar. Y lo hice un poco más pequeño para poder tener espacio para caber en números más grandes. Entonces quiero poder cambiar todos estos, y esto es un poco abrumador. Ya tengo tres juegos de esto. Entonces veamos cómo podemos cambiar un poco más rápido usando nuestro panel de activos. Entonces tengo esto exactamente como le gusta. Entonces voy a seguir adelante y hacer click derecho, y voy a añadir ese estilo de personaje. De acuerdo, así que agregué el estilo del personaje. Entonces esto ahora va a ser Llamemos a este dinero en la lista. Fondo oscuro, lo que quieras. A titulo it. Y voy a poder seleccionar todos estos, y creo que sí. Agruparlo de mi, uh, gran grupo aquí de la Rosa. Voy a volver atrás y hacer clic en él, y es por arte de magia cambiar para poder seguir adelante y los cambios todo bastante rápido. Vamos a seguir adelante y cambiar todos estos y cambiarlos aquí y allá estaban listos para seguir adelante . Hice otro cambio ya que acabo de agregar una caja pequeña, poco diferentes cajas de gran color para agregar algún contraste entre las diferentes filas para que no se vean como una lista grande, larga que ven más como cajas. Y la gente puede descomponer mejor esas cuatro opciones y se ve un poco mejor así. Entonces ahora que siento que me encuentro también y todo, voy a terminar de hacer eso tu verdadero rapido, y luego podemos pasar a la siguiente diapositiva, que será este pequeño botón de aquí. Nosotros queremos hacer eso activo, fuéramos hacer esa diapositiva y hacer una más, y entonces vamos a estar envolviéndolo para que sea capaz de seleccionar todo y cambiar por todas partes a este estilo global por aquí. Entonces digamos que quiero editarlo. Hice tres diferentes Rose me llevó como un par de minutos, así que no me tomó mucho porque acabo de seleccionar. Um, todo pasó a mis estilos de personaje, pero digamos que quiero cambiarlo de nuevo. Tienes que seleccionarlo a todo para cambiarlo de nuevo. No, todo lo que tienes que hacer es ir a tus estilos de personaje van a la derecha. Haga clic en el uno y lo voy a editar. Este es el que estamos usando para todos estos números. Digamos que quiero aclararlo, están oscuros en él. Yo podría hacer eso. Obtendremos la herramienta cuentagotas y probaremos un color diferente donde pueda conseguir tal vez el verde . Eso es lo que es tan maravilloso. Una vez que vinculas todos estos a Stiles es, no tienes que sentarte ahí y seleccionarlo todo de nuevo. Ya están ahí para ti. Entonces déjame hacer click derecho y editar eso otra vez y podemos conseguir el número correcto o el tono correcto . Creo que lo teníamos más o menos a la sombra correcta. Yo quería conseguir esto en vivo, Así que déjame solo conseguir este pequeño personaje y seleccionar línea. Pero también podemos cambiar el ancho y la altura y el tamaño. Entonces digamos que quiero hacerlo un poco más pequeño. Eso podría hacerlo a todos sólo un poco más pequeño, lo que podría funcionar mejor para nosotros para asegurarnos de que tengamos espacio para números más largos, y también podría volver atrás y hacer clic derecho otra vez. Ya veremos si puedo encontrarlo aquí lo es. Creo que cambió hacia abajo porque lo edité. Entonces ahora en lugar de medio y tal vez probar la luz y podríamos hacer el oro podríamos verlo pasar por todo el medio de página. A mí me gusta BD um Y me pregunto si podría cambiar la brecha. Parece que puedo. Entonces quiero cambiar el espaciado entre los números. Ahora mismo hay 66 puntos. Déjame cambiar eso. Corta eso a la mitad. Eso va a apretar un poco más el espaciado una vez más dejándonos más espacio para tener números largos . Alguien, supongo que algunas personas tienen grandes presupuestos. Necesitamos dedo del pie. Siempre piensa en eso. Yo lo moví fuera del camino para poder actualizar y seleccionar los números. Y tengo este grupo hace un grupo grande y sólo voy a deslizarlo hacia atrás y encontrar la posición correcta porque aún no hemos duplicado esta diapositiva. Por lo que aún podríamos editarlo una vez que empezamos a duplicar. Íbamos a iniciar un poco el medallón en nuestro look. Entonces este es un buen momento para hacer una pausa. Obtener alguna aprobación de alguien. El Senado aprobó a la gente para asegurarse de que todo sea perfecto porque a medida que nos adentremos cada vez más en esto, va a ser más difícil cambiar cosas pequeñas incluso con estilos globales. Um, al igual que el posicionamiento de esto, no hay un estilo global para el posicionamiento. Entonces si tenemos esto replicado varias veces, otras diapositivas, vamos a tener que cambiarlo principalmente. En realidad no podemos hacer una posición, carácter, estilo o activo, así que pongamos bien la posición. Podemos tener una gota hasta aquí. Podríamos dejarlo caer en medio. Podemos atrapar todo el camino a la derecha, así que me gusta dónde lo tenía antes. Creo que eso funcionó bien cuando también nos aseguramos de que esto esté atrás en el sistema de estratificación. Puedo ir al sistema de capas aquí, y podría cambiar ese grupo porque ahora mismo está en la parte superior, así que podría arrastrarlo hacia abajo para que esté por debajo de esa comida. Uno. Seguiremos arrastrando o solo me gusta hacer mi pequeño mando y corchete. Pero cuando tienes muchas capas, a veces poder ver visualmente todas tus capas, um funciona mejor para poder arrastrar esas vueltas Así que ahora estoy listo para irme. Me siento muy feliz con todo. Hagamos nuestras últimas parejas y lo envolveremos. 18. Prueba de tu diseño en tu teléfono: Entonces tengo mi enlace, el tu L. me lo envié a mí mismo y mensajero, y pude abrirlo en mi teléfono para especie de probar los botones para ver si eran lo suficientemente grandes y solo tipo de probar el prototipo. Eso es algo así como se ve cuando cargó en tu navegador en tu teléfono, y soy capaz de obtener toda la sangre en opciones. Entonces voy a volver a la opción de usuario del switch y luego mis muchos sistemas, vamos a volver a cambiar de usuario, y si haces doble clic, podrás ver todas las interacciones en vivo. Entonces si alguna vez quieres decirle a un cliente un doble clic en un prototipo, podrás hacer que muestren todas las interacciones en la página de sus vidas y enlazar herbal 19. Linking todo: encendió una nota de prototipo, y quería el enlace los enlaces restantes que tengamos disponibles. Por lo que quiero poder vincular este centímetro bajo, volver a la página principal o volver a la pantalla de opciones o a algún otro tipo de pantalla de opciones . Entonces sólo soy un prototipo. Modi iba a arrastrar y devolver estas cosas a la pantalla de inicio de sesión o a donde sea. Me gustaría señalar para que todo sea clicable, por lo que esto podría volver a ese. Lo mismo con aquí. Todos ellos apuntarán de vuelta a casa sólo un punto. No queremos que esa esté activa. No queremos que alguien haga clic accidentalmente en esa, pero la gente hace clic intencionalmente en el logotipo abajo, así que solo queremos asegurarnos de que haga clic. Eso irá a algún lado. O quizá no. Y así vamos a asegurarnos de que seleccionamos todo y todo está vinculado. Cómo nos gusta que se ve como un mejor, pero si lo desglosas uno por uno, no es tan abrumador. Entonces tenemos esta vinculación de vuelta. ¿ Tenemos esta vinculación en cualquier lugar Esto no parece que esté vinculado en cualquier lugar, así que este es nuestro menú bajará de la voluntad. Este está vinculado. Este es el que enlazamos aquí para que se deslice hacia fuera. Pero también necesitamos tener esta otra página como allá abajo también. Entonces aquí es donde pudimos. El mapeo es muy útil. De acuerdo, entonces tenemos un empujón hacia arriba. Por lo que memorizó nuestro último vivo. Pero creo que para este, queremos tener una diapositiva. Eso es lo que hicimos por éste. Podríamos conseguir un tobogán, un empujón a la izquierda. Por lo que este también será un empujón a la izquierda porque queremos replicar el mismo empujando dejó el menú de hamburguesas deslizándose hacia fuera. Entonces empuja a la izquierda. Para que esa esté conectada. Ahora es, creo que tenemos por todas pocas conexiones y vamos a darle una prueba más. Este es Bob. Sarah, Todavía no hemos hecho Siria, así que hacemos clic aquí tanto el clic atrás aquí. Se va a volver. Pero hizo una especie de cosa de deslizamiento hacia arriba, Así que quería una especie de transición para poder volver atrás y cambiar que más tarde vamos a Bob, click a través y puedo hacer esto y hacer clic atrás. También puedo vivir esta pantalla, pero Ahora esta conectada. Entonces si quiero volver a sacar el menú, puedo. Entonces ahora todo es un ciclo completo con eso encendido. Y entonces ahora nos acaban de cambiar. Usuarios conectados. Entonces ahora cuando hago este cambio de vuelta a la pantalla de inicio y me conseguí un buen ciclo, ¿por qué volverías a la pantalla de inicio es dar click en el logo y estoy de vuelta. Por lo que estamos listos para nuestro próximo tablero de arte. Y esta vez vamos a enlazar uno de estos aquí abajo, que va a ser el mismo mensaje. Nosotros queremos como que vaya a esa idea de. Él pasa por aquí. Es este tipo de viaje que pasa por su persona usuaria. Es como que viene aquí. Él mira todo lo que quiere revisar la comida porque no lo hace. Le queda mucho. Hace clic en transacciones. Él va aquí. Ve que la esposa lo aumentó en 50. Y se pregunta por qué. Porque le queda un gran presupuesto. Entonces quiere dedo del pie tipo de mensajero. Entonces entra aquí al menú y quiere mandar un mensaje para que se comunique sobre ese aumento presupuestario en particular para que no podamos crear una nueva pantalla o un nuevo tablero de arte. Entonces vamos a duplicar uno, sólo tienes que ir y duplicar éste. Vamos a copiarlo, a dónde bajar aquí y pegarlo. Y se dio cuenta de que también copia los enlaces prototipos para que no tengamos que volver a gustarnos todos los arriba, a diferencia de hacer la opción y arrastrar. No dice que sólo copia los gráficos, pero no copia los prototipos. Por lo que estos prototipos aire ahorraron ahora que pude hacer click en el tablero de arte copiar y luego pegarlo. Entonces vamos a posicionar esto y parte del diseño de la historia. Entonces vamos a hacer este tipo de en un orden. Por lo que va a dar click aquí a su página principal. Primero va a hacer clic en transacciones detalladas, y luego va a cambiar. Vamos a arrastrar esto por parte de su viaje. Dónde compartir el cliente. Pon un poco de espaciado entre aquí. De acuerdo, entonces va a dar clic aquí para enviar un mensaje, y hay un buen clic en el mensaje, y va a cargar esta pantalla. Por lo que ahora necesitamos editar esto para ser una pantalla agradable y de mensajes. Es 20. Pantalla de mensaje: manera. Adéntrese demasiado en el letrero. Tenemos que pensar en lo que va a implicar esta página de mensajes. ¿ Cuál es el propósito de este sistema de mensajería? Bueno, esta es una aplicación privada que se comparte una aplicación privada de presupuestación que se comparte entre tipos específicos de usuarios. Por lo que podría poder hablar entre sí sobre ciertas cosas presupuestales. Y queremos asegurarnos de que esto sea privado y dentro de la app, esto no solo enlaza fuera del teléfono e ir a la app de mensajería. Ese va a ser su propio sistema único de mensajería de comunicación. Y todo el mensaje de todos los mensajes se eliminará después de las 24 horas con fines de seguridad para que estas airen realmente grandes maneras de enviar mensajes a su pareja sobre las finanzas. Y no tienes que preocuparte por si eres el teléfono se te lleva. No hay ningún tipo de cosas que eso vaya a ser sensible. Esta será una aplicación de mensajería privada. Entonces ahora que tenemos eso en mente, vamos a volver a cambiar a la ventana de diseño y empezar, así que tipo de deslizar esto hacia la derecha porque no creo que necesitemos esos detalles en particular . Y así vamos a pensar en lo que vamos a necesitar. No va a necesitar eso. A lo mejor tienen diez centavos aquí en el medio. Tampoco vamos a ser ese artículo. Pero lo que vamos a necesitar es que queremos seguir teniendo nuestro menú superior, tener algo de consistencia con todo aquí, o podemos sacarlo y tener más espacio para mensajería. Simplemente todo depende de cómo queremos diseñar esto. Por lo que todo el punto de esta app es ser muy sencillo. Entonces hagamos un diseño limpio muy sencillo. Sólo tienes que seguir adelante y hacer un cuadro de mensajes y vamos a hacer algunas esquinas redondeadas por todo el camino. Así que basta con hacer clic en él y vamos a ver cómo se ve con un poco de sombra. Hagamos una sombra más de reparto, así que voy a añadir tal vez un cinco y cinco. Entonces el eje x e y va a ser echado más lejos, da una sensación de distancia y tipo de desenfoque esa sombra bastante teniendo a los 16. Hagámoslo 11. ¿ Necesitamos una frontera? No estoy seguro de que iba a hacer click fuera de frontera. Trata de hacer esto limpio, y lo que podríamos hacer es una vez que terminemos con esta burbuja, podemos seguir adelante y copiar en la siguiente burbuja. Vamos a tener una, um, um, burbuja tipo de conversación una de él y otra de ella. Por lo que ésta será una que antes era de ella. Y tendremos una donde él responda aquí abajo a ella con la respuesta de nuestra pequeña historia , donde ella incrementó el presupuesto. Se pregunta, ¿por qué aumentaste el presupuesto? Entonces lo que podríamos hacer es que quizá ya no necesitemos esto. ¿ Sabes por qué? Porque vamos a tener la burbuja. Podríamos tener algún tipo de imagen de perfil en las burbujas. Entonces lo que podríamos hacer es que esto podría deslizarse hacia arriba y eso nos dará más espacio para mensajes. Entonces nos ayudé a tener una animación de deslizamiento hacia arriba, y tal vez se va al medio y mantener eso en el mismo lugar exacto. Eso Tendremos más espacio para la parte de mensajería. Entonces este será un mensaje cuando acabemos de contar opciones. A ver si tenemos ram para una segunda respuesta. También vamos a querer tener una burbuja donde tecleemos, así que eso tendrá esquinas redondeadas. Haz que sea una pastilla. Vamos a necesitar desarrollar algunos iconos para indicaciones de texto donde puedan teclear. De acuerdo, entonces este será un mensaje, y ese será el otro. Adelante y agarremos su respuesta. Adelante y hagamos mando y estoy haciendo mi corchete trasero derecho para llevarlos al frente. O tiene muchas capas pasando. Acude a nuestro panel de capas y tráelo rumbo. Podemos agrupar muy bien todos estos para que podamos agruparlos todos en una carpeta diferente para que cada tablero de arte tenga su propia carpeta. Por lo que tenemos todos estos diferentes para que pueda estallar en mensaje. Y titulé estos Ahora, Así que ten menú y mensaje. Entonces ahora sé qué tablero de arte es cuál, como un doble clic para entrar ahí y ahí están todas mis capas y esa una nuestra tabla. De acuerdo, entonces ahora llegamos a averiguar qué tan grandes queremos que sean las pequeñas imágenes de perfil? Vamos a quitarnos la sombra en eso. No creo que lo necesitemos, y necesitamos tenerla. Entonces sigamos adelante y agárrala. Simplemente voy a mantener la opción y arrastrarla encima. Hazla más o menos del mismo tamaño. También queremos recordar desmontar rejillas de vez en cuando. Entonces cambio de comando, cotización. Simplemente una especie de obtener un buen calibre en nuestra pequeña cuadrícula receptiva. Aquí, hombre. Turno entre comillas. Entonces lo que vamos a hacer es tenerlo en medio de responder. Entonces lo que podríamos hacer es tenerlo aquí mismo. Estas serán sus respuestas. Se está preparando. Escriba tal vez un poco más grande. Sostenga el turno. Por lo que podría hacer un lindo, pero no sostengo turno para conseguir algo así de extraño. Eso no escala dimensionalmente. Entonces si una retención en el barco, escalará perfectamente las dimensiones. Sólo un pequeño truco. Ahora, sólo estamos haciendo una especie de algunas ideas de diseño. Tenemos una imagen de perfil flotar arriba, darle un aspecto en capas. Entonces ahora necesitamos algo de tipografía Tú para volver a los estilos y ver si no puedo encontrar cuando me gusta , hacer blanco claro. Pero hagamos que sean de color gris oscuro. Este será nuestro mensaje que hizo Así que consigue un tipo en especie de mensaje falso y escribe el mensaje falso aquí y luego haremos un par de iconos para ayudarnos a indicar que aquí es donde necesita escribir su respuesta. De acuerdo, así que escribo alguna conversación genérica aquí y ahora. No podía como que lo estimara. ¿ Cómo? Creo que debería parecer, Así que sólo voy a ir por aquí y hacer como, una alineación a la izquierda y dejarme algo así volver a poner eso. Probablemente tendría un nombre para simplemente ganar. Agarró su nombre. Sarah. Eso es aquí arriba. Mantenga pulsada Opción y describiendo su nombre, arrastrándolo hacia abajo para que no tenga que volver a escribirla. Esta será Sarah, pero vamos a querer que esto sea en gris oscuro. Y una vez que conseguimos este tipo correcto, queremos guardarlo en nuestro estilo Así podemos volver a recordar este tipo de texto negro sobre fondo blanco . Entonces veamos esto a 28. Y cuando agrego un poco más de espaciado entre tipo un poco más dejando como lo llaman. Y así también tendríamos un sello de tiempo. Hagamos las estampillas de tiempo. Este fue el 12. Tengo 11 2020 y la marca de tiempo realmente no necesita ser tan grande Solo lo suficiente para ser leída y hagámosla mediana. Entonces eso fue lo que dijo en esa fecha. Podemos agregar poco florece de diseño aquí para que podamos hacer de esto un poco de un puntera de caja oscura agregar contraste. Subirás esto un poco, z hombre, que la línea arriba como tal coincida con la curva aquí. Pero voy a bajar y mantener la opción abajo sólo para hacer esa y luego mantener la opción y sólo hacer esa. Entonces ahora solo tengo curvas en la parte superior enviando esto de vuelta cuando esté en el sistema de capas y ahora voy a querer hacer esto blanco. En realidad somos una especie de gris claro o oscuro. Y ahora que lo tenemos sobre un fondo oscuro, tenemos la oportunidad de agregar en color, lo que siempre ayuda. Ahora podría cambiar el tamaño de una foto de perfil. Tenemos que recordar, gente va a querer poder ver mensajes más largos sin tener que desplazarse. Entonces aquí es donde puede que tengamos que sacrificar los algunos de estos elementos arriba para asegurarnos mensaje se pueda leer y ser mucho, mucho más tiempo Así que si nuestro mensaje necesita ser realmente largo, porque esto podría ser conversaciones privadas, estas conversaciones aéreas privadas que se van a eliminar después de 24 horas por lo que podrían ser podría ser largo. Adelante y sostengamos el turno. Hagamos su imagen más pequeña, solo tratando de ser eficiente con nuestro espacio y pensando en cuándo va a ser una aplicación realmente en vivo y que hemos necesitado un solo para texto más grande. Entonces por eso tal vez este texto podría ser de 16 y tal vez en lugar de una espera delgada, sí lo hacemos. Un ligero se leería un poco mejor, y tenemos la oportunidad de encajar más café y más tipo antes de que te pusieras genial, dijeron. Esa es su pequeña área. Algunos Scott copian la suya. El grupo no son copia, sino grupo lo envió arriba, y esto será con lo que responda. Entonces vamos a tener que estar en el medio y luego algo así como tener un doctor en punto como si todavía estuviera escribiendo. Y sigamos adelante y salvemos este estilo de personaje. Guarda ese estilo de personaje en esto va a ser nuestro texto de mensaje, fondo blanco caído. Y así ahora puedo dar click en esto y cambiar eso al mismo tipo que arriba. De acuerdo, entonces podemos tener una pequeña indicación de un tipo, así que solo pongo, como, una pequeña línea aquí, tal vez una caja. 21. Pantalla de mensaje Part2: una delgada línea hasta la derecha. Yo quiero que sea un color diferente porque queremos asegurarnos de que indiquemos que eso no es una letra. Esa no es una L. realmente incómoda Esa es la indicación de que sigue escribiendo. Queremos tener un icono de envío, tal vez una flecha arriba, para especie de indicar lo que necesita presionar para enviar esto. Yo soy Entonces lo que va a crear un círculo simple y lo vamos a hacer frontera gruesa. Entonces tomemos nuestra frontera y hagamos un poco más gruesa. Quizá cuatro, quizá tres. Y podríamos cambiar el color de la frontera. Podríamos hacer cualquiera de estos debilitados hacer. A lo mejor uno de estos tonos más oscuros ahí mismo una hora para dibujar un pequeño icono de flecha Riddle flecha delgada con ésta. ¿ Cocinas ahí abajo y vamos a hacer esta guitarra verde. Yo caigo herramienta cuentagotas en, muestreo el verde y vamos a hacer estas tapas redondeadas o una ronda Y luego el gato redondeado ahí va bonito redondeado. Siempre podemos cambiar un grosor después de dibujar la línea, Dibujar línea simple y desplazar eso. Es hacer guías inteligentes, así que permítanme seleccionarlos a ambos y hacer una línea central. Eso tampoco ayuda . Entonces a veces es por eso que me gusta hacer mucho de mi desarrollo de iconos y adobe illustrator, porque simplemente me siento como Adobe XY. Es genial para hacer cosas muy básicas, pero si alguna vez quieres hacer algunos símbolos complejos, hay algunas cositas que me molestan. No hay forma de que pueda seleccionar el snap a grid off como puedes en Adobe Illustrator. Entonces le hice saltar Adobe Illustrator y conseguir un poco de botón más preciso. También está la capacidad de hacer esta causa más grande estamos retomados y un poco para que pueda seguir adelante y escalar eso más grande. ¿ Los haces alinear de esa manera? Tendrían, ya sabes, un poco más de control. Ahora también puedo agarrar mi herramienta pin y editar estos pequeños puntos. Tenemos un centro it Ahí vamos ahora, Aiken, agrupa esto y manda todo el camino hacia abajo. Creo que se me acercó tanto que estaba chasqueando a la cuadrícula y no permitiéndome, uh, centrarlo como yo quería. Entonces cambiemos. Vamos a hacer una frontera en esto y vamos a hacerles a ambos el color verde. Nos aseguramos de que ambos estén redondos de gorras a la vuelta de la esquina alrededor de las gorras y luego la hacen más gruesa. Hagámoslo un tres. Veamos cómo eso se ve alejado. Eso es acerca de lo correcto. Hazlo un poco más pequeño. Agrupa a estos tipos juntos. Podría hacer esto ensamblar y usarlo en otra parte si me gusta cómo es. Cam también puede probar diferentes colores para que podamos probar el avión o el azul. Es azul de viaje, el azul se ve un poco mejor. Voy a coleccionar ambos grupos juntos y derecho Click y convertirlo en un símbolos iba a reventar a mis símbolos. Y si alguna vez uso esto en cualquier otro lugar, si sí modifico o cambio el color, lo cambiará globalmente. A menos que decida tipo de, diferencia de propiedad, agruparlo en el poco ya no será un símbolo de enlace. De acuerdo, así que ahora ten ese pequeño y delgado borde alrededor de estos dos. Coinciden gráficamente, y éste no tiene sombra de gota. Entonces déjame agregar una sombra gota a esta caja blanca. Déjame asegurarme de que la sombra de gota tenga la misma configuración de 559 Esto no es así, Steve. Cinco cinco, Tienes la misma sombra de gota en eso. Creo que eso necesita ser reajustado un poco. Entonces déjame hacer, como un hazlo más apretado. Déjame hacer un dos y un dos y luego un dos y un a un poquito de una sombra más apretada. Por lo que la parte única de este mensaje manzanas. Tienes la capacidad de eliminar mensajes después de las 24 horas, y queremos que esa sea una opción cuando envíes un mensaje. Entonces lo que queremos hacer es ir adelante y subir este mensaje. Por lo que sólo voy a agruparlo y darle una pequeña opción de alternancia para poder borrar el mensaje. Después de 24 horas, sigamos adelante y hagamos ese blanco, y lo vamos a hacer un poco más viejo para que realmente puedan leerlo y hacerlo de ese color gris claro. Entonces hagamos nuestro pequeño botón de encendido o encendido y apagado que bajó. Ahí vamos. Entonces vamos a crear un símbolo que se parece mucho a este para nuestro toggle. Hagamos que sea el tamaño correcto primero. Y vamos a recrear este botón de alternancia. Por supuesto, Hazlo nuestro. Entonces voy a agarrar el vamos a hacer una herramienta de caja. Vamos a agregarle una forma de pastilla, ¿ acuerdo? Y vamos a tener Vamos a hacer del relleno tipo de color gris. Vamos a hacer un golpe más grueso sobre él. Entonces hagamos, como, como, un tres y hagámoslo. Podemos hacerlo más claro u oscuro. Va a ser sobre un fondo oscuro, por lo que podría ser mejor más oscuro. Vamos a hacer que esto sea nuestro. No queremos copiar lo que sea que sea éste. Entonces hagamos un círculo. Hagamos nuestros pequeños botones. Sostén el turno, hazlo. Aquí un botoncito que podría deslizarse. Donde hacer lo mismo. Ni siquiera podemos conseguir la herramienta cuentagotas. Muestra aquí algunos de nuestros colores. Voy a hacer esto más ligero así que va a ser ligero, pero no todo el camino las luces se movieron como un oscuro, y lo vamos a hacer puede ser un borde más grueso y más claro como ese. Que sea un bonito declive. Muy bien, entonces ahora podríamos hacer otro círculo dentro. Esta será la que le va a tener nuestro pequeño color. Entonces vamos a agarrar por la frontera. Agarramos nuestro Podríamos hacer el verde. Podríamos hacer el tipo azul como el azul. No, no hice que fuera una línea más gruesa. A lo mejor no tan grueso. O tal vez dividir la diferencia. 2.5. Vamos a hacer que ese círculo interior sea lo mismo que el círculo gris. Entonces yo sólo voy a hacer eso sería un relleno. Le agarraste mi cuentagotas de ojos. Muestre este aquí mismo. Ese gris. Ahora tenemos que averiguar cómo hacerlo sin chasquear. Seleccionemos un par de estos círculos y hagamos un alineamiento central. De acuerdo, así que ahí está nuestro pequeño único, pero aquí podemos añadir un pequeño efecto de sombra, como lo hace este. Podríamos describir el trazo de la herramienta de pasador alrededor, así que hagamos esa chatarra. El alfiler herramienta agregaría como un poco de sombra aquí, sólo haciendo la herramienta de pin. Ya sabes, la herramienta pin de ilustrador, Estarás justo en casa. Estaba haciendo una forma de voluntad cambiar esto a un rellenos y estas formas deshaciendo en este momento no importa . se cubrirá. No van a cambiar eso a un Phil lejos de la frontera. Vamos a hacer que sea de color sombra. Por lo que necesitamos averiguar si queremos hacerlo. Lima do comando. Está en ese atraso. Vamos a tener que hacer de esto un derrame cerebral entonces para que ese trazo pueda cubrirlo. Entonces solo soy opción do. Voy a hacer una copia de esto, y voy a quitarle el relleno. Entonces ahora sólo tenemos un derrame cerebral, y voy a poner eso encima. Podremos cubrir un poco de forma de sombra, pero también asegurarnos de que ese botón se muestre a través. Entonces, ¿ves cómo hicimos eso? Entonces eso sólo lo cubrió. Amplía y pensemos aquí en el color. ¿ Queremos hacer esto también azul? Sí. Y también hagamos eso azul. Pero vamos a hacer doble clic, Phil y hacerlo un poco más oscuro para indicar la sombra. Y podría describir mi herramienta de pin. Si necesito editar algo, saca un poco la sombra, arrástrala hacia abajo así como así. Por lo que ahí creamos nuestro pequeño botón. A lo mejor hacer ese trazo un poco para el borde, un poco más delgado. Aquí vamos. Estoy muy contenta con eso. ¿ Alguna vez un pequeño botón deslizante? ¿ Podría un grupo que juntos y bajarlo ahora que va a residir? Esto se vería realmente bien sobre el blanco. Entonces vamos a hacer dos versiones. Uno que se ve bien sobre blanco y otro que se ve bien sobre oscuro. Voy a seguir adelante y tirar esto hacia abajo. Entonces si lo pongo aquí, seguí adelante y puse nuestro botón aquí, y crecimos eso juntos. Podrían hacer clic en él, pero se siente desconectado del mensaje real para el que necesitarías hacer ese ajuste . Entonces voy a bajar esto un poco y tener la opción aquí la cual podría estar cambiando alrededor de algunas cosas, cambiando el color en tamaño. Podríamos incluso hacer este alto contraste y hacer un fondo oscuro. Ya lo teníamos hecho aquí. Entonces, no reinventemos la rueda y volteemos eso hacia abajo. ¿ Puede un estudiante mandar corchete derecho para sacarlo adelante? Ahora, podría hacer de esto un color verde lima y realmente destacar bien abajo opción tipo de ajustar mis esquinas para que coincida con la de abajo. Adelante y enciendamos nuestra grilla aquí. Eso nos puede ayudar a guiar parte de esta alineación. Siempre hablamos de nuestros otros graduados para comandar cotización. Está bloqueado nuestro mensaje. Nuestro tablero de arte En primer lugar, una nueva cotización de comando obtendría una cuadrícula más minutos. Ayúdenos con ciertos temas de alineación. De acuerdo, habla todo eso. Recuerda , activa eso de vez en cuando. Estaría bien que los perfiles coincidan. Ambos estaban por aquí a la izquierda, lo que es genial de eso y dejan espacio para nombres largos. Entonces eso será inteligente. Hagámoslos del mismo tamaño. Ambos tienen una pequeña frontera con él. Vamos a la misma frontera, así que uno y ese color en el 22. Pantalla de mensaje Part3 - animar nuestro botón de: derecho. Entonces estoy en modo prototipo. Voy a vincular esto y hacer un poco de animación para activar y desactivar eso. Entonces voy a seguir adelante, arrastrarme por encima porque quería vincularse a este estado, y vamos a hacer un auto animate, y lo vamos a hacer al grifo. Todo lo que pudo hacer, arrastrar lo que vamos a hacer, tocar en este caso. Entonces impugnamos eso en tu escritorio, lo vamos a hacer. Está dentro y fuera. Eso le va a dar un poco agradable de una transición suave. Y tenemos una 0.2 2da duración. Entonces vamos a intentarlo. Es dar click a nuestro tablero de arte y previsualizar y vamos a dar click en un botón. Hermosa. Pero mira, ahora tenemos que hacer click, tener el botón click off. Entonces ahora tenemos que hacer es vincularlo de nuevo al otro estado y hacer lo mismo. Por lo que ahora vamos adelante y previsualizarlo, y debería ser un clic de ciclo. Y cuando se hace clic fuera. De acuerdo, entonces lo que tenemos que hacer ver todo dando clic aquí, y no es la transición hacia atrás. Echemos un vistazo al lugar donde lo está haciendo así creo que lo que hice es que Onley vinculó esta casita. Entonces vamos a seguir adelante y arrastrar esto hacia fuera y especie de reiniciarlo. Pero vamos a agrupar esto para asegurarnos de que todo el bloque sea viable. Entonces sigamos adelante y seleccionemos todos nuestros elementos. Ahí vamos. Agrupemos eso juntos. Y ahora volvamos al modo prototipo. Volvamos a hacer clic en toda esa zona. Genial. Asegurémonos de que esto esté vinculado. Todo ese asunto está vinculado. Entonces todo el asunto es interactivo, así que vamos a previsualizar y esto debería funcionar perfectamente. Vamos a pasar por todo el proceso, ¿de acuerdo? Vamos a enviar un mensaje, enviar el mensaje, y luego vamos a darle un clic apagado y encendido, y y va de ida y vuelta. Hermosa. Lo que sería realmente necesario es que no pudiéramos crear otro tablero de arte y eso sería clicable. Y luego se desliza un nuevo mensaje. Por lo que todo su mensaje se ilumina. Y así si de verdad quisiéramos seguir adelante con esto, podríamos mostrar cada aspecto de esta app. Si de verdad quisiéramos pasar un par 20 o 30 horas juntos construyendo toda esta historia, pero creo que estamos en un momento donde podemos vincular unas cuantas cosas más. Pero podemos seguir adelante y terminarlo aquí. Y siempre puedo hacer más lecciones donde vinculemos seguir yendo hasta que tengamos todo el asunto todo unido y como que pasemos por todas estas diferentes, como el planificador presupuestario en la puntuación crediticia. Pero muy rápido, sólo hagamos una especie de historia y va a ser bastante brisa porque podríamos simplemente copiar y pegar su historia para empezar. Y entonces sólo necesitamos intercambiar fotos. Entonces vamos a agarrarla por aquí, ¿de acuerdo? Borrándolo, llevándola a bordo. Volveremos al modo de diseño, y solo necesitamos cortar el cambio algunas cosas la pantalla de inicio va a ser exactamente para decir bien, y el proceso va a ser exactamente el mismo. Vamos a copiar y pegar esto para mantener todas nuestras longitudes juntas aquí arriba. Sólo tenemos que asegurarnos de cambiarla por él y asegurarnos de que está en la misma posición en cada diapositiva. Podríamos hacer eso entrando en nuestras posiciones y poniéndolo en la misma posición. Y también Sarah Smith que necesita ser. ¿ Vas al modo prototipo? Se va a salvar todas esas conexiones. Todas esas conexiones que el aire ahorrado no parece que esta esté guardada. Por lo que podríamos simplemente así fácilmente. Vincula eso de vuelta a través de transacciones o que va a enlazar de nuevo a esta de aquí. Boom. Entonces vamos a seguir adelante con su historia, pero voy a parar aquí mismo. Creo que hemos hecho mucho juntos. Hemos podido desarrollar varios iconos, hacer algo de animación a algunas diapositivas. Los menús realmente se meten en la cuadrícula de repetición para ahorrarnos mucho tiempo y prototipar y tener un enlace esto y tener una vista previa en vivo subiendo a compartir publicar tu prototipo y compartiendo eso con los demás. Entonces tuvimos que divertirme mucho haciendo esto contigo, y ahora es hora de tu proyecto estudiantil. 23. Proyecto del estudiante: Ahora es hora de tu proyecto de estudiante, y quiero que diseñes una aplicación web ruidosa o móvil muy sencilla con al menos tres transiciones o enlaces. Trata de pensar en tu viaje de usuario y boca fuera su objetivo o destino final. Mantén esta sencilla y agréguela a medida que te sientas más y más cómodo con X D y las muchas opciones de animación y transición que tienes. Puedes ir la milla extra publicando un enlace en vivo de tu prototipo y publicándolo en la sección de proyectos o en mi grupo estudiantil de Facebook. Incluso puedes publicar en la sección de comunidad de esta clase para obtener comentarios de otros alumnos. Recuerda mantenerlo simple al principio. Los mejores diseños digitales son simples y se enfocan en hacer que la experiencia para el usuario sea lo más fácil y libre de dolor posible. Siéntete libre de contactarme en cualquier momento, con preguntas que puedas tener en el camino y feliz creando 24. Lección extra: crea una barra deslizable: Entonces ahora vamos a hacer un efecto deslizante fresco. Entonces tengo que dar click en vista previa para poder mostrarte lo que acabo de crear. Vamos a repasar su historia, pero en lugar de hacer clic, ¿propinas transacciones de cola? Vamos a ir por aquí para que puedan cambiar su presupuesto click a través, y vamos a poder hacer click y tener un efecto de arrastre que pueda aumentar su presupuesto. Lo haríamos una y otra vez y enumerar todos los presupuestos. Te van a enseñar a hacer esto. Técnicas de deslizamiento simples usando auto animate. Entonces vamos a seguir adelante y copiar. Tenía una copia. Nuestra pantalla de inicio. Vamos a hacer un nuevo tablero de arte. Adelante y arrastrémoslo hasta aquí. Vamos a entrar en el modo de diseño y no necesitamos ninguno de estos por ahora mismo. Vamos a seguir adelante y eliminar esos. Nos queda éste. Vamos a crear una pequeña opción de deslizador. Entonces voy a mover esto todo el camino hasta aquí. Simplemente tipo de crear nuestro pequeño bar. Podríamos todavía tener esta época la cual indicará una manera de volver a la pantalla de inicio. Podríamos tener nuestra información, pero vamos a necesitar ir por aquí y oscurecerla y oscurecerla también. Entonces ahora sólo vamos a ir a tomar este botón y vamos a traerlo todo el camino a través . Estamos haciendo nuestra pequeña porción de deslizador, y ahora ya creamos una especie de botoncito por aquí en una lección anterior. Adelante y agárralo. Ahí está. Vamos a seguir adelante y agarrar esto en un slider, así que voy a ONU agrupar esto. Todo lo que necesito es esta porción. Al igual, necesito tener un grupo esto unas cuantas veces. Tienes razón. Haga clic. Agrupar eso juntos y traerlo. Y tal vez necesite hacerlo un poco más pequeño donde podría necesitar cambiar la frontera ahí que pudieras verlo un poco mejor. Entonces hagámoslo. Los cambios bordean y se oscurecen un poco. Perfecto. Ir a agrupar mis elementos y agregar un poco de sombra que aquí, Ahí vamos. Acerca de mi opción de sombra. Tengo un grupo estos de nuevo juntos como una unidad. Entonces ahora voy a hacer la indicación de dónde están los trineos. Tenemos que hacer un color diferente para bar. Entonces acabo de conseguir una opción de espera y copiarla, y la voy a hacer azul. Por lo que esta será la porción que aún no se ha deslizado. Tengo un dos tonos pasando aquí. Haz que eso sea un poco más grueso. Podríamos cambiar mucho de esto un poco más tarde, así que hagamos la parte de animación. Entonces vamos a copiar y pegar esto en un nuevo tablero de arte y vamos a hacer la animación en diapositiva, así que se va a enviar más. Estaba tomando mis llaves direccionales y deslizándome hacia donde creo que sería un buen lugar para que terminara. Yo quiero hacer corte de un desplazamiento dramático, así que quiero hacerlo bastante lejos y solo voy a arrastrar esto hacia abajo. Entonces esto está en la parte correcta. Nosotros queremos cambiar la cantidad porque eso es lo que sucede cuando lo deslizamos hacia arriba es el monto cambia, Así que también vamos a cambiar la cantidad que podríamos hacer eso en otro momento. Cambias todos los datos es nuestro presupuesto alimentario. Aquí es donde va a empezar. Y aquí es donde va a terminar. Entonces vamos a entrar en el prototipo y enlazar esto ups vamos a despertar o abotonar tu botón se va a enlazar a éste. Pero vamos a hacer un auto animate, y lo vamos a tener como un drag en lugar de un tap, por lo que requiere que haga clic y arrastre o 13 su teléfono toque y arrastre. Ahora lo vamos a mantener en la flexibilización. Vamos a comer dentro y fuera, ¿de acuerdo? Y también queríamos volver atrás, y queremos deslizarlo hacia abajo. Entonces va a recordar la misma configuración para que no tengamos que hacer ninguna de las configuraciones. También queremos que este enlace del dedo del pie vuelva a nuestra página principal para que pudiéramos lamerlo de esa manera. Adelante y probémoslo. Seguí adelante y tengo lo mismo aquí solo un poco más finalizada con tipo, y voy a dar click en este y dar click en play. Entonces ahora voy a poder hacer clic y aguantar, y se dio cuenta de cómo cambia la cantidad también. Por lo que este bonito slider. Entonces ahora una manera fácil de replicar eso si quiero poder tener todos los presupuestos aquí, así que voy a seguir adelante y volver al modo de diseño. Consigue esto agrupado. Si estoy 100% contento con esto, me estoy preparando para replicarlo, así que mejor sea bastante feliz con ello. Voy a hacer repito grilla, y voy a bajar. Ponga todas nuestras partidas presupuestales ahí, que creo son siete c. Tenemos siete de ellas. Entonces ahora solo voy a cambiar mi con entre para que pueda tenerlos todos ahí. Entonces ahora todo lo que tienen que hacer su enlace todo esto arriba y cambiar que las cantidades. Entonces vamos a hacer sólo este gas y voy a tener estos enlazados hasta Así estos también DEET páginas individuales dedo del pie como hasta. Entonces lo que haces es solo copiar y pegar el que creamos aquí y reemplazarlo por gas. Por lo que ahora los tengo lado a lado. Tengo acabo de hacer la cuadrícula de repetición e hice esto y luego lo copié. Entonces ahora puedo hacer el estado antes por aquí y luego el estado después, visto como las cantidades cambian gota de comida y gas y los deslizadores cambiaron y los tengo ambos en su marcha Click tener un ambos en el auto, animar y arrastrar. Y ambos están vinculados a éste. Y te mostraré un poco de Ah, soy un dolor de cabeza. Es posible que tengas que pasar si quieres animar todos estos por separado. Por lo que va a dar click aquí y ver cómo se ve. Vamos a seguir adelante y arrastrar comida. Y se dio cuenta de que todos los deslizadores se deslizan hacia arriba o nuevos y las cantidades cambiaron. Entonces eso es lo que queremos, pero queremos poder hacer que los usuarios los deslice por separado. Entonces donde vas a tener que hacer es vas a tener que tener cada uno de estos por cada deslizador. Entonces vas a tener que hacer un alimento que se vincula con la comida. Por lo que éste sólo cambiaría la comida. Así que adelante y muéstrale un ejemplo. Entonces es como el gas de vuelta a donde pertenece, y sólo tendríamos la opción de comida. Entonces necesitamos copiar y pegar esto y aquí abajo sólo cambiaríamos el gas para que la comida volviera a este estado y sólo sería gas por aquí. Y luego se crea otro y se tiene todo de vuelta al estado original y se acaba de cambiar el otro. Entonces eso es un poco de dolor de cabeza si quieres cambiar cada uno individualmente, pero vale la pena el trabajo para poder verlos a todos moverse individualmente, pero hay que tener uno. Vamos a ver ahí. Siete. Por lo que necesitas tener siete diferentes con cada uno con ese solo ese estado cambiando. Yo sólo quiero tipo de show que tenías que hacer este slider. No tienes que hacerlas todas independientes, pero sólo si quieres. Pero al menos sabes cómo hacer tipo de esa animación deslizante en Puedes tener otras cosas deslizándose a nuestro alrededor. Bueno, así que juega con ese futuro auto animado. Es muy poderoso. Por lo que ahora tengo cada uno de estos. Tengo uno para la comida. Este es nuestro hogar principal. Entonces tenemos este es el, uh sólo la comida ha cambiado en este. Sólo el gas ha cambiado. Y en este, sólo ha cambiado el seguro de autos. Entonces ahora los voy a vincular a todos en prototipo para mostrarles cómo funciona esto. No los voy a completar todos menos comida. Voy a seguir adelante y ligado a la comida, y eso va a ser auto animar y arrastrar. Voy a vincularlo de vuelta al hogar. Va a salvarlo todo. Por lo que este gas ahora se va a enlazar con gas sobre este 3er 1 y luego el gas volverá a enlazar. Y por último, seguro tiene su sobre estado, que está por aquí, y eso enlaza de nuevo. Y él sólo seguiría con los otros cuatro. Entonces ahora, semana aquí para jugar, Vamos a ver cómo se ve. Por lo que ahora son cada uno individualmente movible. Simplemente se llevó mucho trabajo. Vamos a asegurarnos de que vuelvan a enlazar a cada uno de los enlaces de vuelta. Creo que los vinculamos a todos de vuelta al hogar, así que eso está bien. Por lo que sólo necesitamos asegurarnos de que los montos sean consistentes a medida que vamos y vamos y podemos duplicar eso. Pero ahí lo tienes. Así es como haces un pequeño deslizador