Mockplus RP - UX - UI Design desde cero hasta cero

1. Introducción a la clase: Mock plus rp es una herramienta de diseño y colaboración de UI UX en línea. Y lo bueno de ello es que no tienes que descargarlo a tu máquina. No tienes que molestar demasiado a tu máquina. Cualquiera que sea la máquina que tengas va a funcionar bien porque todo funciona dentro de un navegador. Puede crear diseños y prototipos ricos en interacción, compartirlos con sus clientes y desarrolladores para la transferencia. Y siempre va a incluir el código en segundo plano, lo que siempre es útil para que sus desarrolladores usen una vez que realmente llegue a ese proceso de traspaso. Hola diseñador, Alex aquí y bienvenido a esta clase de Skillshare sobre Mach plus rP de cero a héroe, un creador de productos digitales. Y hasta ahora he creado o 500 productos de diseño digital. También soy creador de cursos y hasta ahora he grabado más de 40 diferentes cursos de diseño UI UX. Y tengo más de 60 mil alumnos inscritos en esos cursos. En este curso mock plus rP, vamos a cubrir cuál es la pantalla de bienvenida y cómo navegar por la interfaz, cómo trabajar con diferentes páginas y navegar entre ellas. Qué son los componentes y componentes incorporados dentro de ma plus rP y cómo crear los suyos propios. Cómo trabajar con iconos en mock plus rP, cómo crear diferentes activos y conjuntos de activos. Cómo trabajar con el panel Propiedades y qué es y cómo cambia. Diferentes interacciones que puedes lograr en mod más rP. Cómo trabajar con nodos son puertos y aeropuertos. ¿Y cuál es la diferencia? Cuáles son nuestras plantillas, por qué usarlas y ahorrar tiempo y cómo ser más productivas. Cómo elegir una plantilla entre una gran variedad de ellas en mi sitio web. Cómo personalizar la plantilla, cómo editarla, cambiar el color de copia es el diseño y las imágenes. Vamos a empezar a trabajar con algunos diagramas de flujo, luego pasar a wireframes y usar componentes para crear wireframes muy rápidamente. Luego, convierta esos wireframes en un diseño agregando diferentes colores, imágenes y copias para crear nuestro diseño final. Al final, vamos a agregar las diferentes interacciones y dar vida a nuestro diseño. Finalmente, vamos a previsualizar, compartir y usar MC plus Cloud para trabajar con otros miembros de nuestro equipo, nuestros clientes y nuestros desarrolladores. Y voy a explicar algunas características de colaboración que tiene mock plus rP. Tu proyecto de clase para esta clase es seguir adelante y crear un diseño usando los consejos y técnicas que aprenderás de esta clase. Hay un video dedicado a la clase Skillshare. Asegúrate de comprobarlo para conocer más información al respecto. Más plus rp es genial porque es muy fácil comenzar y es gratis comenzar para que todos puedan unirse a la comunidad de diseño UI UX. Así que espero verte en clase y vamos a crear un diseño de sitio web increíble. 2. Proyecto de clase: Tu proyecto de clase para esta clase es crear un sitio web usando algunos de estos consejos y técnicas de simulacro más RP que aprenderás a lo largo de esta clase. Puedes usar plantillas o puedes crear tu propio diseño desde cero, siguiendo algunos consejos y técnicas que aprendas de esta clase, puedes seguir mi estructura o puedes crear tu propia estructura. Realmente no importa. Todo depende de ti. Y ¿qué es lo que más se siente cómodo diseñando ancho y cuáles son algunos enfoques que funcionan para su estilo de diseño? Asegúrate de divertirte y cuando termines, asegúrate de exportar como imágenes JPEG o hacer cualquier tipo de capturas de pantalla y subirlas a tus proyectos de clase. Me encantaría ver lo que se les puede llegar a ustedes y me encantaría ver sus resultados al final de esta clase. 3. Qué es Mockplus RP: Mock plus rp es una herramienta de diseño de UI UX en línea creada para diseñadores como tú porque puedes trabajar cuando, estés donde estés en el mundo, todo lo que necesitas hacer es simplemente usar tu navegador que ya tienes en tu computadora. A diferencia de otras herramientas, no requiere que tengas alguna máquina de diseño definitiva, pero puedes usar cualquier computadora que ya tengas porque como mencioné, funciona dentro del navegador y no se mete en tu memoria RAM y tu memoria caché en tu máquina. Puedes colaborar con otras personas usando más rP usando la función de compartir atreves y su función de equipo. Para que puedas crear tu propio equipo cuando estés trabajando dentro con el proyecto. O te pueden invitar a formar parte del equipo de otra persona. Y puedes trabajar en tiempo real y colaborar en tiempo real con otras personas de su equipo. O si solo eres freelancer, entonces puedes trabajar todo por ti mismo. Puedes crear complejas interacciones y animaciones dentro de mom plus rP. Y luego puede compartirlos con sus clientes o partes interesadas para obtener comentarios y mejorar aún más. Y lo que es lo mejor de todo es que puedes exportarlo y compartirlo para que los desarrolladores usen más Cloud y su perfecta integración. Es completamente gratis para empezar. Y dentro de su plan previo, hay cientos de componentes diferentes, componentes prefabricados que ya están incluidos en cientos de plantillas diferentes que puede utilizar en su flujo de trabajo simplemente editándolos y abriéndolos dentro de más más rP. 4. Pantalla de bienvenida: Como cualquier otro software por ahí, mock plus rP tiene una pantalla de bienvenida y se utiliza para ayudarte a navegar por los inicios de tu proyecto. Entonces déjame mostrarte cómo funciona. Así que aquí estamos en la pantalla de bienvenida de mod plus rP. Y lo que puedes ver aquí mismo en tu lado izquierdo es todo lo que masticamos, que es lo que ves en la pantalla ahora mismo, que es todas las opciones posibles al mismo tiempo. Entonces por debajo de eso, recientemente hemos editado. Entonces estos son los proyectos que recientemente editó. Obviamente mis favoritos porque puedes agregar cualquier proyecto a un hurón. Bastante simple haciendo clic en esta estrella aquí mismo. Y puedes trabajar en varios proyectos diferentes al mismo tiempo, pero quizás solo algunos de ellos son tus favoritos. Entonces hemos creado por mí. Y estos son proyectos creados específicamente por ti mismo. Porque cuando creas un proyecto y cuando creas una cuenta para Mach plus rP, puedes ver que va a mostrar tu asa. Entonces como sea que creaste tu cuenta, en mi caso, yo uso mi nombre y va a decir team off que a ti. Sin embargo, creaste tu cuenta. Lo que eso significa es que puedes agregar diferentes miembros del equipo haciendo clic en este botón aquí mismo a tu equipo en particular. Aquí lo que puedes ver es el plan en el que estás. O puedes estar libre o en un plan definitivo, creo. Entonces. Aquí es donde va a exhibir eso. Entonces, si eres parte del equipo, es el creado por ti mismo o alguien más te invitó a su equipo, como por ejemplo estás trabajando ya sea como freelancer para una agencia o freelancer para un cliente, o si estás trabajando a tiempo completo para una agencia, entonces vas a ver todos los proyectos creados por ti mismo. Empecé por ti mismo, pero siempre puedes invitar a otras personas a ello. Después hemos reciclado, estado en todos los proyectos que eliminaste. Por último, tenemos plantillas aquí mismo. Vamos a tocar las plantillas un poco más tarde. Pero básicamente, si necesitas usar una plantilla rápida, simplemente puedes hacer clic aquí mismo. Y te va a llevar a la página de plantillas a continuación que tenemos simulacro más Cloud. Cuando lo vemos dice Compartir proyectos, recopilar comentarios y manejar especificaciones y ácidos, lo cual es muy importante si quieres moverte fuera de mock plus rP y quieres ir al marketplace Cloud para hacer estas cosas que acaban de mencionarse. Puedes hacerlo haciendo clic aquí mismo. Y luego tenemos plus d t, que es la mejor herramienta de diseño de interfaz de usuario colaborativa o en línea. Como ningún otro, puedes usar MC plus d t para abrir archivos de diferentes herramientas como Sketch, Figma. Y ahí podrás crear tus archivos completamente desde cero. O también puedes usar más más RB, lo que estamos haciendo en este curso. Entonces si vuelvo a todo lo que podemos ver aquí mismo es el nuevo proyecto, entonces tenemos nueva carpeta de proyectos, lo cual es genial si quieres agregar ya sea diferentes archivos a la misma carpeta de proyecto o diferentes arranques del proyecto a la carpeta del proyecto. Entonces, por ejemplo, es posible que desee crear una aplicación móvil o un sitio web, diseñar una pantalla de tablero todo dentro de un proyecto. Entonces puedes crear una carpeta de proyectos y poner todos esos proyectos que crees en esa carpeta de proyectos en particular. Una vez más, ya mencioné invitar a miembros, opción y lo que hace. Y ahora, como dije, planta se encuentra justo aquí. Puedes ver tu espacio personal y puedes ver al equipo. que puedas cambiar entre los dos si así optas por trabajar en los proyectos tú mismo y nadie más de tu equipo podrá verlos o como parte del equipo, como ya mencioné, si haces clic en tu foto de perfil, puedes editar tu perfil. Puedes revisar tus equipos porque puedes formar parte de múltiples equipos. Notificaciones y solicitudes. Puedes ver la ayuda aquí mismo y cómo puedes obtener ayuda sobre RP. Y por último, puedes cerrar sesión. Si tienes varios productos, puedes buscarlos aquí mismo. Y puedes organizar tus proyectos haciendo click aquí mismo. Si quieres obtener más detalles para ver cómo es el tipo de proyecto cuando fue creado y actualizado. Y por supuesto puedes eliminarlo si así lo eliges, como dije, puedes favorito aquí mismo. Puedes hacer clic aquí mismo para previsualizar, clonar, duplicarlo rápidamente, renombrar el nombre, pasar a otra carpeta de proyecto, por ejemplo compartirlo con algunos otros miembros del equipo. Agregar o eliminar miembros del equipo de ese proyecto en particular o eliminar completamente el proyecto sobre todo. Lo que voy a hacer ahora es golpear Nuevo. Y te voy a ver en el siguiente video donde vamos a explicar qué es esto y vamos a abordar la interfaz. Entonces te veré ahí. 5. Interfaz: La interfaz de un peaje es donde vas a pasar la mayor parte del tiempo trabajando en esa herramienta. Y lo mismo es cierto para Ma más rP. Entonces continuemos donde lo dejamos en el video anterior. Déjame darte el recorrido de una interfaz, qué puede hacer y dónde se encuentran todas las opciones. Entonces aquí estamos de vuelta donde lo dejamos la vez anterior. Abrimos esta ventana. Y lo que vamos a hacer es darle un nombre. Entonces vamos a darle un nombre a nuestro proyecto . Y llamémoslo e.g., nuestro primer proyecto. Y aquí lo que puedes ver son todos los presets. Entonces estos diferentes presets pueden darte diferentes opciones, por ejemplo, iPhone. Lo que puedes ver aquí mismo es para dispositivos móviles, y si haces clic en esta pequeña flecha, va a abrir todos los presets que el equipo mock plus rP te ha proporcionado. Pero si no ves tu preset, puedes escribirles, si el dispositivo es popular, lo van a introducir. O siempre puedes ir por el tamaño personalizado aquí mismo para conocer el tamaño personalizado que quieres usar, puedes visitar el sitio web del fabricante y luego ver la sección de diseño. O si tienes un sistema de diseño ellos mismos, entonces puedes encontrarlo dentro de ahí. Qué tipo de densidad de píxeles usar y qué tipo de dimensiones usaron. Al lado de eso, tenemos el iPad, que obviamente es una tableta. Y aquí puedes ver todas las tabletas populares aquí mismo. Una vez más, si no ves tu dimensión, siempre puedes escribirle al equipo, ellos lo van a agregar. Entonces tenemos la web. Y puedes ver algunos tamaños más utilizados. Por supuesto que hay otros por ahí, pero si quieres, como dije, puedes crear un tamaño personalizado. Todos estos tamaños están en píxeles. Entonces para que empecemos, simplemente voy a seleccionar 1920 por 1080. Y una vez más, puedes acceder a plantillas gratuitas desde aquí. Puedes hacerlo desde aquí o desde aquí o dentro de la propia interfaz. Así que vamos a golpear bien, y déjame mostrarte la interfaz. Entonces mientras esto carga, puedo volver a aquí y ya ves que hemos creado este, mi primer proyecto, nuestro primer proyecto, lo siento, hace unos segundos, me voy a deshacer de éste, borrarlo, ¿bien? Y ahora tengo justamente este proyecto porque no quiero confundirte a lo largo de este curso. Entonces nuestro primer proyecto es lo que acabamos de crear. Así es como se ve. Y si mantengo mi control y rueda de desplazamiento en mi mouse o presiono Control y uno en mi teclado, va a volver a hacer zoom en su lugar. Déjame esconderme para que veas un poco mejor. Y así es como se ve la interfaz. Así que en el lado izquierdo se puede ver todo tipo de opciones diferentes. Aquí tenemos componentes, tenemos iconos, tenemos activos, páginas y capas. Y los voy a explicar todos en los próximos videos. Luego en la parte superior tenemos algunas opciones más utilizadas y tenemos opciones para compartir y colaborar aquí mismo. Y luego tenemos el panel a la derecha, que puede ser cualquiera de las propiedades, que va a ser diferente para lo que sea que selecciones el interior de tu tablero de arte, interacciones, que se usa cuando quieres agregar animaciones e interacciones entre diferentes tableros de arte. Y luego tenemos notas, si quieres agregar un nodo diferente, lo cual es realmente útil para tus clientes, por ejemplo o tus compañeros de equipo para explorar. Empecemos desde arriba. Si le das esta vuelta, flecha te va a llevar vuelta a aquí, que es la página principal. Y se puede ver recientemente editado y no se encontró tal proyecto porque este es nuestro primer proyecto obviamente. Entonces si hacemos clic aquí mismo, puedes ver proyecto. Puedo crear nuevos. Puedo importar el archivo RPI. Puedo guardarlo para controlar S o comando S en las preferencias de una Mac. Entonces cuando hago clic ahí mismo, puedo cambiar las opciones generales. Entonces puedo cambiar estos atajos, compensar colores pegados de color Canvas para que puedas elegir el fondo de tu lienzo. Entonces en este caso, es este tipo de gris medio a oscuro, pero también puedes cambiarlo y agregar tu color personalizado a este fondo. Puede ser completamente negro, puede ser gris claro, puede ser blanco, rojo, cualquier color que quieras. Puede marcar y desmarcar algunas de estas opciones generales. Entonces tenemos los ajustes de diseño, que es el diseño en un fondo, y puedes ver cómo funciona eso. Entonces tenemos otras dos columnas, columna y ancho de canalón. Entonces veamos. Canalón en el exterior tenemos las filas, tenemos lo visual. Entonces digamos algo así como, no sé, Ancho de Columna. Vamos a darle algo así como 86. Entonces obtenemos columnas un poco más estrechas, ancho de canalón. Podemos aumentar el ancho del canalón a 100 solo para que veas lo que hace. Entonces es esta opción aquí mismo, pero volvamos a cambiar a 74, por ejemplo Entonces tenemos 12 columnas. Pero si lo cambiamos de nuevo a ocho, no viste cómo se ve eso, pero volvamos a 12. Y por supuesto el ancho total, puedes reducir eso. Entonces, en vez de 1920, pasemos al 18, 20 por ejemplo y ya se puede ver que ahora tenemos este espacio de este lado, pero volvamos a 1920 porque así es como lo configuramos. Ahí vamos. Y entonces tienes el offset. Entonces, lo que puedes hacer con este desplazamiento es que puedes convertirlo en un centro o puedes colocar el valor de píxel y lo va a empujar a ese lado en particular. Entonces tenemos las filas. Si cambiamos de filas, se puede ver que las filas son estas columnas horizontales que acaban de aparecer. ancho de canalón es el ancho entre las filas. Obviamente parece que está entre las columnas y la altura. Entonces llamémoslo diez, por ejemplo y ya puedes ver lo que hace eso. Pero déjame deshacerme de estas flechas. Por último, tenemos los visuales. Por lo tanto, cuadrícula completa o contorno de trazo. Se puede ver que se ve así y lo que hace. Y puedes cambiar los colores aquí mismo. Finalmente, una vez que estés satisfecho con tu configuración, si estás usando estos valores todo el tiempo, puedes encenderlos para realizar los ajustes predeterminados. Por qué esto es importante es especialmente cuando estás trabajando ya sea como parte de un equipo o como freelancer en monosomía para los mismos proyectos por todas partes a la vez. Esto te va a ahorrar mucho tiempo porque puedes simplemente hacer clic ahí ajustes predeterminados y la próxima vez que abras más más ajustes de rP D te van a esperar, derecho, donde los dejaste. Entonces vamos a pasar a la configuración de la grilla. La cuadrícula es básicamente solo estos bloques de píxeles alrededor de tus tableros de arte. Y puedes configurarlos como quieras. Entonces si le puse a 40, se puede ver que incrementó el tamaño de estos bloques porque antes eran 20, parecía que lo hacíamos anteriormente. Puedes cambiar el color aquí mismo para que puedas cambiar la dirección y cambiar la configuración regional. Y una vez más, puedes hacer ajustes predeterminados. Entonces tenemos una medición. Se puede tener alineación básica. Entonces, cuando mueves tus objetos a lo largo de tu tablero de arte se van a alinear arriba, abajo , izquierda, derecha y centro en cada lado. Especificaciones de distribución uniforme y espaciado. Eso es básicamente. Entonces cuando golpeé OK, vamos de regreso al propio aeropuerto. Déjame esconderme para que veas un poco mejor. Nuestro tablero es básicamente el lugar donde pones todos tus elementos dentro. Aquí tengo todos mis componentes básicos. vamos a tocar un poco más tarde. Pero si arrastro y suelto un elemento dentro, puedo reposicionarlo y reorganizarlo como quiera. Y se encuentra dentro del propio tablero de arte. Puedes arrastrarlo fuera del tablero de arte y puedes ver que ahora se encuentra justo afuera. Pero si quieres crear diseños dentro de tu tablero de arte, simplemente arrástralo y colócalo dentro. Como mencioné anteriormente, este panel de propiedades va a cambiar para lo que sea que seleccione para poner en su tablero de arte. Pero vamos a lidiar con eso un poco más tarde. Y lo que también puedes hacer es crear algunos tableros de arte, que abordaremos un poco más adelante. Pero básicamente esos son puertos que se usan, por ejemplo, cuando creas un efecto o efecto de desplazamiento hacia la izquierda y hacia la derecha, digamos que vas a poner esos diferentes, ya sea páginas o diferentes secciones de tu página o aplicación móvil o lo que elijas. Puede ser, por ejemplo, una ventana emergente, agregar un banner o algo así. Tal vez una forma de vuelo o algo diferente a lo que puedes usar esos subaeropuertos y puedes conectarlos con el tablero de arte principal usando el panel de interacciones aquí mismo. Entonces, cualquier cosa que haga el usuario dentro del puerto principal del aeropuerto subpar va a seguir n se va a poner en su lugar. Entonces, si volvemos a aquí para cambiar el nombre de tu tablero de arte, simplemente puedes hacer doble clic aquí y llamarlo por ejemplo Página de inicio, digamos. Y para esto, vamos a duplicarlo. Por ejemplo, quiero tener dos de ellos. Puedes presionar Control o Comando D. Para duplicar tu tablero de arte, puedes hacer doble clic aquí mismo y decir por ejemplo digamos página de Shoppe. Si estamos creando este sitio web y entonces todos los elementos que estaban en la página de inicio se van a traducir a la página de la tienda, lo que también puede hacer es mover esto si lo encuentra molesto, por ejemplo y puede ver las distancias entre sus tableros de arte. Entonces, si quieres ser agradable y ordenado con ellos, solo puedes colocarlos como quieras. Entonces eso es suficiente para nuestros puertos ahora mismo porque vamos a tratar con ellos un poco más tarde más, lo que quiero hacer es explicar rápidamente todos estos elementos en la parte superior. Por lo que abordamos este panel en el lado izquierdo. Entonces aquí tienes tus páginas, aquí tienes tus capas, obviamente. Entonces, cuantas más capas agregues, van a aparecer más de ellas. Entonces, si duplicamos esto, puedes ver cómo se ve eso. Y si hago doble clic y lo llamo por ejemplo rectángulo, ahí tienes. Rectángulo, ahí vamos. Y ahora tengo tres capas distintas. Esta primera opción aquí mismo es el modo Conectar. Pero eso va a hacer es permitirle conectar estas interacciones entre su aeropuerto y puerto subpar o entre diferentes elementos dentro de su RPA, por ejemplo , tiene el botón y desea crear un estado de hover para diferentes componentes que se encuentra dentro de la mesa de trabajo. Eso lo vas a hacer con el patrón de interacción. Por lo que se puede utilizar en ambos sentidos. Al lado de eso, tenemos la creación de un sub tablero de arte. Entonces si hago clic en mi tablero de sub arte y arrastre y dibujo la opción aquí mismo, puedes ver que ahora tengo mi puerto sub R, que es justo lo que mencioné. Entonces digamos que esta es nuestra ventana emergente. Y se va a activar cuando haga clic aquí mismo. Entonces tenemos esta opción para el modo Conectar. Entonces, cuando mis usuarios hagan clic ahí mismo, se va a vincular. Entonces cuando hacen clic, va a comandar y mostrar tablero de arte, que es este, posicionar centro. Y vamos a abordar esto un poco más tarde. Simplemente demandado, no confundido, pero básicamente, así es como funcionan estas cosas. Junto a eso, tenemos la herramienta Pluma, obviamente, que se usa si quieres crear todo tipo de objetos diferentes que no se encuentran aquí mismo, y simplemente puedes hacer clic fuera de ella para deseleccionarlo, y luego puedes moverlo. Y cambiamos a Propiedades. Puedes ver que tienes algunas propiedades diferentes que no tenías antes. Junto a eso hay un icono de lápiz n para la herramienta lápiz. Junto a eso está deshacer y rehacer. Pero puedes ver los atajos aquí mismo. Así Control Comando Z o Control Shift, Comando Shift set. Entonces tenemos la opción de grupo. Entonces, si selecciono todos mis elementos aquí mismo, puedo darle a esto o presionar Control G para que los agrupe. O puedo golpear Control G Una vez más para desagruparlos si así lo elijo. Entonces puedes hacerlo aquí mismo. Entonces puedo seguir adelante y seleccionar estos desde aquí, presionar Control G para agruparlos, doble clic y llamarlo por ejemplo rectángulos porque eso es lo que son. O si no los quiero dentro de un grupo, puedo desagruparlos. Pero también puedes hacer es mover esto hacia arriba, mover esto hacia abajo, hacer con él lo que quieras, y luego traerlo al frente y traerlo a atrás. Entonces para demostrar la deuda, voy a llenar este objeto de color rojo solo para que lo veas. Entonces ahora está frente a estos rectángulos. Si lo escalo manteniendo pulsada la tecla Mayús, puedes ver cómo se ve eso. Entonces cuando haga clic aquí mismo, enviar a atrás, lo va a enviar detrás de estos rectángulos. Y ahora si queremos traerlo al frente, si puedo seleccionarlo, simplemente puedo dar click aquí mismo. Pero si no puedo seleccionarlo, puedo hacer clic en el ítem que está delante de ese artículo y enviarlo al dorso. Así es como funciona eso. Y entonces lo que tenemos aquí mismo es nuestra lista de puertos. Actualmente solo tenemos una mesa de trabajo, pero por ejemplo si vuelvo y Control D para duplicar eso. Y ahora cuando haga clic aquí en esta opción, tenemos dos mesas de trabajo. Ahora bien, puede sonar un poco tonto cuando solo tienes dos mesas de trabajo. Pero estos proyectos de UI a veces pueden tener 200 palabras, 300 aeropuertos. Tener una opción como esta es realmente importante porque simplemente puedes saltar a esa mesa de trabajo en particular haciendo clic en ella y podrás ver lo que hace. Así que puedes imaginarte que estás en algún lugar por aquí y quiero hacer click en Homepage me va a llevar directo a ella. Comando de control uno para volver a encajar en posición, deshazte de este. Y por eso nuestra lista de puertos es tan valiosa y tan importante junto a ella, lo que tenemos. Si vuelo el cursor, se puede ver todo tipo de opciones distintas, pero esta es panel estate, ahora Estados es como se ve el elemento cuando el usuario hace la interacción con ese elemento. Entonces, por ejemplo, la deuda puede ser un estado predeterminado, un estado estacionario, estado de clic, estado de prensa , estado discapacitado y mucho más. Entonces, dependiendo de tu proyecto, tendrás más o menos de estos estados. Entonces, para demostrarlo rápidamente, seleccionemos un botón rápido y escribamos algo así como Leer más aquí mismo. Haga clic en algún lugar afuera. Y vamos a agrandar ese botón solo para que lo veas un poco mejor. Cambiemos el color de relleno a este azul. Cambiemos este color de texto a blanco. Cambiemos esto a, digamos Roboto y algo grande como quejarse a tal vez algo así. Entonces ahora tenemos nuestro botón. Vamos a deshacernos de este borde y este botón porque lo arrastramos desde el panel de componentes justo aquí donde dice que el compost es los componentes predeterminados. Por supuesto, puedes crear tu propio componente y agregarlo a los activos aquí mismo. Vamos a hablar de eso un poco más tarde. Entonces, cuando haces clic aquí mismo, tienes seleccionados todos estos estados que han desactivado pulsado el mouse enfocado hover y mucho más. Entonces ahora mismo estamos en el estado normal. Entonces cuando lo cambio a mouse hover, y cuando voy y hago algo con el color de relleno, por ejemplo, algo así. Y vuelvo al estado normal y cambio entre normal y hover del mouse. Puedes ver cómo se ve, pero ¿cómo puedes previsualizarlo? Puedes hacer una vista previa rápida aquí. Así que en cuanto lo haga, puedes simplemente pasar el cursor y podrás ver lo que le hace a tu botón. Puedes cambiar el contenido dentro de tus componentes, en este caso el botón en cualquiera de estos estados. Entonces por ejemplo al pasar el mouse, no debería decir Leer más botón, haga clic ahora o lo que sea. Puedes cambiar el tamaño de tu botón. Se puede cambiar el color. Puedes incluir el gradiente, así que realmente puede ser creativo con estas fechas. Y puede ver que tiene un montón de estos diferentes estados prefabricados para todos estos componentes prefabricados. Y por supuesto puedes crear el tuyo propio. Puedes hacer clic en Agregar, estado, nombrarlo como quieras. Entonces, por ejemplo, digamos deshabilitado también porque ya lo hemos deshabilitado. Y ahora en este deshabilitado, puedes seguir adelante y editar más y agregar nuevos cambios. Puedes renombrarlo y puedes hacer lo que quieras con él. Entonces básicamente, estos son los estados en pocas palabras. Entonces tenemos la opción Zoom y Zoom. Simplemente puede hacer clic en estos. O si tienes rueda de desplazamiento en tu mouse, puedes usar Control o Comando y simplemente usar la rueda de desplazamiento en tu mouse. Y como dije, Control Cero, controla un control para, solo puedes jugar con esos ajustes. Entonces has publicado la opción, lo cual es genial si quieres publicar esto como prototipo para otros lo comprueben ya sea de tu equipo o de algún otro equipo. Entonces una vez más, tenemos miembros y puedes hacer clic e invitar a diferentes miembros. Puedes cambiar el tipo de proyecto de privado a equipo. Y va a ser accesible para todos los miembros del equipo actual o todos los miembros de este proyecto, lo cual es realmente importante porque tal vez solo quieras invitar a pocos diseñadores, son pocos compañeros de equipo a este proyecto en particular antes de que lo hagamos público y esté disponible para el equipo más amplio como el marketing, como, no sé, finanzas y cosas como eso. Puedes invitar a miembros. Rol, solo puedes agregarle estos roles, algún miembro, colaborador, invitado. Puedes ver lo que cada uno de ellos puede hacer cuando caduca el enlace e invitar al enlace para que puedas copiarlos y enviarles este enlace y ellos van a poder unirse. Y una vez que lo hagan, los verás aquí mismo. Al lado de eso, lo que tenemos es descargar paquete de presentación prototipo en línea, que es realmente útil cuando intentas vender el NVP ya sea a los inversionistas o a los miembros superiores de tu equipo, como los directores de junta, cosas así. Entonces puedes descargar este prototipo y compartirlo con ellos ya sea en persona para explicar más a fondo lo que estás tratando de hacer aquí mismo, o si no quieres publicar tu proyecto y no quieres invitar a la junta directiva, por ejemplo, para ver este proyecto, entonces simplemente puedes compartir este proyecto con ellos. Pueden abrirlo en su propia máquina y van a poder ver todo lo que hiciste. Y voy a mostrar cómo se ve eso un poco más tarde. Al lado de eso teníamos la opción de previsualización. Entonces voy a dar click ahí mismo. Se va a abrir una nueva ventana. Una vez que se carga, puedes ver todas estas opciones que vimos. Y esto es lo que su junta directiva, por ejemplo a. podrá ver si descargan el prototipo. Entonces lista de páginas va a estar justo aquí y todavía tienen la opción de búsqueda. Pueden navegar por estas páginas, pueden subir a pantalla completa. Pueden ocultar estos paneles aquí mismo. Así que oculta el panel de hidruro izquierdo si así eligen pantalla completa y presionan Escape para salir de pantalla completa. Y claro que pueden hacer zoom que se ajusten a la pantalla, por ejemplo, volver a pantalla completa y ahora tienes tus sitios web completos, digamos paquete de presentación. Y es genial porque todo se explica ahí mismo. Pueden compartir aún más este enlace de vista previa. O puedes establecer lo que pueden hacer clic y lo que no pueden hacer clic siempre mostrar área de enlace. Entonces eso va a mostrar qué, lo que está vinculado dentro de esta página en particular, Charlene carrier on mouse hover. Entonces, una vez que pasan el cursor sobre tu enlace y lo que realmente hiciste clicable en esta página, va a mostrar que el contenido de afuera nace, no marcadores y ocultar la barra de herramientas. Aquí es donde van a vivir las notas. Entonces por ejemplo, si quieres hacerles saber lo que va a ser en la próxima versión, ¿qué se va a incluir más adelante? ¿Qué hay aquí ahora? Qué tienen que hacer si quieres ayudarlos con algunos aspectos de ese diseño, puedes ponerlo en las notas aquí mismo. Entonces así es como se ve la vista previa. Y el miércoles, una vez que lo descargues y los compartas, esto es lo que van a poder ver. Si haces clic aquí mismo, puedes comenzar desde página principal o comenzar desde la página actual, lo cual obviamente es genial si tienes varias mesas de trabajo y quieres cambiar What's homepage para ese proyecto en particular. Y entonces aquí tenemos entrar a pantalla completa ocultar panel izquierdo, panel hidruro. Y ahora solo puedes enfocar tus esfuerzos en el diseño completo si así lo eliges. Ahora, no puedes mostrarlos cuando pasas el cursor, tienes que hacer clic aquí para mostrar el panel izquierdo y mostrar el panel derecho, por ejemplo, tal vez estés usando solo los atajos para buscar lo que quieras e incluido dentro de tu proyecto, entonces vas a poder simplemente ocultar esto o no necesitas capas, solo necesitas crear algo realmente usando rápidamente estos rectángulos. Entonces por ejemplo, si tecleo R, me va a mostrar el rectángulo. Si tecleo todo e.g me va a mostrar el círculo. Si tomo t me va a llevar a la herramienta Type. Entonces, a veces realmente no necesitas estas capas para distraerte. Y ahí es donde esta opción viene muy bien. Simplemente puedes ocultar estos dos paneles. Y por último, como se mencionó, pero quiero mencionar una vez más muy rápido, este panel del lado derecho va a cambiar lo que se seleccione. Entonces déjame mostrarte. Si vuelvo y selecciono, digamos la herramienta tipo, tenemos las opciones de tipo y tenemos opciones limitadas aquí mismo porque esas son las opciones para el tipo en sí. Entonces tenemos el círculo. puede ver que va a cambiar un poco. Entonces tenemos el rectángulo. Va a cambiar. Una vez más, me va a dar algunas opciones adicionales. Y si elegimos mi forma personalizada que creé anteriormente, entonces también me va a dar todas estas otras opciones. Pero hay una opción que es realmente importante y se llama páginas. Se encuentra justo aquí. Y te voy a decir qué hace y cómo puedes usarlo en el siguiente video. Entonces te veré ahí. 6. Páginas: Cuando estás trabajando en un proyecto, quieres dividirlo. Así que es fácil para ti navegar y para tus compañeros de equipo es fácil navegar. Ahí es donde la opción de páginas viene muy bien. Porque dentro de la opción de páginas puedes hacer precisamente eso. Así que volvamos al modo más rP, yo muestro cómo funciona. Entonces aquí estamos donde lo dejamos la vez anterior, y aquí están las páginas del lado izquierdo. Ahora actualmente solo tenemos la página principal y esto es lo que ves aquí mismo. Si hago doble clic aquí y cambio esto a la página de la tienda, por ejemplo y cuando hago clic en casa, esta es la página de inicio real. Pero si queremos crear otra página, da clic ahí mismo, me va a mostrar la página uno. Entonces para la página uno, todavía va a crear ese nuestro tablero, porque lo configuramos como nuestros predeterminados. Creamos el de la propia página de inicio. Pero aquí lo que podemos hacer es, veamos, veamos qué hicimos aquí mismo. Entonces ella va a pagarle aquí. Podemos hacer algo como blog, por ejemplo, así que usted puede hacer esto. Entonces, cuando cambies entre home, que va a ser la página de tu tienda, y puedes hacer doble clic derecho tú para cambiarle el nombre. Así que compre, por ejemplo esto se puede bloguear, por ejemplo para que pueda cambiar fácilmente entre estas páginas si así lo desea. Pero eso no es realmente lo que usaría estas páginas sin usarlas es algo así como diagramas de flujo. Y estos van a ser nuestros diagramas de flujo, por ejemplo, entonces este va a ser nuestro wireframe. Y vamos a darle el nombre de un wireframe. Entonces cuando haga clic en Nuevo, voy a usar este para el diseño. Y si hago zoom y pego esto, vamos a usar este para el diseño. Y finalmente, para crear uno nuevo, vamos a darle algo como proyecto o brief de diseño. Entonces puedo cambiar fácilmente entre estos. Déjame renombrar esto también, mi Excel. Entonces como dije, pueden cambiar fácilmente entre estos y yo puedo moverlos. Entonces dentro de los diagramas de flujo, puedo incluir el resumen de diseño si así lo elijo, o puedo moverlo afuera un poco. Simplemente colóquelo afuera. Haga clic con el botón derecho y podrá ver que puede copiarlo. Se puede insertar una página o un grupo. Puede clonar un renombrar o eliminar si así lo desea. Pero lo que quiero hacer en realidad es volver a ello y simplemente moverlo afuera, así. Si quieres, puedes seleccionar varios y simplemente agregar página o agregarlos a un grupo. Y se puede ver que agregó este grupo. Pero lo que también puedes hacer es seleccionarlos y crear un nuevo grupo aquí mismo. Y puedes poner lo que quieras en ese grupo. Entonces, por ejemplo , archivos de diseño, porque puedes tener varias páginas en tu proyecto. Y digamos breve diseño, quiero incluirlo en ese grupo. Y puedes ver que está incluido aquí mismo, digamos diseño. Y va a colocar que muestre número dos porque tiene dos archivos en su interior. Obviamente, si tienes varios archivos va a incluir varios archivos en su interior. Retrocedamos unos pasos y voy a seleccionar mi carpeta, presionar eliminar, y va a decir que voy a eliminar este grupo. Entonces, básicamente, para eso usaría estas páginas. Cuando tienes tu resumen de diseño de tu cliente, por ejemplo, si vas a leerlo y navegar muy fácilmente aquí mismo, entonces vas a pasar a los diagramas de flujo. Crear algunos diagramas de flujo rápidos son gráficos página impresionantes o flujos de usuario o lo que quieras. Y luego, una vez que hayas terminado con ellos y tengas tu estructura en su lugar, y vamos a pasar a wireframes rápidamente diseñamos algunos wireframes básicos. Dibuja algunos rectángulos en una página, por ejemplo, o veamos algunos círculos y colóquelos donde quieras en la página. Entonces digamos algo así para obtener algunos diseños rápidos sin ningún color, tal vez puedas usar algún bonito color gris fácil solo para diferenciar tus elementos. Y luego puedes pasar de esos elementos al diseño, donde agregarás algunos colores. Agregará alguna copia clara del proyecto topografía clara. Hay divisiones claras con iconos, con imágenes, con animaciones e interacciones. Y entonces este diseño es lo que en realidad vas a publicar o descargar como prototipo para compartir con tus clientes. En el siguiente video, vamos a hablar de componentes porque son parte súper importante de mock plus rP. Hay cientos de ellos y te voy a mostrar lo que realmente hacen y cómo puedes utilizarlos en tu trabajo usando más más rP. Entonces te veré ahí. 7. Componentes: El trabajo de diseño de la interfaz de usuario es generalmente bastante repetitivo. Lo que eso significa es que muchos de los elementos se están repitiendo a lo largo del tiempo. Entonces, si puedes ahorrar un poco de tiempo sin crear esos elementos, cada vez que comiences en un nuevo proyecto, vas a ser bueno porque vas a ahorrar mucho tiempo en tu proyecto cada vez. Ahí es donde los componentes vienen muy bien. Y los componentes pueden ser súper simples, como un rectángulo, por ejemplo, o pueden ser componentes realmente complejos hechos de varios elementos diferentes como la barra de navegación, por ejemplo, o un control deslizante, o una página de tienda completada, o un carro de caja o algo así. De cualquier manera, los componentes son súper útiles y realmente te animo a comenzar a explorar componentes y empezar a usarlos. Porque sobre todo con botones, Digamos que van a repetirse a lo largo del tiempo. Y no quieres perder tu tiempo creándolos cada vez. Así que vamos a saltar a más más rP. Yo te muestro algunos componentes predeterminados que se incluyen desde el principio cuando comienzas con block plus rP. Entonces aquí estamos dentro de la interfaz donde lo dejamos la vez anterior. Y aquí tenemos la página de diseño seleccionada. Y por debajo de eso tenemos esta composta, que es la abreviatura de componentes. Debajo de eso tenemos opción de búsqueda. Entonces si busco por ejemplo a. rectángulo porque puedo verlo, puedes ver el rectángulo aquí mismo. Entonces es, está dentro de lo básico y dentro de las formas, básicamente el mismo componente ahí mismo. Vamos a deshacernos de él y volvamos. Tan básicas son las formas básicas que ves ahí mismo. Déjame cambiar a wireframe es porque va a ser mucho más sencillo demostrarlo ahí. Entonces si arrastre y suelte un rectángulo como lo hicimos anteriormente, como mencioné anteriormente, tienes diferentes opciones para tu rectángulo. Justo aquí. Se puede jugar con el color de relleno, con el color de la caldera. Puedes colocar donde quieras que esté tu frontera. Puedes redondear tus esquinas por cualquiera de las esquinas separadas. Entonces cuando pasas el cursor, puedes ver y cuando cambias mucho, 50, puedes ver que esta es esquina superior izquierda porque eso es lo que actualizó. O si quieres agregar todo a 50, entonces puedes hacerlo aquí mismo. Se va a actualizar, actualizar cada esquina. Entonces puedes agregar eso por porcentaje, puedes agregarlo por sombra. O lo bueno de los componentes es que cuando selecciono mis componentes, tienes estas extensiones. Para que puedas mostrarlos u ocultarlos. Y tienes esta opción de forma. Ahora estas extensiones van a ser diferentes para lo que sea que selecciones en tu página y los componentes que elijas. Igual que el propio panel Propiedades, dependiendo de qué forma hayas elegido, qué componente aquí lo elegimos. Obviamente, puedes agregarlo a diferentes opciones para cada una de ellas. Puedes cambiar los colores, puedes cambiar el color del borde, por ejemplo, entonces puedes agregar un tipo en cada uno de ellos. Pero para algunos de ellos, va a ser realmente específico dependiendo del componente que lo selecciones y dependiendo de lo que se suponga que haga ese componente. Aquí, lo que tenemos para este rectángulo en particular es la opción de forma. Entonces cuando hago clic en él, puedes ver todo tipo de formas diferentes apareciendo aquí mismo. Entonces esto es realmente útil porque puedes cambiarlo fácilmente de estas esquinas rectas a las esquinas redondeadas, por ejemplo así cuando hago clic fuera de ella, puedes ver que ahora tenemos estas esquinas redondeadas. Y cuando regrese a aquí y seleccione mi opción, vuelva a mi forma y la cambie a aquí o a aquí. Se puede ver que ahora tenemos estas esquinas redondeadas. Entonces si lo extiendo, puedes jugar con él y puedo ajustar lo que quiera con estas formas. Pero si volvemos a mi defecto, se puede ver que ahora no los tengo. Entonces esa es la opción con estas formas. Y me gusta mucho usarlas porque puedes cambiar fácilmente entre esas opciones. Entonces tenemos por ejemplo la opción de línea, que es ideal para divisores de línea entre diferentes secciones y saltos de página, digamos texto. Puedes arrastrarlo y soltarlo y escribir algo. Entonces vamos, vamos a escribir algo. Y lo que puedes hacer con el tipo es que puedes extender la zona donde el tipo va a fallar hacia la izquierda, derecha, arriba y abajo así. Si quieres crear un párrafo rápido que va a llenar este espacio en particular, entonces puedes rotar tu tipo haciendo clic aquí mismo. Y una vez más, puedes vincularlo para cualquier tipo de interacción diferente que quieras con este enlace en particular. Para que puedas crear, digamos, efecto de hover sobre él. O puedes vincularlo a algunas otras partes de tu diseño. Una vez más, la extensión tiene diferentes opciones para el tipo. Para que puedas fijar la posición donde se está arrastrando. Puede agregar una información sobre herramientas o un enlace externo. Si quieres que este tipo agregue algo más en línea, puede usar el Color de Relleno, Color de Borde para la forma, o puede elegir la tipografía aquí mismo. Por el momento, Google Fonts y Adobe fonts no están funcionando, pero vamos a trabajar con type en una lección separada. Así que vamos a pasar de eso. Pero estas son tus opciones para el tipo al lado, tienes tu imagen, para que puedas escalar esta imagen, algo así. Por ejemplo o puedes escalarlo a algo como esto. Para que puedas hacer lo que quieras y puedas ver cuando lo mueva, me va a mostrar diferentes opciones. Puedes sostener tu tecla Mayús para seleccionar diferentes elementos y moverlos juntos, por ejemplo, así que cuando mantenga la tecla Mayús y la flecha inferior, se va a mover en incrementos de diez, como puedes ver aquí mismo. Y cuando hago clic y mantengo pulsado mi tecla Alt, puedes ver las distancias entre todos los diferentes elementos y todos los bordes diferentes. Entonces, para agregar una imagen diferente, se selecciona lo que puedes hacer y una vez más, bajo extensión, porque esta es una imagen, va a verse un poco diferente. Tienes tus opciones de subida. Así que obviamente puedes subir desde tu computadora y puedes usar todo tipo de imágenes diferentes y subirlas ahí. Pero básicamente, lo que también puedes hacer es usar algunos enlaces y copiar y pegar estas imágenes dentro por ejemplo si queremos usar imágenes en línea, pero siempre te recomendaré almacenar esas imágenes en tu máquina. Si algo sale mal, no puedes encontrarlo en línea. Tu Internet no funciona, lo que sea, entonces solo puedes usarlo. Haz clic en Subir y te va a mostrar. Así que haz clic para subirlo o arrástralo y suéltalo hasta aquí. Puedes conservar el tamaño original, pero puedes dejar más imágenes de muerte optimizadas más rP para ti. Pero quiero mostrar es esto, que es una opción fantástica que tienen. Entonces este es el estilo predeterminado, o puedes cambiarlo al estilo wireframe. Entonces va a aparecer así, lo que realmente me encanta ver. Puedes cambiar entre estos y tus clientes pueden decir fácilmente, bien, entonces esta es una imagen y puedes ver cuando empieces a estirarla, va a tomar diferentes formas. Digamos porque esto es 1920, vamos a posicionarlo en los centros de muertes y extendamos, digamos que esta es una imagen de héroe. Puedes ver lo genial que se ve y qué tan formado ya está nuestro diseño, y solo incluimos un elemento. Entonces tenemos la parte inferior, que probablemente sea la opción más utilizada en línea y dentro del espacio UI UX. Entonces si cambio eso a 300 por el ancho, y veamos, 64 y una altura. Lo que puedo hacer dentro es cambiar el tamaño de mi fuente a 32 tal vez. Y se puede ver que es enorme. Política volver a 24 o incluso a 18. Creo que esa es buena. Para que pueda cambiarlo a negrita. A ver. Puedo cambiar el color de relleno a, digamos este bonito color azul. Vamos a deshacernos de la frontera. Y usemos algo así como un bonito color blanco para nuestros textos. Y puedes hacer doble clic para cambiarlo, a Click aquí, por ejemplo y una vez más, puedes llevarlo a enlace externo. Se puede utilizar una punta de herramienta. Se puede fijar la posición al desplazarse. Y lo que eso hace es cuando seleccionas tu tablero de arte, puedes estirarlo alrededor. Y cuando empieces a desplazarte, este elemento se va a quedar fijo, cual suele ser genial para elementos de navegación como Menús. Entonces por debajo de eso tenemos entrada. Como dije, básicamente es lo mismo que botón, pero la entrada es la más utilizada dentro de los foros. Entonces tenemos área de texto, que es genial para los párrafos. Contamos con contenedores. Y el primero es un panel. Y el panel es un componente que te permite poner todos los elementos que necesitas en un solo lugar y usarlos todos a la vez. Es un componente agradable que puedes usar para crear diseños como tarjetas, por ejemplo, o secciones desplazables para tu proyecto. Al lado de eso, tenemos el panel de contenido. Y ese es un componente que te ayuda a crear el efecto de una pestaña, por ejemplo, para el cambio de contenido. Y puedes usarlo fácilmente con puertos subpar para lograr ese efecto si quieres. Y por debajo de eso, finalmente, tenemos la vista web, y ese es un componente que te ayuda a diseñar rápidamente sitios web. Y lo más importante, le permite ingresar directamente la URL de un sitio web para incrustar directamente ese sitio web en su interfaz. Entonces, al ser vista previa, podrá interactuar con ese sitio web incrustado ya que realmente lo hace directamente en línea. Debajo de eso tenemos componentes comunes, que me gustó mucho llamar componentes del sistema de diseño. Porque vas a encontrar estos componentes en la mayoría de los sistemas de diseño que existen. Y una vez más, van a ser diferentes para cualquier componente que selecciones. Y te van a dar diferentes opciones en el lado derecho. Entonces digamos app navbar. Puedes ver cómo se ve aquí tenemos algunas opciones diferentes. Entonces tenemos icono, hemos seleccionado colores. Entonces, cuando haces clic ahí mismo, podrás ver qué hace eso cuando seleccionas la opción diferente. Entonces, para deslizar el icono directamente para seleccionar un icono en el componente y hacer clic en el icono que quieras en las bibliotecas, que es este el que vamos a abordar en el siguiente video. Pero básicamente así es como funciona este componente. Y tienes la mayoría de ellos aquí mismo. Entonces tenemos los gráficos, obviamente autoexplicativos, cualquiera que sea el tipo de gráfico que quieras incluir, solo puedes arrastrarlo y soltarlo. Usemos este gráfico y puedes jugar con todas estas opciones aquí mismo. Entonces tenemos el marcado, que es una de mis opciones favoritas. Cambiemos a diagramas de flujo. Y vamos a deshacernos de algunos de estos elementos. Algo así. Estoy encantado con esto. Y cuando quiera agregar algo, puedo hacer doble clic en mis elementos. O si los selecciono y los pongo en grupo, cuando hago doble clic. Se puede ver que se está enfocando en un elemento, que es el que estoy tratando de editar actualmente. Y ahora va a enfocarse en este elemento. Entonces, cuando termines, estás editando, agregando textos, cambiando colores, cambiando formas, agregando imágenes, cualquier cosa que estés haciendo al hacer clic afuera va a salir del efecto enfocado y solo te permitirá moverlas y seleccionarlas obviamente, volver a ese modo enfocado para edición. Pero volviendo al marcado donde esto es importante, especialmente con diagramas de flujo, es usar estas flechas. Entonces, si hacemos zoom un poco más, tienes dos puntos y puedes mover estos dos puntos como quieras. Puedes ver la opción Inicio aquí mismo. Entonces digamos que ninguno. O incluso mejor. Vamos a agregarlo. Vamos a volver a agregarlo como fue a, a, a, a, decir, digamos esta opción. Ahí vamos. Entonces mi punto final va a ser ninguno. Entonces voy a usar Control C, Control V para pegarlo alrededor. Y luego voy a sostener mi tecla Mayús. Y luego para éste, se puede ver que está cambiado. Punto de inicio. Lo puso aquí mismo, pero el punto final lo puso ninguno. Entonces para este punto culminante, voy a usar este círculo. Veamos qué es. Ahí vamos. Sólo voy a darle un codazo un poquito a algo como esto. Y ahora para mi punto final, voy a usar la flecha. Para que veas lo sencillo que es esto. Digamos que aquí tenemos nuestro componente rectángulo. Simplemente arrástralo y suéltalo dentro, algo así. Digamos copiar y ponerlo aquí mismo y dentro de eso, puedo poner digamos Home page, algo así. Y obviamente puedo reducir el tamaño a tal vez diez o algo así. Y puedes estirar esto con bastante facilidad y mostrar a los usuarios cómo navegar tu, tu producto o mostrar a los stakeholders, son tus compañeros de equipo, tus ideas, y los mejores enfoques que pueden tomar. Obviamente, esto puede expandirse ampliamente e incluir varios elementos diferentes, pero esto es solo en esta presentación los métodos que puedes usar. Ahora por debajo de eso, lo que tenemos dentro del marcado es un marcador circular. Se puede usar eso en conjunto con la flecha. Puedes usar las notas adhesivas si quieres agregar notas rápidas dentro de tu diseño o justo fuera de él, puedes simplemente colocar tu nota adhesiva aquí mismo. Entonces, cuando tu compañero de equipo salta, puedes decirles algo así como agregar diferentes imágenes de las que hablamos ayer o algo así. Así que solo puedes jugar con estas notas adhesivas y son realmente útiles una vez que se completan, solo puedes presionar Eliminar y deshacerte de ellas de la página por completo y soltar marcador, obviamente un gran componente para tener si estás creando mapas. Entonces por debajo de eso tenemos todo tipo de formas diferentes que puedes usar. Y el Mach plus rp está incluyendo todo tipo de formas diferentes, desde las muy, muy básicas hasta las que son complejas como esta. Y esto me recuerda a un icono y consulté con el que vamos a hablar en el siguiente video. Entonces te veré ahí. 8. Iconos: Ya sabes como dicen una imagen dice mil palabras. Para eso están los íconos. Y en este video, te voy a mostrar íconos, qué hacen y qué puedes hacer con íconos dentro de más más r p. así que aquí estamos de vuelta en un pase rp donde lo dejamos. Y aquí tenemos el ícono. Entonces voy a dar click aquí mismo. Puedes ver todo tipo de opciones diferentes. Entonces, una vez más, tenemos la búsqueda que es separada de los propios íconos. Entonces, si tecleo en persona por ejemplo puedes ver todo tipo de iconos de personas diferentes. Y cuando arrastre el icono aquí y acerco un poco más, tenemos todas las opciones que ya abordamos. Pero lo mejor de esto es cuando arrastra y suelta el icono aquí mismo. Como puedes ver, es tan rápido como esto, pero puedes cambiar el estilo. Entonces tenemos la lata y tenemos el estilo del perno, podemos cambiar el color. Así que vamos a actualizarlo a este color, por ejemplo, tenemos el tooltip y el enlace externo. Y dependiendo de cómo este icono vaya a preferir, tenemos la melodía y tenemos el perno. Entonces para todos ellos, a veces va a cambiar drásticamente, a veces no lo es. Pero básicamente se puede ver cómo se ve esto. Por supuesto, también puedes simplemente colocar estos iconos donde quieras. Entonces por ejemplo si elegimos este componente, vuelve a las capas y puedes ver que aquí estamos en el componente button. Si trato de arrastrarlo dentro, sólo va a colocarlo aquí. Así que en realidad tendría que agruparlos así para poder ver este icono dentro de este botón. Así que por supuesto puedes crear el botón diferente con el icono dentro de él si quieres. Pero ahora, cuando empiezo a moverlos, se puede ver que ahora están dentro del mismo componente. Cuando traté de arrastrarlo, se ve que reduce el tamaño de todos ellos. Y si sostengo mi tecla mayús, va a reducir el tamaño de manera uniforme. Eso es una gran cosa de los íconos. Puedes cambiarlos, puedes cambiarlos. En. Aquí puedes ver que tenemos el gesto de gráfico de Office y todo tipo de categorías diferentes con las que puedes jugar con él. Y se puede ver que algunos de ellos son un poco de estilo diferente. Entonces tenemos el estilo de hojalata aquí mismo. Y si lo actualizamos y cambiamos a negrita, puedes ver cómo se ve eso. Una última cosa que quiero señalar es esto con la interacción. Entonces, si hago clic y arrastre mi interacción hasta aquí, por ejemplo, puede cambiar los disparadores, puede cambiar el estado. Puedes cambiar el estado de normal a desactivado, por ejemplo y cosas así. Pero vamos a abordar esto en una de las lecciones futuras. Pero por ahora, sólo voy a dejarte con esto. Entonces, básicamente, estos son los íconos y esto es lo que puedes hacer con los propios íconos. Y puedes cambiarlos, puedes reposicionarlos, puedes reordenarlos, puedes ponerlos donde quieras y hacer con ellos lo que quieras. Y lo mejor de esto es que todos estos iconos están pre incluidos dentro de mock plus rP. que no tengas que perder el tiempo buscando estos iconos en línea y cambiando entre diferentes paquetes de iconos. Por supuesto, puedes arrastrar y soltar tus iconos desde tu computadora, por ejemplo, dentro de nuestro p.sit, van a funcionar bien. Pero para este ejemplo en particular, me gusta usar estos iconos porque ya están incluidos en cada icono que se te ocurra ya está aquí mismo. Entonces, ¿por qué perder el tiempo buscando diferentes íconos en línea? Al lado de eso, tenemos los activos y vamos a abordar eso en el siguiente video. Entonces te veré ahí. 9. activos: Tener todos estos activos y elementos predeterminados dentro de mob boss rp es genial. Pero, ¿y si quieres crear tus propios activos y quieres guardarlos para su uso posterior, ya sea por ti mismo o con tus compañeros de equipo? Bueno, ahí es donde entra en juego la opción de activo. Y volvamos a saltar a mi más RP. Déjame mostrarte lo que eso hace y lo que puedes hacer con él. Entonces aquí estamos de vuelta donde dejamos el video anterior, y aquí tenemos la opción de ácidos. Entonces cuando selecciono mi opción de activos, puedes ver que tenemos tres opciones diferentes. Tenemos colores, texto y componentes. Entonces, como mencioné, puedes crear tu propio componente predeterminado desde cero. Entonces déjame mostrarte cómo funcionaría eso. Y todavía estamos en las capas, todavía estamos dentro de los wireframes están aburridos. Entonces hagamos precisamente eso. Vamos a crear un botón, por ejemplo nuestro, arrástrelo a algo como esto. Así que vamos con 50 tal vez. Y vamos a escribir algo diría, leer más. A ver. Voy a posicionar ese texto en el centro de mi botón. Voy a seleccionarlo y usarlo, digamos algo así como diez para el radio de esquina. Vamos a deshacernos de este rincón. Y para el relleno, vamos con este color que elegimos ahí mismo. Entonces vamos con algo diferente, como pequeño borde por ejemplo y vamos con, no sé, tal vez tal vez 16, solo un poco diferentes analistas llaman desde el centro. Y voy a ir con perno en este caso, y vamos a seleccionarlo para que sea blanco tal vez. Y luego voy a volver a mis íconos. Y veamos, avaricia. Voy a usar este icono, por ejemplo, colocarlo aquí mismo. Y voy a cambiar su color a este color o al que acabamos de seleccionar previamente. Asegúrese de que estos dos estén centrados haciendo clic en un seleccionarlos y haciendo clic aquí mismo. Y luego puedes seleccionar todos tus elementos y centrarlos así. Así que voy a dejarlo ahí mismo. Son 18 de este lado, son 21 de este lado. Entonces vayamos con algo como esto. Entonces tal vez 20 de este lado y 19 indecisos. Creo que va a funcionar bien. Entonces ahora tenemos estas opciones. Entonces llamemos a esto BT y recortemos Biji para crear nuestro propio botón para esto. Y voy a seleccionar los tres, presionar Control G y llamarlo mean btn, por ejemplo para botón principal. Y voy a cambiar a los activos dentro de los componentes, voy a hacer clic en esto, agregar componentes a los activos. Se va a mostrar como btn principal. Entonces botón principal, puedes ponerlo en un grupo predeterminado o crear otro grupo, cambios, sincronización automática a todas las instancias. Una instancia es básicamente a la versión de este botón latente en línea, decidimos crear tal vez botón más ancho o botón más alto o botón más pequeño. Eso sólo va a ser una versión de este botón principal. Entonces todo va a permanecer igual por dentro. Entonces el contenido no va a cambiar. A lo mejor los colores no van a cambiar. Las interacciones van a permanecer igual. Simplemente el tamaño va a ser diferente. Entonces ahí es donde entran en juego las instancias. Y puedes cambiar. Puedes sincronizar los cambios automáticamente pensando en esta opción en todas tus diferentes instancias. Y ahí es donde esta opción es genial. Así que simplemente puedo golpear, Bien. Y se puede ver que va a aparecer aquí mismo. Entonces aquí tenemos nuestro botón principal. Dentro de nuestro grupo predeterminado, tenemos nuestro botón principal. Y se puede ver cómo se ve eso. Ahora está en el color rojo. Y si quiero, simplemente puedo cambiar, volver a página diferente, digamos diseño. Aquí pueden ver que tenemos una página en blanco y simplemente puedo ponerla más o menos por aquí. Ahora bien, si vuelvo a mis wireframes y edito algo, por ejemplo, puedo hacer doble clic dentro. Me va a llevar a la página separada donde agregué mis elementos. Entonces digamos que quiero cambiar algo como tal vez diferente color a este color. Digamos que pulsa Aplicar, vuelve atrás. Y se puede ver que estamos en un wireframe es, pero si volvemos al diseño, todavía va a aplicar el cambio porque esta es una instancia de nuestro botón principal. A pesar de que es completamente lo mismo, es solo una copia dentro del diseño de lo que tenemos dentro de dos wireframes. Ahora, porque uso este color y me gusta mucho este color, simplemente puedo hacer doble clic sobre él para aplicarlo. Pero digamos que quiero seleccionar mi capa, ir dentro de aquí, llamarlo botón principal, está bien. Y quiero elegir ese color. Entonces tal vez porque ya se ha agregado el color, puedo hacer doble clic aquí mismo y abrir el botón Vg. Lo que puedo hacer está dentro de mis activos en esto como mi color. Entonces estos pueden ser diferentes colores y puedo deshacerme de este, por ejemplo, o simplemente seleccionar este o puedo hacer doble clic y llamarlo por ejemplo suma. O esto puede ser, digamos gris oscuro o algo así. Cambiar para vender , golpear, Aplicar. Y luego cuando vuelvas a aquí, puedes ver tus colores apareciendo aquí mismo. Pero si quiero hacer doble clic y puedo seleccionar mi texto aquí mismo. Pero lo puedo hacer bajo textos es simplemente hacer clic. Y aquí tenemos la versión refutación de este texto. Si cambias el color por ejemplo o lo cambias para que no sea negrita o cambies. Fuente, tipo o tamaño de fuente completamente diferente. En este caso, simplemente puedes hacer clic en más y va a agregarlo a tus textos. Solo presiona aplicar. Cuando sales fuera de ella. Aquí, puedes ver lo que hace. Y en gran cosa de ello es, si decido elegir otros textos, digamos éste, por ejemplo y puedo cambiarlo a Roboto y se puede ver que se actualiza en tiempo real, cambiar para evitar usar 16, que es lo que le dije que hiciera aquí mismo. O si seleccionamos mi botón pulsamos, alguien va a aplicar ese color. Y puedes ver por qué estas opciones son geniales si elijo cambiar este color al gris oscuro, ahora puedes ver donde los activos están siendo útiles. Por supuesto, puedes usar activos en varias opciones diferentes. Por ejemplo, puede crear componentes completos como, digamos, formularios de contacto. Y vas a reutilizar el formulario de contacto lo largo de tu diseño. Por lo que tener un activo de ello, en cuanto a componentes, va a ser muy beneficioso para ti porque simplemente puedes arrastrarlo y soltarlo en posición y puedes usar y reutilizar ese componente. Y si necesitas actualizarlo, por ejemplo tu cliente no le gusta este estilo de iconos. A lo mejor no quieren campo, lo mejor quieren esquema. Simplemente puede seleccionar ese componente a la instancia principal del mismo. Aplique ese cambio a nuestro icono y se sincronizará automáticamente en todas sus instancias y en todos sus componentes, sin importar dónde se encuentren dentro de su diseño. Entonces esta es la diferencia entre tus activos que creaste y estos componentes. Porque los componentes son realmente opciones predeterminadas que obtienes en más más rP. Pero los activos son algo que es realmente personal para ti y algo que creaste para cada proyecto en el que trabajarás. Ahora, una última cosa que quiero mencionar es cómo puedes compartir tu biblioteca con tus compañeros de equipo. Entonces aquí mismo, cuando pasas el cursor y haces clic en estos tres puntos, tienes esta opción Compartir. Cuando haces clic en él, dice, quiero mostrar, ¿ estás seguro de que quieres compartir esta biblioteca de activos con el equipo culinario, dices, bien, porque eres parte de ese equipo, recuerda, cuando vayas a la página principal y ahí la podrás ver. Ahora tenemos esta opción enlazada y tenemos esta opción. Entonces cuando haga clic aquí mismo, pueden ver biblioteca, nuestro primer proyecto, que es nuestra biblioteca. Y si eres miembro de algunos otros equipos, por ejemplo estás en tu equipo, hay algunas otras bibliotecas de las que formas parte. Como miembro del equipo, podrás verlos aquí mismo para que puedas cambiar fácilmente entre ellos. Pero porque solo tenemos uno que acabamos de crear, Ese es el único que se muestra en este momento. Pero recuerda que puedes tener bibliotecas ilimitadas aquí mismo. Entonces por ejemplo en una biblioteca, digamos que tus compañeros de equipo han creado una paleta de colores que vas a usar. Otra biblioteca es, por ejemplo elementos gráficos para los que vas a usar, digamos colateral o trabajo de marca o algo así. Entonces en algunas otras bibliotecas, tal vez haya algunas imágenes que vas a usar en tu sitio web. Entonces esta es una gran opción para tener porque puedes cambiar fácilmente entre todas esas bibliotecas. Toma de ellos los elementos que necesites. Entonces, al hacer clic en ellas, los elementos dentro de esas bibliotecas se presentarán aquí mismo. Puedes arrastrarlos y soltarlos fácilmente en tu página, por ejemplo, si tenemos diferentes componentes, veamos diferentes botones o formularios de entrada o algo así. O si quieres usar diferentes estilos de texto o diferentes colores, todo eso se presentará aquí mismo. Y gran opción, como dije, es esa función compartida que también puedes dejar de compartir si, digamos por ejemplo biblioteca no está terminada en este momento y la vas a terminar en algún otro momento. Y luego puedes volver a compartirlo una vez más con tus compañeros de equipo, tú el siguiente video, te voy a mostrar un poco más de información sobre panel Propiedades y lo que puede hacer. Entonces te veré ahí. 10. Panel de propiedades: Ya abordamos panel de propiedades en este curso, pero voy a abordarlo un poco más y solo mostrarte algunas opciones un poco más que no mencioné en los videos anteriores. Así que vamos a saltar. Entonces como mencioné, panel Propiedades está justo aquí en el lado derecho. Entonces, no importa lo que selecciones, va a cambiar y actualizarse en tiempo real. Pero lo que no mencioné son estas opciones aquí mismo en la parte superior. Aquí tenemos opciones de alineación para que puedas alinear tus objetos en relación con el tablero de arte donde se sientan dentro. Entonces por ejemplo, si tomas este objeto, lo pones afuera, seleccionado, obviamente no sabrá para dónde alinearlo. Entonces solo va a abordar tu tablero de arte y solo va a apuntar a tu tablero de arte para que puedas colocarlo de izquierda al centro horizontalmente, ¿verdad? O puedes posicionarlo arriba. Modo de línea vertical o inferior, entonces puedes separar tus artículos. Entonces esto es genial. Si tienes múltiples opciones como estas, por ejemplo, entonces tienes estas. Para que puedas distribuir horizontalmente. Mira lo que sucede cuando hago clic en esto solo va a asegurarme de que tenga el mismo espaciado entre mis íconos. O puedes distribuirlos verticalmente. Si están ubicados así, puedes seleccionarlos y puedes dar click en esta opción y solo los va a colocar aquí mismo. Pero si quieres, puedes dar click aquí mismo. Y eso los va a organizar muy pulcramente y posicionarlos como quieras. Pero retrocedamos unos pasos y vamos a posicionarlos como trabajaban anteriormente. Porque quiero mostrarte esta opción para que puedas colocarlos aquí mismo si el ícono es más alto, por ejemplo , no será con estos predeterminados, pero si estás usando los tuyos, pero puedes hacer es simplemente hacer clic aquí mismo. Y luego cuando pasas el cursor, tienes estas opciones, lo cual es genial si quieres aumentar el espaciado entre ellas. Y obviamente ajuste automático entre todo tipo de opciones diferentes. Ahora, cuando seleccionas unos, son, cuando seleccionas varios, como viste, dice que se han seleccionado tres componentes. O digamos que se han seleccionado dos componentes. Uno, un 11 por defecto que he creado por ejemplo y luego tienes estas opciones. Entonces esto es para ocultarlo. Entonces sigue aquí para que veas de qué se trata. Pero cuando vayas a previsualizarlo, no va a ser visible. Esto es para desactivarlo. Entonces no va a poder que tus usuarios hagan clic por ej. y luego puedes bloquearlo o desbloquearlo, y luego no va a poder moverse, no van a poder seleccionarlo y cosas así. Tienes el diseño inteligente. Entonces, cuando selecciono esto y voy al diseño inteligente, puedes elegir auto o manual. puede usar ancho fijo, por ejemplo o altura fija. Puedes marcar o desmarcar el barco. Entonces cuando empiece a arrastrar, sólo va a mantener la altura fija, pero el ancho va a ser diferente. O puedes dar la vuelta al revés. Para que puedan ver, ya no puedo cambiar la altura. Lo siento, espere más, pero puedo cambiar la altura en este caso. Y puedes elegir dónde se van a pegar tus artículos. En este caso, se están pegando al lado izquierdo, pero puedes cambiarlo al lado derecho y puedes ver que se están moviendo hacia el momento. Pero en cualquier caso puedes usar auto y puedes ajustar como quieras y dejar que mach plus rP haga su magia y se aplique a partir de ahí. Aquí tenemos el ancho, tenemos la altura, el eje x, el eje y, y luego tenemos la rotación. Entonces por ejemplo 45 grados, se puede ver lo que hace eso. Y estas son las opciones avanzadas para el espacio horizontal y el espaciado vertical. Entonces cuando selecciono estos, puedes ver aquí mismo que tenemos espaciado horizontal, pero si los volteamos, puedes ver que entonces tendremos espaciado vertical. Lo que también tenemos dentro del panel Propiedades para la mayoría de los objetos son sombras. Entonces cuando hago clic en sombra y tecleo algo así como, no sé, 6.10 o diez. Se puede ver que ahora tengo el fondo superficial incluido aquí. Puedo cambiar ese canal haciendo clic aquí y cambiando su valor alfa, que es básicamente su valor de opacidad. Aquí puedes cambiar los colores para que puedas elegir el color que quieras. Pero sólo voy a ir con el negro por defecto en este caso, tal vez algo así. Pero alfa, obviamente es demasiado fuerte. A lo mejor diez por ciento, va a bajar eso simplemente amablemente. Pero como esto está seleccionado, sólo voy a desmarcar la sombra para ello. Y luego cuando selecciono todo, simplemente va a funcionar como antes lo era. Entonces cuando aumente esto a 20, y tengo que seleccionar esto y desmarcar la sombra una vez más en él. Simplemente va a tener la sombra en el fondo de tus elementos. Posición fija el rastreo de uno es genial como mencioné anteriormente, si tenemos, por ejemplo navegación aquí mismo en la parte superior, desea seleccionar toda la navegación. Digamos que esta es toda nuestra navegación, algo así. Entonces, cuando usas un start scrolling y tu gasto de tablero de arte, al hacer esto, va a permanecer en esa posición en particular y no va a moverse en absoluto. Una vez más, en base a lo que sea que hayas seleccionado, vas a tener diferentes opciones aquí mismo. Y ya abordamos eso en videos anteriores. Así que no voy a dedicarle demasiado tiempo porque quiero pasar a la siguiente lección, que son las interacciones. Se encuentra justo aquí, y te veré en el siguiente video. 11. Interacciones: Tener diseños estáticos está bien, pero cuando agregas interacciones a ellos, solo da un poco de vida a tus diseños. Entonces ahí es donde el panel de interacciones viene muy bien y tiene algunas excelentes opciones dentro de ma plus rP. Así que vamos a saltar dentro y déjame mostrarte lo que puedes hacer. Muy bien, así que aquí es donde lo dejamos la vez anterior. Y ahora hablemos de interacciones. Ahora. Básicamente las interacciones se encuentran justo aquí y es lo que sucede entre dos elementos o dos aeropuertos o en un solo elemento donde se quiere agregar algún tipo de animación solo para mostrar lo que sucederá cuando el usuario interactúe con ese elemento en particular, se puede ver lo que dice aquí mismo. Puede seleccionar un componente o tablero de arte y hacer clic en Agregar interacción para agregar diferentes interacciones. O puede beber un punto de enlace de los componentes a cualquier componente de destino o una página. Ahora bien, ese punto de enlace es lo que dice aquí mismo. Entonces esto es estos puntos rojos y básicamente puedes apuntarlo a ti mismo, puedes señalarlo a otros elementos o puedes señalarlo a otros aeropuertos, incluso a otras páginas si quieres que interactúe entre esta página en particular o aeropuerto o alguna página separada o RPA. Entonces, básicamente, cuando quieres agregar diferentes interacciones, puedes elegir objetivos. Así podrás elegir entre componentes y puedes elegir entre las páginas. Y puedes cambiarlo a, por ejemplo, yo. Y aquí tienes los detonantes. Los disparadores es básicamente lo que lo desencadenará para tener esa interacción. Entonces, qué tipo de disparador hará el usuario, activará esta interacción para que realmente comience y que realmente suceda. Lo que tenemos aquí mismo, nuestro doble clic, haga clic con el botón derecho del mouse hacia abajo, el mouse hacia arriba y todo tipo de estos disparadores diferentes. Entonces tenemos comandos. Una vez que realmente tengamos el gatillo, ¿qué pasará? Entonces tenemos el Move, zoom, rotate, Show, Hide, scroll. Entonces estos son solo algunos comandos básicos, pero también tenemos algunos comandos más avanzados más adelante. Entonces tenemos un valor relativo. Entonces, si se marca más en relación con la posición, si no se explota más a la ubicación específica. Entonces, si más a esta ubicación específica, entonces puedes usar los valores x e y para posicionarlo en esa ubicación específica. Después de eso viene la flexibilización. Y así básicamente es como va a quedar esta interacción . ¿Va a ser estrictamente del punto a al punto B? ¿O va a ser un lineal? ¿Va a tener flexibilización, flexibilización? Lo que eso significa básicamente es, ¿va a facilitar en un amablemente en la animación? ¿Va a salir fácilmente muy bien de la animación? ¿O simplemente va a ser directo del punto a al punto B? Durante esta interacción. Después de eso, tenemos duración. Entonces, ¿cuánto tiempo va a tener lugar esta interacción? Y luego tenemos el retraso al final, retrasa básicamente lo que dice. Entonces después de hacer clic en esto o después de darle algún tipo de comando, ¿ no tiene retraso o sucedió instantáneamente? Entonces ahí es donde el retraso viene muy bien. Entonces, exploremos nuestro ejemplo perfecto con un estado básico de libración. Entonces aquí tenemos el botón que creamos previamente. Y para explorar más a fondo este botón, hagamos doble clic en él y saltemos dentro de aquí. Y vamos a seleccionar nuestro botón. Y aquí lo que tenemos es el intestino estatal. Entonces aquí tenemos todos los estados prefabricados que MC plus rP quiere que incluyamos. Claro que eso es todo. Si queremos. Si no, puedes hacer clic en Agregar un estado como ya exploramos anteriormente, y luego puedes agregar un estado personalizado propio. Así que aquí tenemos todos los estados que se suelen utilizar en el diseño UI UX. Entonces tenemos lo normal, que es justamente este estado básico sin ningún tipo de animación a él, hemos seleccionado. Entonces generalmente en estados seleccionados quieres que tus usuarios estén enfocados que entiendan que han seleccionado algún elemento. Tenemos el estado deshabilitado, que es básicamente que no pueden seleccionarlo en este punto, generalmente porque tienen que realizar ciertas operaciones para poder seleccionarlo. Entonces ahí es donde los discapacitados son útiles. Tenemos el horror masivo. Entonces, ¿qué pasa cuando coloco el mouse sobre? No va a cambiar. Y esto es especialmente útil porque queremos que nuestros usuarios puedan entender que pueden hacer algo. Y el mouse hover es la opción perfecta para que ellos capten su atención para ser, para realmente poder hacer una determinada tarea. Por último, hemos deprimido. Entonces, ¿qué pasa cuando hacen clic en el botón, cuando lo presionan? ¿Qué va a cambiar? Vamos a la hover del ratón. Entonces, cuando haga clic aquí mismo, va a editar este mouse hover específicamente. Entonces cambiemos su color, por ejemplo, cambiemos a Propiedades. Ahora vamos a seleccionar el color de relleno y vamos a elegir un poco de un color más oscuro. Entonces, por ejemplo, algo como esto. Porque me gusta este color, voy a agregarlo. Estamos en el estado de ratón hover. Así que sólo voy a agregarlo a mis colores aquí mismo. Y voy a hacer doble clic y llamarlo por ejemplo hover, algo así como deuda. Y luego puedes pasar a las interacciones si quieres. Y cuando cambio a lo normal, se puede ver que tenemos este color. Cuando cambié a mouse hover, entonces tenemos esta columna. Así que puedes cambiar entre estos con bastante facilidad. Y puedes presionar aplicar para aplicar ese botón. Y para hacer una vista previa rápida, puedo dar click aquí mismo. Y cuando vuelo el cursor, puedes ver los cambios, el color. Al color hover que en realidad creamos en este momento. Bien, entonces intentemos conectar esto a un tablero de arte separado, por ejemplo, así que agreguemos una parte sub R. Y vamos a crearlo aquí mismo. Entonces, vaya, eso no. Vamos a hacer clic en la flecha y hacer zoom un poco. Y agreguemos un tablero de sub arte diferente. Vamos a Propiedades. Ellen va a 1920 por 1080. Por lo que se selecciona para que sea lo mismo. O veamos, esta es 1080, Algo así. Entonces tenemos el puerto sub R justo aquí. Y cuando haga clic aquí mismo, va a enlazar a este tablero de arte. Entonces va a mostrar nuestro puerto. Puedes posicionar el centro, puedes animar ninguno. Y digamos, digamos que SlideUp se están desvaneciendo aún mejor. Se puede mostrar la máscara y la máscara flexibilizando va a facilitar dentro, fuera. Así que la facilidad en la animación está fuera a la animación clic, Bien, ahora dentro de esta placa sub R, pero voy a hacer es cambiar a Propiedades. Pulsa T para la herramienta de texto y escribe algo así como Aquí está tu ventana emergente, por ejemplo y obviamente cambiemos eso a algo un poco más oscuro, como tal vez color gris oscuro. Vamos a cambiarlo 16-45, algo realmente enorme. Y vamos a posicionarlo al centro de nuestra página, algo así. Entonces cuando vuelva a aquí y previsualice nuestro prototipo, así deshago clic, se va a mostrar, pero como pueden ver cuando haga clic en él, no pasa nada realmente. Entonces qué hacer en ese caso, quiero hacer clic para cerrarlo básicamente. Entonces lo que puedes hacer es volver aquí mismo. Puedes hacer doble clic, y aquí puedes ver tus opciones para editar. Bajo comandos, puedes ver estos tres puntos. Presiona Editar, bien, aquí, y aquí puedes ver Mostrar máscara y haz clic en máscara para cerrar. Haga clic en Bien, salga, presione refrescar, y probemos eso y veamos si eso funciona y hace el truco. Una vez que se cargue haga clic ahí y va a mostrar la máscara. Cuando haga clic en la máscara, la va a ocultar. Así que una vez más, haga clic aquí mismo va a ocultarlo. Una vez más, esto es genial, no solo para los pop-ups, sino digamos que para los módulos de suscripción son para los módulos de correo electrónico o domingos así. Cuando solo quieres mostrar una información rápida, no tiene que ser a pantalla completa. Recuerda que la creé para que fuera del mismo tamaño que esta tabla de arte. Puede estar en el centro. Esas son interacciones. Puedes ver que puedes agregar interacciones, dos componentes separados, o todo el aeropuerto. O una cosa que no mencioné es que incluso puedes enlazar estas dos páginas separadas si quieres. Así que solo puedes arrastrar ese pequeño identificador rojo a la página separada que quieras y podrás vincularla a donde quieras, algo así. Entonces, cuando los usuarios hagan clic en él, los va a llevar al diseño. Se puede ver salto de página. Para que saltes a esa página, puedes animarla. Puedes ver donde quieras y hacerlo con él. Igual que hicimos un explorado previamente con estas opciones. Entonces eso son interacciones y para eso es lo útil. En el siguiente video, voy a mostrar notas. Entonces te veré ahí. 12. Notas: Las notas son geniales si quieres agregar nodos ya sea a tus compañeros de equipo o a tus clientes, solo para hacerles saber sobre la página que están viendo y lo que se incluye dentro. Bien, entonces aquí estamos de vuelta en nuestro archivo y los nodos se encuentran justo aquí. Y vas a notar que mis wireframes están seleccionados, así que dice notas de página y puedo agregar algo como por ejemplo, estos son solo wireframes. Y cuando golpee Control S para guardarlo y darle a vista previa, me va a mostrar la nota de la página aquí mismo. Ahora bien, si tienes múltiples nodos y déjame mostrarte cómo funciona eso. Entonces, por ejemplo, si selecciono esto y solo hago algunos espacios a continuación, pegue, pegue y pague, por ejemplo presione Control S hit preview una vez más. Me va a mostrar esas notas de varias páginas. Ahora, puedes borrar todos los nodos aquí mismo. Simplemente puede presionar Eliminar en su clave, o simplemente puede seleccionarla así. Pulsa retroceso y elimina todos los nodos innecesarios que quieras. Ahora, esas son las notas de la página. También puedes agregar notas a diferentes elementos de tus páginas. Entonces por ejemplo si selecciono este botón, este botón, puedes ver que aquí tenemos el componente y aquí tenemos el grupo porque ese es el nombre del grupo. Entonces, si selecciono este componente, digamos por ejemplo ¿te gusta este icono tal vez? Y luego puedo seleccionar los textos. Digamos que dice algo así como, ¿crees que este tamaño es demasiado pequeño o algo así? Para que puedas ver cómo esto es realmente útil. Así que cuando golpeo Control S y lo previsualizo, una vez más, se puede ver que ahora tenemos múltiples elementos, así tenemos las notas de la página. Entonces este es el nodo para toda la página. Entonces tenemos el botón principal. Y cuando vuelo el cursor, se puede ver el número de uno y aquí está el número uno se encuentran justo aquí. Y entonces aquí tenemos uno para el tipo. Y va a mostrar el número dos junto a ese tipo para que tus clientes sean compañeros de equipo. ¿Sabes de qué se trata esta nota? Entonces aquí tenemos las notas de la página sobre toda la página. Aquí tenemos el botón principal sobre este botón. Y por último, al tipo sobre este tipo o ubicado en el wireframe. Entonces, cuando cambio al resumen de diseño, por ejemplo, puedes ver que está en blanco y no tenemos las notas porque los nodos están relacionados con tus páginas. En el siguiente video, vamos a hablar de nuestros puertos y aeropuertos. Cuál es la diferencia y qué se puede hacer con ellos. Entonces te veré ahí. 13. Cuadros de arte y cuadros de arte: Ya cubrimos tanto sobre tableros de arte y puertos malos en esta clase. Pero solo quería mostrarte otro ejemplo ahora con la aplicación móvil, porque esta clase está dirigida principalmente a sitios web y ese tipo de tamaños. Entonces solo quiero mostrarte éste también y lo que puedes hacer en este caso. Así que aquí estamos de vuelta en un mole plus y me abrí a Joe, Joe Go UI kit, que es este kit de UI. Y para abrirla plantillas, simplemente puedes abrir, golpear, editar, guardar y luego elegir en qué equipo o espacio personal quieres guardarlo. Y se va a abrir así para que puedas cambiar entre todas estas diferentes páginas aquí mismo. Actualmente estoy en la página de inicio de sesión, y rápidamente creé este tablero de arte sub haciendo clic una vez más en este botón aquí mismo. Ahora, ya mostré este ejemplo, así que no voy a entrar en demasiados detalles, pero cuando haces clic aquí mismo y lo conectas, puedes hacer click, mostrar nuestro puerto. Puedes colocarlo donde quieras resolver, digamos abajo en este caso, deslizarlo hacia arriba o desvanecerse o acercar o lo que quieras. Puede hacer clic en el cierre imprescindible. Lo mismo que expliqué en uno de los videos anteriores. Y acabo de colocar un poco de una flexibilización más larga en este caso. Entonces así es como se ve cuando haces clic en el botón, lo va a mostrar cuando haces clic afuera, no va a mostrarle algunos. Esto es genial para la creación de prototipos por razones obvias porque puedes mostrar a tus clientes lo que quieres mostrar con estos mensajes de error, por ejemplo y cosas así o con tus compañeros de equipo para explorarlo un poco más. Pero diferente aquí es, ahora tenemos la maqueta del dispositivo y tenemos el marco del dispositivo en este caso. Para que puedas mostrar esto con bastante facilidad a tus clientes. Y es iPhone porque este tamaño de la mesa de trabajo es el tamaño del iPhone. Si eliges algún otro tamaño, entonces nos va a mostrar ese tamaño diferente para ese proyecto en particular. Pero cada página está endeudada, tamaño del iPhone, lo que sea que intenté previsualizar, me va a mostrar en ese tamaño. Otra cosa que quería mostrarte es cuando seleccionas tu tablero de arte, una vez más, puedes establecer el diseño inteligente, el color de fondo y cosas así, pero también puedes darle la vuelta. Entonces, si elijo posicionar esto un poco más arriba, y luego seleccionar esta mesa de trabajo y voltear su posición. Puedes ver que puedes cambiarlo con bastante facilidad de modo vertical a horizontal. sólo hacer clic en este botón se van a conservar las mismas dimensiones, sólo va a voltearlas por el ancho y la altura. Entonces eso es básicamente todo lo que quería mostrarles sobre nuestras juntas y subaeropuertos. Y eso es lo único que pensé que no tocamos un ya, te mostré cómo usar estas plantillas gratuitas. Una vez más, si quieres acceder a las plantillas, simplemente puedes hacer clic aquí mismo, hacer clic en plantillas. Y te va a llevar a esta página con las plantillas que puedes editar cualquiera de estas plantillas y ajustarlas como quieras. Puedes ver cuántas páginas y elementos tienen, cuántos colores, y puedes seguir adelante y cambiarlos y actualizarlos como elijas. En el siguiente video, te voy a mostrar algunas opciones de tipo y como trabajar con type inside of mock plus rP. Entonces te veré ahí. 14. Trabajar con la tipografía: La tipografía es un elemento crucial de cualquier diseño de interfaz de usuario que existe. Entonces, saber trabajar con type, especialmente mock plus rp es realmente importante. Entonces en este video, vamos a abordar algunas configuraciones de tipo básicas y elementos básicos. Cómo puedes trabajar con el tipo y cómo puedes trabajar con él dentro de nuestro p.ball. Empecemos. Entonces aquí estamos de vuelta en nuestros viejos wireframes de confianza. Y cuando seleccione este tipo o pueda eliminarlo, presione T en mi teclado clic y va a colocar ese tipo algo porta lugar. Porque ya creé esto, puedo aplicarlo a mi tipo y se puede ver que cambia el color. Y puedo cambiar ese color de relleno a algo como negro oscuro o algo así. Siempre puedo volver atrás y hacer clic aquí. Y ahora me va a dar esas diferentes opciones para que pueda cambiar entre claro y oscuro con un clic de un botón y va a conservar la misma configuración, mismo posicionamiento como ese. Así que también puedes ir a Componentes y arrastrar y soltar la opción Tipo ahí mismo si así lo eliges o simplemente presionas D ya lo ha explicado, y luego puedes jugar con para escribir. Entonces, ¿cuáles son tus opciones reales? Así que aquí tenemos la familia de fuentes. Entonces estas son familias de fuentes actualmente incluidas, pero estoy hablando con el equipo en futuras actualizaciones, van a agregar Google Fonts y Adobe Fonts ojalá. Así que vas a tener una variedad mucho mayor de tus fuentes. Y la opción de carga personalizada de tus fuentes personalizadas también va a estar abajo en el futuro, pero estas son tus opciones por ahora. Entonces, cuando seleccionas tu familia de fuentes, puedes seleccionar varios tamaños diferentes de estos tamaños predeterminados. O puedes cambiarlo simplemente escribiendo lo que quieras, el tamaño que quieras. Entonces ya cubrimos el color y cómo funciona el color en más parser p. aquí tenemos la opción negrita aquí tenemos la opción itálica. Aquí tenemos la opción subyacente. Si quieres agregar el subyacente, tenemos el tachado, y aquí tenemos el espaciado entre caracteres. Entonces es solo el espaciado entre los personajes. Entonces, si Ley de Derechos 20, se puede ver lo que hace eso. Aquí. Lo que tenemos es, si aumento esto a, digamos 80, no pasa nada realmente porque ese es el espacio entre dos líneas. Entonces, si escribo algo, lo coloqué en una nueva línea y lo traigo de vuelta al 56, puedes ver cómo funciona eso. Y si lo traemos de vuelta al 36, puedes ver lo aplastado que está realmente nuestro tipo. Debajo de eso, tenemos opciones de alineación. Entonces hemos alineado una izquierda align, center, align, right align, justify, lo que significa que ambos lados van a tener los mismos valores y el mismo ancho. En este caso, este valor máximo va a ser diferente. Guatemala va a ser diferente, pero si los justificas, van a ser exactamente lo mismo. Aquí. Mayúscula. Entonces, todo será mayúscula, minúscula o mayúscula del título. Así que cada palabra va a ser un justo así. Y si no quieres, puedes simplemente hacer click y va a desseleccionarlo. Aquí tenemos sangría de texto, que es genial para párrafos. Obviamente. Aquí tenemos sangría de texto vertical. Aquí tenemos lista numerada, y aquí tenemos lista con viñetas. Una vez más, haga clic para deseleccionarlo. Lo que tenemos aquí mismo es auto width, que es el ancho de tu texto incluido. Aquí tenemos auto altura, básicamente lo mismo, y aquí tenemos tamaño fijo. Entonces, cuando compruebes eso, no va a salir de ese tamaño fijo. Así que déjame ir con auto ancho. Entonces, sea lo que sea que esté escribiendo, puedo ajustarlo y escribir algo nuevo en la página. puede ver que porque es un ancho se va a escalar automáticamente. Pero si es un peso fijo, por ejemplo así, algo nuevo en la página que puedes ver lo está colocando en la nueva línea en su lugar, algo así. Entonces voy a ir con auto width y voy a deshacerme de este texto de aquí en adelante así. Y quiero mostrarte algunas opciones adicionales para que puedas tener el relleno y las acuarelas. Puedes agregar borde alrededor de tu texto. Puede agregar un color de relleno separado si así lo desea. Y solo puedes curvar estos bordes de esquina si quieres, pero no te voy a recomendar que hagas eso. Para las extensiones, tenemos posición fija con rastreo como siempre, tenemos la información sobre herramientas cuando pasas el cursor puedes ver de qué se trata. Y finalmente tenemos enlaces externos. Entonces cuando agrego eso, digamos google.com, por ejemplo, hit. Bien, y se puede ver que agregó un enlace. Así que cuando le pego a previsualización muy rápido y luego vuelvo a ver escribir algo, cuando pase el cursor sobre él, puede ver que ahora tenemos el enlace cuando haces clic, me va a llevar al google.com. Entonces ese es básicamente el tipo en pocas palabras. Lo que quiero mostrarles por fin es, deshacernos de este enlace externo. Cuando golpeo Control D para duplicarlo algunas veces, se ve que aparece la opción de espaciado, son 19 en un momento, pero digamos que quiero ir con algo como turbina T. Tal vez ahí vamos. Aquí estamos. Y ahora cuando flote aquí mismo, se puede ver que ahora estamos a los 20. También queriendo, quiero mostrarles es que estas opciones funcionarían exactamente igual para las formas que para el texto. Entonces, cuando quieras separarlos, puedes hacerlo. Puedes posicionarlos como quieras. Puedes espaciarlos, distribuirlos con ellos, lo que quieras. Entonces te voy a mostrar cómo funciona eso si puedo agarrar y seleccionar los tres, algo así haz clic aquí. Entonces básicamente lo mismo que con las formas. Puedes mantener pulsada la tecla Mayús y te va a mostrar el mismo espaciado entre tus elementos. Entonces ese es el tipo. Básicamente, en el siguiente video vamos a abordar el modo premium. Y te voy a dar sólo un poco más de información al respecto que antes. Entonces te veré ahí. 15. Modo de vista previa: El modo de vista previa es donde ves tus prototipos y cómo pueden verlos otros de tu equipo o personas a las que invites tu equipo o personas a las que invites a verlos. Entonces es parte muy importante de más más r p. Así que déjame mostrarte cómo funciona un poco más de detalle que lo hice hasta ahora. Entonces si volvemos a aquí, Aquí está, nuestro modo de vista previa. Entonces, una vez más, puedes hacer clic y comenzar desde la página principal o comenzar desde la página actual. página principal en nuestro caso son los diagramas de flujo porque esa es la primera página de la lista. O puedes comenzar desde la página actual. Puedes elegir eso golpeando Control Comando P. Ahora, cuando se inicia, como puedes ver, se carga porque tiene todo tipo de opciones diferentes. Y empezó desde esta página. Ya explicamos las notas de la página. Y aquí puedes tener el Zoom así que ajusta el ancho, ajusta a la pantalla, algo así. Y aquí puedes tener la pantalla completa, puedes salir de ella como ya te expliqué. Y puedes ocultar estos paneles si es así, elige. Cuando presionas Compartir, tienes show Panel de Control. Tienes todas estas opciones. Entonces, cuando realmente compartes este enlace de vista previa con alguien más de tu equipo, puedes elegir lo que quieres que vean. Y esto es realmente importante por una sencilla razón. Cuando estás compartiendo esto con algunos probadores de usuarios, quieres poder, para que ellos puedan probar tu prototipo, pero no regalar demasiadas opciones. Y chiflados, básicamente toman su mano mientras están haciendo esto porque quieres que descubran las cosas por sí mismos donde necesitan hacer clic, donde necesitan mostrar. Si estás cronometrando estas interacciones, quieres poder que no obtengan ninguna ayuda, sino que se las arreglan por sí mismas. De esa manera vas a poder medir lo que están haciendo. Y para eso, esta configuración es parte muy importante de ella porque puedes mostrar u ocultar paneles de control. Entonces, cuando hago clic ahí mismo y hago clic en copiar, por ejemplo y abrir una nueva pestaña, presionar Control V, pegarlo adentro. Esta es nuestra nueva pestaña, y puedes ver que no ven nada. Entonces tendrán que arreglárselas por sí mismos porque a propósito lo cerramos desde aquí mismo. Entonces ella va a panel de control. Puede mostrar el área de enlace al pasar el mouse o no averiguarlo por sí mismos. Estamos mostrando portador mostrar contenido fuera del tablero de arte no deben marcadores establecer contraseña, y cosas así. Así que es muy importante si quieres profundizar un poco más en compartir, para explorar esta opción también. Entonces cuando volvamos a aquí, tenemos más opciones. Así que siempre mostrando portador, básicamente lo que vimos aquí mismo para el intercambio. Pero esto es lo que tú y tus compañeros de equipo y los líderes del proyecto, por ejemplo, es lo que van a ver aquí mismo. Entonces eso es básicamente todo para el intercambio. En el siguiente video, voy a explicar en esta opción de prototipo de descarga qué es y para qué sirve. Entonces te veré ahí. 16. Descarga de prototipos: A veces quieres descargar tus prototipos de Mach más rP, compartirlos con compañeros de equipo, con clientes, y no quieres subirlos y publicarlos todavía. A lo mejor estás bajo NDA. A lo mejor no tienes acceso a internet. A lo mejor estás viajando a algún lado y quieres tener solo esos prototipos. Piénsalos para revisar algunas notas que tienes. Todo tipo de estos diferentes escenarios y muertes fueron opción de descarga viene a la mano. Déjame mostrarte. Entonces aquí está, justo aquí en la parte superior, tienes esta opción de descarga. Para que puedas descargar paquete de presentación de prototipo fuera de línea. Y estas son las frases clave aquí mismo, paquete de presentación, esto se utiliza para presentaciones. Entonces, cuando quieras presentar esto offline, cuando estás de viaje, quizás estés en tu laptop, tal vez estés viajando, tal vez vayas al lugar de negocios o para tus clientes. Existen diversas opciones y escenarios diferentes donde puedes usar algo como esto. Es súper importante hacer esto porque siempre quieres tener una copia de seguridad. Es genial tenerlo en la Nube, pero a veces la gente puede no tener acceso a Internet. A lo mejor solo estás ahí. Entonces, ¿por qué los llevarías a la Nube cuando tienes la opción disponible en tu ubicación, por ejemplo, tal vez quieras compartirla internamente por los NDA, como dije? Así que hay muy pocos escenarios en los que puedas usar algo como esto y es realmente útil. Entonces todo lo que necesitas hacer es hacer clic aquí mismo. Te va a mostrar un rango de páginas. Voy a seleccionar el Paint rage y voy a seleccionar mi tienda deseo para que puedas desmarcar qué, comprobar lo que quieres hacer. Quiero explorar y explotar ambos para que simplemente podamos seleccionar todos. Se puede ver que dos de ellos son seleccionados. Y puedes ver rango de páginas todo porque tengo dos páginas dentro de mi carpeta. Puede mostrar panel de página, puede mostrar hacia el norte, mostrar barra de herramientas. Puedes mostrar enlaces a todos estos ajustes de los que hablamos y acertar. Bien, una vez que estés listo para descargar, va a tomar un poco de tiempo descargarla. Y dependiendo de su máquina, dependiendo de su proyecto. Entonces, por ejemplo, si hiciste una optimización de tus imágenes, va a tomar un poco más de tiempo. Si usaste varias páginas diferentes, va a llevar un poco más de tiempo. Pero en este caso, como se puede ver, se exportó realmente con bastante rapidez. Así que déjame dejarlo caer en una carpeta. Ahora déjenme mostrarle esa carpeta, cómo se ve. Entonces ahí vamos. Tenemos esta opción para un archivo zip, haga clic con el botón derecho. Y voy a extraer dos aquí y esconder esto solo para que lo veas un poco mejor. Ahí vamos. Y extrajo estos activos sólidos y se deshizo de este archivo zip. En realidad. Deshazte de él golpeando eliminar. Ahí vamos. Y aquí tenemos todos estos activos los cuales están incluidos por defecto para múltiples SRP. Luego tenemos las opciones de datos, que son todas las imágenes que se incluyen en su interior. Y obviamente es muy importante que pongas nombre a tus capas. De lo contrario vas a terminar con un resultado como este. Pero básicamente solo los exporta como archivos marcadores de posición cuando realmente compartes esto con tus desarrolladores, va a mantener esos nombres de capa que publicaste. Por último, tenemos la página de índice, haz doble clic en ella y se va a abrir como una nueva página y podrás ver lo que van a ver tus usuarios dentro de, digamos, paquete de presentación que quieres mostrarles. Entonces tienen todas estas opciones de las que hablamos anteriormente. Si quieres, puedes incluir algunos nodos aquí mismo. Se pueden ocultar estos paneles. Se pueden mostrar estos paneles. Puedes hacer lo que quieras y vamos a explorarlos por última vez. Ahí vas. Nos llevó a esta página. Los efectos de desplazamiento siguen funcionando. Esto sigue funcionando. Entonces todo es como si estuviera aquí mismo, pero es solo una versión portátil y más, digamos que la puedes llevar donde quieras porque tienes almacenada en tu máquina. Y es por eso que descargar prototipos es una opción tan genial. Me va a gustar y les recomiendo que lo usen todo el tiempo. Parece que yo también lo estoy haciendo. 17. Publicación de prototipos: Una vez que esté listo para publicar sus prototipos y moverlos fuera de sus manos hacia la organización en general, por ejemplo, o simplemente compartirlos con sus clientes, compañeros de equipo, partes interesadas, inversores, quien sea. Ahí es donde entra en juego la opción de prototipo editorial . Y se encuentra justo aquí en la esquina superior derecha. Pero tal vez podamos jugar con algunos escenarios. A lo mejor puedo ajustar esto y por favor siéntate para ir a diagramas de flujo página saltar animar. Vamos con la no flexibilización. Eso está bien. Entonces solo quiero poder animar a esa página y se puede ver cuando la selecciono, muestra que se anima hacia los diagramas de flujo. Así que ahora cuando selecciono mis wireframes, déjame presionar Control o Comando S para guardarlo, presionar Publicar, publicar para burlarse más Cloud. Para que pueda ver al antropólogo más Cloud para la colaboración instantánea en línea, transferencia y la verificación de datos de capa. Puede dirigirse a un proyecto Cloud, una muestra de proyecto, por ejemplo, o puede crear uno nuevo. Nuestra primera ubicación de proyecto. Todo hit, Ok, hit Bien, y va a publicar ese proyecto. Ahora una vez más, mismo líquido, todas estas otras cosas. Dependiendo de qué tan grande sea tu proyecto, cuántas imágenes tengas, cuántos íconos tengas, va a tardar más o más corto. Entonces dependiendo de tu proyecto, Ese es el tiempo que va a tomar este proyecto N, sobre todo lo rápido que es tu internet. Para que puedas ver tu proyecto porque se ha publicado con éxito, como puedes ver. Y te va a llevar a burlarte más Cloud. Ahora, aquí está, nuestras nuevas páginas de proyectos. Puedes ver detalles y básicamente puedes resolver lo que creamos ya aquí están todos estos elementos, wireframes, cosas así. Para que puedas obtener el código aquí mismo para el desarrollo. Para que puedas cambiar eso. Y va a mostrar las citas o lo que sea que seleccionen, por ejemplo esta imagen me va a mostrar el CSS, Objective-C, Swift y Android. Y eso es genial porque puedes cambiar por diferentes plataformas. Podrías ir a pantalla completa colapso, vista previa, y ahora puedes descargar esto como opción separada. Puedes entrar en modo presentación si quieres presentarlo a tus clientes durante este proceso de desarrollo. Entonces lo que sea que seleccione aquí mismo va a narrar y mostrar. Entonces por ejemplo aquí tenemos esta opción que ya elegimos. Si hago clic aquí, me va a llevar a diagramas de flujo, por ejemplo, podamos presentar ese modo de comentario. Entonces eso es genial porque digamos que quiero agregar un comentario aquí, tal vez cambiar este color a azul. Digamos. Puedes probar y etiquetar comentarios. Puedes presionar control enter para compartir este comentario. Para que puedas cambiar este color a azul. ¿Bien? Entonces cuando vuelo el cursor y haga clic, si lo vendí, puedo resolverlo. Y va a desaparecer. Pero si no lo resolví, siempre puedo regresar. Tan mal color, puedes cambiarlo. Y vamos a hacerlo realmente rápido. Entonces cámbiate esto a azul, digamos, lo compartí. Ahí vamos. Y ahora se puede ver que tenemos esto en común. Entonces quien venga aquí mismo puede flotar, puede hacer clic y ver, cambiar esto a azul. Bien, ya se va a hacer. Ahí vamos. Control Enter para servir. Y me van a notificar de nuevo en mi proyecto que alguien comentó. Puedo ver ese comentario. Entonces puedo ver qué hacer. Y si lo hice, puedo responderles. Pero la revisión, pueden revisarla, pueden venir intención. Y hay todo tipo de opciones diferentes que pueden hacer con él. Por ejemplo, si pasa el cursor aquí y hace clic en Seleccionar, puede ver que tiene la herramienta de selección que le permite mover estos elementos alrededor. Y básicamente para seleccionar elementos específicos. Se puede seleccionar el texto y anotar muertos. Se puede coordinar el marcado. Puedes hacer un marcado de espaciado, y puedes hacer un marcado de región si quieres marcar alguna región de tu diseño y ser extremadamente específico sobre los cambios que quieres resaltar o sobre los cambios que quieres resaltar que hiciste anteriormente. Aún no han revisado. También te pueden hacer esa misma cosa. Así que básicamente pueden saltar aquí mismo y decir, por ejemplo si voy a seleccionar y hacer el tipo, digamos, entonces pueden anotar ese tipo y decir algo como por ejemplo esta topografía es demasiado grande o demasiado oscura, puedes cambiarla a más ligera, pero pueden ser extremadamente específicos sobre esta sección de tu diseño y sobre los elementos en tu diseño que ellos quieren que cambies. Si vuelves a aquí, puedes editar este proyecto o ver los detalles. Y si quieres ver todos los aeropuertos en una sola pantalla, puedes ingresar a storyboard. Te va a mostrar todos tus aeropuertos en una sola pantalla. Puede hacer clic y hacer doble clic en las páginas para agregar comentarios y consultar especificaciones. Entonces eso es lo que ya te mostré, o puedes volver a la lista de prototipos. Entonces, básicamente, así de fácil es publicar tu prototipo. Y una última cosa, también puedes compartirlo, compartir privado, compartir público o incrustar proyecto si quieres copiar el código e incrustarlo en el sitio web separado, por ejemplo, editor es genial si no está bajo NDA o si quieres obtener algunos comentarios externos adicionales o compartir privado, si quieres compartirlo de forma privada dentro de tu equipo. También invita a tu perdón, a hacerte miembro del proyecto si quieres agregarlo a tu proyecto o si no, simplemente puedes copiar y compartir este enlace con ellos. Mi papá. Y cuando abro una nueva pestaña en mi máquina, golpeo Control Enter. Pero porque ya estoy conectado, sólo me va a mostrar una versión diluida como es. Pero básicamente esto es algo que van a ver. Tienen el diseño, tienen la actividad de guía de estilo de recursos de tarea, todo tipo de cosas diferentes aquí mismo. Pero así es básicamente como compartes tu prototipo y cómo lo publicas. Y es muy importante que lo hagas porque quieres obtener comentarios adicionales sobre tu diseño en cada proyecto que hagas y que no pases RP combinado con mock plus Cloud te brinda esta gran opción para hacerlo. 18. Qué son las plantillas: Las plantillas son una excelente manera de impulsar tu proceso de creación porque eres el diseño de UX no es más que una repetición de tareas en todo el tiempo. Si lo piensas, estás creando nuevo estos botones y estos elementos. Entonces, ¿por qué no elegir usar una plantilla que alguien más haya creado?, o puedes crear una plantilla propia y simplemente reutilizar algunos de estos elementos si eliges crear elementos realmente separados y delicados. La mayoría de las veces, eso es lo que se llama sistema de diseño. Y luego puedes elegir sistemáticamente usar esos elementos de diseño en tus diseños. Como botones, como recolectores de tiempo, como entradas y cosas así. Pero en esta parte del curso, vamos a hablar de plantillas, que son maquetación completa, maquetación terminada para que alguien más haya creado. Y simplemente puedes arrastrar y soltar algunos de estos elementos de estas plantillas para crear tus propios diseños personalizados. Desde allí puedes agregar tus propios colores, tu propia tipografía, tus propias imágenes, tu propia copia, y realmente puedes personalizarlo a tu proyecto en particular. También puedes cambiar el logotipo, por ejemplo, para el cliente en el que estás trabajando en este momento. Y realmente puedes hacer esta plantilla personalizada para ti y para el proyecto en el que estás trabajando. Entonces básicamente, esas son las plantillas en pocas palabras y el agujero y punto principal, ¿por qué usarías la plantilla es para ahorrar un montón de tiempo porque como dije, estos elementos se están repitiendo nuevo y todo el tiempo en cada proyecto individual. Entonces, ¿por qué no usar el poder de mock plus rP y las plantillas que proporciona? Porque todas estas plantillas son gratuitas después de todo, y son súper fáciles de usar y eso está bien. Te voy a mostrar en el siguiente video. Entonces te veré ahí. 19. Elegir la plantilla: En este video, voy a mostrar cómo elegir la mejor plantilla que va a funcionar para tu proyecto en particular, dónde hacer clic, cómo hacerlo y todas esas cosas buenas. Así que comencemos. Así que aquí estamos de vuelta en nuestra página de inicio, en nuestra página de inicio. Y aquí tenemos la opción de plantillas. Y a lo largo del simulacro más rP, vas a poder ver esta opción para las plantillas más adelante. Yo también voy a mostrar eso. Cuando abres la propia interfaz, dentro de la interfaz, puedes abrir plantillas directamente desde allí. Pero aquí dentro de nuestra página de inicio, es donde se encuentran. Entonces aquí tenemos muestras y plantillas. Todos los recursos de diseño son totalmente personalizables, reutilizables y escalables. Lo cual es realmente importante porque a medida que tu negocio escala, medida que agregues más pantallas o más páginas o lo que sea, entonces vas a poder escalarlas. Entonces tenemos estas categorías. Así que te pueden gustar algunas de estas plantillas. Simplemente puedes dar click aquí mismo en este ícono de corazón y se va a agregar a mis piernas. Puedes hacer click en los medios y va a ordenar a través de diferentes páginas de medios, e-commerce, viajes, herramientas sociales, administración, Alimentación, Noticias y kits de interfaz de usuario, lo que quieras. Ahora, los kits de interfaz de usuario son especialmente importantes porque son realmente útiles porque se crean pensando en la escalabilidad. Lo que eso significa es que vas a obtener un montón de estos diferentes componentes que puedes usar tal como están en tu diseño o puedes adaptarlos para que se adapten a tus necesidades. Entonces, por ejemplo puedes elegir usar un elemento de un kit de interfaz de usuario, agregarle esquinas redondeadas, agregarle fondos, sombras y realmente personalizarlo para que se ajuste a tu marca y a lo que intentas lograr con tu diseño. O si quieres, puedes usarlo tal cual es y simplemente reemplazar los colores que se colocan la copia tal vez agregar algunas imágenes nuevas. Entonces, realmente depende de ti y cómo quieres personalizar estas plantillas para que se ajusten mejor a tu proyecto. Entonces si volvemos a todo lo que quería mostrarles aquí mismo es nuevo y popular. Voy a ir con, digamos popular. Y voy a ir por, en lugar de por todos los dispositivos, voy a elegir entre móvil y sitios web. Y voy a elegir sitios web en este caso. Así que va a, porque estoy mostrando todo bien aquí, me va a mostrar todo tipo de estas diferentes opciones y plantillas. Y se puede ver cómo está organizado cada uno de ellos, cómo está estructurado cada uno de ellos, y realmente hay un montón de ellos para elegir. Ahora, lo que puedes notar aquí mismo es que tenemos wireframes, tenemos plantillas. Y la principal diferencia entre ambos son las imágenes. Dentro de wireframes, generalmente, no ves ninguna imagen. Mientras que dentro de las plantillas, lo haces. Entonces, realmente depende de ti cómo quieres presentar esto, porque los wireframes son los mejores si quieres crear rápidamente algún tipo de diseño y solo probar algunas ideas que tengas. Tal vez obtener algunos comentarios adicionales de los clientes al inicio del proyecto puede ser explorado cómo se van a exponer las cosas en la página. Entonces tal vez puedas trabajar mucho más rápido si solo estás trabajando con wireframes en lugar de con imágenes. Porque a veces las imágenes pueden ser un poco confusas, especialmente si no funcionan con el nicho en el que te encuentras o en el que se encuentra tu cliente. Por lo tanto, en mi opinión, trabajar con estos wireframes es mucho mejor, especialmente al inicio del proyecto si ya tienes tus imágenes y las recopilaste en una carpeta, por ejemplo entonces incluso puedes elegir wireframes y subir esas imágenes que tengas directamente en wireframes y luego simplemente cambiar los colores más tarde durante el proceso de diseño. Pero realmente depende de ti y cómo quieres estructurar tu flujo de trabajo cuando trabajas con estas plantillas simuladas más rP. Entonces como dije, estos son los wireframes. Si nos desplazamos un poco más hacia abajo, se puede ver que algunas de estas ya tienen imágenes preparadas, y abramos una de ellas. Digamos este, por ejemplo y si nos desplazamos hacia abajo, puedes ver que dice comprar kits de interfaz de usuario web. Para que puedas ver que está dentro de los kits de interfaz de usuario, simulacro más kits de interfaz de usuario web de compras. Y tenemos un montón de estas diferentes opciones aquí mismo. Ahora bien, en algunos de ellos, déjame mostrarte esos. Digamos éste. Se puede ver que estas son las páginas y dice 19 páginas en total. Pero si cuentas estas cosas aquí mismo, dice nueve porque estas son nueve carpetas. Porque el equipo que creó esto, y se puede ver que es más equipo PaaS el que hizo esto. Pusieron todas estas páginas en carpetas separadas. Entonces tienen pocas opciones de hogar, tienen pocas opciones de filtros de productos, tienen pocas opciones de inicio de sesión. Y así es como llegas a estas 19 páginas en total, lo cual es realmente útil cuando estás creando diferentes versiones de tus páginas. Entonces, por ejemplo, su cliente quiere ver cómo se verá el pequeño carrito de compras cuando falla, o cuando se declina la tarjeta, o cuando no ingresa alguna información, o cuándo completó todo el proceso de pago, cómo se verá eso versus cuando no lo hacen. Entonces realmente puedes ver por qué estas carpetas son realmente una gran opción para tener en simulacro repentino más rP en esta siguiente, puedes ver que solo tenemos estos diferentes estilos. Para que puedas elegir cualquiera de estos estilos. Puedes personalizarlos, adoptarlo como quieras. Entonces esa es la diferencia entre solo páginas simples. Y carpetas en páginas específicas y diferentes versiones de páginas específicas. Entonces básicamente puedes desplazarte aquí mismo y puedes ver que tienen 19 páginas. Es un archivo RPI, por lo que funciona maravillosamente en lo que más rP. Y puedes ver alguna descripción más detallada aquí abajo. Entonces lo que tenemos es una plantilla con 20 pantallas plus, 30 plus componentes, lo cual es genial porque podemos reutilizar esos componentes un poco más tarde. Ayudarte a crear diferentes sitios web de compras comerciales en cuestión de minutos. Todas las páginas clave necesarias como compras en la página de inicio y así sucesivamente. Y los componentes como botones, deslizadores y más están empaquetados y totalmente personalizables, lo cual es genial porque no quieres perder demasiado tiempo, hace todo el punto de las plantillas y por qué las usarás para ahorrarte un montón de tiempo. Entonces lo que podemos hacer aquí mismo es que puedo hacer clic al 50% solo para ver cómo se ve. Puedo caber dos anchos. Puedo caber a la pantalla, ir al 200 por ciento solo para ver la calidad de la misma. Regresa a aquí. O puedo dar click aquí mismo y esconderlas si no quiero verlas. Por ejemplo, no quiero ver estas notas panel, así que voy a dar click aquí mismo, va a expandirlo. O si quiero esconder rápidamente esto y verlo adentro, digamos ajuste a la pantalla. Ahora puedo ver cómo se ve en pantalla. Entonces por eso estos son súper útiles y súper importantes. Volvamos al 50% o algo así. Entonces, para finalmente envolver este video sobre cómo usar una plantilla como esta, solo presionarás editar y guardar. Entonces cuando haga eso, me va a llevar a una nueva pantalla. Y puedes ver que estás viendo este proyecto de muestra en simulacro más rP. Haga clic para guardar el proyecto en el equipo actual. Entonces, ¿por qué este bit en particular es importante y útil? Aquí, puedes obtener una vista previa completa de cómo se ve todo dentro de plus rP. Entonces aquí la vista previa estaba en el propio sitio web, pero así es como se ve directamente en el simulacro más rP. Entonces lo que puedo hacer es volver donde dice páginas aquí mismo y abrir algunas de estas páginas para poder dar click aquí mismo para abrir el tipo de menú para escribir manualmente uno, tipo tres, ahí vamos. Y puedo desplazarme rápidamente entre estos, pero no los estoy editando por el momento. Entonces así es como se ven. Puedo cambiar entre ellos. Entonces 12.3, se puede ver con bastante facilidad cuál es la diferencia entre estos tipos. O puedo ir a la página de inicio y seleccionar por ejemplo casa de moda, cómo el hogar de muebles como ese. Entonces así es como se ven todos estos y puedes cambiar entre ellos con bastante facilidad. Puedes ocultarlos, puedes mostrarlos. Y aquí tenemos estas mesas de trabajo separadas. Mesas de trabajo que nos muestran cómo se ve esta pantalla, por ejemplo, este es nuestro control deslizante. Podemos elegir entre estas diferentes opciones de diapositivas y podemos elegir cuáles queremos integrar. Entonces para poder usar esta plantilla en tus proyectos, todo lo que necesitas hacer es sin importar en qué página te encuentres o en qué carpeta orina, solo puedes guardar el proyecto en equipo actual. Entonces lo que puedes hacer es elegir entre espacio personal o tu equipo. Voy a elegir el equipo en este caso, porque más adelante en la línea, podría invitar a otros compañeros de mi equipo para que me ayuden a agregarlo, estas plantillas y que me ayuden a evolucionar este diseño en algo un poco más avanzado. Y por último, lo que voy a hacer es golpear, bien. Ahora puedes elegir una carpeta de proyecto diferente si creaste una, no lo hice en mi página principal y puedes ver ahí mismo. Así que no tengo ninguna carpeta creada, pero puedo crear una nueva carpeta de proyectos muy fácil y de calidad, por ejemplo, sitio web de moda o algo así. Ahí vamos. Y se va a ubicar aquí mismo. Entonces cuando cierre este clic para guardar equipo, sitio web de moda chico, bien, y va a guardarlo dentro de esa carpeta. Entonces cuando vuelva a aquí más tarde, se encuentra dentro de este sitio web y no va a abarrotar mi página de inicio en absoluto. Entonces ahí vamos. Ahora que lo abrimos, podemos editarlo, y eso es lo que vamos a hacer en el siguiente video. Te voy a mostrar cómo hacer algunas ediciones, cómo hacer algunos cambios, cómo ajustarlos y hacer que se ajusten a tu marca, y cómo iniciar realmente una nueva página y empezar a construir desde cero, pero usando plantillas. Entonces te veré ahí. 20. Personalización de la plantilla: Ahora que elegimos nuestra plantilla, qué queremos hacer con ella, es momento de personalizarla y para hacerlo, es súper sencillo hacer un simulacro más rP. Entonces déjame mostrarte qué vamos a hacer con esta plantilla en particular y cómo la vamos a ajustar a nuestras necesidades. Entonces digamos porque esta es una plantilla de tienda que vamos a usar los elementos de tienda para ello y vamos a crear nuestra propia tienda, por así decirlo. Entonces cuando selecciono esto, puedes ver que es 1,600 por 798. Entonces obviamente vamos a crear una salida así. Pero antes de pasar a ello, primero vamos a crear nuestro grupo. Entonces, cuando hago clic en Crear grupo, se crea un grupo aquí mismo. Entonces puedo moverlo aquí mismo, o puedo moverlo un nivel arriba, que básicamente va a darle un codazo afuera. Haga clic con el botón derecho, mueva hacia arriba. Entonces lo va a poner a la cima. Y puedo decir algo así como mi diseño o diseño de tienda, algo así. Dentro de eso, voy a crear una página y voy a llamarla home page. Y se puede ver que es 1,600 por 1080 porque es, por defecto, el ancho es lo que importa, la altura. No importa demasiado porque como puedes ver, heredó esos tipos de elementos de esta página en particular en este grupo en particular, como por ejemplo nuestro ancho y alto de puerto. Entonces lo que vamos a hacer en este caso es cambiar al panel Capas. Y voy a decir algo así como menú de contenido que se borra. La edición del componente lo desconectará de los activos o desea mostrar que desea continuar. Primero exploremos este grupo y veamos, así que tenemos algunos íconos dentro. Entonces básicamente es para el contenido aquí abajo. Pero lo que me interesa es básicamente este menú. Entonces, haciendo doble clic sobre él, deséchelo. Sí, desagruparlo. Y lo que tenemos aquí son todo tipo de estos diferentes elementos. Y déjame mover esto un poco hacia abajo solo para que pueda verlo un poco mejor. Lo que me interesa es este grupo y es este rectángulo. Entonces cuando lo escondo, se puede ver que se necesita para completar el ancho de la misma. Lo que me interesa es primero el ID del grupo, entonces Control D, por ejemplo y lo voy a llamar Top Nav, BG. Así Top Nav fondo. Y voy a reducirlo a tamaño a algo así. Hasta el momento, 71 o vamos con 72 números redondos suaves. Y volvamos a la cima. Extendamos esto un poco solo para que tengamos un poco más de espacio. Lo que voy a hacer es antes que nada reducir su opacidad para que podamos ver las cosas detrás de ella. Entonces volvamos a aquí. Vamos en grupo. ¿Qué es este grupo? Sí, esto es lo que nos interesan algunos NAV o artículos top nav. Ahí vamos. Y dentro de este top nav items, lo que tenemos es nuestro logo, que reemplazaremos si se trata de un proyecto real. Entonces tenemos estos tres íconos así. Entonces tenemos nuestros elementos del menú y tenemos el rectángulo, que es el trasfondo oral de este proyecto. Entonces si lo cierro los elementos de navegación superior y lo muevo directo a la parte superior. Entonces algo como esto. Ahí vamos. Entonces ya hemos platicado suficientes artículos y tenemos Top Nav be G, que acabamos de crear. Déjame arrastrarlo a ese grupo. Entonces abramos el grupo. Intentemos moverlo. O mejor aún, tal vez podamos desagrupar esto así. Y luego selecciona esto, pulsa Control G y llámalo top. Ahora, lo que voy a hacer es darle Control C y luego volver a mis páginas. Selecciona mi página de inicio, pulsa Control V. Y puedes ver que está pegada aquí mismo. Lo que voy a hacer antes que nada es saltar dentro de aquí. Selecciona este texto donde dice Activos. Voy a agregarlo como mis textos. Entonces puedes ver que esta es la fuente, este es el tamaño. Voy a seguir adelante y recto en él como un color. Es negro puro, así que no me gusta mucho UPS, realmente no me gusta eso. Entonces déjame seleccionarlo y cambiemos eso algo un poco más realista por algo como esto. Voy a agregarlo como mi color. Deshazte del negro puro. Seleccione esta, aplique el color, aplique el color. Ahí vamos. Y para estos iconos particulares, realmente no me gusta este color. Así que vamos a seguir adelante y cambiarlo algo bonito y vibrante. A lo mejor algo así. Ahí vamos, me gusta. Entonces voy a hacer doble clic aquí mismo y llamarlo color de texto, solo para que sepa dónde está. Y este es mi color de icono o mi color principal, o como quieras llamarlo. Así podemos ir y aplicar nuestros colores de iconos para veas de inmediato que logramos un look que queremos. Y no me voy a molestar demasiado con el logo, pero todo lo que tienes que hacer es simplemente mirar las dimensiones. Entonces 136 con 36, puedes tener dimensiones un poco diferentes si así lo eliges, pero es lo mejor. Un resultado para usar las dimensiones que ya usaron, todo lo que necesitas hacer es dirigirte aquí mismo donde dice Upload. Haz clic en Subir, sube tu propio logo. Esta vez en formato PNG, por ejemplo podría funcionar bien. Y simplemente subirlo a allí una vez que estemos listos con nuestro menú superior. Y cuando cambio a las capas, puedes ver top nav copy one. Realmente no me gusta esta copia uno, nombrar estrategias, así que voy a llamarlo la navegación superior. Ahí vamos. Debajo de eso, voy a agregar algunos elementos nuevos. Así que dirígete a las páginas tenía un over to home fashion home, como mencionaste, queremos usar estos elementos. Entonces, cuando me dirijo a las capas, haga doble clic aquí mismo. Así que tenemos todo tipo de opciones diferentes. Entonces tenemos el rectángulo, tenemos la imagen, y quiero usar algo de él. No voy a usarlos todos pequeños. Primero seleccionemos múltiples de estos elementos, algo así. Porque en realidad no los quiero. Puedes golpear 02 veces para reducir la opacidad solo para que podamos ver con qué estamos trabajando. Y puedes seleccionar algunos de estos elementos sobrantes 02 veces, para que puedas reducir la opacidad del mismo y seleccionar este contenedor. Se puede acercar un poco, reducir su opacidad, porque no quiero usarlo todo. Todo lo que necesito es usar solo algunas de ellas. Entonces, por ejemplo, I. Me gusta esta opción de control deslizante. Entonces usaría estos y solo seleccionaría estos. Yo usaría este texto porque me gusta. botón Comprar ahora funciona bien. Y voy a usar el rectángulo y la imagen debajo de él. Puedes desmarcar y marcar para ver si esa fue la imagen que has elegido. Entonces parece que tenemos que hacerlo todo de nuevo, pero sí importa. Entonces hagámoslo. Puedes mantener tu espacio mientras navegas para moverte a la izquierda, derecha, arriba, abajo. Entonces usemos la tienda ahora y permítanme usar estos. Sí. Pero antes que lo haga, déjeme usar todos estos. Pulsa Control C, vuelve a mis páginas, vuelve a mi página principal, presiona Control V para pegarlas en su lugar. Ahí vamos. Y voy a alinearlos amablemente hasta aquí. Y cuando cambie a las capas, voy a agregarlas al grupo. Pero en realidad antes de hacerlo, déjame cambiar al Fashion Home y voy a usar estos. Entonces cambia a las capas, selecciónala, mira qué es. Ahí vamos. Entonces tenemos íconos y tenemos rectángulos. Eso se puede ver. Así que vamos a seleccionarlos. Pulsa Control C y vuelve a nuestra página principal Control V. Ahí vamos. Todo lo que necesito hacer realmente es alinearlos muy bien hasta aquí. Así que mantén presionada Mayús, Flecha izquierda 123440 píxeles, Mayús Flecha hacia arriba uno-dos-tres-cuatro para que sea 40 píxeles desde aquí, o puedes ajustarlos a tu gusto. Realmente no me gusta la alineación de esto, así que voy a posicionarlo. Veamos qué podemos hacer aquí mismo. A lo mejor pueda alinearlo un poco diferente. Entonces veamos, tal vez algo como esto funcione bien. Ahí vamos. Y a lo mejor quiero moverlo solo un poquito a la derecha. Entonces tal vez un decimoquinto funcione bien. Y ahí vamos. Hemos seguido adelante y hemos creado nuestro propio fondo personalizado. Ahora lo que puedes hacer aquí mismo es seleccionar tu imagen. Y porque realmente estoy tengo demasiadas de estas imágenes aquí mismo en mi computadora. Normalmente utilizo algunas colecciones en línea. Entonces tal vez eso funcionaría bien. Pero digamos que quiero reemplazar esta imagen. Entonces lo que voy a hacer es llamarlo imagen de héroe. Ven aquí a la derecha. Presiona Subir, haz clic para Subir. Ir a fotos de stock, luz derecha. Esa es la colección que tengo que por ejemplo algo como este hit Open. Se va a abrir la imagen dependiendo de lo grande que sea. Va a tomar más tiempo o más corto por ejemplo y puedes golpear Bien. Lo va a estirar un poco para que puedas rellenar el kit, por ejemplo eso va a llenarlo bastante bien porque tenemos rectángulo en la parte superior. Puedo llamarlo superposición de colores. Sólo así no sabía lo que es. Y por ejemplo si lo selecciono, puedes ver que tenemos este color de relleno. Puedo configurar el alfa para que sea 40, por ejemplo o algo más dramático como 60, veamos. Algo así como 50. Creo que en realidad va a funcionar bastante bien. Y ahí vamos. Hemos seguido adelante y hemos creado un botón separado. Lo que necesitan hacer aquí mismo es quizás ajustar esto dentro de las interacciones. Puedes ver que no es válido porque nos va a llevar a la página separada que haremos en algún momento, por ejemplo, para agregar más elementos a esta página, lo que voy a hacer es simplemente seleccionar mi tablero de arte y extenderme todo el camino hacia abajo para darme un poco más de espacio, cambiar a páginas, cambiar a página principal. Y ahora sigamos adelante y seleccionemos algunos de estos elementos. Entonces voy a seleccionar estos aquí mismo en la parte superior. Cambiando a mis capas. Y selecciónalos por igual. Entonces ahí vamos. Creo que seleccioné todo lo que necesitaba. Pulsa Control C, retrocede dos páginas, capas de página principal. Control de golpes V. Ahí vamos. Bonito. Pulsa Control G para agruparlos, y voy a llamarlos por ejemplo digamos productos promocionados, algo así. Y porque todos estos otros elementos están dispersos por toda nuestra página, pero lo voy a hacer es simplemente seleccionarlos todos como Así que golpea Control G y llama a esta imagen de héroe o lo que quieras. Puedes mover esta navegación hacia abajo arriba, moverla hacia arriba, y puedes ver cómo nuestro sitio web ya empieza a tomar alguna forma. Voy a sostener mi tecla alternativa para medir. Y se puede ver que esto es 160, que está bien, y 80 desde arriba, lo cual es genial. Y quiero usarlo. Entonces podemos volver a la página principal. Y e.g. I. Sólo puedo hacer la selección de todos estos elementos, algo así. Y podemos seguir adelante y seleccionar el pie de página también. Golpea Control C, solo para ahorrarnos un poco de tiempo. Golpea Control V alrededor de una vez más. Y recuerda que somos ATP. Así que vamos a mantener la consistencia de nuestro diseño. Vamos a seleccionar nuestro tablero de arte haciendo doble clic en él y extendiéndolo todo el camino hacia abajo. Ahí vas. Hemos creado una página, hemos ajustado una página. Y obviamente lo que vas a hacer es, digamos que quieres agregar algo como esto y quieres editarlo. Entonces tal vez en lugar de recién llegados, tal vez pueda ver prepararse para el invierno. Porque se ve fría y nevada. Prepárate para la magia invernal. Quizá algo así. Camisetas básicas, Eso está bien. Entonces, hagamos clic afuera y ajustemos esto. Así que rebajas este verano. Sí, tal vez disfrute de los artículos más populares a la venta. Algo así. Creo que eso va a funcionar bien. Y obtienes la imagen completa, puedes seguir adelante y reemplazar estas imágenes para que puedas hacer doble clic para dibujar las dos propiedades. Tienes esta opción de Subir. Entonces, lo que puedo hacer es presionar Subir, por ejemplo, hacer clic para Subir y encontrar otra imagen. A lo mejor este golpeó abierto. Y una vez más, dependiendo de qué tan grande sea tu imagen, y siempre te recomendaría que optimizaras tus imágenes, sea lo que sea que estés haciendo, va a tardar más o más corto para que lo hagas. Entonces aquí está. Y puedo golpear bien, por ejemplo n es se puede ver que va a reemplazar esa imagen original con esta imagen. Por último, lo que necesitamos es agregar algo diferente aquí. Entonces lo voy a llamar por ejemplo, pantalones ajustados de hombre para hombre. Tal vez. Y tal vez pueda agregarle este precio. A lo mejor puede ser 49, 99 o algo así a partir de este precio. Y se puede ver claramente lo que hizo eso. Una cosa más que quiero señalar es que cuando haces doble clic dentro, puedes ver que estás llevando a este modo de edición. Todo lo demás está ensombrecido y todo lo que estás editando en este momento queda resaltado. Además, lo que puedes hacer es mantener presionada la tecla Shift para acotar esta imagen si quieres o para escalarla. Pero voy a mantener la consistencia de esto y voy a colocarlo aquí mismo. Y por cierto, me gusta mucho cómo se ve esto porque no tiene mucho sentido incluir pantalones. Siguiente dos modelos. Así que voy a mantener el diseño original tal como estaba. ¿Por qué deberían elegirnos? Puedes aplicar eso, puedes ajustarlo. Y por ejemplo tal vez quiero aplicar este color de icono en el fondo. Y ahora selecciona esta Así que es una imagen y ahora arrastra y suelta nuestro dólar dentro. Puedes seleccionar estos dos y asegurarte de que estén centrados. Y ahí lo tienes, puedes ver lo sencillo que es esto de editar, lo sencillo que es ajustar esto. Y crucialmente, puedes seleccionar estos elementos, presionar Control G y llamarlo envío gratis. Entonces puedes agrupar estos controles G pagos iguales. Y entiendes todo el punto. Para que puedas seguir adelante y agruparlos y ajustarlos como quieras. Va a ser bastante sencillo para ti organizarlo. Y entonces simplemente puedes agarrar todo este contenido, presionar Control G, y llamarlo por ejemplo, ¿por qué elegir así? Porque es solo mi preferencia y siempre me gusta hacerlo. Tuve la suerte de seleccionar estos elementos y ponerlos en grupo, organizarlos amablemente. Entonces lo sé, y mis compañeros saben más adelante quién creó lo que hicimos, lo que logramos y dónde todo está organizado en algunos momentos particulares. Entonces por eso me gusta nombrar mis capas, mis grupos, y mantener las cosas organizadas. Así que más adelante en el futuro, cuando las cosas se hacen más grandes, cuando los plazos se acortan, todo está muy bien organizado y todos están en la misma página, lo que tenemos que hacer y dónde lo dejamos la vez anterior. Entonces, si seguimos adelante en la línea, puedes ver algunos productos en la actualidad. Puedes cambiar algo como esto a nuestro más. A productos populares. Y lo que voy a hacer en este caso es seleccionar esto, asegurarme de que esté centrado. Entonces cuando estoy escribiendo, se va a extender en cada lado. Ahí vamos. Tenemos esta opción. Entonces lo que voy a hacer aquí mismo es quizás agregarle algunos antecedentes. O tal vez veamos imagen. Esa imagen. Lo que puedo hacer es agregar una sombra rápida, así que algo así como 610 y luego 20 para el desenfoque. Y tal vez ajustar el Alfa para que no sea completamente negro, pero es algo así. Ahí vamos, solo para agregarle un poco de sombra a su alrededor. Y tal vez mientras estamos en ello, tal vez podamos agregar algunas opciones diferentes. Entonces tal vez pueda ir con diez para el radio de la esquina y solo asegurarme cambiar este rectángulo también para girar porque cubre en la parte superior de la imagen. Y ahora puedes ver que tenemos estas bonitas esquinas redondeadas en lugar de esquinas de calles, si eso es algo que buscas. Ahora aquí lo que podemos ver es toda esta información dentro de nuestro pie de página. Lo que haría obviamente es reemplazar esto y cambiarlo. Entonces veamos qué tenemos aquí mismo. Tenemos hombres, mujeres y niños. Y realmente no me gusta cómo se centra esto. Así que en realidad voy a seleccionarlo todo así y simplemente venir aquí y asegurarme de que todo esté centrado, así. Entonces cuando hago zoom, se puede ver que todo está centrado. Ahora bien, si quieres que este sea tu pie de página, siempre lo copiarás y pegarás abajo en la parte inferior. Pero sólo voy a guardarlo como es porque esto es un componente. Voy a golpear para abrirlo y editarlo. Entonces lo que voy a hacer es que quizás puedas cambiar esto, lo que dice. Tú, puedes ver las compras en línea. Entonces tal vez veamos información de contacto. Entonces tal vez quieras cambiar esto, Digamos tienda en mi sitio web.com o cualquier línea directa que puedas elegir. Entonces digamos número de teléfono, teléfono. Tal vez quieras agregar algún teléfono adicional abajo o algo así, tal vez una dirección, lo que quieras, puedes ajustarlo. Y finalmente aquí tenemos algunas opciones diferentes y tenemos algunos iconos diferentes. Para que puedas reemplazar fácilmente estos iconos. Puedes agregar el tuyo propio, puedes cambiarlos. Puedes hacer lo que quieras con ellos. Por ejemplo, tal vez esta tienda no tiene LinkedIn. Así podrás deshacerte de los LinkedIn y puedes seleccionar estos dos y simplemente mojarlos y ver 31 píxeles es la distancia entre estos y puedes ajustarlos con bastante facilidad. En este caso, lo que podemos hacer es simplemente seleccionarlos todos por igual. Así que dirígete a nuestro panel de activos y selecciona el color del icono porque recuerda, ese es el color del icono que elegimos para eso. Pero también lo hacemos es seleccionar esta, se asegura de que sea perno. Y asegúrate de que en realidad estamos usando esta fuente para estas opciones aquí mismo. Ahí vamos. Entonces tenemos la misma fuente que antes. Voy a ir con negrita. Voy a ir por alguna razón ahí no cambió y ahí vamos, audaz. Y tenemos perno. Ahora que agregamos deuda, lo que podemos hacer es agregar esa opción aquí. Ahí vamos. Y simplemente puedes aplicar esta opción para negrita. Ahí vamos. Entonces ahora cuando lo agregues, este perno, lo va a agregar en todo tu diseño. Ahora, por fin, lo que quiero hacer es seleccionar estos tres y quizás agregarles un color diferente. Entonces no es tan obvio, tal vez algo como esto. Creo que es mucho más legible que antes. Y veamos, tenemos este color. Voy a agregarlo a mis colores. Y lo voy a llamar por ejemplo color de párrafo. Así. Voy a seleccionar este párrafo y aplicarle el color del párrafo. Entonces entiendes todo el punto. A lo mejor puedo seleccionar esto y aplicar este atrevido, pero no creo que funcione muy bien. Pero puedes seguir adelante y simplemente ajustarlos y aplicar lo que quieras con ellos. Entonces esta, realmente no me gusta cómo se ve. Entonces tal vez, tal vez incluso podamos moverlo fuera de la carpeta. Entonces veamos por qué elegirnos botón derecho y desagruparnos. Entonces posiciona esto para estar en el centro. Ahí vamos. Control G, y entonces ¿por qué? ¿Nos eliges? Genial. Por lo que ahora puedo seleccionar este control G, los productos más populares. Entonces puedo seleccionar este control G, y tal vez llamarlo. Veamos por qué no controlé el grupo G. Ahí vamos. Puedes llamarlo CTA, por ejemplo, para llamado a la acción. Y puedo agrupar nuestro nuevo pie de página porque recuerden que previamente lo desagrupamos. Entonces Control G, Vamos a llamarlo Pie de página, vamos. Y lo que nos queda son todos estos elementos en la parte superior. Entonces veamos. Bien, Entonces para ti, seleccionado para ti así. Y vamos a comprobarlo. Ahora se puede ver que estamos mucho más organizados que antes. Lo que podemos hacer es empezar desde arriba. Entonces tenemos navegación superior, puedes moverla en la parte superior. Imagen de héroe. Entonces hemos promocionado productos seleccionados para ti. Ahí vamos. Entonces tenemos y, tú nos eliges. El filtro va a ir muy abajo. Control de un llamado a la acción, productos más populares y el pie de página. Entonces ahora si quiero crear una nueva página, Digamos que no sé, hice clic en esta camiseta o lo que sea y abriéndome, todo lo que necesito hacer es simplemente encontrarla aquí mismo. Así que vamos a entrar en detalle del producto y veamos qué tenemos. Entonces ahí vamos. Tenemos esta camisa exacta que buscaremos. Y tenemos todo tipo de estas diferentes opciones como tablero de sub arte. Entonces tenemos descripción, tenemos reseñas. Y así es como se ven las reseñas y usaron puertos insatisfactorio para hacerlo. Y aquí se puede ver que tenemos estas dos opciones. Así que me gusta mucho lo que hicieron aquí mismo. Entonces podemos hacer lo mismo para nuestra segunda página. Así que dentro del diseño de nuestra tienda y dentro de nuestra página de inicio, lo que pueden hacer es ponerlo dentro de la carpeta. Dentro de eso, lo que podemos hacer es crear otra página. Lo siento, no un grupo. Quería decir otra página. Ahí vamos. Y voy a llamarlo por ejemplo detalles del producto. Ahí vamos. Y todo lo que necesito hacer aquí es básicamente empezar a copiar y pegar elementos de mi página principal. Entonces ahora va a ser mucho más sencillo hacerlo, así que tomemos esto, tomemos esto, esto y este control C. Cambiar al control de detalles del producto V. Ahí vamos. Y necesito extender mi aeropuerto un poquito a algo como esto. Ahí vamos. Y voy a ir al detalle del producto y seleccionaré todo lo que veas aquí mismo. Entonces seleccionaré todo, presionaré Control G, cambiaré a las capas y lo llamaré, por ejemplo , detalles del producto, Control C, presionaré Páginas. Volver a mis detalles del producto control V. Ahí vamos. Cambia a las capas. Siempre dice botón Copiar, no te preocupes por ello. Es sólo porque lo copiaste de otra página. Entonces naranja para hacer es hacer doble clic y simplemente cambiar el nombre de estos detalles del producto. Ahí vamos. Algo así. Copia y solo mantén las cosas bonitas y organizadas. Porque a veces tus clientes te van a preguntar, esta es una copia de lo que la copiaste desde algún lugar en línea y luego tienes que explicarles. No, no. Acabo de copiarlo de otra página. Entonces, lo que tenemos que hacer finalmente, es volver a los detalles y necesitamos copiar esto, que como puedes ver es el panel de contenido. Dentro de ese panel de contenido tenemos U1 y U2. Se puede ver que esto es V1, este es VW dos. Y si haces doble clic, puedes ver cómo puedes verificar entre estos y qué puedes hacer con ellos. Y claro, las interacciones ya se han agregado para esto. Por lo que puedes ajustar entre ellos con bastante facilidad. Entonces si presiono Control C para copiarlo, volver a mis páginas, volver a mis detalles del producto control V. Ahí vamos. Y recuerda que usamos AT, así que tal vez podamos ir con 100. Tan sólido sigue siendo 123. Y si me escondo, si pongo el cursor y selecciono Alt y hago click izquierdo, puedes ver que estoy 100 desde la navegación superior. Y cambiemos esto a aquí panel de contenido. Ahí vamos. Y básicamente lo que haré así como solo asegúrate de ir a Ver y seleccionar estos Control C. Vuelve a los detalles del producto Control V, y asegúrate de que se encuentran justo aquí. Así que voy a colocarlos justo por aquí. Ahí vamos, agradables y organizados. Y voy a seleccionar todo mi contenido y empujarlo hacia esto para que sea 100 doble-clic. Y ahí vamos. Entonces ahora que tenemos esto preparado, todo está como debería ser. Obviamente, irás y harás algunos cambios más allá. Entonces digamos que este icono dentro de este cambio a las Propiedades, se puede ver que se trata de un icono. Así que cambiar a Icon color, si ese es el estilo al que quieres ir, a mejor esta venta no es algo que te guste. Desea ajustar estos tamaños de fuente y tipos de fuente, por ejemplo cosas así. Para que puedas hacerlo todo. Y crucialmente, cuando golpeas la vista previa aquí mismo, cuando me desplazo hacia abajo, realmente no ves esto porque necesitamos conectarlo. Pero se puede ver la vista previa. Y cuando vuelva a la página principal, se puede ver la página principal. Ahora esto es justo lo que creamos, esto es justo lo que agregamos. Y en el siguiente video, realidad voy a mostrarte cómo ajustar y crear esta interacción para integrarte realmente entre ellos. Y tal vez podamos agregar al carrito, tal vez podamos agregar un bonito efecto hover pequeño. Entonces te veré ahí. 21. Agregando interacciones a las plantillas: Agregar interacciones a tus diseños realmente puede darles vida porque no son solo diseños estáticos. Vas a agregar algo de vida, algo de movimiento y algo de narración nacional a tus diseños para que tus espectadores, tus clientes y tus desarrolladores entiendan lo que querías decir con él en lo que estás hablando en tu diseño. Así que retomemos donde lo dejamos en la lección anterior y déjame mostrarte cómo agregar algunas interacciones básicas en simulacro más rP. Así que aquí está la página de detalles del producto, pero en realidad quiero comenzar desde nuestra página de inicio. Entonces quiero que mis usuarios puedan seleccionar esta imagen y luego ir a los detalles del producto. Y luego vamos a abordar algunas de estas opciones. Entonces para hacerlo, voy a entrar justo aquí y decir, ir a la vista de página uno. Realmente no me gusta cómo está estructurado eso. Entonces voy a editarlo. Y voy a dar click en Salto de página. Y voy a apuntar y volver aquí a los detalles del producto sobre emisiones, ninguno. Entonces veamos si lo logramos. Y luego vamos a golpear rápidamente la vista previa aquí mismo. Entonces, cuando se abre esta vista previa, puedo desplazarme hasta esta imagen. Cuando haga clic en él, me va a llevar a esta página. Así que todo eso funciona muy bien. Entonces cuando vamos a los detalles en sí, lo que quiero ajustar aquí mismo son solo dos cosas. Una cosa es el botón Agregar al carrito. Quiero agregarle un efecto de hover rápido. Y luego quiero abordar este panel de contenido para agregar mis efectos de hover. Lo que voy a hacer es hacer doble clic en mi botón. Y entonces se puede ver que tenemos todos estos comandos, pero en realidad quiero agregarlo, este botón. Entonces voy a seleccionar mouse hover en este caso. Y voy a ir a Propiedades aquí mismo. Para el ratón, pase el cursor sobre sí mismo. En lugar de este color de relleno, voy a cambiarlo a este color de icono por ejemplo y en el texto mismo. Entonces veamos, el texto va a estar justo aquí. Ahí vamos. Así que cambiemos a la normalidad. Vamos a cambiarlo a mouse hover. Avancemos rápidamente y veamos qué hicimos. Entonces cuando pasas el cursor aquí mismo, puedes ver que cambia el color de fondo y puedes hacerlo con todos estos. Entonces, por ejemplo, esto no tiene ningún color excepto el icono en sí. Entonces, cuando los usuarios se ciernen sobre él, tal vez este icono pueda pasar de verde a morado o algo así, como hicimos aquí mismo. Pero aún así tenemos problema con este panel de contenido porque puedes ver que no muestra ningún contenido dentro de él. Entonces ahí es donde tiene que pasar algo de magia y en realidad tenemos que conectar algo de ella. Entonces, si nos acercamos un poco, se puede ver que los inválidos nacen. Y eso es porque lo copiamos desde esta visión particular. Y aquí en esta vista, todo funciona bien. Para que puedas ver la vista de YouTube. Así puedes cambiar el nombre de estos como quieras. Si volvemos a nuestras células T, lo que voy a hacer es hacer doble clic aquí mismo. Y si puedes ver tenemos tablero de arte inválido. Así que vamos a deshacernos de él simplemente haciendo clic en Eliminar. Entonces voy a seguir adelante y sumar a nuestras juntas. Y puedes verlas aquí mismo. Ahora bien, en vez de esto, lo que quiero hacer es esto va a ser una descripción. El siguiente va a ser las críticas. Tan rápido. Descripción. Sostenga la barra espaciadora, haga doble clic en las reseñas. Ahí vamos. Y ahora si vuelvo a aquí, se puede ver que se actualizó en tiempo real a descripción y reseñas. Entonces todo lo que necesito hacer aquí es simplemente copiar el contenido de aquí. Control C. Vaya, lo siento, accidentalmente seleccioné la herramienta pluma. Para que puedas deshacerte de esto lo que yo creé. Así que volvamos una vez más. Control C. Ir a mi descripción control V. Ahí vamos, agradable y limpio. Entonces ve directo a aquí, controla C, y pégalo dentro de mis reseñas. Ahora porque ya usé este contenido, no necesito estos puertos de baja calidad que solo se copian. Así que solo puedo posicionar mi descripción aquí mismo, y solo puedo usar mis reseñas. Colóquelo justo por aquí. Ahora bien, si vuelvo y adelanto esta una vez más, verán que está justo aquí, pero cuando haga clic aquí mismo, en realidad no pasa nada. Entonces, ¿cómo puedo cambiar entre estas dos y cómo puedo hacer que cambie entre estas dos piezas de contenido? Entonces para hacer eso y volver a aquí, una vez más, todo tiene que ver con este panel de contenido. Entonces, si cambio a las capas, selecciono, puedes ver sus nombres. Se llama panel de contenido uno en este caso. Entonces eso es lo que necesitamos apuntar. Entonces puedes ver que ya tiene algunas interacciones aquí mismo en las reseñas y en la descripción misma. Entonces, básicamente, lo que tenemos que hacer es cuando los usuarios hacen clic en las reseñas, para llevarlas a las reseñas, cuando hacen clic en la descripción para llevarlas vuelta a la descripción. ¿Cómo hacer eso? Simplemente vaya al patrón de interacción. Selecciona tus reseñas aquí mismo, y podrás ver que los comandos ya han sido establecidos. Entonces todo lo que necesitas hacer es vincularlo a la nueva página que acabamos de crear. Así que presiona Editar disparadores, haz clic, eso está bien. Seleccione el objetivo. Entonces en la mesa de trabajo principal, que es esta salida de aquí mismo, puedo abrir, ubicar mi panel de contenido, uno, hacer clic ahí, cambiar de contenido. Entonces contenido, necesito seleccionarlo para ir a reseñas. Porque cuando seleccionan reseñas, necesito que vayan a reseñas porque se trata de reseñas voy a seleccionarla de aquí mismo. Puedes elegir la animación que quieras. Puedes deslizar hacia abajo hacia la izquierda y hacia la derecha, y puedes elegir la flexibilización cuando eliges la animación. Entonces déjame mostrarte, digamos desliza el dedo hacia la izquierda, luego obtienes todas estas opciones. Así que sólo voy a elegir ninguno. Golpeado, ¿bien? Y entonces hay que hacer lo mismo por éste. Así que haz click en estos tres puntos aquí mismo. Presiona Editar. Haga clic, seleccione el objetivo. Voy a elegir panel de contenido de mesa de trabajo principal, igual que hicimos la vez anterior. Y puedes ver que puedes tener esta opción de bucle continuamente si quieres. Pero no voy a hacerlo porque estamos en la descripción, queremos apuntar a la descripción. Así que selecciona la descripción aquí mismo. Pulsa Bien, una vez más, puedes elegir todo tipo de opciones diferentes aquí mismo. Y también tienes diferentes disparadores. Entonces tienes cliquish, tienes doble clic, clic derecho mi mouse abajo, arriba, mouse enter, mouse leave. Centro comercial significa esto. Mouse leaves significa este Slider fluoruro Zoom, todo tipo de cosas diferentes, pero solo voy a usar el mismo clic básico de retención, pulsa Bien, para confirmarlo. Y ahora vamos a golpear Vista previa en nuestro principal, nuestro tablero también, puedes llamarlo como lo llamaste aquí mismo. Entonces lo llamamos detalles del producto. Para que puedas hacer doble clic en los detalles del producto. Todo va a estar vinculado porque no cambiaste ningún enlace y no le hiciste nada extra. Por lo que ahora se puede ver que se encuentra justo aquí. Así que golpea las críticas. Ahí vamos. Tienes dos reseñas. A lo mejor deberíamos cambiar esto a tres reseñas porque tenemos tres revisores. Y obviamente puedes cambiar esta descripción. Puedes jugar con él y hacer lo que quieras. Una última cosa que quiero hacer es quizás cuando hagan clic en el logo, los va a llevar a la página principal. Entonces, vamos a agregar eso rápidamente. Voy a ir a aquí, seleccionarlo de aquí, y luego simplemente dar clic y arrastrar a mi página principal. Así que el gatillo va a ser comandos de clic. Va a saltar a esa página. Ventana abierta y actual. No quiero que se abra en Windham adicional anima ninguno. Entonces tal vez pueda hacer algo con él. Tal vez alimentarse. No lo sé, tal vez eso funcione y haga el truco. A ver. Sí, usemos el desvanecimiento. La flexibilización va a ser facilidad en la duración de la animación, dos milisegundos a segundos, y luego golpear, Bien. Ahora cuando golpeé la vista previa, esto sigue funcionando. Todo funciona bien. Tienes que dar en el blanco. Y luego al pasar el cursor, puedes ver que cambia de la flecha al puntero. Puedes hacer clic ahí y te va a llevar a esta página en particular, desvanecerse en bonito efecto. También puedes convertirlos en estados flotadores y tal vez podamos hacer precisamente eso. Así que vuelve a la página principal y selecciona estos. Cambiar a las capas y tenemos que hacer algunos ajustes básicos. Entonces tal vez promocioné productos, tal vez incluso pueda desagruparlos por ahora para que pueda agrupar esto. Entonces Control G. Esto va a ser magia invernal, así. Esta siguiente va a ser playeras básicas. Y por último, este último va a ser artículos a la venta o a la venta o algo así. Entonces voy a agruparlos a todos. Y no recuerdo cómo los llamamos, pero quizás sección promocional de la sección promo, Algo así. Ahora lo que voy a hacer para este es que voy a agregar interacción, o puedo agregar un nuevo estado mouse hover, por ejemplo dentro del mouse hover, puedo abrirlo, asegurarme cambiarlo al panel Propiedades. Entonces lo que puedes hacer es jugar con estos. Puedes incluir sombras, bordes y cosas así. Pero todo lo que me interesa es esto. Aquí. Voy a introducir loops. Pero primero selecciona el cursor del mouse. Aquí voy a introducir un poco más de opacidad a algo así como, no sé si 50. Ahí vamos y lo cambiamos a la normal. Después selecciona éste. Playeras Básicas. Voy a seleccionar mouse hover. Y dentro de él, voy a seleccionar mouse hover para ello y cambiarlo al 50 por ciento. Asegúrate de volver siempre a la normalidad, ciérrala. Y por último, tenemos la opción de venta. Entonces voy a seleccionar este rectángulo del mouse hover y asegurarme de cambiarlo al 50 por ciento. Puedes, por supuesto, cambiar el color si así lo eliges. Entonces podemos elegir este color de icono, por ejemplo, ese puede ser nuestro color de desplazamiento del mouse. Regresa a la normalidad, selecciona éste también, cambiando a mouse hover, luego podemos seleccionar este color de 40 iconos. Y vamos a asegurarnos de que dejamos esa normalidad. Ahí vamos. Seleccione esta una vez más, elija el interruptor de color del icono de desplazamiento del mouse para que sea normal. Ahí vamos. Y ahora que eso está terminado, lo que podemos hacer es hacer un avance rápido, Mira lo que hicimos hasta ahora. Y una vez que se cargue, puedes hacerlo con estos. Puedes hacer que estas flechas salten un poco. Puedes moverlos un poco hacia arriba. Puedes agregar usando nuestras tablas como te acabo de mostrar. Puede agregar esto como un panel de cantidad. Entonces puedes conectar diferentes tableros de sub arte con diferentes diapositivas, con diferentes productos y cosas así. A lo mejor puedas cambiar esto como en hover. Pero se puede ver cuando pongo el cursor sobre estos, se puede ver lo que hacen. Y el poder es incidente. Así que funciona bien. Pero también puedes hacer es tal vez en estas imágenes, puedes iluminarlas un poco. Entonces, cuando pasas el cursor sobre cualquiera de estos, simplemente se acerca un poco. A lo mejor la muerte podría ser algo para probar. Entonces tal vez en esta imagen que ya elegimos aquí tenemos la imagen, tenemos el mouse hover sobre mouse rondando. Lo que podemos hacer es agregar diferentes interacciones. Puedo seleccionar mi objetivo. Entonces tendría que elegir esta manualmente. Entonces es imagen PNG. Entonces tal vez podamos llamarlo hombre, modelo o algo así solo para que podamos diferenciarlo un poco. Así que dentro de aquí, vamos a tratar de encontrarlo. No. Ahí vamos. Mad modelo disparadores. Veamos, reemplazado con mouse, enter, Zoom. Entonces podemos agregar otra interacción. Si volvemos a las páginas, diríjase a los detalles del producto. Entonces en lugar de entrar con el mouse, voy a agregar clic Página, saltar. Me encuentro, ninguno, hit. Bien, y ahí tienes. Ahora tenemos dos interacciones. Así que vamos a probarlo rápidamente y ver qué hicimos. Mouse enter ojalá nos vaya a mostrar ese efecto hover. Así. Se puede ver cómo se ve eso. Así que solo se escala un poco en tamaño. Al hacer clic en él, todavía te va a llevar a esta página en particular cuando tengas todos estos elementos que acabamos de agregar y que acabamos de editar. Entonces así de súper sencillo es trabajar con él. Y lo puedes ver solo vuelve atrás. Se remonta al estado original donde estaba. Pero cuando vas al mouse enter, puedes presionar Editar. Y tal vez, tal vez podamos mover este c comandos. Recuperación automática. Creo que eso va a funcionar bien porque la recuperación automática va a llevar de vuelta al lugar original donde lo dejaste. Y te va a mostrar ese lugar original y que editaste. Entonces básicamente eso es todo para revisar nuestro panel de interacción y qué puedes hacer con las interacciones. Y en el siguiente video, vamos a abordar la publicación nuestros prototipos y cómo previsualizarlos y ¿cuáles son algunas de nuestras opciones que tenemos dentro de mock plus rP? Entonces te veré ahí. 22. Previsualización y publicación de prototipos: Cuando quieres previsualizar tus prototipos dentro de más más rP, hay algunas opciones que puedes explorar y también cuando quieres compartir esos prototipos y publicarlos para que otros vean cuáles están fuera de tu equipo, también hay algunas opciones. Entonces déjame mostrarte. Cuando vas aquí mismo, tienes tu modo de vista previa. Por lo tanto, puede hacer clic en esta flecha para comenzar desde página principal o para comenzar desde la página actual. Si selecciono eso, va a comenzar desde la página actual donde lo dejamos. Y puedes ver, como todas nuestras interacciones siguen funcionando como te mostré en el video anterior. Pero también puedes seleccionar esto para comenzar desde la página principal. Entonces, lo que sea que establezca como su página de inicio es por donde va a comenzar. Por último, cuando quieras previsualizar, simplemente haz clic en esta flecha. Ahora en lugar del modo premium, también tenemos algunas opciones. Entonces aquí puedes seleccionar cómo quieres que se acerque esto. Puedes quedarte demasiado húmedo, puedes caber a la pantalla. Oregon se ajusta al ancho. O puedes acercar y 200 por ciento, o puedes hacer lo que quieras con él. Y ahora tenemos opción de pantalla completa, que va a ser esta opción. Pero realmente no me gusta porque en realidad necesito acercarme un poco al 100%. Y luego necesito entrar a pantalla completa. Y esto es básicamente lo que tus usuarios van a ver como un sitio web de pantalla completa. Obviamente, tengo una pantalla un poco más grande, así que tengo estos márgenes en el lado izquierdo y derecho. Pero si tienes, por ejemplo , pantalla de laptop, porque recuerda que hicimos esto a 1.600 pixeles de ancho. Va a ocupar la pantalla completa. Así que solo ten esas cosas en mente cuando quieras salir a la calle, solo puedes previsualizar. Se puede ver que esto se remonta cuando hago clic me va a llevar a esta página. Sin embargo, el efecto funciona. Entonces todo lo que hacíamos anteriormente, acerías amablemente. Y cuando haga clic, me va a llevar de vuelta a la página principal. Si quiero escapar, simplemente golpearía Escape en tu teclado y te va a llevar de vuelta hasta aquí. Ahora a continuación tenemos estos paneles a la izquierda y a la derecha. Puedes ocultar el intestino de la página y no muestra cuántas páginas tienes realmente. Y tienes un poco más de bienes raíces para explorar el prototipo. Y entonces puedes mostrar el arco de tus notas, aquí mismo no agregamos ninguna nota. Pero básicamente, puedes dirigirte a anotar y decir algo así como cuándo va a ser para todo el proyecto. En este caso, los nodos pueden ser algo así como, ¿te gusta el estilo y los colores minimalistas? ¿Debo agregar más colores al diseño? Ahí vas. Puedes presionar Enter dos veces n Entonces por ejemplo escribiendo algo como Por favor envíame la imagen de vuelta. Hablamos de líneas horizontales que a lo mejor no compartieron esas imágenes, pero puedes presionar Control S y presionar Control R o Comando R. Si estás dentro de Google Chrome para actualizar esta página. Y ahí tienes. Tienes tus notas de página. Si quieres deshacerte de los nodos de la página, simplemente selecciónalos aquí mismo. Puedes seleccionar uno, como So, pulsa retroceso para deshacerte de él. O puedes seleccionar otro hit Control S y tienes que presionar Control R Una vez más aquí mismo para refrescar la página para ver los cambios que ocurren aquí mismo. Si no quieres ver caer la nariz porque por el momento no tenemos ninguna nota. Puedes dar click ahí mismo para deshacerte de él. Entonces tienes tus opciones para compartir. Para que puedas compartir el enlace de vista previa. Y puedes optar por incluir o eliminar algunas de estas opciones dependiendo de a quién se la envíes. Si se trata de un cliente, por ejemplo, quieres que puedan ver todas las opciones. Pero si hay algunos usuarios, es posible que desee ocultar algunas opciones como, por ejemplo, a. áreas de enlace. Puede marcar o desmarcar Mostrar área de tintineo. Y esto es útil porque quieres que puedan hacer clic en el enlace o averiguar dónde están los enlaces para ellos mismos. Incluso puedes establecer contraseñas si quieres proteger tus diseños y tus prototipos. Y no quieres que todos accedan a ellos, sino a ciertas personas. Entonces una vez que estés listo, puedes presionar Copiar y puedes enviarles este enlace y ellos van a poder acceder a él. También algunas opciones que tienes son estas. Entonces básicamente de lo que acabamos de hablar, puedes mostrar el área de enlace, puedes mostrar el efecto hover, puedes mostrar estas cosas o puedes ocultarlas dependiendo si estás haciendo algunas pruebas o si estás haciendo alguna previa. Entonces básicamente eso es todo para la prima y finalmente para la publicación. Cuando quieras publicar tu prototipo, digamos que estás listo. Estás contento con ello. Y digamos que estos no me gustan. A lo mejor quiero eliminarlos porque solo quería poder usar las cosas que creé. Y no quiero necesariamente que mis clientes vean que me pueden usar alguna plantilla o algo así. Así que solo voy a deshacerme de esto y solo tengo mis propios diseños los cuales se acaban de crear. Hacer un chequeo rápido será bueno porque siempre quieres asegurarte antes de seguir adelante con esto, si todo funciona, todo funciona aquí mismo. Si hago clic aquí mismo, funciona aquí mismo. Entonces todo está como debería, pero solo haz un chequeo rápido antes de que realmente golpees publicar. Pero cuando estés listo, puedes presionar publicar y puedes apuntar o seleccionar un nuevo proyecto. Entonces aquí tenemos nuestro primer proyecto, por ejemplo o muestra de proyecto, pero quiero crear un nuevo proyecto. Entonces en lugar de esto, que es el nombre de un kit de interfaz de usuario. Voy a llamarlo diseño agudo porque eso es en lo que me ubicé. Y puedo seleccionar todo como mi hoja de ubicación. Bien, tienda diseñada, hit, Bien, y va a publicarla en la nube mock plus. Y voy a poder trabajar con desarrolladores, con compañeros de equipo, o con grupos de interés en este proyecto. Puedes cerrar o puedes elegir ver el proyecto aquí mismo. Y eso te va a mostrar. Entonces aquí tenemos kits de interfaz de usuario web de compras. Contamos con Ver Detalles. Vamos a golpear Ver detalles para ver qué tenemos. Entonces tenemos homepage y tenemos detalles del producto, así que tenemos descripción y reseñas como sub mesas de trabajo dentro de eso. Entonces aquí tenemos que para esta sección en particular en que puedes hacer dentro de aquí es que puedas publicar notas para que tus clientes puedan responder algunas notas. Entonces tal vez pueda tal vez quiera agregar algunos comentarios aquí mismo. A ver. ¿Te gusta el color amarillo para los botones? Y puedes presionar control enter para enviar ese comentario. Y lo puedes ver como sin resolver o puedes resolver con aquí mismo. Puedes cerrarlo si está terminado y cosas así. Y tus clientes podrán ver esto en tiempo real y responder en tiempo real. Entonces, al hacer clic, pueden publicar una respuesta aquí. Puedes ver esa respuesta aquí mismo. Notificación salte de nuevo aquí y simplemente agregó una peor solución a este problema. La sección de desarrollo está construida específicamente para desarrolladores. Es un lugar donde los desarrolladores pueden obtener todo lo que necesitan para comenzar a codificar lo antes posible, como las especificaciones, como el código CSS, como fragmentos de valores hexagonales de color y mucho más. Entonces tenemos las anotaciones de activos, enlace al sistema de diseño, cambiar plataformas sordas y colores. Entonces, lo que todo esto significa es que cuando empiezas a rondar, puedes ver las distancias entre todos tus elementos, lo cual obviamente es crucial tanto para HTML como para CSS. Pero digamos que quiero elegir esta imagen. Puedo obtener el código como CSS, Objective-C, Swift y Android. Puedo ver las dimensiones aquí mismo. Entonces x, y, posiciones, ancho y alto, radio y opacidad. Así lo puedo ver todo, y todo está ubicado dentro de mi costumbre. Se puede ver web h5, que es el tamaño, iOS, android y personalizado. Y lo puedo hacer en pixeles. Puedo hacer unidades personalizadas aquí mismo, así puedo elegir entre píxeles, puntos, DP y así sucesivamente y así sucesivamente. Y personalizar el ancho, puedo confirmar y va a aplicar ese cambio en particular. Entonces así de súper simple es esto compartir dentro de una Nube más cercana, puedes entrar en modo presentación si quieres presentar este diseño a tus clientes, por ejemplo , a los stakeholders o propietarios del proyecto o quien sea. Y luego puedes elegir entre estos dos proyectos. Para que puedas pasar de la página principal a los detalles del producto y básicamente trabajar con ellos en tiempo real. Y van a poder entender lo que hiciste. Y aquí puedes ver áreas seleccionadas y resaltadas cuando realmente pueden hacer clic. puede ver que cambia en tiempo real. Entonces todo funciona como debería. Y puedes ver estas áreas aquí mismo, aquí mismo. Entonces todo funciona como debería. Y esa es la publicación de los proyectos en mock plus r p. en el siguiente video, te voy a contar sobre la descarga de tus prototipos. ¿Por qué es útil y cómo hacerlo, y cómo se ve todo? Entonces te veré ahí. 23. Descarga de prototipos: A veces quieres descargar tus prototipos de Mach más rP, compartirlos con compañeros de equipo, con clientes, y no quieres subirlos y publicarlos todavía. A lo mejor estás bajo NDA. A lo mejor no tienes acceso a internet. A lo mejor estás viajando a algún lado y quieres tener solo esos prototipos. Piénsalos para revisar algunas notas que tienes. Todo tipo de estos diferentes escenarios y muertes fueron opción de descarga viene a la mano. Déjame mostrarte. Entonces aquí está, justo aquí en la parte superior, tienes esta opción de descarga. Para que puedas descargar paquete de presentación de prototipo fuera de línea. Y estas son las frases clave aquí mismo, paquete de presentación, esto se utiliza para presentaciones. Entonces, cuando quieras presentar esto offline, cuando estás de viaje, quizás estés en tu laptop, tal vez estés viajando, tal vez vayas al lugar de negocios o para tus clientes. Existen diversas opciones y escenarios diferentes donde puedes usar algo como esto. Es súper importante hacer esto porque siempre quieres tener una copia de seguridad. Es genial tenerlo en la Nube, pero a veces la gente puede no tener acceso a Internet. A lo mejor solo estás ahí. Entonces, ¿por qué los llevarías a la Nube cuando tienes la opción disponible en tu ubicación, por ejemplo, tal vez quieras compartirla internamente por los NDA, como dije? Así que hay muy pocos escenarios en los que puedas usar algo como esto y es realmente útil. Entonces todo lo que necesitas hacer es hacer clic aquí mismo. Te va a mostrar un rango de páginas. Voy a seleccionar el Paint rage y voy a seleccionar mi tienda deseo para que puedas desmarcar qué, comprobar lo que quieres hacer. Quiero explorar y explotar ambos para que simplemente podamos seleccionar todos. Se puede ver que dos de ellos son seleccionados. Y puedes ver rango de páginas todo porque tengo dos páginas dentro de mi carpeta. Puede mostrar panel de página, puede mostrar hacia el norte, mostrar barra de herramientas. Puedes mostrar enlaces a todos estos ajustes de los que hablamos y acertar. Bien, una vez que estés listo para descargar, va a tomar un poco de tiempo descargarla. Y dependiendo de su máquina, dependiendo de su proyecto. Entonces, por ejemplo, si hiciste una optimización de tus imágenes, va a tomar un poco más de tiempo. Si usaste varias páginas diferentes, va a llevar un poco más de tiempo. Pero en este caso, como se puede ver, se exportó realmente con bastante rapidez. Así que déjame dejarlo caer en una carpeta. Ahora déjenme mostrarle esa carpeta, cómo se ve. Entonces ahí vamos. Tenemos esta opción para un archivo zip, haga clic con el botón derecho. Y voy a extraer dos aquí y esconder esto solo para que lo veas un poco mejor. Ahí vamos. Y extrajo estos activos sólidos y se deshizo de este archivo zip. En realidad. Deshazte de él golpeando eliminar. Ahí vamos. Y aquí tenemos todos estos activos los cuales están incluidos por defecto para múltiples SRP. Luego tenemos las opciones de datos, que son todas las imágenes que se incluyen en su interior. Y obviamente es muy importante que pongas nombre a tus capas. De lo contrario vas a terminar con un resultado como este. Pero básicamente solo los exporta como archivos marcadores de posición cuando realmente compartes esto con tus desarrolladores, va a mantener esos nombres de capa que publicaste. Por último, tenemos la página de índice, haz doble clic en ella y se va a abrir como una nueva página y podrás ver lo que van a ver tus usuarios dentro de, digamos, paquete de presentación que quieres mostrarles. Entonces tienen todas estas opciones de las que hablamos anteriormente. Si quieres, puedes incluir algunos nodos aquí mismo. Se pueden ocultar estos paneles. Se pueden mostrar estos paneles. Puedes hacer lo que quieras y vamos a explorarlos por última vez. Ahí vas. Nos llevó a esta página. Los efectos de desplazamiento siguen funcionando. Esto sigue funcionando. Entonces todo es como si estuviera aquí mismo, pero es solo una versión portátil y más, digamos que la puedes llevar donde quieras porque tienes almacenada en tu máquina. Y es por eso que descargar prototipos es una opción tan genial. Me va a gustar y les recomiendo que lo usen todo el tiempo. Parece que yo también lo estoy haciendo. 24. Desglose de proyectos: En este video, vamos a hacer un desglose rápido del proyecto del curso. Y hago esto por cada uno de mis proyectos. Simplemente no vamos a incluir algunos detalles más profundos como, por ejemplo resumen de diseño o una propuesta de proyecto. Voy a asumir que estos ya se han creado porque este es el proyecto que realmente no existe. Pero aún quiero llevarte al proceso de diseño completo, que me gusta usar cuando estoy diseñando mis proyectos, tanto sitios web como aplicaciones móviles. Primero, vamos a comenzar con algunos flujos de tareas o con algunos diagramas de flujo, quiera llamarlos y estructurarlos. Sólo voy a mostrarte cómo se van a estructurar las cosas en la propia página. Después con alguna información básica, vamos a pasar a los wireframes. Simplemente vamos a poner algunos elementos en la página y simplemente crear una estructura de elementos básicos en nuestros diseños. Entonces después de eso, vamos a pasar a los diseños. Vamos a tomar esos wireframes, convertirlos en diseños agregando color, agregando diferentes imágenes, agregando estructura, agregando copia real a la misma. Y luego finalmente, vamos a agregar algunas interacciones y animaciones a nuestro diseño para darle vida y para que destaque un poco más que al final, te voy a mostrar cómo compartir ese diseño con tus compañeros de equipo, con tus clientes y con los desarrolladores. Y por último, cómo exportarlo como un prototipo, que luego puedes llevar contigo donde sea que estés sin internet y podrás abrirlo en cualquier dispositivo. Así que comencemos. En el siguiente video, vamos a crear algunos flujos de tareas rápidos para describir de qué se trata nuestra página. Entonces te veré ahí. 25. Flowcharts: En este video, vamos a crear algunos diagramas de flujo rápidos para nuestros proyectos. Entonces comencemos. Entonces aquí estamos en simulacro más rP, y voy a crear enseguida un nuevo proyecto. Y voy a usar 1920 1080. Esto está bien porque esto va a estar arriba del sitio web de VR. Así es como voy a nombrarlo. Pulsa OK y va a abrir una nueva pestaña. No voy a usar ninguna de las plantillas porque quiero empezar a crearla desde cero. Y lo primero es lo primero antes de seguir adelante, sigamos adelante y fijemos algunas preferencias muy rápido. Así que vamos con la configuración de diseño. Voy a usar 12 columnas. Para el ancho de columna. Lo que puedo hacer es usar algo así como el 82. ancho del canalón puede ser tal vez algo un poco más pequeño, como 60 o algo así. Ahí vamos, pero vamos a tratar de encontrarnos en el medio. Entonces 8,080.80, creo que eso va a funcionar bien. Y estas filas van a estar bien. Colores. A lo mejor podemos ir con algo como 40, algo así. Eso es bueno. Y no necesitamos ninguna fila por ahora. Sólo voy a usar esto. Así que vamos a ver, desplazamiento tal vez 20 píxeles, pero no desde el centro. Canalón en el exterior. Algo así como deuda. A ver, un veinte tal vez. Ahí vas. Pero realmente no me gusta. Así que vamos con una t una vez más. Así que las vistas, mostramos el diseño. Ahí vamos. Entonces este es nuestro diseño. Esto va a ser auto-layout para esta página. Entonces lo primero es lo primero, vamos a esconderlo rápidamente. Entonces vistas, porque no quiero verlo muy rápido. Así que alt más l es como lo vamos a esconder. Haga clic en Alt más l para ocultarlo rápidamente. Y voy a ir a la página, y esta página, en realidad voy a renombrar. ver, cuando crea una nueva página me va a derribar. Ahí vamos. Entonces esta primera página, voy a renombrar como diagrama de flujo así. Después la segunda página, voy a renombrar a wireframe. Tercera página va a ser nuestro diseño. Ahí vamos. Entonces todos ellos son 1920 por 1080 porque así es como los configuramos. Y puedes ver que está justo aquí. Y volvamos a nuestro diagrama de flujo porque comencemos a poner algunos elementos. Entonces, por los componentes, todo lo que necesito hacer aquí es usar una de estas formas. Entonces tal vez este de aquí dentro de esta forma. Vamos a estirarlo un poco. Voy a hacer doble clic adentro y escribir algo así como imagen de héroe. Ahí vamos. Y voy a agrandar este texto para que tenga tal vez 30 o algo así. Ahí vamos. Solo para que tengamos un poco más de espacio mientras estamos trabajando aquí mismo. A lo mejor algo un poco más pequeño, como 20, solo para que podamos ver con qué estamos trabajando. Ahora cambiemos esto a Roboto, creo, y que sea audaz, así como así. Entonces dentro de aquí tal vez podamos cambiar esto y usar algún color diferente. Entonces tengo un color ya preparado en mi escritorio, que es un bonito color azul. Y el texto en este caso va a ser de color blanco puro. Y vamos a deshacernos de este atrevido. No lo necesitamos. Por último, me voy a deshacer de la frontera. Y en este caso estamos listos para irnos. Entonces lo que tengo que hacer aquí mismo es que tengo que ir al marcado, arrastrar algunas flechas dentro de aquí, y colocarlo, digamos aproximadamente 20 de aquí. Entonces de aquí en adelante, lo que voy a hacer es aumentar el ancho a cinco. Quizá no tan grande. A lo mejor tres, quizá dos. En realidad. Ahí vamos. Así que solo lo extendió un poco solo para que podamos verlo un poco mejor. Lo que voy a hacer es duplicar esto, posicionarlo aquí. Después de la imagen de héroe vamos a ir a la sección Explorar. Y dentro de esa sección de exploración, solo vamos a dar alguna información sobre lo que puedes explorar usando esta realidad virtual. Ahora para esta primera forma, en realidad voy a cambiarla. Entonces cambiémoslo para que sean los puntos de entrada, algo así, creo que funciona. Bueno. Vamos a estrechar un poco desde este lado. Seleccionemos todas ellas, moverlas algo así. Después de la sección explorar, vamos a pasar a la siguiente sección, que va a ser posibilidades. Porque queremos mostrarle a la gente lo que es posible cuando compraron estos auriculares de realidad virtual, por ejemplo luego en la siguiente sección, vamos a pasar a los juegos y los juegos. Y quiero destacar esta sección, así que voy a usar algún otro color. Ya tengo este color preparado así porque quiero que los juegos sean característica destacada de este sitio web, algo así. Porque el juego es realmente beneficioso en el mundo de que actualmente estamos en este momento. Aquí es donde la mayor parte del dinero está realmente en estas cosas de juego. Entonces vamos a posicionarlo 20. Ahí vamos. Y voy a pasar a algunas otras secciones. Ahora bien, esta sección puede ser por ejemplo sección de video. Y dentro de esa sección de videos, tal vez podamos explicar para qué es mejor la realidad virtual, cómo se usa o algo así. Entonces déjame duplicar esto. Posicionamiento aquí. Duplicar esto debajo de la sección de video. Tal vez podamos explorar algunas características o algunos elementos. Así auriculares VR. Entonces tal vez la gente pueda comprarlos o algo así. Y finalmente, vamos a lidiar con esto. Dale la vuelta alrededor de alguna delicia. Esa posición aquí hasta 20. Ahí vamos. Control D en este, colóquelo aquí mismo. Y tal vez podamos escribir algunos testimonios. Ahí vamos. Y vamos a duplicar esta flecha una vez más. Así que solo quiero crear algún tipo de bucle cerrado. Así que quiero mostrarles a mis clientes, por ejemplo , cómo va a funcionar esto. Entonces veamos la sección Promo, algo así. Ahí vamos. Lo que podemos hacer es quizás duplicar esta flecha y tal vez jugar un poco con esta forma. Entonces al final, vamos a ver aquí mismo, voy a usar este Control D para duplicarlo, luego posicionar esto para que quede más o menos por aquí. Inicio va a ser ninguno grupos. A lo mejor debería rotar hacia el lado diferente así. Entonces el inicio debería ser ninguno. Ahí vamos. Y quiero posicionar esto un poco abajo. Entonces el final va a ir así. Ahí vamos. Y voy a duplicar éste. Asegúrate de que esté aproximadamente en el centro y asegúrate de que sean 20, así como así. Entonces por debajo de eso vamos a decir algo así como accesorios afilados. Porque hay muchos de esos. Y permítanme duplicar uno de estos, quizá éste. Y posicionarlo justo aquí, donde dice 20. Ahí vamos. Y duplique esta una vez más, así. Y voy a decir algo así como sección prompt final o mundo de VR. Porque va a describir lo que realmente es el mundo de nosotros. Y finalmente llegamos al final de la página. Así puedo duplicar esto una vez más Control. ¡Vaya! Eso no. Posicionarlo aquí para ser 20. Esto a B2C también. Y este va a ser nuestro pie de página. Ahí vamos. Quizás pueda llamarlo y darle algunas variaciones diferentes. Entonces este primero puede ser algo así como, no sé, este color. Este último puede ser de este color. O mejor aún, tal vez podamos usar algo un poco diferente. Entonces para esta primera, lo que voy a hacer es usar algún color más oscuro como este. Por lo que nuestros puntos de entrada y salida pueden ser estos colores oscuros. Y para todos estos otros colores, podemos usar estos tonos azules y tonos azules y cosas así. A lo mejor podamos mover esto un poco hacia abajo y simplemente extender esta flecha para que sea algo así. Entonces este es solo mi enfoque y cómo me gusta crear diagramas de flujo. Se puede hacer así sucesivamente. Cualquier tipo de técnicas diferentes son formas que eliges. Y también hay una característica más que es increíble en lugar de mock plus rP llamada modo Connect, que te va a ayudar a crear estos diagramas de flujo aún más rápido. Entonces déjame mostrarte cómo funciona. En primer lugar, no voy a eliminar esto porque como dije, este es solo mi enfoque. Voy a duplicar este tablero de arte usando Control o Comando D. Y luego me voy a deshacer de esta flecha y esta flecha y esta flecha, por ejemplo y simplemente continuar con la eliminación de estas flechas. Y luego voy a seleccionar estos para sacarlos del camino y seleccionar éste también, solo para darme un poco más de espacio. Así mismo como lo hicimos aquí mismo. Digamos que esta es nuestra imagen de héroe terminó. Partimos de aquí. Entonces para ingresar al modo de conexión, simplemente haz clic aquí mismo o usa Alt C, da clic ahí. Y entonces puedes simplemente arrastrar desde una de las esquinas, por ejemplo esta, y soltarla. Entonces te va a dar la opción de crear cualquier tipo de estas formas que quieras, por ejemplo usemos esta. Déjame acercarme un poco. Y a partir de aquí, voy a hacer doble clic y escribir esto porque esto funciona nuestro siguiente paso. Así que imaginemos que no lo creamos para nada. Así Explora la sección. Ahí vamos y hacemos clic en algún lugar afuera. Ahora para dar click en éste, Veamos, 28793. Voy a dar click en éste. Entonces 28793, algo así. Ahí vamos. Y cuando la mueves hacia arriba, puedes ver que la flecha se genera dinámicamente, lo cual es increíble. Y solo te va a dar eso un poco más de precisión con tus diseños y con tus selecciones. Entonces déjame seguir adelante y copiar este color. Déjame aplicarlo al relleno aquí mismo. Déjame seleccionar el color del texto del texto debe ser blanco y vamos con Roboto. Vamos con 20. Entonces, para imitar estas secciones abajo de la línea. Entonces, lo que puedes hacer a continuación es simplemente seleccionar este, presionar Control D para duplicarlo. Posicionado en el solver afuera haga clic y simplemente haga clic y conecte estos dos puntos. Ahora en esta siguiente, se puede decir algo así como posibilidades. Y luego puedes hacer clic y luego arrastrar esto para reducir su tamaño, por ejemplo, entonces el juego fue el siguiente. Entonces lo que podemos hacer en este caso es si selecciono estos dos y los muevo, se puede ver cómo se mueven dinámicamente las flechas. Entonces tal vez podamos dar un poco de giro aquí y luego golpear el control D una vez más y escribir aquí los juegos. Ahí vamos. Pero sólo voy a usar este color dorado así, y luego pegarlo aquí mismo. Ahora desde gaming, lo que puedo hacer es quizás pueda conectar estos dos aquí mismo, o puedo conectarlo aquí mismo, y luego simplemente colocarlo aquí para que veas lo dinámico es y puedas moverlo y organizarlo de la manera que quieras. Y estas flechas van a dar seguimiento. Si no estoy satisfecho, siempre puedo ir y deshacer algunas veces y luego volver a aquí. Y luego si queremos conectarnos a la siguiente sección donde puedo hacer es darle a Control D por ejemplo aquí. Entonces debería decir la sección de Video, así. Y luego simplemente conecta éste y éste. Entonces a partir de esto puedes ir hasta aquí, por ejemplo este puedes bajar a aquí, digamos de aquí puedes ir hasta aquí y puedes ver qué tan rápido esto se puede ramificar y ajustar varias formas y formas y tamaños diferentes. Así que puedes ir y crear todo tipo de diferentes diseños complicados usando este increíble modo de conexión para salir de él, simplemente haz clic aquí. Y entonces te va a dejar con todas estas flechas y cómo las posicionas. Y se puede ver que sigue siendo dinámico a pesar de que salimos del modo Connect y lo que sea que intentara ajustar y cambiar, las flechas van a dar seguimiento. Solo una nota rápida una vez más, este es un enfoque mucho mejor que mi enfoque, pero todavía me gusta usar mi enfoque porque lo llevo años usando y solo estoy acostumbrado, pero asegúrate de usar el modo Kinect. Es una forma mucho más rápida de crear estos diagramas de flujo, especialmente si tienes varias páginas diferentes y trabajas en un proyecto enorme. Y necesita conectar estas páginas cruzadas y diseños de soporte multiplataforma, pantallas y diferentes tamaños para sus tableros de arte. Entonces esta es una forma mucho mejor de hacerlo usando el modo connect. Pero como dije, voy a presionar Delete aquí mismo. Vamos a utilizar este enfoque en este método, que ya les mostré. Porque como dije, solo estoy acostumbrada. Obviamente estos diagramas de flujo se usan mejor cuando tienes varias páginas y cuando te mueves entre páginas cuando tienes varias pantallas. Pero, por supuesto, puedes ver lo súper simples que son de configurar aquí mismo para que puedas planificar el contenido de tu página adelantado antes de que realmente pasemos a wireframes y diseños. Y no pierdas el tiempo una vez que realmente llegues a la parte de creación de tu diseño. Hablando de la parte de creación en el siguiente video, vamos a abordar algunos wireframes, y voy a mostrarles cómo configurar estos wireframes y cómo prepararse para ese diseño, qué incluir, qué no incluir. Entonces te veré ahí. 26. Contorno reticular de sitio web: wireframes son parte realmente importante de cada proceso de diseño porque en él realmente puedes experimentar con el layout, ver dónde puede estar el posicionamiento de diferentes elementos, cómo puedes ajustarlo, cómo puedes posicionarlo y hacer con él lo que quieras en esas primeras etapas del proyecto. Antes de pasar realmente a la etapa de diseño, el objetivo del wireframing es hacer las cosas rápidamente y pasar de las cosas. Y si algo se rompe, solo déjalo y solo continúa a la siguiente idea porque esto es todo lo que es. Proceso de generación de ideas de wireframing antes de pasar al diseño final. Así que volvamos a saltar a ma más rpm. Déjame mostrarte cómo crear algunos wireframes. Entonces aquí estamos en modo más r p. y voy a seleccionar mi página wireframe. Recuerden que tenemos ese 1920 por 1080 ya configurado. Y voy a extenderlo bastante porque vamos a añadir bastante contenido por dentro. Entonces, lo primero que quiero hacer es presionar Control L. Bien, entonces el problema aquí fue que no establecí los valores originales en la primera página antes crear estas otras páginas, por ejemplo, wireframe y diseño. Entonces lo que tienes que hacer aquí es cuando tengas tu primera página, asegúrate de establecer los valores que quieras y luego guardarlos como predeterminados y luego crear otras páginas. Luego se traducirá a todas esas otras imágenes que creaste. Pero hay que hacerlo en la primera página que cree y luego guardar esos valores por defecto. Entonces tenemos 80, 80, 87. Entonces, ajustemos eso rápidamente. Entonces tenemos 8,080.87, 80, 80, 80. Vamos a probarlo y cuneta por fuera. 80, 80, 87. Pero antes de ir más preferencias, quiero cambiarlo solo un toque. Entonces tal vez quiero reducir esto a tal vez 20, o tal vez incluso algo más bajo, como diez. Ahí vamos. ¿Bien? Así que no choca demasiado con nuestro diseño, que no es lo que realmente queremos hacer. Así que lo primero es lo primero podemos crear algún tipo de sección de héroes. Para hacer eso. Puedes usar rectángulos, puedes usar imágenes, puedes usar lo que quieras. Voy a usar imagen en este caso. Entonces voy a arrastrar una imagen a esto y voy a establecer algunos valores. Entonces 1920 por mil. Ahí vamos. Voy a romperlo a la cima así. Y encima, voy a agregar nuestro rectángulo. Entonces la década de 1920 por mil. Así mismas dimensiones. Y voy a simplemente romperlo hasta arriba, deshacerme de la frontera. Entra aquí mismo. Imagen. Y voy a llamarlo e.g . Imagen de héroe. Ahí vamos. Y esto puede ser Hero Color Overlay. Ahí vamos. Ahora voy a agregar otra imagen para aquí. Y voy a ponerle nombre a esta imagen logo. Ahí vamos. Y para el logotipo en sí, lo que puedo hacer es darle algunas dimensiones de 106, ancho 56, por ejemplo, encajarlo a la parte superior. Médico, por ejemplo tal vez 50 píxeles hacia abajo, algo así, y colóquelo aproximadamente por aquí. Ahí vamos. Pulsa T en mi teclado y voy a escribir algo así como productos. Ahí vamos. Y voy a posicionarlo para que sea más o menos por aquí. Ahora para esto, lo que quiero hacer es usar Roboto en este caso. Y voy a ir con 18. Ahí vamos. Voy a hacer algunos duplicados. Entonces, antes que nada, control y D. Ahora bien este va a decir por ejemplo socios. Este siguiente va a decir apoyo. Ahí vamos. Y una última. Y va a decir algo así como sobre, ahí vamos. Y ahora por fin, todo lo que necesito hacer es simplemente un espacio que salgan de manera uniforme. Así que tal vez voy a posicionar esto aquí mismo hasta el final, posicionar esto aquí mismo. Entonces es justo alrededor de los 60. Ahí vamos. Ojalá esto siga. Se. Hace. Esto también seguirá. Lo hace. Entonces lo que puedo hacer es seleccionarlos todos, presionar Control G para ponerlos en un grupo llamado elementos de navegación. Póngalos debajo de mi logo y asegúrate de que estos estén centrados como Así que dale Control G y voy a llamarlo Top Nav tal vez. Y con eso, nuestra sección de héroes está casi lista. Pero necesitamos algún tipo de superposición de color aquí mismo. Entonces lo que voy a hacer es usar el color y lo voy a colocar aquí mismo. Ahí vamos. Y voy a ir enseguida a mis activos y seleccionar ese color sin este color de fondo porque no necesito ese. Sólo necesito este. Y voy a llamarlo e.g Algo así como gris oscuro o oscuro principal. Oscuro, algo así. Ahí vamos. Y en este caso, quiero asegurarme de que mi texto sea completamente blanco. Así que me voy a ir hasta aquí. Completamente blanco. Pero vamos a seleccionar los elementos de texto algo así como Burdeos, completamente blancos. Sí. Bien. Voy a dirigirme al color, seleccionar uno de ellos, no importa. Blanco. Ahí vamos y seleccionamos uno de ellos. Y los voy a agregar a mis textos porque eso es lo que voy a usar a lo largo de mi diseño. Vayamos a composta y agreguemos texto a su texto básico. Y voy a ponerlo más o menos por aquí. Entonces voy a sacarlo o Control X para cortarlo afuera y luego pegarlo justo por aquí. Entonces puedo colocarlo en la parte superior. Y una vez que saltó a la cima, lo que puedo hacer es crear algunos textos más grandes en este caso. Entonces voy a usar Roboto una vez más, pero ve con algo así como 70. Ahí vamos. Asegúrate de que esté centrado, alinea, asegúrate de que sea algo grande. Y voy a decir algo así como el título va aquí. Ahí vamos. Y voy a, como dije, asegurarme de que su centro esté alineado, asegurarme de que esté centrado. Ahí vamos. Y puedo posicionarlo justo abajo aquí. Y luego voy a negrita. Ahí vamos. Volver a mis activos y agregarlo como mi texto. Entonces voy a duplicarlo, colocarlo aquí mismo y voy a algo como personalizar el tuyo. Ahí vamos. Pero en vez de esto, voy a ir con 18. 18 va a funcionar bien para este caso en particular porque necesito crear un botón poder usar el componente de botón y en realidad voy a colocarlo aquí mismo. Entonces mi botón va a ser algo así como 366 ancho 60, su ego. Y el texto en su interior, como decíamos, va a ser 18. Para que puedas seleccionarlo. Ir con 18, ir con Roboto, ir con blanco. Entonces voy a ir con blanco. Y para el color de mi botón, lo que voy a hacer es usar el color que ya usé. Así que aquí mismo, allá vamos. Y vamos a agregar este color y deshacernos de esto porque no lo necesitamos. Voy a usar esto y esto va a llamarse nuestro azul principal. Ahí vamos. Y aquí sólo voy a usar este texto. Haz doble clic, personaliza el tuyo. Ahí vamos. Deshazte de éste. Y para el radio de la esquina, vamos a deshacernos de la frontera. Para el radio de la esquina, vamos con algo grande como Swanee. Mira cómo se ve eso. Se ve bien. Asegúrate de que esté en el centro, así asegura que se ubique y justo o aproximadamente por aquí. Lo siento, ahí vamos. Entonces este va a ser nuestro btn principal. Y de inmediato, lo que voy a hacer tal vez sea crear un componente para ello. Entonces en mouse hover, pero lo voy a hacer es cambiar su color. Entonces tal vez podamos ir con en realidad vamos a cambiar ese azul medio, azul principal. Veamos qué podemos hacer. Entra aquí mismo, cámbialo por aquí, ahí vamos. Entonces este va a ser nuestro azul principal. Y este va a ser nuestro azul oscuro. Ahí vas. Entonces para el azul principal, va a estar dentro de lo normal. Ahí vamos. Y para que el ratón se mueva, va a ser azul oscuro. Entonces así de simple. Volvamos a la normalidad. Vamos a previsualizar rápidamente solo para ver si aplicamos ese cambio. Y ya van a ver, ahí vamos. Entonces ya está ahí. Encantadora. Entonces, si volvemos a ello, y empecemos a diseñar algunos de estos otros elementos. Antes de seguir adelante, quiero asegurarme de poner el botón aquí. Ahí vamos. Y voy a llamar a esta sección de héroes. Ahora, la siguiente sección debajo de mi sección de héroe va a contener mi imagen y algún texto. Entonces básicamente lo que voy a hacer en este punto es usar algún texto. Ahí vamos. Y voy a decir algo así como título de sección. Ahí vamos. Y voy a asegurarme de que quede alineado. Y esta vez voy a ir con algo más bajo, como 60. Y voy a ir con ese color oscuro principal, asegurarme de que quede alineado. Una vez más. Colóquelo hasta que quede líneas ahí mismo, Control D para duplicar esto. Y ahora vamos a ir con algo diferente una vez más. Entonces, antes que nada, agreguemos esto como nuestro texto. Este va a ser algo diferente, como 24 por ejemplo y el color va a ser un poco diferente. Entonces voy a convertir este color en aquí, luego seleccionar el color en aquí. Llámenlo el párrafo. Ahí vamos. Y este párrafo en realidad se va a estirar hasta, digamos uno a uno. Algo así. Eso es este 792. Ahí vamos. Y la altura va a ser 121. Ahora aquí estoy usando mis propios textos, pero si quieres usar un marcador de posición textos, todo lo que tenemos que hacer es hacer clic derecho en este componente de texto y clic en autocompletar para llenarlo rápidamente con texto de marcador de posición automático. Y esto va a ser el texto del párrafo de sección va a ir justo aquí. Entonces ahí vamos. Ahora, por fin, lo que necesito es incluir alguna imagen. Entonces voy a ir directo a los componentes, ir a Imagen, estirarlo muy bien, colocarlo aproximadamente por aquí. Realmente no importa por ahora. Y entonces lo que necesitamos es que hagamos girar ese botón que tenemos. Entonces abre esto. Grupo predeterminado, pero no lo creamos como componente, así que vamos a agregarlo ahí mismo. Pulsa el botón principal, Bien, y abre este grupo predeterminado. Aquí tenemos el botón principal, solo arrástralo y colóquelo aquí mismo. Por alguna razón, simplemente sigue apareciendo en la sección principal de héroes. Entonces salgamos de eso y solo golpeemos Control X cerrar todo esto. Ahí vamos. Entonces lo posiciona justo por aquí. Párrafo de sección, imagen, título de sección. Ahí vamos. Y simplemente voy a agrupar estos. Pero antes que lo haga, tal vez quiera tener algún espaciamiento entre ellos. Entonces tal vez 48 es un buen número. Entonces veamos, 58, 48, ahí vamos. Y esto también puede ser 48. Entonces lo que puedo hacer es seleccionar esta sección de calidad, contenidos así. Y puedo llamar a esta sección entera una sección. Colóquelo debajo de mi sección de héroe. Y veamos por el distanciamiento, lo que podemos hacer es tal vez solo quedármela. Mantengámoslo a los 100. Creo que eso va a funcionar bien por ahora. Y dentro de ella, lo que podemos hacer es seleccionar estos dos elementos y solo asegurarnos de que estén centrados. Y ahí vamos. Ahora por debajo de eso podemos tener alguna sección diferente. Y en realidad voy a reutilizar algunos de estos elementos. Pero antes de hacerlo, permítame seleccionar éste y agregarlo como mi texto. Ahí vamos, y vamos afuera. Y lo que podemos hacer es crear algunas secciones diferentes. Así que vamos a crear uno nuevo de cualquier manera. Entonces esto va a decir posibilidades ilimitadas. Posibilidades, asegúrate de que esté centrado y asegúrate de que sea esta en el centro. Asegúrate de que somos 100 Control D. Ahora, usa este. De hecho voy a ir un poco más rápido. Así que en realidad voy a pegar en ese contenido, el contenido original. Y veamos, el distanciamiento puede ser algo así como 40. Creo que es bastante bueno. Ahí vamos. Entonces aquí tenemos 100. Ahora por debajo de eso, lo que realmente vamos a crear son algún tipo de tarjetas. Entonces esta tarjeta puede estar dentro de un contenedor. Entonces, para crear el contenedor, puedes crear con nuestro rectángulo. Y puede ser porque va a ser, digamos cuatro de ellos. Puede ser algo así como tres columnas de ancho. A ver, tal vez podamos darle algo así como 40, 87 por la altura o algo así. Veamos la distancia entre ésta y las capas en la parte superior puede ser algo así como 100. Entonces si seleccioné 100, ahí vamos. Y podemos agregar el radio de esquina. Entonces sin ningún radio de esquina fronteriza puede ser diez. Ahí vamos. Y una cosa que olvidé mencionar es que podemos poner el color de nuestro tablero de arte a algún color diferente porque por el momento en realidad no se destaca demasiado. Entonces voy a usar este color sumado así. Y voy a agregarlo también a mis colores aquí mismo. Pero sólo voy a aplicarlo rápidamente hasta aquí. Ahí vamos. Entonces llene, se puede ver f b, f b, f b. y voy a agregarlo a mis colores, llamarlo arte tablero color. Ahí vamos, y simplemente deshacernos de este color. Ahora, en vez de color mesa de trabajo, voy a ir con blanco ahora para continuar con lo que hacíamos anteriormente. No necesito que esto sea audaz, creo. Entonces tal vez pueda configurarlo así. Ahí vamos. Y lo que puedo hacer en realidad es usar este texto. Entonces Control D, colóquelo aproximadamente por aquí. Y le puedo agregar algo de contenido. Ahí vamos. Y tal vez pueda establecer el ancho en, digamos tres a tres, algo así. Puedo ajustarla al centro de mi tarjeta aproximadamente por aquí. Y puedo volver a los componentes y agregar una nueva imagen. Esta vez podemos ir con algo así como un veinte ancho 108, tal vez, algo así. Colóquelo al control central D en éste. Y aquí lo que podemos hacer es configurar un nuevo estilo de texto de 32. Y le puedo dar un nombre de educación tal vez. Y esta vez puede ser Bolt. Ahí vamos. Quiero darle ese color oscuro principal para diferenciarlo. Sólo un toque. Y veamos, podemos ir 40 de cada lado. Digamos, creo que eso es bueno. Entonces vamos a ver. En primer lugar, vamos 58 de este borde superior. Entonces 58 y esto puede ser 40 abajo. Así. Esto también puede ser 40 abajo. Ahí vamos. Y luego podemos extender la tarjeta quizás un poco, solo un poco hacia abajo. Ahí vamos. Entonces ahora que tenemos nuestra tarjeta, lo que podemos hacer es llamar a este BG actual. Ahí vamos. Y puedo agrupar estos elementos. Entonces esto puede ser icono, aprender nuevas habilidades, educación, icono. Ahí vamos. Entonces este va a ser nuestro carrito. Y vamos a poner nuestras tarjetas. A ver, aquí mismo. Entonces esto va a estar ahí mismo. Ahí vamos. Esta es la cuadrícula 100. Y ahora todo lo que necesito hacer es simplemente duplicar esta tarjeta, colocarla aquí. Colóquelo aquí, y luego finalmente colóquelo aproximadamente por aquí. Ahora veamos, 369. Nos falta una columna aquí por alguna razón. 23 456-789-1011, 12 columnas. Así que volvamos a nuestras preferencias. Ajustes de diseño. Se pueden ver 12 columnas, pero este desplazamiento es desde el centro. Entonces tal vez podamos ponerla en algo más bajo. Saber, Vayamos cuneta afuera AT o 40. Vamos con cero. Ahí vas. Sólo para que podamos tener algún forro de nuestro contenido en este caso. Y no quiero perder demasiado tiempo porque al final del día, esto realmente no importa cuando se trata desarrollo porque los desarrolladores lo van a crear de cualquier manera. O lo creas así o lo van a editar más tarde cuando hayan terminado con él. Entonces lo primero es lo primero, creo que esto está bien. A lo mejor esto se puede mover ligeramente. A lo mejor esto se puede mover un poco para escuchar que todo lo demás funciona bien. Cuando lo último que quería añadir y tocar es estas cartas pueden ser un poco más estrechas, algo así. Y así. Ahí vamos. Entonces así. Y finalmente controlar D, duplicarlo. La posición está justo aquí. Ahí vamos, y esa es nuestra tarjeta. Entonces básicamente, lo que voy a hacer en esta etapa es seleccionar este control G, llamarlo posibilidades, y básicamente organizarlo justo debajo de esta sección. El siguiente Control D en esta sección, organízalo por debajo de las posibilidades, sostén mi Shift y flecha inferior para que pueda moverlos un poco por el lugar. Y básicamente lo que quiero hacer con esta sección es simplemente reemplazar la posición de estos elementos. Entonces esta imagen va a ir justo aquí. Este texto va a dar vueltas más o menos, digamos aquí creo que vamos a esbozar eso más adelante y verlo después. Este solo va a ser nuestro juego. Ahí vamos. Debajo de gaming, lo que necesitaremos es ese video. Así que sólo voy a crear una imagen rápida. Así que vuelve a aquí, arrastra y suelta la imagen. Ahora, esta imagen va a ser algo así como 16, 44, ancho 863. Ahí vamos. Asegúrate de que esté en el centro. Y básicamente voy a crear un rectángulo que tenga exactamente las mismas dimensiones que esta imagen. 16, 44 con 863. Ahí vamos. ¿Esa era la imagen de aquí? Entonces esto va a ser Superposición de Color. Le vamos a aplicar el mismo color oscuro principal. Y voy a bajarlo a tal vez 60% o algo así no importa realmente. Entonces este va a ser nuestro video o video promocional. Ahí vas. Así. Y finalmente encima de ello, necesitamos algunos textos. Así que golpea T y escribe. Ver el mundo a través de nuevos ojos. Ahora bien, este texto va a tener este enorme estilo y va a estar ubicado en el centro de este elemento. Puedes seleccionar todos estos elementos, llamándolos promo, video, y empujarlos hasta el final. Ahora, ajusta esto para que sea 100 a partir de aquí, por ejemplo o obviamente puedes configurarlo para sea 150 tal vez y ajustar esto aún más. Voy a abordar eso un poco más tarde cuando en realidad tengamos todo nuestro contenido listo. Pero por ahora, solo estoy pensando en cortar este video porque realmente no tengo demasiado de los diferentes contenidos que quiero crear a continuación. A lo mejor pueda configurar esto, posiblemente. Y entonces tal vez pueda realmente duplicar toda esta sección. Colóquelo todo el camino hacia abajo hasta, digamos 150, muévelo todo el camino hacia abajo. Esto puede ser de vanguardia, algo así. Y luego voy a seguir adelante y deshacerme de esta tarjeta. Todos ellos así. Y dejarme en realidad copiar el texto dentro va a ser mucho más rápido que para mí escribir. Ahí vamos. Y en realidad voy a crear tres cartas diferentes aquí mismo. Entonces usemos r para rectángulo una vez más. Y vamos con algo como esto. 246 columnas Control D, posición uno aquí mismo. Y en realidad voy a acostarlos un poco. Veamos qué podemos hacer con este layout. Este primero puede ser algo así como 618 de altura o algo así, pero dejémoslo como es por ahora. Entonces aquí vamos a tener una imagen, así que voy a arrastrarla y soltarla dentro. Esa imagen va a ser algo así como 680 por 386. Ahí vamos. Tan bonito, agrandar. Encantadora. Y luego voy a seleccionar esta, arrastrar y soltar mi imagen dentro de aquí también. Esta imagen va a ser un poco más pequeña. Entonces 146 de ancho, de dos a tres, por ejemplo, algo así. Ahí vamos. Y entonces una imagen final va a cubrir los elementos de abajo. Así que vamos a arrastrar y soltar. Y básicamente voy a usar las mismas dimensiones. Entonces 880 por 3198080 por 319, ahí vamos. Y simplemente colóquelo ahí mismo. Obviamente voy a tener algún texto dentro de aquí, así que voy a llamarlo el Explorer para. Ese va a ser el nombre de nuestros auriculares. Y veamos por el tamaño. Sí. Creo que es bastante bueno. Así que asegúrate de que esté en el centro. Ahí vamos, posicionando su control D. Y voy a darle algunos colores diferentes. Entonces azul oscuro, por ejemplo o azul principal aquí. Y le voy a dar algunos textos como el tuyo personalizado, por ejemplo, tal vez queramos personalizarlo un poco. Entonces voy a golpear Control C, Control V. Para duplicar esto, voy a posicionarlo justo aquí. Asegúrate de que estén alineados al lado izquierdo así. Entonces voy a escribir por ejemplo controlador. Ahí vamos, pero olvidé hacerlo a la izquierda alineada para el texto. Esto se va a dejar la línea en lugar de clientes tuyos. A lo mejor puedas decir algo como explorar ahora. Y estos dos pueden ser enlaces. Ahora por fin, puedo duplicar esto una vez más, colocarlos en el centro aquí. En esta primera se pueden estar obteniendo ideas, y esta siguiente puede inspirarse. Ahí vamos y ajustamos el fondo de esta imagen. A ver, está en esta. Yo le puedo dar el color azul oscuro, por ejemplo esta imagen sólo va a quedarse aquí por ahora. Entonces básicamente aquí tenemos esto, estas secciones. Y obviamente solo voy a entrar y por ejemplo grupo, este grupo, este grupo y este, para que tengamos tres grupos diferentes. Esto va a ser ideas. Esto va a ser controlador. Y esto va a ser Explorer a esto, el auricular real. Entonces le voy a dar el nombre de tech. Ahí vamos, bajamos un poco esto y finalmente pasar a la siguiente sección, que va a ser testimonios, va a ser lo mismo que esta sección. Así que muévelo todo el camino hasta aquí. Ahí vamos. Y le voy a dar el nombre de testimonial. Ahí vamos. Vamos a ajustarlo un poco más tarde. Entonces tendremos esta misma sección más o menos posicionarla aquí. Y le voy a dar algún nombre diferente. Como todos en un solo teléfono. Vamos a tener algunas opciones aquí mismo. Ahí vamos. Y básicamente voy a deshacerme de esto y esto, deshacerme de esto también. Así que haz clic derecho en Desagrupar, y sólo voy a dejar la imagen dentro de aquí. Ahora esta imagen va a ser Explorer también, porque ese va a ser nuestro auricular del dispositivo. Entonces ese auricular del dispositivo puede ser algo así como 1190650. Ahí vamos. Asegúrate de que esté en el centro. Encantadora. Y finalmente, solo arrastra ese componente de botón principal que creamos anteriormente y posiciona es algo así como no sé. 80 tal vez, algo así. Ahí vamos. Solo asegúrate de que esté debajo de nuestra imagen. Ahora bien, esto puede ser auricular. Encantadora. Y luego finalmente, lo que tenemos en la parte inferior van a ser unas tres cartas. Y en realidad vamos a duplicar esta sección. A ver. Sí, en realidad incluso puedo duplicar esta sección porque solo va a decir algo como dar rienda suelta al mundo de que somos tecnología o algo así. Y permítanme extender esto un poco hacia abajo así. Entre esta y esta sección deberían haber otras secciones. Entonces pongámoslo aquí mismo. Dé rienda suelta. Ahí vamos. Y como dije, vamos a tener pie de página aquí mismo en la parte inferior. Entonces lo que podemos hacer en realidad es crear ese rectángulo. Usa nuestra posición aquí mismo. Y voy a usar este color oscuro principal. Y voy a llamarlo algo así como pie de página. Bg. Estas dimensiones van a ser 1920 por 740 y un viento para deshacerse del borde, chasquearlo al borde inferior, así. Cambiar a compost a mi imagen. Y veamos, 1920 por 740. Entonces 1920 por 740. Ahí vamos. Asegúrate de que esté aquí, luego está aquí, y asegúrate de enviarlo a la espalda. Así Ordenar Enviar al Atrás. Ahí vamos. Esto vamos a bajar a tal vez 50% solo para que podamos ver lo que se encuentra detrás. Y otra cosa que me gustaría hacer es simplemente crear este mismo logo. Entonces, golpeó Control C en este. Regresa a aquí donde estamos, pie de página sea G. Ahí vamos. Y básicamente voy a agrupar estos, llamarlo pie de página. Dentro del pie de página, voy a pegar en ese logo. Así que justo ubicado aquí, haga clic derecho en orden. No sé por qué no me va a mostrar esto, pero sí importa. Así que desagrupa Control G y llámela pie de página. Ahí vamos. Así que justo debajo de eso, vamos a incluir alguna copia más adelante de la línea para que pueda golpear T, por ejemplo y escribir algo por igual. Veamos los productos. Ahí vamos. Y para estos textos de productos, voy a usar uno de mis activos, que es este 100 veces o Control D. Y para este, voy a salvar a los socios Control D. Esto va a ser apoyo, grupos. Apoyo. Y finalmente, para este último sobre, ahí vamos. Entonces ahora que los tenemos todos, voy a seleccionar y simplemente separarlos un poco, colocarlos en el centro y después en la línea, voy a agregar algunos elementos detrás de escena. Pero básicamente cómo va a quedar eso es Control D, duplicarlo y luego agregar algo así como auriculares. Pero no quiero que se aburran mientras ven esto. En cambio, lo que vamos a hacer es crear otra sección aquí mismo. Entonces para hacerlo, lo que necesitamos es una sección y justo por encima de esta sección. Y esa sección va a ser algo así como, no sé, a lo mejor sí, a ver. A lo mejor podamos mover esto hacia arriba, sólo un toque así. Y por encima de esta sección tal vez podamos crear algo como accesorios afilados o algo así. Así que vamos con T escribiendo aquí mismo. Accesorios afilados. Ahí vamos. Ahora bien, esto puede ser, no sé, 32. Por qué no creamos esa cosa de 32. 24, ¿dónde está el 32? Entonces esto es 60. ¿Dónde estaba? ¿Fue, fue esto? No. Esto fue 32. Bien, así que creado aquí mismo. Ahí vamos. Y ahora voy a seleccionar la deuda, convertirla en 32 posición de meta láctea dejó alineada a aquí, Control G. Y voy a decir algo así como maletín de transporte. Maletín de transporte. Este siguiente puede ser cable extendido. Y este siguiente se puede ver todos los accesorios. Y tal vez pueda dividirlo en dos líneas o algo así. Ahí vamos. Debajo de esos. Voy a añadir algunas imágenes. Pero antes de eso, en realidad puedo crear algunos rectángulos para ponerlos en esos porque tenemos tres, Tal vez pueda dividirlos en cuatro grupos diferentes. Así que haga clic derecho y Ordene, Enviar al Atrás. Ahí vamos. Entonces esto va a estar justo aquí. En realidad déjame deshacerme de estos. Y permítanme crear uno en realidad. Y luego podemos duplicarlo como lo hicimos anteriormente. Entonces tal vez pueda posicionarlo 40 de cada borde. Así. Y entonces puedo duplicar esto y poner el precio aquí mismo. Y por el precio puedo ir con ese tamaño más pequeño. Y a lo mejor esto puede ser algo así como, no sé, 98 o algo así. $98. Ahí vamos. 40. Y dentro de aquí, sólo voy a agregar una imagen rápida como esa. Y esa imagen puede ser algo así como 417 por 417. Ahí vamos. Bonito y grande. Y veamos, la tarjeta oral en sí puede ser un poco más grande. Entonces veamos. No, pongamos esta imagen. Entonces Ordene, Enviar al Atrás. Ahí vamos. Haga clic con el botón derecho en Orden. Traer adelante. Ahí vas. Entonces se encuentra justo debajo de nuestro texto. Entonces voy a seleccionarlo. Y en realidad antes que lo haga, tal vez podamos darle la vuelta a esto y agregar algún radio de esquina de 20. Tal vez deshazte de esa frontera. El color de fondo es blanco, que está muy bien. Y esta va a ser nuestra tienda BG o producto. Así producto de fondo. Y en realidad voy a seguir adelante y seleccionar todos estos artículos así, 98 Control G. Y esta va a ser nuestra tarjeta de productos, tal vez algo así como esa tarjeta de producto. Ahí vamos. Control D para duplicarlo, colóquelo aquí mismo. Control D para duplicarlo, colóquelo aquí mismo. Ahora bien, a este siguiente se le puede llamar, a ver, cable extendido. Tal vez. Ahí vamos. Precio de eso puede ser algo más parecido al 54. Ahí vamos. Y entonces este final puede ser algo así como C. Todos los accesorios así. Mi inglés no es muy bueno hoy. Ahí vamos. Y todo lo que quiero hacer aquí mismo es decir algo como explorar todos. Y junto a ella, quiero poder agregar el icono de error. Entonces veamos, esta flecha va a funcionar bien. Así. Ahí vamos. Asegúrate de que estamos a 20 por ejemplo y esta flecha solo va a ser una blanca. Vamos a añadir, ¿qué es esto? ¿Blanco? Ahí vamos. Y esto también puede ser blanco. Tan blanco. Ahí vamos. No, no color de relleno, pero el color del texto puede ser blanco. Ahí vamos. Esto también puede ser blanco. Así. Y el fondo de la misma puede ir a Activos e ir con oscuridad. Obviamente no lo ves debajo de esta imagen, pero en realidad no necesita esta imagen. Entonces me voy a deshacer de él por completo. Y tienda o accesorios, me voy a quedar así 40 y esto es a los 40 también. Y básicamente, ahí vamos. Hemos seguido adelante y completado todo lo que necesitamos. Una última cosa que quiero hacer es acercar esto un poco más, tal vez a 60, tal vez a 40. Podemos hacer lo que quieras con él. Y puedo decir algo así como accesorios. Y rápidamente solo organicémoslos un poco. Entonces va a ir justo abajo aquí. Esta sección va a ir justo arriba de aquí. Ahí vamos. Entonces cuando vayamos a dar rienda suelta, pie de página y accesorios va a ir por encima de desatar. Y obviamente vamos a organizarlos un poco mejor a algo como esto Haz doble clic y empujaremos esto un poco hacia abajo. Entonces, si vamos a nuestras preferencias de diseño, y voy a apagar nuestras columnas aquí, ¿de acuerdo? Y esto es lo que tenemos hasta el momento. Entonces este es nuestro diseño, esto es lo que creamos actualmente, y este es nuestro wireframe. Se puede ver lo súper simple que fue esto, lo rápido que fue esto. Obviamente me tomó 40 min crear, pero la parte de diseño va a ser mucho más rápida porque vamos a seguir adelante y crear esto sin ningún rasguño. Para que puedas ver cuando empieza a gatear, todo está muy bien presentado en la página y todo puede funcionar según lo previsto. Entonces en el siguiente video, vamos a abordar el diseño. Entonces te veré ahí. 27. Crear diseño: En esta lección, vamos a crear el diseño y convertir esos wireframes en diseño. Entonces, sin más preámbulos, comencemos. Así que aquí está el wireframe que creamos anteriormente. Lo que puedo hacer es simplemente seleccionar todos mis elementos dentro de la página. Presiona Control C, vuelve a Páginas, presiona Diseño, haz zoom hacia fuera y extiende esto hasta aquí, por ejemplo, presiona Control V y va a pegar todos los elementos dentro. Que este espacio vacío esté en la parte inferior porque obviamente vamos a hacer algo de espaciado un poco más tarde. Entonces primero lo primero quiero agregar alguna copia real aquí. Entonces voy a pegarlo aquí mismo y asegurarme de que esto sea, digamos 59, 60 o algo así. Ahí vamos. Y voy a meter esto aquí. Entonces cambia a capas y encuentra mi imagen de héroe, que es esta imagen de aquí mismo. Voy a dirigirme a subir, haz clic en Subir, y luego voy a dirigirme a mi escritorio. Veamos dónde se encuentra la carpeta. Entonces aquí está. Y si voy a imágenes y video, que va a ser mi fondo de héroe, así es como va a quedar como voy a golpear Bien, y ahí vamos. Así que déjame bajar un poco la superposición de colores a 60, 50, tal vez, algo así. Y déjame seguir adelante y usar mi top ahora para el logo. Vamos a reemplazar eso. Vamos a hacer clic para Subir y déjame volver a mis iconos de activos. A ver si estamos ahí. No, está dentro de las imágenes. Logotipo. Es SVG, así que funciona bien. Ahí vamos. Para que veas lo fácil que es reemplazar esto. Ahora bien, esta imagen va a ser VR en chica, por ejemplo para la parrilla VR, voy a presionar Subir clic en imágenes y usar esta chica de aquí mismo. Ahí vamos. Y se puede ver lo súper simple que fue la muerte. Nos volvimos humanos, escalarlo un poco a algo así. Ahí vamos. Voy a hacer click afuera. Se puede ver cómo se ve eso. Ahora aquí sólo voy a pegar en la copia de mi diseño original que creé fuera de pantalla. Obviamente, usa esto para mi párrafo. Ahí vamos. Y lo que puedo hacer aquí mismo es seis tendido a solo un toque que se ajuste al papel de que estamos tal vez o incluso mejor, puedo estrechar hacia abajo para que podamos ir en tres líneas a algo como esto. 48, 48, eso es bueno. Pero todavía no creo que esta imagen tenga que ser así de grande. O tal vez podamos simplemente usar los dos así. Y solo asegúrate de que estén en el centro así. Entonces con todas estas otras secciones, vamos a moverlas hacia abajo obviamente a algo así. Veamos cómo funciona esto. A lo mejor podamos sacar esto un poco más cerca. Y tal vez incluso podamos activar nuestra configuración de diseño de preferencias. Ahí vamos. Sí, creo que eso va a funcionar bien. Pero, ¿por qué no se pega tan preferencias, configuración de diseño? Bien, entonces L, y voy a darle un codazo al borde. Ahí vamos y solo codazamos esta imagen en un poquito. Y creo que eso va a funcionar bien. Lo que voy a hacer una vez más es darle Control D. Una vez más. Volvamos a aquí. Entonces vamos a ver ¿dónde está nuestra imagen? Aquí está. Somos chica. Entonces voy a agregar otra imagen aquí mismo encima de ella. Ojalá. Por alguna razón no quiere ir. Pero no importa. Lo que voy a hacer es simplemente hacerlo 200 por 200 y subir mi logo, perdón, mi icono. En lugar de los íconos, lo que tengo aquí mismo es el ícono de VR. Ahí vamos. Haga clic en Colocar y luego colóquelo aproximadamente por aquí. Lo que eso va a hacer es simplemente darme un poco más de interés en esta sección. Diga. Entonces, creo que esta sección ha estado bien. Entonces esto todo lo que necesito hacer es simplemente seguir adelante y hacer clic en Subir. Entonces cambia esto. Esta va a ser nuestra educación. Así que cámbiala a aquí, ahí vamos. Este siguiente van a ser juegos. Ahí vamos. Y sólo voy a sustituir esto con juegos. Y en esta siguiente sección, vamos a hacer doble clic y pegar en algún texto. El siguiente va a ser la música. Y haga doble clic en la música. Así que simplemente haz clic aquí, presiona Subir clic y encuentra música. Ahí vamos. Aquí. ¿Bien? Y entonces este último va a ser metal porque eso está de moda en este momento. Como veo en línea. Ahí vamos, Mehta, y finalmente reemplazamos este icono con tu propio icono de materia de icono. Ahí vamos. Golpeado. Bien, genial. Ahora que eso está hecho, lo que puedo hacer es seleccionar toda esta sección y simplemente darle un codazo por aquí solo para que pueda ver dónde encaja con el resto de mi diseño. Y puedo seguir adelante y seleccionar todas estas otras secciones y simplemente moverlas hasta que vea qué hacer con ellas un poco más tarde. Entonces por eso es genial. Así que vamos a ver los juegos aquí. Y puedo subir este click Subir, volver a mis imágenes, juegos, que es este tipo. Ahí vamos. Se puede ver algo como esto. Creo que va a funcionar bien. Así que selecciona los datos para asegurarte de que están en el centro. Y tal vez pueda moverlos solo un toque. O tal vez pueda simplemente mover un poco la imagen de este juego hacia aquí, algo así. Quizás algunos carezcan de algunas formas en el fondo. Entonces tal vez pueda agregar algunas formas de fondo un poco más tarde o algo así. Pero creo que va a funcionar bien por ahora. Lo siguiente que voy a hacer es agregar una nueva imagen aquí mismo y usar la misma técnica. Entonces 200 por 200, ahí vamos. Y dentro de esa posición, puede ser más o menos por aquí. Voy a presionar Subir y encenderme a mis íconos de activos. Y veamos el icono de los juegos. No, esa no. Entonces veamos ganar, ganar juegos. Es éste y colóquelo más o menos por aquí. Ahora cuando tenga eso, voy a incluir mi copia dentro de un juego de definir. Y voy a hacer lo mismo por este texto. Ahí vamos. Este botón tiene la función de sincronización automática en él. Pero si solo quieres cambiar este botón y no quieres que el cambio se sincronices con todas las instancias. Todo lo que tiene que hacer es hacer clic derecho en este botón y hacer clic separado de los activos. Y entonces los cambios se aplicarán únicamente a este botón. Y obviamente tendremos que cambiar algún texto aquí. Entonces en vez de esto, voy a decir que consigue el tuyo. Ahí vamos. Presione aplicar y solo vea si se actualizó en tiempo real en todas partes. Entonces lo que tengo que hacer es básicamente hacer una copia de la misma y luego cambiar de deuda. Pero no voy a hacerlo por el bien del tiempo. Así que vamos a seguir adelante y seguir adelante con ello. Entonces voy a seleccionar estos dos y asegurarme de que estén en el centro. Ellos son geniales. Así que solo voy a seleccionar esto y asegurarme de que esté la misma distancia que esta en la parte superior para darle un poco más de respiro. Ahí vamos. Entonces ahora para este próximo, voy a alinearlo para que sea lo mismo y esto va a ser bastante sencillo. Entonces video promocional, solo presiona Subir haz clic aquí mismo, ve a mis activos e Ikhwan, lo siento, imágenes video promocional es este de aquí. Bien, ahí vamos. Se coloca recto por dentro. Entonces en esta sección, subir. Y todo lo que necesito hacer aquí es básicamente reemplazar estas imágenes a medida que se mueven hacia arriba. Aquí, sube las imágenes seleccionadas. Va a ser este de aquí, ¿de acuerdo? Como puedes ver, ahora aquí vamos a usar el controlador pulsa Upload para dar click para subir controlador. Ahí vamos. Golpea Bien. Y finalmente para éste, va a ser un poco complicado. Así que selecciona la imagen aquí, sube, haz clic en Subir. Y voy a usar esta imagen porque es una imagen PNG de esta chica. Como pueden ver, se va a traducir muy bien en ese trasfondo. Pero para ello, en realidad necesitamos reemplazar algo de esto. Por lo que este obtener ideas debería ser completamente oscuro. Así que la oscuridad principal en este inspirarse debe ser blanca. En este caso. Ahí vamos. Para que puedas ver cómo se ve esto. Pero finalmente, necesito deshacerme de algunas de estas fronteras. Si seleccioné esto, veamos, no tiene un borde de este rectángulo, sí tiene un borde. Igual que este rectángulo. Igual que este rectángulo. Ahí vamos. Y ahora podemos pasar a esta sección, que podemos agregarla más adelante. Entonces lo primero es lo primero, para esta, lo que voy a hacer es sustituir el tamaño de la imagen a algo así como 792 por 500. Ahí vamos. Asegúrate de que sea más o menos por aquí. Ahí vamos, y asegúrate de que los ponga en posición. Entonces lo que haremos en realidad es darle la vuelta título de esta sección y cambiarlo de 60 a algo un poco más pequeño, como 32. Haga doble clic en pegar en algunos, es un cambio de vida. Y vamos a incluir algún párrafo de texto aquí mismo. Así que asegúrate de extenderlo solo para que pueda cubrir el texto. Y veamos para el distanciamiento, tal vez podamos usar 48. Entonces veamos qué tenemos aquí mismo. Entonces tenemos 35. Entonces estamos en 48 ahora mismo. En lugar de esto, lo que voy a hacer es incluir alguna paginación. Así que simplemente puedo golpear 0 para crear un lindo círculo, algo así. Y veamos Fourier pero 48, tal vez un poco grande. Entonces 40 por 40, ahí vamos. Voy a incluir una frontera. Y esta frontera va a ser esta, Digamos que significa color azul. Entonces aplica a la frontera. Y me voy a deshacer del relleno el ancho del borde va a ser de dos pixeles, algo así. Ahí vamos. De aquí estamos 54. Y voy a estar a los 48, igual que hice con el anterior. Controlar una D. Ahí vamos. Control D, donde estamos en este momento estamos 29. Entonces 20, veamos 20 y Control D en este somos 20. Así que sigamos adelante y seleccionemos rápidamente estos. Entonces estos otros , en realidad, no, seleccionémoslos todos y golpeemos el color del párrafo como borde. Y solo voy a seleccionar el segundo y darle al azul principal como el color de relleno sin ningún borde para indicar que este está seleccionado. Pero sigo pensando que son realmente demasiado grandes. Entonces voy a seleccionarlos así a todos y reducirlos a 20 por 20. Veamos cómo se ve eso. Sí, creo que eso es mucho mejor. distribuyeron uniformemente en caso que simplemente no sean golpeados Control G, vamos a llamar a esta paginación. Y ya tienes el componente para la paginación, pero me gusta crear mis cosas desde cero. Entonces solo me gusta tener, digamos, el control total de la misma. Entonces voy a seleccionar este texto, asegurarme de que esté en el centro de esta imagen. Para que pueda seleccionar mi contenido, seleccionar mi imagen. Así Secciona el contenido y la imagen y asegúrate de que su centro esté alineado. Ahí vamos. Y sólo voy a seleccionar esta imagen aquí. Subir, hacer clic en Subir y agregarle la imagen testimonial. Golpea bien, ahí vamos. Y solo quiero agregar algunos detalles adicionales. Así que golpea R y tal vez crea algún tipo de rectángulo en el fondo. A lo mejor redondear un poco las esquinas. A ver. A lo mejor 20. Ahí vamos. Y me voy a deshacer del relleno y para el borde, voy a aplicar ese color principal y lo voy a hacer por ejemplo dos pixeles. Haga clic con el botón derecho en Ordenar, Enviar atrás. Entonces está justo detrás de esta imagen. Ahí vamos. Creo que eso funciona bien. Entonces solo un teléfono. Va a ser súper sencillo de hacer. Todo lo que tenemos que hacer es simplemente subir este dispositivo VR. Ahí vamos aquí. Bien, y creo que eso funciona bien. Entonces estamos a las 01:20. A ver, cinco de cada lado, 24. 24. Sí, 123 de cada lado. Creo que va a funcionar bien. Y luego finalmente para estos de aquí mismo, lo que necesitaremos es ir con tarjeta de producto. Esta primera tarjeta va a ser el estuche de transporte, como dice, en la lata. Golpea Bien, ahí vamos. El segundo va a ser esos cables. Así que presiona Subir, haz clic en Subir cables. Ahí vas. Y tal vez porque está cortada, tal vez puedas colocarla en el borde inferior de tu imagen y esto escalarla un poco y luego simplemente alinearla al centro así. Creo que va a funcionar mucho mejor. Ahora por fin, porque aquí lo que vamos a necesitar es, veamos. Vamos a necesitar el título. Así desató el mundo de la tecnología VR. Ahí vamos. Asegúrate de que esto es 48, así. Y luego voy a añadir textos aquí mismo. Ahí vamos. Y me voy a quedar con esto tal como está. Y por último, simplemente reemplace esta imagen. Presiona Subir. Elige a esta mujer VR. Ahí vamos. Y voy a hacerla mucho más grande a algo así, bonita y grande. Seleccione ambos, golpee al centro y luego mueva esta foto abajo. Para la imagen de contenido en sí, voy a usar componentes para arrastrar en otro componente, ir con 200 por 200. Ahí vamos y lo colocamos en algún lugar, más o menos por aquí. Presiona Subir, haz clic ahí mismo. Y entonces voy a necesitar los íconos de activos. Y voy a usar el icono de la tecnología, creo. Sí. Así que solo colóquelo aproximadamente por ahí. Lo que puedes hacer es también usar algunas formas de fondo para rellenar estas imágenes. Si quieres, hará que destaquen un poco más. Y tal vez debería realmente exportarlos y traerlos. Entonces déjame ver realmente qué puedo hacer. Entonces tal vez pueda hacer algo como esto. Entonces lo que podemos hacer con esto es que aquí está trayendo la nueva imagen. Asegúrate de que sea escalable. Posicionando aproximadamente por aquí. Pedido Enviar al Atrás, golpear, subir. Click to Upload y dónde está, blob shape hit, ¿bien? Y puedes ver cómo se ve enseguida a partir de aquí, todo lo que tienes que hacer ahora es empujar esta imagen en la forma de gota misma. Ahí vamos. Y solo muévalos a ambos al mismo tiempo a más o menos por aquí y va a funcionar bien. Voy a ir un poco más tarde y ajustarlas todas. Pero veo ahora es que necesitaría algo así como 20 aquí mismo para el rectángulo. Así que vamos con 20. Ahí vamos, solo para que podamos tener un diseño un poco más interesante dentro de esta imagen. Nuestra última cosa que quería hacer para esto, pero antes de seguir adelante, permítame rápidamente asegurarme de que esto esté centrado. Ahí vamos. Voy a seleccionar la imagen de pie de página, filtrar imagen. Ahí vamos. Presiona subir y haz clic ahí mismo, selecciona las imágenes del dispositivo VR número dos. Somos dispositivo para. Ahí vamos. Golpea OK. Y tal vez sólo voy agrandarlo un toque a algo así. Y solo asegúrate de que el fondo del pie de página esté en la parte superior, tal vez en el 80%, algo así. En el buen truco es que simplemente puedes cortar tu tablero de arte aproximadamente por aquí y no se desplazará más lejos. Pero si quieres, obviamente puedes simplemente extender tu pie ahí mismo. Creo que va a ser un truco bastante agradable y una manera bastante agradable de terminar esta sesión de diseño. Pero debido a que estoy muy molesto con estas formas de fondo, simplemente voy a exportarlas de mi diseño original. Agrégalos aquí mismo. Entonces voy a agregar una nueva imagen, la coloqué a algo aquí mismo, coloqué a algo aquí mismo botón derecho y Ordenar, Enviar al Atrás. Golpear, Subir. Haz clic en Subir, ve a Activos, forma de blob número dos, pulsa. Bien, ahí vamos. Y tal vez pueda escalarlo solo un toque para más o menos por aquí, tal vez. Sí. Y luego puedo ajustarlas y moverlas. Vamos a ver dónde está. Sí, así que aquí está. Esto, esto y esto. Puedo mudarme a aquí, quizá. Ahí vamos. Y nos quedamos con una sola gota y déjame exportarla y prepararla y simplemente traerla aquí. Y mientras lo estoy haciendo, sigamos adelante rápidamente y agreguemos una nueva imagen. Escalarlo, haga clic con el botón derecho en Ordenar, Enviar al Atrás, subir clic. Y va a ser la forma de gota número tres, pero por alguna razón no existe ahí dentro. Entonces déjame probar eso una vez más. Haz clic para subir la forma de blob número tres. Ahí vamos, aquí, bien, y se encuentra justo aquí. Obviamente, puedes jugar un poco más con los ajustes y ajustarlos un poco más. Pero estas manchas están ahí solo para darle un poco de interés a su diseño. Vamos a golpear rápidamente la vista previa para ver lo que hicimos hasta ahora y ver qué hemos creado hasta ahora. Entonces aquí tenemos nuestra sección de héroes, tenemos nuestros botones, todo funciona tal como debería. Empiezo a desplazarme hacia abajo. Se puede ver explorar nuevos mundos. Y tenemos a esta chica, una vez más, el botón funciona muy bien. Posibilidades ilimitadas. Entonces tenemos estas opciones aquí mismo, pero creo que me olvidé de agregar es para el aeropuerto principal, quiero cambiar este color. Entonces los activos. Haga clic con el botón derecho. Veamos qué podemos hacer. Entonces fue éste. Ahí vamos. Entonces, cuando cambio por aquí mismo, debería hacer que cambie y destaque un poco más si se guarda. Vamos a comprobarlo. Sí, porque ahora podemos ver el color blanco de estas tarjetas. Entonces todo funciona como debería. Se ve bien. Puedes ver cómo estas manchas hacen que tu imagen destaque. A lo mejor debería mover eso solo un poquito más. Pero creo que va bastante bien. Y para este video, lo que voy a hacer es simplemente redondear las esquinas de este video. Localiza la superposición de color y asegúrate de que tenemos 20 aquí mismo. Ahí vamos. Y ahora cuando lo guardes y lo abras aquí mismo, funcionará bien. Solo podrías imaginar que este video se reproduce continuamente en bloop tal vez sobre nucleico. Se lo va a llevar a Vimeo o YouTube o algo de esa naturaleza. Estas tarjetas también deben ser redondeadas. Entonces hagámoslo. Así que vamos con 20. Vayamos con 20 aquí también. Ahí vamos. Y echemos un vistazo a esta sección para conocer los testimonios. Entonces este es seleccionado, funciona bien. Auriculares todo en uno, personaliza el tuyo. Ahí vamos. Entonces tenemos estos tres. Explora todo tal vez podamos agregar algunos efectos de hover. Ahí vamos. Entonces todo funciona como debería aceptar para esta sección. Quizás incluso debería cortarlo e incluso debería incluirlo dentro de aquí. Entonces lo que podemos ver, vamos a ver. Entonces tenemos pie de página, BG es 740. Así que vamos con 740. Y yo puedo ir con Phil. Ahí vamos. Y creo que eso va a ser casi sal en este caso, así. Ahí vamos. Entonces eso es todo para nuestro diseño. De veras espero que lo hayas disfrutado. En el siguiente video, solo vamos a abordar un poco de animación. Y te voy a mostrar por ejemplo cómo animar una de dos de estas secciones solo para ver cómo funciona todo. Entonces te veré ahí. 28. Agregación de interacciones: adelante y agreguemos rápidamente algunas pequeñas interacciones agradables para que nuestra página sea un poco más interesante de lo que es ahora mismo cuando es casi completamente estática. Bien, así que aquí es donde lo dejamos la vez anterior. Sigamos adelante y agreguemos algunas interacciones. Entonces la primera interacción que voy a agregar es en realidad cuando se carga esta página, quiero que estos elementos se muevan un poco. Entonces, ¿cómo hacer eso? Bueno, cambiemos rápidamente a la interacción. Vamos a seleccionar el objetivo, y yo voy a seleccionar esta sección de héroes. Entonces, desplácese hasta aquí abajo, una sección. Y tienes tu imagen de héroe, por ejemplo y tienes todos estos otros elementos dentro de la sección de héroes. Entonces lo primero es lo primero, vamos a seleccionar este texto así. Por lo que apunta al texto en carga. Así. Y queremos comenzar a movernos. Y hagamos algo como en el eje y, vamos, no sé, tal vez diez pixeles. Entonces para tres-cinco para aliviar 200, tal vez 300, algo así. Bien, entonces haz otra. Entonces agrega interacción, selecciona el objetivo dentro de la sección de héroe. Lo que podemos hacer a continuación es quizá usar el botón principal. También podemos usar el movimiento. Y vamos con, no sé, quizá diez pixeles aquí. Así que vamos con algo así como 604300 milisegundos. Eso está bien. Agreguemos otro para el menú, por ejemplo, así interacción AD. Vamos a la cima. Entonces tenemos el nervio superior, tenemos el movimiento. Y en el eje y, que es superior e inferior, voy a moverlo e.g Digamos 40 píxeles. Algo así como una deuda. A lo mejor puedo, no sé, mejor puedo agrandar la imagen de fondo. Entonces hagámoslo. Entonces una vez más, sección héroe. Vamos con la imagen de héroe en carga, y vamos con Zoom. Entonces vamos con el ancho, tal vez 105, algo así. Vamos rápido. Ahí vamos. Se puede ver lo rápido que sucedió esto porque lo configuramos hasta 300 milisegundos. Si quieres que estos cambios ocurran un poco más lento que esto, entonces puedes jugar con eso. Ahora sigamos adelante y ajustemos esta siguiente sección. Y voy a tocar rápidamente este icono. Y tal vez cuando se pasa el cursor sobre él, puede rotar. Cuando mueves el mouse sobre, solo puede saltar hacia atrás. Entonces para hacer eso, en lugar de estos disparadores, y primero déjame explicarte lo que acabo de hacer. Entonces, cuando haga clic y lo arrastre a sí mismo, va a aplicar cambios a sí mismo. Entonces voy a ir con mouse enter. Entonces cuando entra el ratón, y en lugar de Zoom, vamos a usar un giro y vamos 180. Vamos duración lineal 400, creo que puede ser bastante buena. Puedes usar la facilidad de entrada, salida. Creo que va a quedar un poco mejor. Haz clic en Bien y luego haz otra. Así que deja el ratón, y voy a usar el ángulo cero. Así que vamos a previsualizar rápidamente lo que hicimos ahí mismo. Entonces cuando me muevo hacia abajo, se puede ver que está resaltado en rojo, lo que significa que tiene el efecto sobre él. Entonces cuando me cierro, se puede ver lo que hace. Y cuando se mueve dentro, tal vez deberías fijarlo a menos 180. Entonces vamos a probarlo en la licencia de Moussa. Vamos a presionar Editar aquí mismo, y vamos con menos 180 para que vuelva a su posición original. Entonces veamos si eso hizo el truco. Ahí vamos. Entonces, cuando tu mouse lo abandone, va a volver a esa posición original. Puedes ir con 360 si quieres. Pero creo que 180 es bueno. No voy a tocar estos botones porque ya tienen el efecto hover sobre ellos. Puedes hacer todo tipo de cosas diferentes con esta imagen, por ejemplo, puedes agrandarla cuando mueves el mouse sobre ella. ejemplo, cuando te deslizas sobre la intersección de la luz solar, eso lo que quiero hacer es jugar con la posición de estas cartas. Ya tenemos el efecto hover sobre ellos que previamente establecimos. Pero lo que voy a hacer es seleccionar toda la tarjeta y arrastrarla. Usa el ratón enter. En lugar de rotar, voy a usar el eje y Mover. Voy a ir con diez pixeles, 300 milisegundos, lo cual está bien. Y luego usa esto y vete. A ver. con cero y veamos qué hace eso por nosotros. Así que vamos en lugar de entrar con el ratón. Sí, vamos, hagamos eso una vez más. Entonces, cuando hago clic aquí mismo, el eje y del movimiento centrado en el varón. Vamos con diez píxeles. Haga clic en Bien. Cuando haga clic aquí mismo. En lugar de centro del ratón, voy a ir con licencia de ratón. Voy a mantenerlo en cero. Golpeado. ¿Bien? Entonces ahora tenemos mouse enter con diez, mouse sale con cero, y vamos a golpear Preview. Entonces cuando pase el cursor sobre aquí mismo, puede ver cuando se va, vuelve atrás y tiene este efecto de resorte, que va a ir muy bien con lo que estamos tratando de lograr aquí mismo. Así que voy a ir con mouse enter, muévete diez aquí, ¿de acuerdo? Haz lo mismo para este centro del ratón, mueve 10, mi centro mueve diez. Ahí vamos. Y luego me voy a ir con éste. Deja el ratón, va a ser cero. ratón deja cero y el ratón deja cero. Por supuesto, puedes copiar y pegar estos efectos, pero me pareció igual de rápido cuando haces esto. Cuando solo eres Blair, planifica tu estado adelantado y cuando planeas tu animación por adelantado. Entonces ahora que tenemos este efecto, algo así como este efecto de resorte, cuando mueves el mouse sobre estas cartas. Ellos juegan y te muestran estas diferentes posiciones. Entonces cuando te desplazas hacia abajo, tal vez podamos rotar este, pero solo voy a saltarlo por ahora y pasar directo a esta sección. Y lo que voy a hacer en esta sección es que sólo voy a seleccionar este color ordenadamente de aquí. Dirígete a mis estados, ve al mouse hover seleccionado, ve a Propiedades. Dentro de las propiedades. Voy a bajar esto a tal vez algo así como, vamos con el 40 por ciento. Algo así. Vuelve a la normalidad. Pulsa la vista previa una vez más porque cuando pasas el cursor sobre ella, así cuando te desplazas hacia abajo, quiero que puedas hacer clic rápidamente sobre ella o que veas que realmente puedes hacer algo con ella. Y en este caso, sería un video reproduciendo de fondo. Entonces tal vez al hacer clic en él, se pueda expandir, agrandar para que sea a pantalla completa o algo así. Entonces este es el punto entero. Cuando haces clic afuera, cuando pasas el cursor afuera, solo va a agrandar en obesidad. Entonces ahora vamos a jugar un poco con estas secciones. Entonces, lo que podemos hacer aquí mismo es tal vez podamos agrandar esto un poco. Así que cuando haces clic y arrastras el ratón enter, podemos cambiar el tamaño. Entonces puedes hacerlo valor relativo, o puedes, si tienes un derecho aquí, puedes ver si desmarca cambiar el tamaño a un tamaño específico, que en realidad es lo que quiero. Porque quería en Enter para agrandar por diez pixeles. Entonces 710. Y vamos con, vamos con el número redondo aquí. Entonces tal vez 407, en realidad 200 milisegundos. Creo que está bien. Fácil ahora, eso es genial. Entonces eso fue mouse, entra, arrástralo una vez más, mouse deja. Y vamos a mantenerlo en estos tamaños. Ahí vamos. Vamos a golpear preview una vez más porque quiero poder saber si esto funciona o si no lo hace. Para que pueda saber si necesito hacer algún cambio. Ahí vamos. Para que puedas ver cómo se ve esto cuando pasas el mouse sobre él. Simplemente te va a mostrar básicamente esta imagen y mostrarte cómo se ve. Eso es genial. Entonces lo siguiente que quiero hacer es quizás, tal vez hacer lo mismo con esto. Entonces lo que puedo hacer es hacer lo mismo. Entonces mouse enter, solo para que seamos capaces de entender que estos son todos parte de la misma sección. A ver. Entonces 156.233. Ahí vamos. Y luego ratón se va. Nos va a traer de vuelta a la configuración predeterminada. Ojalá. Entonces veamos 156146. Ahí vamos. Entonces vamos a jugar con éste también. Entonces voy a seleccionar la imagen así. Y en este caso, quiero poder escalarlo a algo así. Entonces 9 443-594-4350. Entonces, una vez más, selecciona tu imagen. Entonces 944 con 350, eso está en mouse. Entra, pega, Bien. Y ahora agrega otro. En lugar del centro del ratón. Vamos con licencia de ratón. Se puede ver 880319. Ahí vamos. Así que vamos a previsualizar rápidamente estos. Y si estas animaciones funcionan como se pretende en estas secciones, entonces esta funciona bastante bien. Este funciona bastante bien, y este también funciona. Es simplemente saltar fuera de esta suma. Si quieres, puedes jugar con el posicionamiento de la misma. Para que vaya un poquito a la cima. Entonces tal vez en vez de esto agrandado y tal vez puedas hacer que se mueva solo por eje y, pero solo ten en cuenta que sus piernas todavía van a verse así. Pero por ahora, voy a saltarme esta sección porque normalmente estas secciones son bastante estáticas porque la gente está tomando entre ellas y cambiando. Entonces tal vez podamos agrandar esta. Entonces probémoslo con deuda. Entonces, ¿qué podemos hacer aquí? Hagamos el mismo truco. Así que vamos ratón, entrar, cambiar el tamaño. Vamos con 1206, 60 tal vez. Vamos con algo un poco más lento, como 400 milisegundos. Ahí vamos. Y luego ratón se va. Vamos a mantener los mismos ajustes. Algo así. Ahí vamos. Por último, para D es lo que quiero, es que quiero seleccionar esta imagen y quiero cambiar a hover, mouse hover aquí. Quiero reducir la opacidad a tal vez 70% o algo así. Vuelve a la normalidad, luego selecciona esta imagen también. Así char a ratón hover, 70%. Ahí vamos. Vuelve a la normalidad. Y luego finalmente cambiar de nuevo a este producto PG, mouse hover. Pero aquí en realidad vamos a cambiar el color. Así que dentro del mouse, nuestro cambio al azul oscuro, vuelve al valor predeterminado. Ahí vamos. Y aquí lo que podamos hacer tal vez porque es la última sección, mejor puedas hacer ese mismo truco para que rote al hover. Entonces mouse enter, en lugar de cambiar el tamaño, tal vez pueda. A ver, si giro 100 grados. Ahí vamos. Y ratón deja -100 grados, 100 grados, y ahí vamos. Entonces ahora que tenemos eso, por supuesto, puedes agregar todo tipo de animaciones diferentes. Sigamos adelante y probemos rápidamente todo el diseño y veamos qué tenemos hasta ahora. Entonces, cuando golpee la vista previa una vez más, vamos a tener ese pequeño efecto de carga agradable de todos estos elementos en el fondo. Como mencioné, puedes agregar animaciones adicionales al fondo si quieres. Pero por ahora creo que es bueno. Esto funciona según lo previsto. Tenemos estos que actúan como un efecto trampolín en el fondo. Entonces tal vez puedas hacer clic aquí mismo y te va a llevar a la sección de página dedicada sobre juegos o a sección de página dedicada sobre juegos una página de juegos separada. En este caso. Podemos hacer que esto gire si queremos, entonces tenemos este efecto reductor de hover en esta carta. Tenemos estos elementos escalando, incluyendo éste. Entonces tenemos esto poco a poco agrandado y entrevista. Tenemos este bonito efecto hover en todas nuestras tarjetas. Entonces finalmente, tenemos este para la rotación. Ahí vamos. Así de fácil es agregar diferentes interacciones dentro de mock plus rP. Y puedes ver lo simples que son cuando seleccionas tu tablero de arte, puedes ver en carga lo que sucede luego cuando seleccionas elementos específicos como este, por ejemplo puedes ver los disparadores que tiene y los iniciados que tiene ahí mismo. En el siguiente video, te voy a mostrar cómo previsualizar y publicar para burlarse más Cloud por qué eso es importante y qué puedes hacer una vez que estés ahí. Entonces te veré ahí. 29. Preivew, Share y Mockplus: Obtener comentarios de tus clientes es más importante que puedes hacer en el proyecto. Porque los comentarios equivocados pueden llevar el proyecto a una parte equivocada y cómo obtener realmente los comentarios de sus clientes. Y de eso vamos a hablar en esta lección. Bien, entonces aquí es donde lo dejamos en el video anterior. Ahora, sigamos adelante y previsualicemos esta una vez más. Entonces aquí tenemos este panel en la parte inferior. Entonces aquí tenemos cabida al ancho. Puedes tener ajuste a la pantalla si quieres ver todo tu diseño. Y una vez más, todos estos elementos que se esbozan tienen algunas interacciones incluidas en ellos. Puedes volver para ajustarte al ancho o puedes ir con 50% dependiendo del tamaño de tu pantalla. Entonces lo que tenemos al lado es la pantalla completa. Y puedes pulsar Escape para salir de la pantalla completa. Y puedes mostrar u ocultar estos paneles en el lateral. Por supuesto aquí, en el lado izquierdo, puedes cambiar entre tus diferentes páginas. Y aquí, sus nodos van a ser localizados. Si tienes tus notas, una vez más, podrás mostrar u ocultar rápidamente estos paneles. Si no los necesitas. Entonces tenemos la opción de enlace de vista previa. Y lo que tenemos aquí mismo es lo que dice aquí mismo. Por lo que este privilegio será diferente cuando cambies la configuración a continuación. Así que por favor copia el nuevo enlace para compartirlo entonces. Entonces, lo que esto significa es que cuando marca y desmarca algunas de estas opciones, asegúrate de hacer clic siempre en el nuevo enlace que obtuviste al marcar y desmarcar algunas de estas opciones. Entonces lo que tenemos aquí mismo es mostrar panel de control. Puedes mostrarlo si quieres. Puedes mostrar esta barra de herramientas si quieres o no quieres. Puede mostrar el área de enlace al pasar el mouse. Lo que eso va a hacer es que va a mostrar a tus espectadores que realmente pueden hacer clic en esa área específica. Esto es genial, especialmente para las pruebas de usuarios porque siempre quieres que tus usuarios entiendan por sí mismos si pueden hacer clic en algún lugar o no. Porque eso va a mejorar la velocidad de tu diseño y usabilidad de tu InDesign. Siempre se puede mostrar el transportista de GNL. Puedes mostrar contenido fuera de nuestra firma. Esas pueden ser o bien sub-tablas de arte son algunos elementos que creaste fuera de tu mesa de trabajo. Puedes mostrar marcadores de nodo y puedes establecer la contraseña para que todos los que tengan una contraseña puedan entrar en esta vista previa. Todo el mundo sin contraseña no puede acceder a ella en absoluto. Entonces esos son solo algunos de tus ajustes cuando compartes el enlace de vista previa. Y luego finalmente, tenemos aquí, que son solo algunos ajustes rápidos que ya les mostré aquí, solo congestionados y condensados en aquí. Entonces, una vez más, siempre mostrando portador, enlace corto, continuar con el mouse hover. Entonces una vez pasa aquí mismo, y va a mostrar esa área de enlace. Esta es tu área de enlace. Mostrar contenido fuera del tablero de arte. Como mencioné, Mostrar marcadores de notas y auto ocultar la barra de herramientas. Entonces esas son solo algunas de tus opciones cuando quieres compartir tu prototipo muy rápido. Pero, ¿qué pasa si realmente quieres publicarlo? Así que para publicar algo en mock plus Cloud, pero en realidad seleccionado y déjame mostrarte, va a decir aquí mismo. que puedas sincronizar tu proyecto con mock plus Cloud, por ejemplo, colaboración en línea, traspaso y datos de capa. Comprueba lo que esto significa es que cuando solo compartes pour para vista previa, gente puede realmente previsualizarlo. Y entonces tal vez puedan darte algunos consejos sobre qué cambiar. Tal vez puedan que te apunten en la dirección correcta sobre el diseño. Pero cuando realmente compartes para burlarse más Cloud, puedes colaborar con otros diseñadores y otras personas en tu equipo, como Stakeholders como redactores y desarrolladores. Para que todos ustedes dentro de ese equipo puedan dar forma a ese diseño para que sea lo que realmente quieren que sea al final. Entonces, sigamos adelante y apuntemos al Proyecto Cloud. Y por supuesto, para los desarrolladores, pueden ser capaces de ver especificaciones de datos. Pueden ser capaces de ver colores. Pueden ver CSS, fragmentos y todo tipo de cosas diferentes que les serán útiles para desarrollar este diseño más rápido al final del día. Para que podamos apuntar al proyecto Cloud. Nosotros nuestro sitio web, eso está bien. Golpea Bien, y puedes cambiarlo. Puedes usar lo que quieras desde aquí. Y voy a usar somos página web en este caso hit, ¿bien? Y dependiendo de lo grande que sea tu proyecto, la publicación del mismo va a tardar más o menos. Se publica con éxito. Para que puedas golpear Ver proyecto como un separado de tu entorno y podrás ver cómo se ve. Entonces tienes todo tipo de estas diferentes opciones aquí mismo. A punto de documentar el diseño de prototipos, guía de estilo de recursos de tareas y la actividad. Puedes comprobarlo todo. Tienes el equipo, así que el permiso del proyecto. ¿Quién tiene el permiso para acceder a este proyecto? Puedes previsualizarlo una vez más. Aquí puede comenzar desde la página principal o comenzar desde la página actual. Puedes descargar lo que ya mencionamos anteriormente, y puedes compartirlo más fuera de aquí. Y puedes establecer algunos ajustes aquí mismo. Entonces veamos los detalles muy rápido. Entremos en el diseño aquí mismo porque estaba comenzando desde el diagrama de flujo, porque esa era la primera página predeterminada ingresada. Entonces lo que tenemos aquí mismo son algunas opciones en la parte superior. En primer lugar, tenemos la revisión. Entonces, dentro de esta pestaña, la gente puede revisar. Todos los cambios que creaste y básicamente pueden tener su opinión sobre tu diseño. Entonces aquí tenemos algunas opciones. En la parte inferior, pueden seleccionar algunas opciones dentro de tu diseño. Pueden agregar los textos, pueden coordinar el trabajo. Pueden agregar el marcado de espaciado y el marcado de región si quieren agregar algunos comentarios en una región específica de su diseño. También tienen algún estilo de pin, por lo que puedes mostrar marcadores de anotación o comentarios sin resolver para tener un montón de opciones cuando estás trabajando con alguien como clientes o partes interesadas. realmente puedan expresar su opinión sobre tu diseño y sobre los cambios que hay que hacer para tu diseño. Puedes agregar rápidamente estas referencias. Puedes agregar diferentes colores y cosas así. Entonces realmente tienes muchas opciones. Tienes anotaciones aquí mismo, y tienes tu historial de revisiones, lo cual siempre es genial porque puedes ver cuántas revisiones tuvo realmente tu diseño. Entonces lo que tenemos aquí mismo es el modo comentario. Entonces, cuando entras dentro de tu modo de comentario, puedes dejar rápidamente algunos comentarios. Entonces, por ejemplo, cambiar esta imagen de fondo. puede ver que dice Control, Enter para publicar esto. Entonces se envía cuando hago clic afuera, alguien puede ver esto y hacer clic y decir, Bien, cambia esta imagen de fondo y alguien más puede ver, ya lo hice. Por favor, consulte el historial de revisiones. Por lo que podrán ver en el historial de revisiones que ya cambiaron esta imagen de fondo. Entonces así es básicamente como funciona y cómo se ve. Puedes elegir cualquier tipo de parte de tu diseño que quieras anotar. A lo mejor puedas decir algo como agregar algunos gráficos y el fondo aquí o algo así. Entonces entiendes todo el punto y entiendes cómo funciona esto. Entonces tenemos el desarrollo. Y esto es especialmente útil, por supuesto para desarrolladores. Aquí es donde podrán ver todo tipo de fragmentos de código ahí podremos ver todos los colores que uses, tipografía que uses. Y podrá inspeccionar aún más su diseño antes de que realmente comiencen con el desarrollo y aceleren mucho su flujo de trabajo. Entonces lo que tenemos aquí son los activos. Entonces estos son los activos que preparaste una descarga ácidos, tenemos anotaciones. Entonces, si se ha agregado alguna anotación, si está vinculado al sistema de diseño, puede cambiar de plataforma sorda y puede establecer colores y obtener los valores que están en la página actual. Entonces cuando hago clic ahí mismo, se puede ver que tenemos todos estos colores. Y puedes encontrar un duplicado de estos colores. Y puedes cambiar entre hex, RGB y todo tipo de estos diferentes modos de color. Porque dependiendo del modo de color que vayan a usar tus desarrolladores, va a ser fácil para ellos hacerlo. Por lo tanto, puede ver que actualmente los ácidos no son compatibles en las páginas de prototipos. Puedes usar más plug-ins para importar diseños de estas herramientas. Y puedes ver los tutoriales si quieres importar activos y puedes ver anotaciones. Aún no tenemos ninguno. Y se puede vincular al sistema de diseño, como dije, si se quiere. Y puedes cambiar la plataforma de desarrollo. Entonces ahora mismo tenemos web. Entonces estas son sus unidades. Tenemos iOS, tenemos Android y personalizado. Y puedes ingresar los valores aquí mismo. Entonces, si selecciono la web, ese va a ser nuestro principal tipo de plataforma que vamos a desarrollar para ella como desarrolladores. Entonces, cuando en realidad pasas el cursor sobre tu diseño, verás que el tamaño de la mesa de trabajo es de 1920. Y se puede ver que esta mide 1,000 píxeles de alto, que es la sección de esta página. Y se puede ver cuando cursor sobre varias secciones diferentes, las distancias entre cada uno de estos elementos. Entonces tal vez se esté preguntando cómo los desarrolladores van a usar esto realmente. Bueno, es bastante sencillo cuando realmente ven que este botón, por ejemplo, es 366 por 60. Pueden seleccionarlo. Y no sólo van a obtener los valores aquí mismo. También van a conseguir los fragmentos de código. Van a ver el ancho y la altura y el silencio fácilmente, podrán copiar el código y pegarlo en su editor de código para que puedan trabajar mucho más rápido. Tenemos esto, por ejemplo , cuál es el logotipo. Se puede ver cómo se ve. Y por supuesto puedes cambiar las plataformas de desarrollo aquí si quieres obtener algunos valores diferentes, por ejemplo y cosas así. Y por último, tenemos diferentes opciones para compartir. Para que puedas compartir proyecto privado, compartir público o incrustar. Esto es realmente útil, especialmente cuando estás trabajando con colaboradores externos como, digamos que algunos consejos de administración pueden ser o personas de otra compañía con las que estás colaborando en este proyecto en particular. Por lo que puede ser muy útil compartir esto fuera de tu organización o fuera de tu círculo de personas que están trabajando en este proyecto en particular contigo. Entonces por eso esta versión es útil y por eso esta opción es útil para hablar de colaboración. Mock plus rP tiene excelentes características de colaboración y vamos a hablar de ellas en el siguiente video. Entonces te veré ahí. 30. COLABORACIÓN: La colaboración es una parte muy importante de un proceso de rediseño porque ahí es donde vas a obtener los comentarios o vas a obtener ayuda de algunos diseñadores externos, ya sea como parte de tu equipo o algunos diseñadores que vienen a ayudarte desde algunos fuera del equipo. Pero, ¿cómo se puede hacer eso en más más RP? Déjame mostrarte rápidamente cómo hacer precisamente eso. Entonces aquí estamos de vuelta en más más rP. Y si quieres invitar a tus colaboradores, todo lo que tienes que hacer es dar clic aquí mismo donde dice miembros. Ahora, puedes invitar a estos miembros y darles todo tipo de permisos diferentes. Para que puedan editar, terminar el diseño, pueden comentar y ver especificaciones, o se pueden adivinar para previsualizar solo. Entonces realmente todo depende de ti. Obviamente, si quieres invitar a alguien a que te ayude con el diseño, tienes que darle el rol de editar y diseñar. Y todo lo que necesitas hacer es simplemente copiar este enlace, compartir este enlace con ellos, y ellos van a ser invitados a tu equipo, antes que nada, y luego a este proyecto para poder editar contigo. Ahora permisos, tipo de proyecto, puedes configurarlo como privado, tan accesible para todos los miembros de este proyecto o equipo. Accesible para todos los miembros del equipo del Corán. En mi caso, lo cambiaría a esto y daría clic en Enviar, clic, Cerrar en, miembros blancos. Ahí vas. Y entonces podrán acceder a esto conmigo. Ahora en tiempo real, lo que es realmente importante es usar nodos. Ahora cambia a los nodos aquí mismo. Y entonces si tienes que decir algo, entonces agrégalo a las notas. Ahí lo podrán ver, podrán acceder a él. Y obviamente va a ser súper fácil para ellos entender a lo que te refieres. Pero también puedes hacer tu comunicación fuera de mock plus rP, pero es más fácil tenerlo todo en una sola herramienta como está aquí. Entonces cada vez que quieras agregar algo, quita algo, solo puedes agregar la nota y la otra persona del equipo va a ver esa nota. Entonces así de súper sencillo es colaborar con otros en tu proyecto. Y recuerda, también puedes hacerlo en mock plus clubbed. Solo un poco más avanzado usando las herramientas para desarrolladores, por ejemplo, y puedes hacer que tu proyecto sea trabajado por varias personas. Entonces por un lado puedes hacer la presentación, los clientes, por ejemplo, o stakeholders o algunos nuevos compañeros de equipo en el equipo. Por otro lado, los desarrolladores pueden tomar esas especificaciones, medidas y simplemente editarlas y recortarlas listas para su desarrollo. Y por otro lado, puedes trabajar detrás de escena y crear un ajuste algunos de estos cambios en tiempo real y simplemente actualizar el prototipo, actualizar el enlace, actualizar el proyecto MOP plus Cloud, por ejemplo y todos en el equipo pueden ver esa versión y ver el versionado detrás de ese proyecto dentro de la Nube también. Si quieres compartir rápidamente la biblioteca que ya creaste con tus compañeros de equipo, todo lo que tienes que hacer es hacer clic aquí mismo en estos tres puntos. Hit share. Y va a mostrar este diálogo si quieres compartirlo con el actual hit del equipo, ¿bien? Y entonces podrás compartirlo con el equipo actual. Y todos en tu equipo recibirán una notificación de que esta biblioteca ha sido compartida con ellos. Como se mencionó anteriormente, puede venir aquí para descargar el paquete de presentación fuera de línea si necesita llevar esto consigo, por ejemplo, en su computadora portátil o en su teléfono. A lo mejor solo quieres empaquetarlo y solo quieres llevarlo contigo para mostrarlo a alguien en persona, entonces simplemente puedes hacer clic aquí mismo para poder descargarlo y llevarlo contigo sin conexión. Si quieres exportar este archivo RPI, puedes dirigirte aquí en el menú y presionar Exportar archivo RPI. Y va a exportar este archivo RPI a tu máquina y luego podrás compartirlo así con tus compañeros de equipo o llevarlo contigo a donde quieras. Entonces así de súper sencillo es trabajar dentro de mock plus rP. Y solo puedes volver a aquí mismo. Y se puede ver un historial de revisiones. Puedes hacer clic ahí. Y se puede ver quién creó qué día. Entonces, cuando se ciernen, se pueden ver algunos cambios que se hacen. Si hago clic ahí mismo, si hago clic ahí mismo y deszoom un poco, entonces puedo ver todo tipo de cambios diferentes, cómo se veían. Para que pueda dar click aquí mismo. Entonces aquí es donde empezamos. Y por último, aquí es donde lo dejamos o puedo dar click en la versión actual y ver cómo se ve eso. Así que así de súper fácil es trabajar en mock plus rP, especialmente con algunos miembros externos del equipo o también con los miembros de tu equipo local. 31. Conclusión: Ahí vamos, llegamos al final de esta clase. Realmente espero que te hayas divertido aprendiendo sobre Mach más RP y explorando cómo usarlo. Espero con ansias ver tus creaciones en el proyecto de clase. Hay un video dedicado sobre tus proyectos de clase, así que asegúrate de comprobarlo y espero ver lo que ustedes pueden crear. Eso es todo para éste. Si quieres acceder a mock plus rP, asegúrate de revisar el PDF con un enlace dentro, entonces puedes acceder fácilmente a él y crear tu cuenta gratuita de esa manera, se asegura de comenzar hoy y poner en marcha esas creaciones. Muchas gracias por ver esta clase. Una vez más, si te interesa, tengo algunas otras clases sobre diseño UI UX aquí mismo en mi perfil de Skillshare. Así que asegúrate de echarles un vistazo también. Gracias de nuevo por ver este y hasta la próxima vez, cuídate.