El proceso de diseño UX/UI: creación de wireframes y diseño final

1. Vista previa de las clases: caminar por toda la U X tú proceso de diseño usando Adobe X'd aprender tanto la interfaz de usuario como diseño de la experiencia de usuario siguiendo un proyecto de diseño de APP móvil de principio a fin. Way primero caminará por el proceso U X aprendiendo los fundamentos básicos del diseño de UX y desarrollando una amplia variedad de entregables de UX, incluyendo una persona de usuario, unarchivo pobre, archivo pobre, un mapa de viaje del usuario y, por último, un diagrama de flujo de usuario. A continuación le pasará a Adobe X'd para crear un marco de alambre de baja fidelidad y finalmente crear un diseño polaco agregando iconos finales, colores, botones y estilo en forma de un diseño de alta fidelidad. Por último, vincularemos todo esto a la creación de prototipo de trabajo que podemos utilizar para las pruebas de usuario. La presentación de vuelo son solo un fantástico inicio La paz para tus nuevos están creciendo cartera U X Y . Adobe X'd es un fantástico ir a elección para aspirantes o profesionales ux Usted. Yo diseñadores así de fácil aprendizaje. El software de Adobe se impartirá con todo detalle. Todo el mundo necesita comprender los fundamentos del gran diseño de UX y el proceso detrás de él. Después de tomar esta clase, podrás incorporar ideas tanto UX como New I y a tus proyectos de trabajo cotidianos e incluso echar un vistazo a la vida de U X you I designer, estas gafas para todos que incluye diseñadores gráficos, Desarrolladores web, cualquier persona interesada en conocer más sobre el proceso U X Y haciendo un proyecto práctico, del mundo real. Entonces únete a mí para este extenso y divertido viaje por todo el proceso U X ey para que puedas empezar a emocionarte con este fantástico y gratificante arena del diseño digital ver en la clase. 2. Guía de la clase y el grupo de Facebook: En primer lugar, bienvenido al curso, y espero que esta clase se entusiasme demasiado por el proceso U X tú diseño y me pongas dos más cómodos usando Adobe X T para encuadre alambre. Quería hacerte saber tengo un grupo estudiantil de Facebook, trabajo en proyectos de post como preguntas y tener alguna en una sola vez con nosotros para obtener retroalimentación. También sostenemos retos de diseño en este grupo y para mantenerte al día de las cosas que pasan en el mundo U X Y y cosas que están relacionadas con Adobe X'd. Todo lo que tengo que hacer es buscarte grupo de estudiantes XY y la barra de búsqueda de Facebook y dar click sobre grupos para encontrarnos, y esperamos conocerlos allí. Quería tomarme un momento para hablar del flujo del curso. Este curso se rompe en un par de secciones diferentes. Primera parte es tu teoría X y se sumerge en nuestra persona de usuario, viaje del cliente, mapa y diagramas de flujo. Esta es una sección basada en teoría, por lo que se enfocará más en el proceso y menos en el software. El apartado teórico del curso podría encontrarse en la clase de proceso de diseño U X ey sobre participación de habilidades . El enlace se mostrará aquí mismo en la sección de notas de esta lección. También lo puedes encontrar viendo mi perfil en cuota de habilidad. La segunda fase de nuestro curso se mueve a crear son Marco de alambre de baja fidelidad y Adobe X'd. El siguiente apartado del curso se traslada a la fase de diseño, donde comenzamos a agregar diseño de color y darle estilo a su diseño. Creamos un layout de alta fidelidad y un prototipo de trabajo. Esta clase se enfoca más en el proceso de diseño a menos que esté aprendiendo Adobe X'd, aunque aprenderás mucho solo caminando por el proceso conmigo. Si quieres tener un software detallado, paso a paso clase enfocada, doy clases magistrales en Adobe X'd aquí mismo en share de habilidad. Una vez más, lo puedes encontrar en el enlace en la sección de notas de esta clase o encontrarlo en mi perfil de habilidad compartido . Ahora vamos a sumergirnos en alguna teoría de la UX, y nos vemos en la siguiente lección. No olvides unirte al grupo de Facebook después de revisar el curso de teoría del diseño U X Y . Nuestras lecciones vamos a sumergirnos en la creación son alambre de baja fidelidad para él aquí en la próxima lección. Definitivamente no se requiere tomar la clase de teoría para sacar mucho de esta sección del curso, pero es útil conocer el proceso UX. Acabamos de pasar para llegar al punto que estamos ahora estamos listos para poner en marcha nuestro marco de alambre . 3. Marco de wire. vez en de la fidelidad: la preparación: bienvenido a Adobe X'd. Vamos a seguir adelante y crear primero nuestro marco de alambre de baja fidelidad. Entonces vamos a pasar a un marco de alambre de alta fidelidad. Vamos a montar los gráficos de las fotos y los iconos. Y finalmente, vamos a vincularlo todo en prototipo en un prototipo que eventualmente podamos probar con los usuarios Así podemos seguir adelante y volver al tablero de dibujo. Si necesitamos modificar algo antes de que pase a la etapa muy final después de la aprobación del cliente , que será la etapa de desarrollo donde se recubrirá y el desarrollador se hará cargo y esperemos que sea una aplicación en funcionamiento descargable en un teléfono. No vamos a hacer esa última pieza, pero vamos a llevarte todo el camino hasta la fase de pruebas y pasar por ese proceso contigo. Entonces aquí estamos. Adelante y empecemos. Vamos a meternos en esto. Asumo que ya tienes un poco de conocimiento de Adobe X'd. Por favor siéntete libre de tomar esas clases si necesitas algún entrenamiento de Adobe X'd. Entonces me voy a gustar, tener un poco de conocimiento de trabajo de Adobe X'd, pero seguiré yendo despacio durante ciertas áreas. Entonces una cosa que realmente ayuda a que empiece es que hay algo que se llama tú. Yo niños. Ah, para que lo sepas, kits de interfaz de usuario y pueden descargarlos. Y podrían proporcionar un mundo de ayuda en cuanto a conseguir que se hagan algunos de esos bloqueos básicos y maquetación. Entonces este es uno que es del propio adobe, y te voy a mostrar cómo seguir adelante y agarrarlo. Pero mira todos estos maravillosos pequeños tipos de marcos de alambre de diseño básico que podemos agarrar y usar y adaptarnos a nuestros propios diseños que no tienen que empezar de cero. Siempre es muy agradable. Por supuesto, siempre puedes empezar desde cero si quieres. Um, este tipo de te da un poco de ventaja con algunos pequeños iconos y cosas diferentes que realmente pueden ahorrar una tonelada de tiempo. Por lo que para poder acceder a este archivo en particular, hay que ir a archivar. Y cuando tengas X d archivo abierto y te consigas yo niños y tienes que bajar los marcos de alambre va a abrir una nueva ventana en tu navegador y vas a poder descargar este kit en particular que estoy usando. Entonces sólo tienes que ir a descargar niños y tendrás el uno. Lo voy a usar sólo un poquito. No voy a depender mucho de ello, porque como que quiero mostrarte cómo hago el layout diseñado desde cero también. Por lo que esto solo ayudará con un par de spots específicos donde quizá necesitemos agarrar una Nikon o dos y ahorrar un poco de tiempo. Te darás cuenta de este particular que kit es tiene un color azul a la misma. Y lo que me gustaría hacer cuando estoy en el escenario aterrador de alambre de baja fidelidad donde todo está, A veces te han esbozado en papel. Es muy crudo. Es muy básico. Nos estamos haciendo una idea general del bloqueo de su diseño y donde las cosas son posiciones . Me gustó mantener las cosas en blanco y negro y gris. Entonces vamos a eliminar este color. ¿ Y cómo hacemos eso? Tenemos todo este documento lleno de este color azul. ¿ Cómo podemos cambiar todo eso muy rápido? Bueno, como saben, estos estilos globales del aire aquí, Así que si cambio los colores aquí lo va a cambiar globalmente. Entonces voy a seleccionar un par de estos colores azules. Voy a ir a editar, y sólo voy a deslizar esto todo el camino a Grey, deslizándolo a gris, y va a seguir adelante y cambiar todo el azul. Tienes editar esto todo el camino a gris, hacer ese tipo de sombra de gracia similar tipo de oscuro. Y esto es un azul claro. O para hacer de eso un gris claro. Entonces te das cuenta de cómo todo el azul se cambió aquí para que pudiéramos volver a entrar. Quedan algunas áreas poco azules. Podría, porque esto no es totalmente gris se va a deslizar que sólo por ahí vamos. Ahora tenemos un estilo más de baja fidelidad, y tal vez piensen, Bueno, Bueno, ese azul no va a molestar a nadie. Pero si los colores de nuestra marca son algo más para el color verde, ya sabes que tiene sentido eliminarlo como sabes, porque los clientes mirarán los colores y ese no es mi color final. Entonces si lo haces en blanco y negro, todo llega a ser un poco más como un marco de alambre de baja fidelidad esbozado. Por lo que a continuación vamos a empezar con una primera pantalla. Vamos a ir por estos. Pantalla de registro. Se acabó. Este primer verde, vamos a conseguir un poco de ayuda de o de ti no puedo que descargamos y tenemos varias opciones de registro diferentes. Y así cuando volvemos a tipo del proceso U X que acabamos de pasar, descubrimos algunas áreas en las que necesitamos dos cosas en las que necesitamos pensar al pasar por nuestro proceso de inicio de sesión. Y una de esas cosas era asegurarnos de que tuviéramos una opción de registro rápido. Entonces lo vamos a necesitar para diseñar una pantalla que vaya a poder inscribirlo, obtener información básica. También va a haber un botón que lo consignen con tu cuenta de Facebook. Por lo que necesitamos mantener a todos aquellos en juego a medida que diseñamos el layout para esto. Entonces, ¿qué tipo de pantalla de apuntes crees que funcionaría? Probablemente mejor para esta app. Queríamos ser limpios y sencillos. No queremos tener un montón de elementos de diseño para que puedan trabajar a través de ellos. Yo quería ser muy simple, y así que en realidad voy a agarrar este. Esto en realidad es el número cinco. Date de alta el. Y sólo voy a copiar esto. Voy a abrir un nuevo documento y vamos a hacer esto en el iPhone X. Por supuesto, las cosas pueden cambiar. Podrías estar lavando esta clase dentro de cinco años. Sé como el iPhone X. Eso son viejas noticias. Pero este es el más nuevo ahora mismo, así que sigamos adelante y hagamos esto. Notarás una pantalla mucho más alta, mucho más inmobiliaria porque ya no tienes el botón. Entonces vamos a poder tener más espacio en esta versión en particular. Por supuesto, siempre podrías hacer prototipos y mostrar diferentes tamaños así como llegamos al final. Se puede cambiar el tamaño de algunas de estas dos pantallas telefónicas diferentes que podrías hacer un android es mostrarle al cliente si alguna vez desarrollaras una versión para android de esta app, puedes mostrarle cómo se puede adaptar el diseño a tal vez una pantalla más corta . Entonces forense, ahora mismo, nos vamos a quedar con el iPhone a continuación. Entonces aquí está nuestro lado y pantalla. Vamos a cambiar esto de manera significativa para que sea nuestro. Entonces cuando se trata de marcos de alambre de baja fidelidad Ah, muchas de esas veces sus bosquejados. Por lo que no queremos agregar más detalles fuera de esto y a veces igualarlo agregando estas burbujas redondeadas podría incluso ser demasiado. Y a veces, uh, sin fundamento esos me dejan ir y click derecho y me desarreglan la grilla. Solo estamos usando esto como un atajo rápido. Vamos a hacer muchas otras pantallas desde cero, pero sólo una especie de mostrarte cómo puedes hacer un poco de atajo te algunas de estas plantillas para ahorrar toneladas de tiempo. Entonces todo lo que hice fue yo, ¿verdad? Haga clic. Ese fue un elemento de grupo. Entonces solo lo desarreglé y voy a ver si no puedo redondear estas esquinas atrás. Entonces aquí vamos. Aquí están nuestras esquinas redondeadas que ponen eso a cero. Y la razón por la que estoy haciendo esto es que no quiero agregar mucho estilo. Ahora mismo, estamos en la etapa de baja fidelidad. El estilo no es el objetivo. Se trata de la utilidad básica y de cómo el usuario va a trabajar a través del marco de alambre y menos sobre el branding o estilo o cualquier cosa. Yo sólo estoy guardando Esto es lo más básico posible. Entonces aquí arriba vamos a tener la oportunidad de tal vez poner el logotipo o el nombre de la empresa dirá a nombre era bueno de este tipo en nombres de aplicaciones. Simplemente estamos asumiendo algún tipo de oportunidad fotográfica ahí con el logo. Habría bien para que sepan qué app Han abierto mucho tiempo para tener una pantalla de inicio de sesión , y la carga fue muy pequeña. No saben qué app hay aperturas. Tienes que hacer eso increíblemente obvio y también tal vez codificado por colores. Lo que es genial del diseño de maquetación es que a veces la gente diseñará un fondo grande, por lo que simplemente lo tienen todo blanco. Entonces sigamos adelante y sacamos esto. Lo tendremos todo blanco, quizá el logo aquí. Pero lo que es genial, sobre todo de una pantalla más alta, es agregar un tipo de boxier de contraste muy alto ayuda a descomponer el diseño y ayuda al usuario tipo de desglose un poco mejor la información. Al usar estas cajas de alto contraste, no tienes demasiadas cajas, no tienes una caja que compite, así que digamos que tal vez tenemos que tener alguna información aquí abajo. Empieza a llegar a ser demasiado y empieza dedo del pie. Haz que el diseño y el diseño sea un poco ocupado. Pero a veces usando esos oscuros, notarás muchos menús de hamburguesas y tipos de menús arriba menús de cabecera pegajosos cuando te desplazas hacia abajo el generalmente un alto contraste que significa allí negro si el fondo blanco es blanco en el resto de la pantalla y al revés. Y eso es por una buena razón, porque el contraste es tu amigo cuando se trata de ti X diseño amigable y tú yo diseño así que solo tipo de te voy a dar tipo de esos consejos útiles en el camino. Esto es un poco menos sobre usar este software un poco más sobre las bases de crear un buen diseño y diseño. 4. Cuadro de wies: pantalla de inicio de inicio de: Entonces pensemos en lo que necesitamos tener aquí. Entonces necesitamos tener tipo de, ah, nombre de usuario, iniciar sesión una contraseña, iniciar sesión, y nos encanta poder, uh, verificar la contraseña. Pero solo sigamos adelante y mantengamos esto simple y solo tengamos un inicio de sesión básico. Y también tenemos que pensar ¿Es obvio que eso es lo que necesitas para poner tu email? A veces no siempre es obvio lo que hay que poner ahí, Así que sigamos adelante y sumamos. Simplemente voy a mantener presionada la opción manteniendo pulsada la opción y arrastrando, y soy capaz de duplicar eso realmente rápidamente. Yo solo tipo de nombre de usuario. Yo sólo voy a meter eso aquí abajo, y luego sólo voy a mantener presionada Opción. Voy a poner contraseña que realmente quieren hacer esto es obvio lo más posible para nuestro usuario toe login, y esos se pueden hacer más pequeños si necesitamos ser lo suficiente donde puedan leerlo. Entonces, haciendo 12 no estamos haciendo estilos globales bastante todavía. Solo estamos haciendo algún bosquejo básico. Asegúrate de que haya suficiente espacio entre estos elementos, pero también queremos asegurarnos de que no estén demasiado separados. Entonces si tengo esto aquí abajo, parece desconectado. Y esta es una unidad a la que la persona necesita dedo del pie para prestar atención. Entonces manteniéndolos cerca, pero obviamente no tan cerca que se sienta abarrotado. Así que sólo una especie de ver un poco tu espaciado. Entonces, ¿qué más necesitamos? Me encanta usar barras divisorias y especie de ver esta pequeña barra divisoria tipo de ayuda una vez más. Otra forma de descomponer tu diseño sin que parezca ocupado. Porque a veces usarás un cuadro de alto contraste aquí arriba, y aún necesitas algún tipo de línea divisoria o algo para desglosar continuamente la información, porque este es un conjunto de opciones completamente separado. Entonces yo, personalmente, tenemos mucho más bienes raíces de pantalla que cuando esto fue un poco armado. Para que podamos, ya sabes, tal vez dejar que el diseño respire un poco. Nos podría dar la oportunidad de tener un poco de una imagen más grande aquí, así que cambiemos esta línea de guitarra downs envió todo hacia abajo, realmente aproveche la pantalla inmobiliaria que tiene, sobre todo en un nuevo o en un teléfono. De acuerdo, Para que podamos ir y arrastrar esto hacia abajo. Voy a hacer esto un poco más grande un poco más prominente. ¿ De acuerdo? A lo mejor no tan grande. ¿ A lo mejor sólo el doble qué? Originalmente waas. Y así ahora tenemos algunas, uh, tipo de opciones aquí. Entonces lo que me gustaría hacer es obviamente que necesitan presionar enter para poder enviar su código de pase de contraseña. Entonces voy a mantener esto es una unidad conectada, y voy a seguir adelante y hacer este log in Ahora, hacer eso más grande. Todavía no nos vamos a preocupar por el tipo peleado. Sólo vamos a hacer algo de tipografía básica, Sólo una especie de escoger un defecto. Ah, tipografía, Que va a ser aérea por ahora mismo. Siempre podemos cambiar eso con estilos globales. Después, sólo tienes que seguir adelante. Y un grupo de agrupar este elemento, se ha conseguido cualquiera de este rostro. Y ahora tenemos este botón de inicio de sesión una vez más, queremos hacer botones de alto contraste, Así que queremos hacerle el color opuesto de su fondo o lo contrario en cuanto contrastes. Si tenemos un fondo blanco, nos encanta tener un botón más oscuro y el reverso también es cierto, y eso es algo que aún podríamos explorar. Esto en este caso, es poder saber, ¿Hacemos todo sobre un fondo oscuro y después tenemos todo en cajas blancas o tenemos todo en un fondo blanco? Y aún no estamos del todo ahí. Esto es baja fidelidad. Entonces sigamos trabajando esto en botones básicos. Si vas a tener la línea divisoria aquí es un tipo diferente de opción aquí abajo . Inicia sesión con Facebook. Siempre podemos colorear podría que después con para hacerlo más obvio que su Facebook, haciéndolo el color azul de Facebook eso Siempre hay oportunidades aquí abajo para poner el logo, y, uh, podemos descifrar eso más adelante. Entonces en cuanto a los botones básicos, ¿necesitamos algo más? ¿ Queremos darle la opción toe iniciar sesión con Google? Um, esa va a ser una opción. Siempre podemos trabajar con lo que sea Quien vaya a estar desarrollando esto, es pregunta que puedes hacer durante este proceso es que sabes lo fácil que es. ¿ Es para obtener el registro de Facebook? ¿ Y qué tan fácil es conseguir el Google también, y vale la pena obtener el inicio de sesión de Google? ¿ Hay suficientes usuarios y nuestro objetivo demográfico? Van a tener a Google para poder incluso hacer de eso una opción o pasar por todas las molestias para hacer de eso una opción. Nos vamos a quedar con Facebook por justo ahora, y vamos a simplemente tomar estos. Entonces probablemente te estés preguntando, ¿por qué no haces esto? ¿ Por qué no le pones el botón al lado? Bueno, lo que pasa aquí es que se confunden un poco. Estos botones están un poco demasiado cerca juntos. Ah, inicia sesión. No quieres que los usuarios nunca confundan. Es Es el inicio de sesión de Facebook es una ruta de usuario totalmente diferente que van a llevar el login con Facebook. Y así queremos mantener esos elementos un poco separados, no requeridos, no requeridos, pero solo algo en lo que estoy pensando durante el proceso de diseño. De acuerdo, así que incluso podemos tener vamos a seguir adelante en grupo esto, y esto es probablemente un poco demasiado tengo que detenerme como tú yo tipo de diseñador en el diseñador gráfico de hacer demasiado trabajo de diseño. Tengo que detenerme y decir OK, estoy empezando a meterme demasiado en el encuadre de alambre de alta fidelidad. Mantengamos esto sencillo. Mantenlo sencillo. Entonces en lugar de meterse con ese calor y mantenerlo así así de acuerdo, así que voy a seguir adelante y poner aquí una foto o logotipo. Va a ser muy, muy básico. Entonces esa es una especie de nuestra pantalla de inicio de sesión. Te puedes imaginar una foto ahí y oportunidades de registro. Entonces aquí es donde empezamos a tipo de desarrollo de tipo de trabajo con nuestro flujo de usuarios. Entonces como ya desarrollamos o diagrama de flujo del usuario en unas lecciones anteriores, podría haber el inicio de sesión de Facebook y este inscribirte. Entonces vamos a tener que pasar por esos procesos. Vamos a hacer el de Facebook. Eso va a ser más fácil. Y así voy a entrar en modo prototipo y voy a crear un par de tableros de arte aquí. Vamos a crear uno aquí y uno aquí. Entonces aquí es donde se van a dividir. Por lo que el usuario o va a subir hacia el inicio de sesión con Facebook o van a iniciar sesión ahora. Y así como empezamos a hacer esto, volvemos y vamos Oh, sí. Tenemos un paso crítico aquí que dejamos fuera. ¿ Y si no tienen ya cuenta? Tenemos que tener la oportunidad de que se inscriban para obtener una cuenta. Entonces eso definitivamente es algo que necesitamos para tipo de incorporar. Definitivamente tenemos la pantalla inmobiliaria para incorporar eso para ir y borrar este extra . Voy a voltear de nuevo al modo de diseño. Así que sigamos adelante y agreguemos un botón más y vamos a tomar una especie de la pastilla redonda de esta. Una vez más, queremos querer peinar demasiado las cosas ojos Y el cable básico en una etapa de friending de alambre de baja fidelidad . Vamos a seguir adelante y duplicar este botón aquí. Entonces esto es iniciar sesión ahora. Um, así que vamos a un tipo de cambios un poco, Entra con tu cuenta, y así esto va a ser inscribirte es una cuenta extranjera de registro, ok. ¿ O qué podrías crear? Crear un login? Podría sonar un poco mejor. Genial. A log in animales van y cagan. Facebook todo el camino aquí abajo. Y ahora tenemos que pensar en Ok, ¿cómo presentamos estos botones? Por lo que tenemos tipo de su inicio de sesión básico. Ahora podemos algo así como tener alguna pantalla inmobiliaria, se deslizaron eso un poco. Log mantendría todos estos juntos como una sola unidad porque van a iniciar sesión, iniciar sesión, y vamos a tener el Facebook como la siguiente opción aquí. ¿ De acuerdo? Está bien. Y así crea un inicio de sesión. Entonces donde tener eso al fondo. Y les daré la oportunidad de crear un login, y vamos a hacer algunas opciones de color diferentes. Entonces seguimos en una especie de entorno en blanco y negro y gris, pero eso no significa que no pueda seguir adelante y tomar esto. Acude a mi en los activos de color y tipo de show que ese sería un color diferente. Diferente contraste, Debilitar, Aclararlo un poco. O podríamos oscurecerlo y hacer que el inicio de sesión en tu cuenta sea un poco más ligero. Tenemos muchos botones aquí, y tenemos que pensar en una forma de simplificar esto aún más así que voy a pasar unos momentos tipo de trabajo con los botones aquí para ver si no puedo encontrar una especie de presentación y diseño más sencillos . Y hablaré de tipo de por qué terminé donde terminé 5. Marco de wire.: derecho. Entonces pasé una especie de minutos trabajando en este play out para tratar de encontrar lo que creo sería todo lo que necesitamos aquí y tal vez de manera general correcta, no tenemos que preocuparnos por los iconos ni nada específico, pero yo creo que esto es bueno que tipo de tengo este login con tu cuenta justo debajo aquí. Pero también, cambié el registro de creador por debajo porque queremos que eso sea un poco más obvio porque aún no tienen un login. Um, lo primero que van a hacer es echar un vistazo justo debajo del login con tus conteos. Solo estoy pensando en la experiencia del usuario aquí, pensando en lo que están pensando cuando personalmente inicio sesión. En realidad fui a mi teléfono y me metí en uno de los mapas. Sólo un poco de pensar en ¿Qué pasaría si no tuviera una cuenta? A dónde miraban mis ojos? Y van justo debajo del inicio de sesión a la cuenta. Pero al hacerlo un poco de investigación y estudiar y mirar ejemplos realmente es útil en este tipo de situaciones. Decidí poner el tipo de Facebook abajo. Vamos a poder tener ese muy bonito azul de alto contraste. Entonces van a Definitivamente No, eso es un login de Facebook y tipo de mantener eso abajo. Podría haber sido desplazado un poco más alto. Pero no quería tener tres botones uno al lado del otro porque cuando intentas firmar este acto muy rápido, vas a estar como, Ah, Ah, tú sólo por un segundo. Te vas a hacer una pausa hace. ¿ Qué botón presiono? Y podría ser temporalmente confuso. Y eso no queremos. Ahí va a poner el espacio suficiente para separar esas dos diferentes opciones largas y largas. Tan genial, sigamos adelante y sigamos adelante. Tenemos muchas pantallas que hacer. Adelante y hagamos el login con tu cuenta de Facebook. Entonces esta será una pantalla muy simple va a registrar, y vamos a dar autorización. Simplemente va a ser muy, muy sencillo. Se va a autorizar. Ponga autorizar Ahí mismo. El botón. Tienes que preocuparte por el estilo o el tamaño aún, así que esto es muy sencillo. ¿ Autoriza a Facebook para crear una cuenta. Probablemente va a haber una foto o logotipo en algún lugar de aquí. Pero una vez más, se está metiendo demasiado en los lados del diseño de como pararme ahí. Entonces esa es una primavera muy sencilla. No creo que necesitaran las otras opciones, pero autorizadas. Y entonces es bueno Dios de realmente registrarte e ir a la pantalla de inicio. Por lo que la siguiente opción es apuntarse a una cuenta, que podría ser un poco más tediosa, pero tratamos de que esto sea lo más fácil posible de un proceso. Vamos a seguir adelante y agarrar estos botones. Sólo voy a aguantar opción e ir a agarrarlo por aquí. De acuerdo, entonces esto se está registrando para una cuenta. Necesitamos algún tipo de encabezado. Adelante y agarra esto aquí y haz de eso un color diferente. Y esto se va a apuntar. Date de alta para obtener una cuenta y eventualmente tendrá que tipo de cambio estos iniciar sesión nueva cuenta . Está bien. Y esto de aquí abajo está cambiando mis pequeños encabezados. Aquí. Esta será la autorización de Facebook y luego iniciar sesión en pantalla iniciar sesión en casa. Está bien, genial. Por lo que ahora empieza a ver un marco de alambre muy, muy básico que se une. Hace que siempre guardes tu trabajo. Está bien. En mi computadora para salvar a este tipo que no se mete la pata. Entonces lo que podemos hacer es que puedo seguir adelante y volver atrás, conseguir un poco de ayuda aquí. Todavía lo vamos a personalizar. Y aquí está el lado con Ver si tenemos alguna información detallada. Aquí te dejamos un par de opciones de registro diferentes y queremos mantenernos consistentes desde una perspectiva de U I . Se quiere tener una especie del mismo estilo de burbujas en todo, y vamos a llegar a eso más tarde en maquetas de alta fidelidad para así que por ahora, es una especie de agarrar esta zona que es similar a lo que usamos antes. Y así que solo estoy usando esto es una especie de guía áspera, áspera, y realmente me corresponde solo agarrar algunos de estos cuadros de texto y no vamos a necesitar todos estos, así que solo estoy agrupando. De acuerdo, así que esto es lo que vamos a necesitar. Y me gusta este formato que tengo aquí, ¿de acuerdo? Y entonces también podemos especie de ver cómo está abajo. Tipo de mantener ahí esa consistencia. Entonces lo que vamos a necesitar vamos a tener un nombre de usuario. Llegaremos ahí en necesidad de configurar contraseña. Probablemente van a necesitar confirmar la contraseña. ¿ Qué otras cosas se requerirán? ¿ Qué en esto Algo donde podríamos platicar con la empresa e ir, cuáles son la información requerida? Vas a necesitar poder tener un usuario inscrito. Y eso va a ser a veces no. Estás bajo tu control. Eso podría ser bajo lo que la empresa va a querer de los usuarios cuando se inscriban para obtener una cuenta. Por lo que van a querer tener une macho Aiken disco te garantizo que van a querer tener un email para ti Alguna forma de contactarte y enviarte promociones y mensajes de venta. Definitivamente quieren tener correo electrónico. Entonces el correo electrónico, y así eso va a ser en este formato. Entonces solo estoy copiando y pegando. Engañó un poco. Tengo un poco de ayuda aquí de eso. Tú me plantilla, ¿ eres yo niño? Eso no es problema. Todo lo que acaba de armar un alambre deshilachado. Podríamos sentarnos aquí con un bloc de boceto y hacer lo mismo. Dónde está hacer trampa un poco haciéndolo más rápido en formato digital. Por lo que nombre de usuario contraseña confirmar contraseña correo electrónico. No vamos a necesitar datos, nacimiento o país. Queremos hacer lo menos posible, pero prácticamente puedo garantizar que eso es lo básico desnudo, que van a necesitar la seguridad para tener un correo electrónico. Es posible que incluso necesiten tener un correo electrónico de confirmación. Y eso es algo que podrías trabajar con desarrollador en capa en su una cosa muy menor. Um, pero mientras tengamos como que la estructura básica en los diseños se inscribió para una cuenta , eso es todo. No queremos tener todo pasando aquí, y me gusta mantenerlo en medio de la pantalla justo por ahí. De acuerdo, entonces eso es básico. No necesitamos realmente tener nada más. ¿ Necesitarías tener un botón? Aquí no tienes un botón. Adelante y tiremos la opción abajo y agarremos el botón aquí abajo y esto va a ser inscribirte , terminemos de apuntarte. Podemos trabajar en la redacción de copia o redacción de texto más tarde fue hacer botones básicos aquí, así que termina. El proceso de registro tendrá una pequeña flecha ahí eventualmente cuando lleguemos al lado del diseño , y eso es más o menos todo y entonces podría haber automáticamente iniciado sesión. Así que termina proceso e inicia sesión, Deja que los usuarios sepan que no tienen que volver atrás y escribir eso. Por lo que ahora tenemos son dos divisiones diferentes, y ambas de estas opciones de registro se van a cargar en la misma pantalla de inicio de sesión. Entonces cuando inicien sesión, van a venir a la pantalla de inicio. Vamos a ir al modo prototipo. Vamos a añadir otro tablero de arte aquí. De acuerdo, entonces enlazaremos todos estos hasta cuando hagamos el marco de alambre de alta fidelidad, Obtener el espaciado. Corregir si quieres, pero tendrá caminos que van por este camino y pasan que van por ese camino similar a nuestro flujo de usuarios que armamos. Entonces eso va a ser muy útil. Nos vamos a referir a ese flujo de usuarios que desarrollamos en el proceso U X. Para poder conocer tipo de flujo exacto. Vamos a ser alambre encontrando aquí. Entonces esta va a ser la pantalla de inicio. Vamos a pasar mucho tiempo en este. Es una pantalla muy importante. Todo el mundo va a volver a la pantalla de inicio varias veces en el proceso o cuando inicien sesión. Por lo que realmente queremos asegurarnos de que esta es una pantalla de inicio muy acogedora, que tengan acceso op a sus opciones para su cuenta. Pero también se pueden enviar en la dirección correcta. Entonces aquí estamos. Hagámoslo. Por lo que la pantalla de inicio de sesión es crítica. Por lo que queremos hacer de esto un simple es posible. Pero aquí va a ser una especie de reto es que tenemos un montón de cosas que necesitamos presentar un montón de opciones diferentes que necesitamos presentar al usuario. Necesitan poder acceder a su información de conteo, y necesitan ser enviados a la etapa Discovery de la app donde podrían descubrir qué restaurante o abarrotes ah, quieren usar. Entonces cuando las primeras cosas que quiero hacer es una especie de configurar un poco de menú aquí donde puedan acceder a sus cuentas, va a ser un encabezado pegajoso, va a estar en cada pantalla. Siempre van a poder tener acceso a esta pequeña pantalla. Va a oscurecerlo. Y hagamos como un pequeño círculo para nuestro usuario y que ese tipo de superposición un poco una vez más no se metan demasiado en el diseño. Tienen que volver a llover constantemente mi tentación de poner elementos de diseño y simplemente mantenerlo muy básico. Soldados asumen de fotos ahí. Vamos a agarrar una especie de este texto aquí, y vamos a tener nombre de usuario. No voy a entrar en el nombre de usuario especifico, y vamos a necesitar tener algún tipo de información de la cuenta. Aquí es donde sólo vamos a averiguarlo, OK, pongamos el nombre de usuario a la izquierda. Y podríamos tener un sencillo menú de hamburguesas para que pudiéramos tener tantas opciones como sea posible escondido a las que siempre tengan acceso. Y no ocupa mucho de bienes raíces de pantalla. Voy a seguir adelante y agarrar un ícono de menú rápido de hamburguesas. Desarrollé un poco de un diseño de aplicación móvil y mi masterclass UX. Otra clase separada que tengo y tipo de tener esto desarrollado. Y voy a ir a agarrar este tipo de menú de hamburguesas porque seguí adelante y simplemente no lo tendría. Si quieres saber cómo crear eso, vuelve a esas lecciones previas sobre el Dhobi X'd y podrás descubrir cómo crear cualquier icono imaginable. Voy a hacer click derecho. Necesito ONU link esto en Lincoln. No quiero que se vincule a un anterior, um, documentos. Aquí está nuestro pequeño menú de hamburguesas. Recuerda, Necesitamos hacer este blanco y negro y gris así haciendo gris, y eventualmente vamos a tener que explorar. Cuando hacen clic en eso, se desliza hacia fuera, cae hacia abajo. Eso lo resolveremos más adelante en el proceso. Pero necesitamos saber que al menos tienen acceso a sus cuentas. Tienes nombre de usuario, tenemos ajustes que vamos a necesitar. Este es un tipo de aplicación check out. Van a estar ordenando comida. Y así siempre va a haber un icono del carrito de compras que va a necesitar estar disponible para que puedan tocar eso. O bien echa un vistazo, ver qué hay en su carrito. Pueden tener 20 artículos en el carrito que necesitan revisar su parte. Por lo que siempre hay que tener que darle acceso a la configuración de su cuenta a través de este menú de hamburguesas . Pero también necesitamos darles acceso al carrito de compras. Entonces es por eso que la pantalla va a ser desafiante, porque pienso en todas estas opciones le estaban dando a los usuarios. Tenemos que hacer lo más fácil posible para digerir todas estas diferentes opciones y no abrumar al usuario. 6. Marco de wire.: en este caso, voy a ir a nuestro pequeño kit aquí mismo, y estoy en los elementos U I y tengo algunos iconos de dandy realmente dulces que podríamos agarrar sólo para encuadre de alambre rápido. Podríamos hacer un ícono final del carrito de compras más tarde, así que sólo voy a agarrar este pequeño icono de la bolsa. Solo lo estoy copiando para traerlo de vuelta a nuestro proyecto y sigamos adelante y traerlo. Ya es blanco, así que eso es muy conveniente. Cree que está vinculado. A ver si no podemos. A diferencia de lo simple que está en Link it. Ahí vamos. Ahora tenemos acceso a ella. Mantenga pulsado, cambiar y escalar un poco más grande que les encanta poder tener algún tipo de indicación de cómo maney artículos de compras o en la bolsa. Entonces por ahora, solo voy a hacer un simple círculo para que sepas cómo están los iconos de Maney ahí dentro. No voy a hacer que se lea. No voy a sumarle demasiado. Guiso impar número tres. Sólo para tener un ejemplo que siempre es agradable saber cuántos artículos tienes, sobre todo cuando se trata de compras de abarrotes. Es agradable saber cuántos artículos aire en tu carrito. Hagamos eso un poco más pequeño y hazlo de buen tamaño. Podemos finura eso después. Simplemente muy, muy básico. Ahí hay un poco de tres. Icono de nuestro carrito de compras. Un par de cosas que podemos hacer. Podría empezar a cambiar esto, a ver si no podemos dividir el menú de hamburguesas en el carrito de compras para que no lo hagan No están demasiado cerca el uno del otro. Se quiere dar demasiadas opciones demasiado juntas. Tampoco he tenido alguna separación natural de las opciones ayudará al usuario a descomponer esas opciones. De acuerdo, entonces tienes carrito de compras en el menú de hamburguesas derecho a la izquierda, y eso tiene sentido. Carrito de compras siempre pongo a la derecha porque la gente está tan acostumbrada a que el carrito de compras esté a la derecha. Casi no hay duda de que ahí es donde va a estar tan solo basado en el comportamiento del usuario . En el pasado, estoy teniendo ese carrito de compras en los derechos muy útil, y muchos sistema a la izquierda. Creo que la gente está acostumbrada a tipo de poder acceder por el lado izquierdo. Ah, entonces vamos a una especie de finura no siempre tenemos que tener una foto de perfil. Creo que en este caso podría hacerlo un poco demasiados elementos aquí arriba es todo lo que necesitan para tener tu nombre de usuario y pequeña pantalla. Entonces vamos a evaluar eso un poco más tarde para ver si eso es si tenemos espacio para la foto o no. Y así aquí es donde tenemos muchas oportunidades y flexibilidad con su disposición. Por lo que tenemos todos los artículos esenciales que necesitan para tener acceso. El encabezado pegajoso va a estar en cada pantalla que veas de aquí en adelante una vez que inicien sesión y lleguen a la pantalla de inicio que esos encabezados pegajosos van a estar ahí, así que eso va a ser consistente. Entonces ahora aquí es donde tenemos la opción. Aquí fuimos y lo hiciste ¿Eres x investigación? Y determinamos que queremos poder enviar a la gente a la dirección correcta de inmediato. Por lo que podría haber dos opciones principales una opción de entrega de abarrotes y una opción de entrega de restaurantes , y queremos enviar a la gente hacia ese camino lo antes posible. Entonces la forma en que pensé es tener una linda visual, solo una foto. Nada demasiado loco de cada uno y tener abarrotes. Y luego tenemos los otros restaurantes de opción disponibles. Quien sea simple dos opciones configuradas aquí. Tenemos restaurante en la parte superior de abarrotes en la parte inferior, y cuando hago una especie de burla de baja fidelidad, no estoy usando ninguna foto. Por lo que muchas veces cuando hago fotos, me gustaría apegarme al mismo tono de gris para que puedas entenderlo. Esa es una foto. Algunas personas, cuando dibujaron, harán el tipo X de líneas a través de la caja. Puedes indicarle una foto, lo que quieras hacer, lo que sea que te sientas cómodo. Simplemente voy a hacer este tipo de sombra más oscura para indicar una foto. Entonces eso es todo. Podemos cerrar un poco la brecha aquí con esto. Asegúrate de que el tamaño correcto, pero una vez más no gastes mucho tiempo en ello. Simplemente estás haciendo un diseño áspero. Sigues diciendo eso, pero siempre tengo que detenerme porque esto no va a ser ah y diseño aprobado. Vamos a volver atrás y retocar esto mientras platicamos al cliente ya que hacemos más investigación a medida que retrocedemos y probamos, puede haber algunos cambios significativos en esto. Por lo que no quieres dedicar mucho tiempo a algo que pueda terminar cambiando significativamente avanzando. Por eso no haces mucho del marco de alambre de baja fidelidad va a dejar ese exceso. Así es esto. Todo lo que necesitamos volvería a nuestro flujo de usuarios. Podemos tipo de revisión de los documentos UX como nuestra persona. Podríamos hacer nuestro mapeo de viaje del cliente tipo de pensar. Está bien. ¿ Hay algo más que necesitemos incluir mirar ese flujo de usuario si es por eso que desarrollamos flujo de usuario antes de entrar en un encuadre de alambre? Porque ahora como que tenemos una gran idea de adónde va a ir el usuario, a dónde pueden ir y qué opciones necesitamos tener. Entonces sigamos adelante y los mandemos a dos direcciones diferentes. Podemos enviarlos a un restaurante. Podrían conseguir una lista de restaurantes o pueden conseguir una lista de abarrotes. Entonces sigamos adelante y creemos el siguiente verde. Empezamos a ir un poco más rápido, ¿de acuerdo? Y también van a tener que aparecer una opción y lo que estamos haciendo. No vamos a duplicar eso todavía. Voy a crear tipo de la disposición para uno de estos y duplicado, así que no tengo que hacer el mismo diseño dos veces. Entonces empecemos primero con restaurante y voy a cambiar estos alrededor causa de mi flujo de usuario . Tengo abarrotes arriba y restaurante abajo abajo, así que va a mantener ese mismo formato, Así que este será el restaurante listará. Entonces van a dar click en restaurante, y esto es lo que van a ver. Hay muchas cosas que necesitamos incluir aquí. Podríamos incluir algún tipo de difusión de fotos. Amplía aquí la escuela cambia de nuevo al modo de diseño. Podríamos tener una foto aquí que tenga especie de restaurantes. O aún mejor, podríamos tener un mapa, igual que en nuestro flujo de usuarios. Estamos hablando de la idea de tener un mapa donde puedan ver qué tan cerca está el restaurante de ellos, por lo que podría tener mapa del restaurante. Esto tendrá 10 puntos con el tipo de los mejores y estás dentro de un radio de cinco millas . Voy a querer tener una lista. No queremos que ese mapa sea demasiado grande porque no queremos ocupar bienes raíces valiosas . Pero siempre podemos tener aquí una flecha para indicar que pueden ampliar el menú o el mapa hacia afuera. Vamos a tener algún tipo de icono para hacerle saber que pueden ampliar el mapa para hacerse cargo de toda la pantalla. Está bien. Y aquí tenemos una pequeña flecha que podemos usar copiar y pegar y tener que ser el ícono perfecto . No importa, porque vamos a terminar cambiándolo en algún momento. Eso será algún tipo de indicador. Siempre puedo desvincular esto. Y podría incluso editar este ícono si quisiera, solo para algo así hacerlo un poco más como una flecha hacia abajo. De acuerdo, para que sepan que podrían tirar de click en eso, y se va a expandir a través de la pantalla. Este será un mapa de restaurante o simplemente ponerlo ahí mismo en medio. Por lo que ahora tenemos necesidad de tener una lista de restaurantes. Voy a averiguar cómo lo van a pedir y cómo pueden averiguar el orden para que puedan pedirlo por relevancia son los más relevantes que pueden pedirlo por las mejores reseñas. Entonces vamos a necesitar tener algún tipo de búsqueda tipo de muelle de zona donde pudieran filtrar todo y luego necesitamos tener la lista en sí. Queremos seguir adelante y hacer esta zona de restaurante de filtro. No quiero ocupar una enorme cantidad de espacio porque necesitamos poder al menos listar para restaurantes en la mitad superior de la pantalla. Entonces teníamos que tener restaurantes de filtro aquí, sólo una especie de etiqueta simple. Y voy a hacer un par de cajas aquí para indicar formas en que pueden filtrar. Entonces tenemos que pensar en cuál, cuál, cómo queremos que sean capaces de filtrar. Ah, bueno, el 1er 1 es por opiniones. Vamos a seguir adelante y hacer que tu pequeña crítica burbuja. Trae ese trabajo para que revise nuestras calificaciones, solo haciendo de este botón perfecto causa siempre podríamos seguir adelante y hacer la herramienta de repito grilla y crear las otras Y también queremos tener un poco de indicaciones de ese tipo de forma puedan adelante y ten una opción de menú desplegable aquí, ahí mismo para que puedan dar click. Entonces sigamos adelante y tomemos nuestra pequeña agarrada. Nuestra flecha aquí no tiene que ser genial. Esto es una indicación de que saben que esta podría ser una opción de menú desplegable. Siempre queremos darle a la gente esa indicación de lo que es. De acuerdo, así que ese es un tipo de tu botón de calificaciones. ¿ En serio? Aproximadamente hecho. ¿ Qué más queremos hacer? Vamos a seguir adelante y dar click en la repetición. Voy a seguir adelante, resaltar todos esos elementos, y luego hacer la herramienta de repetición de cuadrícula. Y vamos a seguir adelante y hacer tres por ahora mismo. No quiero darle demasiadas opciones a la gente, y voy a hacer click derecho y un grupo la grilla. Entonces, ¿cuáles son algunas otras cosas que podemos, uh, hacer aquí para que la gente se filtre? Entonces tienes unas calificaciones tienes E t a. ¿Tienes tiempo estimado de por qué tenemos este mapa que va a enumerar cuánto tiempo va a saber, uh, uh, corte de tu ubicación Y así a medida que empecemos a desarrollar ese tipo de idea de e t Cuando te inscribes en una cuenta, ¿qué obtienes? ¿ Una necesidad de saber? ¿ Cuál es esta app va a necesitar poder tener que desarrollar esa capacidad para mostrarte cuánto tiempo tardaría un restaurante en particular en entregarte. Van a necesitar tu vestido. Por lo que aquí es donde vuelves a este registro original y vas ahí. Necesitas escribir en su ubicación o van a tener que dar permiso para que Geo te localice. Entonces esa es una especie de opción que necesitamos para empezar a encarnarse y algo que tal vez podría haberse desarrollado en el flujo de usuarios. Pero no es algo que yo pensaba durante ese proceso. Y eso está bien. Tienes que tener alguno que no pensar en cada pequeño truco para poner en tu flujo de usuario. Entonces pensemos en eso. Tenemos dos opciones. Podemos hacerlos poner en la información de su dirección de cuenta, pero creo que es mejor geoubicar Ah, esa persona porque pueden estar en el trabajo y un pedido de comida o sacar entregados a su trabajo. Entonces en lugar de tener un empatado a una dirección de domicilio, así que vamos a seguir adelante y a hacer alguna investigación, averiguar cuál es la mejor manera de tipo de presentar eso en el proceso, y volveré enseguida. 7. Cuadro de conexión de baja fidelidad: la pantalla de la lista: haciendo un poco de investigación sobre este tema. Pensé que sería mejor tener una pantalla pop up al iniciar sesión con Facebook, iniciar sesión o registrarse para obtener una cuenta. Entonces justo antes de llegar al tipo de pantalla de inicio vas a tener un pequeño módulo pop up son móviles que van a aparecer y te tienen, Ah, Ah, permitir el acceso a Geo, localizarte para encontrar tu ubicación y siempre tener un click . Permita siempre. Por lo que no tienen que tener eso cada vez que inician sesión, lo cual sería muy conveniente para los usuarios repetidos. Entonces lo que estoy haciendo no es una especie de metiendo la pantalla aquí mismo en este lugar justo donde tiene que estar, donde va a aparecer. Ahora mismo tengo Es una pantalla separada. Pero cuando empiezo a enlazar esto y el modo prototipo un poco más tarde en la clase, te mostraré cómo puedes, um, especie de indicar un pop up. Pero esto no va a ser una pantalla separada. Se va a poner encima de ya sea del criador, de esta pantalla, esta pantalla, lo que sea que registren sin embargo va a ser un poco más de golpiza ser otra pantalla, pero va a ser un pop up encima de ti a través de la pantalla de la pantalla, y puedes indicarlo y estás prototipando y modo de vista previa, y te mostraré cómo hacerlo un poco más tarde. Entonces tenemos ese tipo de paso crítico. Y fue genial que lo hiciéramos porque ahora la APP tiene acceso a tu ubicación, así que ahora podemos enumerarla por qué tan cerca? ¿ Por qué tan rápido te puede entregar ese restaurante, que sería et A, que es un tipo realmente único de calidad. Y tenemos que tipo de contacto con el desarrollador es si esto se aprueba para especie de ver lo posible que es, es realista poder buscar todos estos por ET A. Realmente nos encantaría eso. Si es demasiado caro codificar, tenemos que caer esa idea. Por lo que es un poco ordenado pensar en esto al principio del proceso. Entonces si necesitamos contactar a tipo de quién estaría tomando esto, quién estaría desarrollando esta codificación esto, podríamos empezar de pie, podríamos empezar de pie, involucrarlos en este proceso de planeación para que no les arrojemos sorpresas y nos vayamos. No podemos hacer eso. Eso es demasiado caro. Por lo que poder recortar el trabajo a través de estos temas y traer a otros integrantes del equipo a principios del proceso ayudará a todos. Entonces no quiero dar mucha opción porque, como lo hicimos, ¿ eres X discovery tipo de etapa donde hablamos de su persona de usuario? No tienen mucho tiempo. Nos dieron una vuelta de Marler de dos años. Quieren pedir la cena. El realmente cansado. Acaban de trabajar todo el día. Entonces, no lanzemos términos de opciones porque no queremos que esto sea demasiado complicado de una app . Entonces dejémoslo solo a las calificaciones y e t. A. Y también tengamos un botón de búsqueda porque sabes que van a querer buscar qué restaurante quieren porque pueden tener una idea. Ah, me encanta tu sabes, Texas Roadhouse, o amo a McDonald's, y quieren poder buscar el nombre. Entonces vamos a tener una especie de botón de búsqueda simple, y esto no va a ser un menú desplegable. Se va a tener un vaso aquí, Así que sigamos adelante y busquemos un ícono rápido para que pueda indicar que eso no va a ser un menú desplegable. Vamos a nuestra bonita, uh, uh, hoja de tramposos aquí, hacer de la sección de iconos. ver si no encuentro un vaso de aspecto rápido, lupa, lo que quieras referirme, hay uno que funciona perfectamente para lo que necesitamos para un marco de alambre de baja fidelidad. Tenemos que preocuparnos por el estilo de la marca. Entonces tenemos una pequeña búsqueda. Llamé aquí y pudimos averiguar la ubicación de eso más tarde. Simplemente queremos indicarle al cliente o quien sea va a estar revisando estos documentos y aprobándolos que esa va a ser una opción de búsqueda. Adelante y desvinculado esto para que solo pudiera convertirlo en un enlace en blanco y negro y luego podré tener acceso al color. Simplemente lo voy a hacer de ese color. Entonces eso es todo. Eso es todo lo que necesitamos para opciones de filtro. Y ahora estamos listos para empezar a hacer nuestra lista de restaurantes. Entonces ahora estamos pensando en las entradas del restaurante, y queremos poder encajar una buena cantidad aquí para que no tengan que sentarse ahí y hacer su dedo y voltear todo el tiempo para desplazarse hacia abajo. Por lo que queremos poder caber al menos cinco o seis restaurantes. Pero tampoco queremos que parezca abarrotado. Entonces llegamos a pensar en cuál es la información más esencial para poner en un listado de restaurantes , y lo exploramos un poco durante nuestro proceso. Pero aquí es donde realmente llegamos a averiguarlo y meterlo en un poco más de detalle. Entonces es Gwen Zoom adentro y lo que me encanta de, um, Adobe X T. Si quisiera seguir adelante y tener este terminado uno y duplicado una y otra vez, podría emitir la herramienta de repetición cuadrícula click en repetir cuadrícula, y podría seguir adelante y ver fácilmente cuántos de estos podría caber en la pantalla para que repita grilla para te va a ahorrar una tonelada de tiempo. Entonces pensemos en esto. Contamos con una calificación de búsqueda, lo que queremos poder buscar por calificaciones. Entonces déjame ver si no puedo agarrar un ícono de estrella o incluso simplemente diseñar uno aquí realmente rápido con una herramienta de pin. Aquí tengo mi estrellita. A ver si no puedo replicar esto por el lado derecho. Déjame hacerlo un poco más de contraste aquí. Y podríamos pensar un poco en la sombra del color. No necesariamente el color, sino tal vez el contraste del color. Entonces podemos pensar en tal vez hacer un relleno por enumerar un gris realmente claro, Um, O en este caso, incluso podríamos hacer un poco de fondo gris oscuro. Entonces solo voy a aguantar, opción y duplicar esto y traerlo aquí abajo y hacer una especie de gris realmente, realmente claro y luego hacer esta caja blanca para que realmente se salga un poco sobre el fondo. Simplemente ayuda al usuario a ver el listado en segundo plano. Antecedentes no tiene que luchar contra el listado. Hagamos que estas estrellas sean lo suficientemente grandes donde podamos ver la calificación, y lo que podríamos hacer es que podríamos hacer clasificaciones como en tener que mostrar cinco estrellas. Si se trata de cinco estrellas, tenemos que pensar en el tipo de sistema de calificación que queremos tener para esta app. Entonces nos vamos a quedar con Star System porque creo que vamos a agarrar algo de esto de otro sitio web de calificación. Además, vamos a estar agarrando información, así que tiene que ser algo con lo que podamos trabajar. El desarrollador podría sacar esa información de Así que una vez más, otra oportunidad para hablar con los desarrolladores. Averigua cuál es la mejor manera de mostrar nuestra cuál es la mejor manera de hacer el sistema de calificación pudiéramos hacer eso. Pero mira cuánto bienes raíces que ocupa esas cinco estrellas es un restaurante con calificación de cinco estrellas que está ocupando demasiados bienes raíces. Entonces una cosa que podríamos hacer es que la estrella indique una revisión, pero tenerla en un sistema americano. Hagamos la estrella un poco más grande, hazla más obvia. Hazlo un poco más alto. Contraste. Vamos a agregarle una especie de color oscuro, tener una calificación sindical, y entonces podríamos tener un sistema numérico. Entonces, duplicemos esto y digamos, 4.4 de cinco. Esto nos impedirá tener que hacer todas esas diferentes estrellas, y aquí podemos tener nuestro sistema de calificación. Hagamos que el sistema de calificación esté a la derecha es la información más importante va a ser el nombre del restaurante y el tipo de restaurante que es. Y ahora que acabo de mencionar que estás pensando, Oh, Oh, aquí es donde constantemente vamos de ida y vuelta Esto es parte del proceso de marco de alambre de baja fidelidad . Constantemente estás volviendo atrás y agregando cosas que olvidaste o obteniendo ideas y tratando de incorporarlo. Porque ahora que estoy haciendo la calificación me estoy dando cuenta y acabo de mencionar el tipo de restaurante , ¿no sería bueno seguir adelante y tener un filtro tipo restaurante a donde vas? Yo quiero comida brasileña. Yo quiero comida mexicana Eso va a ser realmente esencial cuando se trata de restaurantes para que sea una opción que vamos a necesitar incorporar a nuestra zona de búsqueda. Adelante. Sé que queremos mantenernos así de simple, pero creo que solo agregar una más, tal vez no hacer esta caja es grande. Podríamos seguir adelante y apretar eso sin tener que hacer una segunda fila. Ya veremos si podríamos hacer eso sin que parezca demasiado apretado, y vamos a tener que averiguar otro nombre para tipo porque eso no está muy claro. Um, quieres hacer Ah, restaurante, um, restaurante temático tipo restaurante, estilo de comida. Entonces déjenme tipo de investigación cuál sería la especie de mejor nombre para esa categoría, y volveré enseguida. 8. Contador de la pantalla de lista.: te darás cuenta. Constantemente voy en hacer investigación. Y esto es cuando haces amigos de alambre de baja fidelidad. No solo estás juntando las cosas constantemente deteniendo el proceso, haciendo investigación, tal vez hablando con tu cliente y yendo y viniendo para tratar de que esto funcione. No se va a diseñar todo en un solo día. Entonces lo que hice fue ir a los mis más cercanos son mis mayores competidores, que es grubhub, que no tiene entrega local, pero no tiene más en ciudades más grandes. Entonces vi como que tenían y lo llamaban cocinas. cual tiene sentido qué tipo de cocina tienes. Sandwiches mexicanos americanos, ese tipo de cosas. Entonces me dieron la idea de cocina de ellos y poder tipo de iniciar sesión en esta app y estudiarla y tipo de conseguir algunas ideas. También noté que tienen el mismo futuro que estaba queriendo incorporar con el mío, que es tiempo de entrega. Entonces poder ver como lo manejaban, no necesariamente copiándolos, no necesariamente copiándolos, sino simplemente consiguiendo una especie de ah, algunas ideas frescas y ya lo han implementado. Entonces es agradable ver una especie de acabado, diseñar exactamente lo que estoy tratando de hacer. Realmente ayuda a generar esas ideas. Entonces volvamos a nuestro listado. Por lo que tenemos nuestra calificación. A lo mejor queremos encontrar la manera de dividir un poco esto. Así que vamos a conseguir un poco de barra divisoria, porque cuando tienes un gran diseño diseñado cuando tienes muchos elementos diferentes juntos, siempre es agradable tener barras divisorias. Cajas de alto contraste formas de descomponerlo para que el usuario pueda ver como todo está bien categorizado en un espacio reducido. Entonces hagamos ese bajo contraste. Es que eso realmente ligero, Gracie. El bajo contraste aquí y me referiré mucho al contraste en esta clase quieres poder asegurarte de que podrías tener un nombre largo o un nombre corto, y funciona bien en ese espacio. Entonces muchas veces cuando hago nombres, hago nombres finjo. Hago nombres muy largos solo para poder tener el peor de los casos en cuanto a cuánto espacio voy a necesitar para caber ese nombre largo porque tienes este hermoso diseño. Pero si no dejas suficiente espacio para el nombre del restaurante o los datos que van a estar enchufados ahí. A los desarrolladores les podría costar trabajar con tu diseño. ¿ Quieres asegurarte de que tu diseño sea flexible? Podría funcionar con muchas longitudes diferentes. Es un nombre de restaurante que no nos gusta. Tenemos que tenerlo igual de grande, pero me gusta mantenerlo audaz. Vamos a tener que tener el estilo de la cocina. Entonces hay que tener a mexicano hacer un alineamiento a la izquierda y simplemente conseguir esto aquí abajo para tener un nombre de restaurante. Tenemos el tipo de la cocina, Tenemos la calificación, y también queremos quizá poner la e t A también, si queremos tener el tiempo que va a tardar en llegar. Lo cual es una especie de característica ordenada de nuestra aplicación en la que debemos pensar ¿Esto va a ser posible desde el punto de vista del desarrollo de la codificación, porque todavía van a necesitar algo de información para desarrollar una derechista. Ta. Si pides 50 enchiladas, va a tardar más de 10 minutos en hacer 50 enchiladas. Entonces tenemos que empezar a pensar ¿Es esto posible? ¿ Puedo conseguir un t t a en este punto o dos después del peso hasta que vaya a checar para poder conseguir mi TA allí. Entonces tenemos que pensar en eso como una posibilidad. Vuelve a desarrollador y lluvia de ideas. Por lo que es capaz de hacer un poco de investigación. Y me di cuenta de que, um, no vamos a hacer ET en este momento. No creo que vayamos a tener suficiente información para tener un ET A realista, especialmente de restaurantes locales que tal vez no tengan tiempo para dar retroalimentación de lo ocupados que están. Simplemente no va a funcionar, creo, creo, en el área local, a menos que sea una gran cadena de restaurantes que tenga la logística para manejar esa parte de la información. Entonces solo estoy poniendo ubicación lejos de la ubicación geo de donde estás actualmente, y también cuando estoy pensando en finalizar esta cuadra para poder replicarla, asegurándome de que tenga suficiente espacio para un nombre de restaurante muy largo y no estoy seguro eso es suficiente porque hay algunos nombres bastante largos de restaurantes por ahí, así que necesitamos poder saber que podría colapsar hasta dos líneas de tipo y tener suficiente espacio aquí, por lo que no cambia el tamaño de la caja. Entonces eso puede significar que tenemos que meter esto hacia abajo para que todo esto pueda enviarse hacia abajo por una línea. Entonces solo necesitamos asegurarnos de que nuestra caja va a ser lo suficientemente grande. Desarrolladores realmente, muy buenos para conseguir. Apreciar que, um, tener suficiente espacio para que tengan vidas colapsadas de tipo. Tipo de tener en cuenta al desarrollador. Ayudará a todos en el proceso. Seguro que tenemos suficiente para caber curso. Siempre podríamos hacer las cosas un poco más pequeñas. Está bien, así que ahora puedes tener dos líneas. Eso lo había creído en su escuela. Y sigamos adelante y llevamos esto de nuevo. Sabemos que automáticamente colapsará. Tenemos suficiente espacio, tan genial. Entonces si nos sentimos contentos con esto, quería tener una especie de indicación aquí a la derecha, tal vez un color de alto contraste, color de marca o rojo, o algo donde puedan indicar que podrían ir al aterrizaje de la página web o de este restaurante y empezar a agregar elementos del menú. Entonces creo que estamos listos para replicar, así que voy a seguir adelante y solo agrupar esta caja grande. No creo que necesitemos a este tipo por aquí, así que solo voy a estar agrupando esta burbuja y vamos a seguir adelante. Hacer repetir herramienta de cuadrícula. Me encantaría encajar. Mi meta fue cinco. Me encantaría caber seis, pero no quiero que esté abarrotado. Entonces veamos cómo se ve seis. Podemos seguir adelante, ir en las columnas y se derrumba. Así se verían seis. No creo que eso esté demasiado abarrotado. Siempre podríamos volver atrás y agregar solo un poco más de espacio. Entonces vamos a estar sumando 10 píxeles entre o 12. Ve cómo se ven 10 píxeles entre cada escucha Y me encanta especie de la forma en que el fondo tiene ese gris claro porque realmente ayuda a especie de ese blanco salir mejor Si no teníamos el gris, todo empieza a mezclarse. Es difícil diferenciar dónde está el listado del restaurante de fondo. Pero sólo tener ese color diferente ayuda tremendamente con poder encontrar y descomponer esa información. Entonces vamos a encontrar a esto sólo un poquito. Recuerda, no queremos llegar a pesado en el lado del diseño de las cosas. Vamos a cambiar esto. Yo solo quiero asegurarme de que todo esté alineado. Entonces tenemos la búsqueda alineada con el final de eso. Entonces todo tipo de tiene una mirada consistente. Lo mismo con aquí. A lo mejor podríamos seguir adelante. Tomaron eso juntos para que este lado izquierdo esté alineado con los listados de restaurantes. Así que quería conseguir un tipo de fondo blanco ahí para las burbujas que se quieren alejar en un momento difícil encontrarlas. Se estaban mezclando con el fondo por la misma razón que estos estaban teniendo dificultades aparecer sobre un fondo blanco. Así que sólo un poco de contraste entre ese fondo en ese color de fondo alejando el zoom. Vamos a tener una buena idea del diseño. ¿ Todo es fácil de encontrar? Podría leer claramente el nombre del restaurante haciendo todos los elementos digeribles, fáciles de leer, entender. Dwight tiene los iconos correctos para poder indicarle que necesito a lo que necesito hacer para que eso se expanda como este mapa quería expandirme y apoderarme de la pantalla es que suficiente indicación es todo tipo de fácil de leer. Entonces esto es lo que necesitamos para especie de tipo de clavo hacia abajo antes de seguir adelante. Porque cuanto más nos metamos en el proceso, más vamos a empezar realmente a tener una idea de cómo va a fluir esta aplicación. Y cuando empezamos a hacer el diseño de alta Fidelity, qué es genial de hacer en un Adobe X'd ya que verás lo rápido que es convertirlo en un pulido de marca, um, diseño pulido de marca, um,después porque literalmente vamos a caer . Las fotos iban a cambiar de color, y realmente va a empezar a cobrar vida. Y eso es lo que tanta necesidad de hacer alta fidelidad de marcos de alambre de mi cosa favorita que hacer. Entonces estamos llegando ahí. Tenemos el letrero en pantalla. Lo maravilloso de esto es este lado y pantalla para restaurante para abarrotes. Va a ser lo mismo, así que sólo puedo copiar y pegar esto nuestra pizarra y tener un ir aquí arriba. Por lo que esta será una rama de la decisión y el tipo de encuadre alambre de viaje del usuario, y van a dar clic en un restaurante y bajar al restaurante y continuar con el proceso de check out. Ah, también podrían ir al abarrotes si quisieran. Por lo que es agradable mostrar esa opción de marco de alambre. Y simplemente cambiaríamos todo esto a la tienda de comestibles para fines de marcado. Recuerda, Sticky Header va a estar en cada pantalla. Entonces aquí estamos. Esto es lo que tenemos hasta ahora. Mira lo que ya hemos hecho. Tenemos un slog y opciones de registro de pantalla. Tenemos una caja pop up para ayudarnos a obtener la información que necesitamos del usuario para hacer nuestra búsqueda más adelante, tenemos nuestras opciones de restaurante de abarrotes. Los llevamos a abarrotes o restaurante. Y ahora estamos listos para hacer la página de aterrizaje del restaurante. Por lo que obtienen un selecto una de estas opciones. A lo mejor la que es la más valorada. A lo mejor van a dar clic en las calificaciones y dar clic en la más alta y dar clic en la de arriba. Entonces van a ir a la página de aterrizaje de EU. Sólo vamos a ser los siguientes. Vamos a seguir adelante y copiar y pegar esto. Entonces vamos a cortar para mantener la, uh, esta cajita aquí. Y en lugar de hacer de esto un mapa, vamos a tener un mapa. Posteriormente. Vamos a hacer de esto una foto del restaurante. Ya no necesitamos estos filtros. Ha bajado el filtro desde que borra eso. No va a necesitar todas estas opciones y lo que queremos seguir adelante y empezar a tener el menú tipo de en el mismo estilo. Entonces creo que eso es exactamente lo que vamos a hacer. Uno en grupo esta grilla. Y solo necesitamos la opción muy top para que podamos seguir adelante y personalizar esto. Entonces ahora tenemos que pensar en lo que queremos en la página de aterrizaje del restaurante. Lo que es importante ver después de que tienes tipo de ganas de explorar el restaurante Ah, foto de alimentos por los que puedes desplazarte fueron probablemente lo que quiero saber. Yo quiero saber cómo son los entrantes? ¿ Cómo se veían? Apetitivo. Y así está estas fotos podrían ser una especie de cosa deslizante donde podrías tomar tu dedo y simplemente tener un carrusel deslizante. Hagamos eso. Digamos que indiquemos, Ah, carrusel. De alguna manera podríamos hacer eso. Es tener un par de repetición. Se va. Quita el borde de los círculos de repetición que indican cuántas fotos hay disponibles para desplazarse . De acuerdo, esto será un poco de educación. Y tal vez podríamos tener una indicación. ¿ Dónde estás, Steve? Una foto. Ponga eso en segundo plano. Déjame hacer esto un poco más oscuro. No la frontera, sino Phil. Y eso puede indicar especie de la foto. Y esto podría indicar tal vez ves un poco de la otra foto al lado. Y lo que me encanta de esto ese tipo de te da un pequeño adelanto. Entonces, ya sabes, tipo de qué? ¿ De qué manera quieres deslizar uno de deslizar a la izquierda o a la derecha? Qué foto luce más apetitosa en un pequeño teaser en los lados izquierdo y derecho. Eso es un poco agradable. Nicotrol. Esos aire alineados adecuadamente, podríamos tener un ser enmarcado así. Más espacio entre nuestras fotos. Es un poco más obvio hace no. Entonces hay una especie de nuestro tendría el nombre del restaurante. Entonces sigamos adelante. Duplica ese nombre del restaurante. Necesitan tener eso en alguna parte. Entonces podríamos tener restaurante llamado aquí abajo como un encabezado y hacer eso más oscuro, y luego nuestro sistema de menús. Entonces aquí está nuestro menú. No quiero tener tal vez tipos de menú. Y luego, en lugar de tener que seguir enviándolos. Ya lo estamos enviando a muchas pantallas diferentes, así que podríamos usar menús pop up. Podríamos hacer deslizamientos. Podríamos hacer Ah, menús que se expanden pero no necesariamente traen a otra pantalla. Tan solo intenta reducir la cantidad de pantallas totalmente diferentes que el usuario va a tener que saltar a la orden. 9. Lista de menú: Ahora tenemos que pensar en cuándo estás en la página de destino. Cuál es la mejor manera de presentar todos los diferentes tipos de menús que tienes porque tienes aperitivos, entrantes, postres , platos pequeños, top us tenemos montones de diferentes categorías, y no queremos abrumarlos. Siento como un formato de lista si hiciéramos un formato de lista y podría ser un poco duro, porque tal vez lo que están buscando está al final de la lista. Y tienen que revolver para conseguir entrantes de dedo o escuela para conseguir postres. Entonces estoy pensando que tal vez un diseño basado en columna lado a lado podría funcionar un poco mejor, y así podrían ver más un poco más arriba en esto en la pantalla. Entonces vamos tipo de justicia parece hacer un pequeño Warner muy ligero. No voy a pasar demasiado tiempo en eso y frontera con aligerarlo y vamos a ver si no podemos usar la gran herramienta de repetición. Entonces vamos a conseguir aquí nuestro pequeño título, y este será postre. No hay todo eso. Vamos a ser postres, pero vamos a poder tener una idea. Hagamos una alineación central de cómo va a quedar esto. Lo que voy a hacer es quizá tener una oportunidad de tener ahí un símbolo o foto que indicara un postre. Entonces para indicar un ícono, sólo voy a ir a guisar un círculo de avión. No vamos a diseñar. El ícono lo hará en la siguiente fase, pero tenemos que asegurarnos de que tenemos espacio suficiente para nombres muy largos. No todo va a ser un nombre corto, conciso. Vamos a mantenerlo ancho. Consigue un grupo it. A ver qué se ve esto. Con la repetición, Gran Herramienta se debe a columnas y hagamos seis de profundidad. Hagamos ocho. Sólo para realmente asegurarnos de mostrar un nombre de restaurante que nuestras categorías de restaurantes que pueden tener muchas categorías de restaurantes. Hagamos el mismo ancho y la columna aquí. Entonces vamos a ver cuántos píxeles ese IHS eso es Ah, es a 14 y vamos a hacer 14. ¿ Qué opinas? ¿ Crees que eso funciona? Porque ahora tenemos que pensar en cuál es el siguiente paso si quieren pedir un postre. Y así estoy pensando, ya sabes, no estoy seguro si esto está funcionando, porque si haces un pequeño menú desplegable. Digamos que hay un pequeño pop-down. Entonces podrías salir así y podrás agregarla. Pero creo que desde un punto de vista de desarrollo desde el punto de vista de la codificación que tal vez pueda tener algunos problemas con el menú pop out. Entonces en realidad voy a desechar toda esta idea, y voy a volver a esta idea de hacer las columnas. Te has dado cuenta de cómo tuve que probar eso? Tenía que probar eso al mar, pero iba a funcionar o no. Y no sabía que iba a funcionar hasta que empecé a pensar en que podía tener dos deberían enviarlo a toda una pantalla separada. Y quiero evitar eso. Entonces esto simplemente no va a funcionar por esa razón voy a mantener esto alrededor por si acaso lo necesito más tarde. Deslice eso hacia fuera. Por lo que reelaborando esto un poco para tener un mejor tipo de acción de menú pop out cuando sucede , simplemente haciendo algo muy sencillo. Eso es una especie de ir a través. Pero lo hice mucho más delgado o así puedo hacer la herramienta de repito grilla y encajar al menos seis de estos tipos, todo en un punto muy bonito, conciso estaba cerrado. El colapso, el patrón aquí un poco. Entonces tal vez justo aquí. O sea, alzas, entrantes, postres . Simplemente sigues bajando por la lista. Y entonces necesitamos tipo de averiguar qué va a pasar cuando hacemos clic en el tipo de opción expandir . Y eso será algo así en la siguiente pantalla, donde vamos a desarrollar eso. Deshazte de todo esto. Todos estos artículos, chicos, vamos a duplicar algo que tenemos aquí, y esto será lo que pase con la expansión del menú. Entonces, ¿qué va a pasar? Desapático bajo grupo la grilla, podríamos tener acceso a todos estos y los enviaremos abajo, así que va a ser una especie de desplegable estilo acordeón. Esto podría haber caído con todas las diferentes opciones aquí. Y recuerda, igual que lo hemos hecho antes. Tenemos que asegurarnos de que tenemos espacio para nombres muy largos porque hay algunos nombres de einem de lado muy largo en los restaurantes. Entonces, tal vez reduzcamos el tamaño del texto, y tal vez sólo necesitamos tenerlo como una espera regular. Por lo que eso dejará mucho espacio para opciones de tamaño muy grande. Tenemos un carrito de compras necesita poder agregar estos artículos al carrito de compras. Por lo que necesitamos una especie de signo más o menos para poder indicar que quieren cuatro papas fritas. Quieren solo una fritura y algún tipo de botón que indique agregar al carrito. Entonces tenemos mucho espacio aquí para poder hacer eso. Entonces vamos a hacer eso a continuación. De acuerdo, así que pude trabajar un poco en esto y conseguí un par de botones muy arcade para indicar el tipo de acciones que el usuario necesita tomar para poder agregarlo a la bolsa. En este caso, estaba llamando a un carrito, pero creo que probablemente necesitamos llamarlo bolsa. Se va a ir de compras. Es agradable poder agregar cosas a una bolsa. Cuando vas a recogerlo en el restaurante, estás sumando a unas bolsas. Este tipo de estamos encontrando un poco de ese lenguaje mientras trabajo a través de este proceso, y así vamos a necesitar tener un botón que indique, agregar la bolsa. Entonces sigamos adelante y hagamos un poco de un botón de contraste más alto y sigamos adelante y cambiemos la factura. Por lo que ese tipo de ayuda a que ese elemento salga y no compita tanto con la adición a los artículos. Entonces puedes decir como este tipo de un voluminoso tú yo diseñé en este momento lo vamos a refinar un poco más tarde. Pero creo que en términos de habitación, debería tener suficiente espacio para poder llenar aquí las opciones. Siempre podía hacer el tipo un poco más pequeño, moverlo un poco hacia la izquierda. Y cuando hacemos el tú que diseño, siempre podemos derrumbarnos. Haz esto un poco más refinado para darnos un poco más de espacio para nombres de opciones laterales más largos . Entonces lo que voy a hacer aquí es que voy a pensar que todavía tengo esto como la herramienta de repito de cuadrícula. Se va a derrumbar de nuevo y quitársela de la cuadrícula de repetición para que pudiera tomar esta opción , rupela juntos y repetirla con el tipo dentro. Entonces creo que hicimos cinco opciones y vamos a colapsar eso aquí abajo, podríamos poner un poco de espacio entre él. No estoy seguro si eso ayuda o no. A lo mejor sí. Una cosa que quiero hacer antes de hacer todo esto. Déjame aligerar el trazo en la frontera. No queremos pensar en una frontera, Así que déjame bajar y hacer que esa montura sea una. Hagámoslo un 0.6 Solo como para levantarse un poco. Ahora estoy listo tarifas. Y ahora, ¿qué tipo de presentación? ¿ Qué pasa cuando se derrumba? Hacen clic en este botón. Esta no es una pantalla del todo diferente, pero es algo que vamos a ser capaces de no haber mostrado animación. Cuando hacemos un modo prototipo cuando vinculamos todo juntos, vamos a mostrar el menú pop out slide out para que lo tuviera en una pantalla separada en X d. Um, para poder lograr esa animación, aunque no va a ser una pantalla separada para el usuario. Genial. Entonces vamos a alejarnos, a ver qué tenemos hasta ahora, por lo que ahí, capaces de agregar diferentes elementos secundarios. Entonces ahora vamos a seguir adelante y dar clic a los usuarios que van a hacer clic en el carrito de compras, van a estar listos para checar. Entonces ahora que estoy pensando en OK, estás agregando opciones a tu bolso. ¿ Ahora qué? Entonces digamos haber agregado la opción uno y la opción a una opción tres. ¿ Cómo puedo volver a salir? ¿ Simplemente voy al carrito de compras? No es obvio lo que haces a continuación, así que necesito poder encontrar una manera de volver a la página de aterrizaje del restaurante, para poder tener especie de pantalla de check out o tener la opción de check out siempre inmediato. Entonces, ¿simplemente agregando algunos otros elementos detallados que dedo del trabajador quiere tener una página de aterrizaje? Ni siquiera podríamos tener la opción de poner alguna copia, tal vez un par de frases sobre el nombre del restaurante y también necesitamos tener un lugar para encontrarlo en el mapa. Entonces vamos a necesitar poder tener eso como una opción a. Entonces voy a cambiar esto y tener tal vez un ícono de mapa, ver si no puedo encontrar un ícono de mapa aquí en nuestro pequeño tú elementos una vez que no va a ser un buen o realidad sabes qué mejor manera sé exactamente lo que podemos hacer. Podría entrar a Adobe Illustrator. Voy a conseguir mi paquete de branding que tengo juntos. Y tengo el ícono de voluntad perfecto para indicar un mapa. Entonces vamos a usar eso. Esto es parte de nuestro branding para nuestra, uh, nuestra app. ¿ Por qué no incorporar elemento operativo de su app al diseño del icono? Entonces déjame ir y agarrar un par de estos y exportar estos para que pueda tenerlos como iconos en el W x d. 10. Carro de compra: Estoy modificando nuestro diseño, agregando todo tipo de detalles que son necesarios para que el usuario tenga toda la información que necesita para revisar adecuadamente y agregar al carrito. Por lo que queríamos tener la opción BAP. Yo quería mostrar lo lejos que estaba el restaurante de su ubicación, y también pueden hacer clic en esto y una pequeña caja pop up irá adelante y cargará un mapa que mostrará especie de una e t. A. En base al orden que pusieron en su corte. Y quería asegurarme de que teníamos calificaciones aquí y algunos de esos detalles que estaban en la página anterior para que pudieran tener consistencia con la página de aterrizaje. Por lo que también quería tener o de ustedes botón de orden en la parte inferior si alguna vez fueran a confundirse y no saber que estaban listos para checar cuando tengan una orden de revisión, tipo de recordarles que podrían seguir adelante y echar un vistazo. Y también quería tener una indicación aquí de que cuando se agrega algo a los carros, algo pasa y podríamos hacer una animación cuando vamos al diseño de alta fidelidad que puede indicar tal vez esto se acerca un poco de pop-ups. Ella no cambiaría su color para saber que podrías hacer click aquí arriba para hacer el proceso de check out en cualquier momento. ¿ Quieres añadir algo al carrito? Entonces vamos a hacer eso. Vamos a añadir otra pantalla aquí, y esto sólo va a ser para la animación para más adelante. Simplemente vamos a seguir adelante y mostrar cómo se ve eso y el marco de alambre de baja fidelidad para que podamos mostrar al cliente tipo de cómo lo que planeamos hacer en cuanto a la animación y espectáculo. Ah, claro indicio de que ahí que el proceso de check out está listo para proceder. Entonces, ¿qué podemos hacer aquí? Podemos hacer esto un poco más grande. Podríamos tener esto un poco más grande y vamos a hacer una animación más tarde, así que vamos a hacer que se baje cuando podría hacerlo bastante todavía. Simplemente vamos a mostrar qué cambiaría cuando algo se agrega a los autos. Digamos que se añadieron dos artículos a la tarjeta. Digamos que esto se invierte dirá que se oscurece y el número se va más ligero es para mostrar indicación de un cambio. A lo mejor es rojo. A lo mejor es un color diferente, y podemos indicarlo para que el usuario quiera hacer click en eso. Entonces cambiemos la sombra aquí. Sé que solo estamos haciendo blanco y negro por ahora, pero indiquemos que suceden muchos cambios. Por lo que el agregar al carrito esto agregará automáticamente la tarjeta y tendrá un poco de animación pop. A lo mejor es que se acerca y se acerca sólo una cantidad muy pequeña. Tan fantásticos fueron muy acercándose mucho. Mira lo lejos que hemos llegado hasta ahora en el proceso. Todas las pantallas a las que nos estamos burlando y vamos un poco más allá de lo que mucha gente hace es marcos de alambre de baja fidelidad. Mucha gente está dibujando esto en papel, así que no están pensando en estos pequeños detalles que somos. Pero cuando se trata de desarrollar el marco de alambre de alta fidelidad, realmente tenemos mucho hecho. Hemos hecho mucho trabajo de base en cuanto a dónde iban las cosas que sólo tenemos que afinar el lado gráfico Así que ahora que tenemos esto hecho, ¿cuál es el siguiente paso? Vamos a nuestro diagrama de flujo de usuario allí agregaron cosas en el carrito. Ahora van a querer poder revisar y revisar el auto para ver cuánto es todo. Por lo que necesitamos una especie de página de check out CARRO o, en este caso, una pantalla de bolsa de compras que va a vivir impuestos en total y cuánto cuesta esta app como tarifa de servicio. Entonces aquí está nuestra pantalla de la bolsa de la compra, así que vamos a seguir adelante y titulo Algo adelante, hazlo. Ah, bolsa de compras y queremos poder empezar a mostrar la e t A. Ahora que sabemos tenemos la cantidad que se está ordenando. Conocemos el restaurante. Conocemos la ubicación. Tenemos todos los datos que necesitamos para poder mostrar en E. T. A. R tiempo estimado de llegada para nuestra entrega de alimentos. Entonces en lugar de tener estas fotos arriba, podríamos tener la oportunidad de hacer de esto un mapa. Por lo que este será un mapa visualizable con un e. T. A. Eran dos personas tienen este ícono ir a usar nuestro pequeño símbolo de marca que tenemos en nuestro logo es su ícono. Podría ser capaz de desarreglarme esto y cambiar los colores y una vez más sólo mantenerlo simple orgullo. Sólo la sombra ahí. Por lo que esa será especie de la indicación de dónde se encuentra. Vamos a tener un botoncito, y yo tengo, creo, el perfecto. Voy a seguir adelante y abrir por poco engañar ella aquí y ver si no puedo encontrar algo indique la e t. A. Ten una burbuja para poner el número, Ve lo fácil que es una vez que tipo de tener algunos de estos diseñado. En ocasiones volveré a proyectos anteriores y te agarraré yo elementos de ahí. Ahí está eso es perfecto aquí mismo. Es lo que quiero. De acuerdo, entonces esto va a indicar et a. Digamos que E t. A va a ser. Digamos que es un tiempo de llegada de 12 minutos, 12 minutos. Ahí está et A. En el mapa Bolsa de compras. Ya no necesitamos esta información. En nuestro diagrama de flujo, pudimos ver competidores, restaurantes cercanos que tal vez tenían un tiempo de entrega más rápido, así que queremos poder tener eso en nuestro marco de alambre también, porque creo que eso es un poco aseado característica para tener. Entonces tendremos por aquí. Y esto va a ser un poco genial fuera porque no queremos que la gente mire eso . ¿ Ves eso? Esa es su hora de llegada. Hagamos eso un poco más oscuro, Bray y hagamos eso. Vamos a tener que apuntar con Eero, y este será restaurante alterno por aquí. Vamos a tener que descifrar algunas formas gráficas para asegurarnos de que eso sea obvio. ¿ Haremos el diseño de alta fidelidad? Que ese no es el restaurante es el restaurante del que están revisando? Este es el restaurante del que se les va a dar una opción. A lo mejor es un tiempo de entrega más rápido, más rápido, acuerdo, y es de un tipo similar. Entonces tal vez esto es comida mexicana, y carga otro restaurante mexicano que pasa a tener un tiempo de entrega más rápido. Entonces en lugar de ofrecer algún restaurante al azar tenía y quiero chino, quería mexicano que esté dentro de la misma categoría de tipo de comida. De acuerdo, así que aquí hay una bolsa de compras. Ya no necesitamos todos estos elementos por lo que podemos eliminarlo Estamos para mantener nuestra orden de revisión o vamos a decir compra ahora orden de fin a fin será el muy menos pero al final. Y no queremos la pantalla. Hicimos una especie de investigación U X y decidimos que queremos tener una pantalla de check out muy, muy, muy simple. Sólo queremos una pantalla. No queremos que el usuario tenga que desplazarse, así que sigamos adelante y colapsemos esto para que el usuario no tenga que desplazarse. Vamos a hacer todo lo posible para asegurarnos de que vayas y hagas esto. Haga clic arriba arriba al nombre de mi tablero de arte superior y consiga que sea del tamaño de la pantalla. Genial. No quieres que se desplazen. Queremos realmente tratar de mantenerse concisos. Si no podemos sacar los menús Lo hará. De acuerdo, así que esto será, uh, ser alimento elemento uno. Vamos a tener una especie de eliminatoria. Tenemos que poder sacar del carrito. Entonces lo que voy a hacer es seguir adelante, pedir prestado de la pantalla al otro lado del camino. Siempre llegó a darle a la gente la opción de quitar y volver atrás en el tiempo. El aquí es tipo de nuestro artículo remover. También queremos darles opción de no solo quitar el artículo, sino de quitar tal vez uno. A lo mejor hay cinco y ahí, pero en realidad sólo querían cuatro papas fritas, pero hay cinco papas fritas que necesitamos conseguir. También dales la opción de sumar restar. Entonces sólo voy a pedir prestados estos elementos ya que ya los firmé. 11. Terminar la compra: Pasé unos 10 minutos trabajando a través de estas dos próximas pantallas, y quiero como caminar por tipo de por qué tomé algunas decisiones de diseño que tomé. Por lo que tenemos especie de este proceso de check out muy sencillo. Queremos tener una sola pantalla. No queremos tener que desplazar proceso de check out, y pensé listar todos tus artículos y tenerlos sean plegables pero también tener los impuestos listados. Hay una tarifa de servicio y entrega, pero también tener un área donde pueden teclear y agregar un propina porque es agradable poder entregar algo y no tener que preocuparse por dar propina a nadie. Ya es parte del proceso y el final de muy fácil de leer Total y un botón de orden ahora y para que cuando hagan clic en el botón de pedir ahora, vengan a esta pantalla. Pude conseguirme esto de la hoja de tramposos un poco tú, kit que descargamos de Adobe el kit de marco de alambre Will, y eso me ahorró un montón de tiempo teniendo que teclear todas estas cosas y averiguar qué se necesita para una tarjeta de crédito. Fue realmente agradable copiar y pegar esto. Podemos adaptarlo a nuestro propio estilo más adelante. Pero sí agregué esto Agregar cartera de tarjetas de crédito porque queremos es la primera vez que están revisando. No tienen tarjeta de crédito archivada, así que vamos a tener que darles en la opción de agregar una tarjeta de crédito para que todas ellas tengan que ir a hacer este paso la próxima vez. Simplemente será querer usar tu tarjeta en archivo pop up box y ellos hacen clic, Sí, y así empezamos a realmente encarnar esto. Hacer todas las opciones disponibles para el usuario al diseño. Vamos a tener que tener esa pequeña caja pop up diseñada eso también. Entonces hay, ya sabes, este momento sólo estamos consiguiendo lo básico así que lo haremos un poco más tarde a medida que nos metamos en el proceso. Entonces realmente hay tipo de pantalla tres pantallas que el usuario pasará por el proceso de check out , y podríamos pensar que fue demasiadas? ¿ Hay alguna manera de consolidarse? No creo que haya. Estoy tratando de trabajar en simplificar aún más este proceso. Aquí es cuando podría hablar con algunas otras personas que tienen propiedad en este proyecto y averiguar cuáles son sus pensamientos e ideas, sobre todo hablando con los desarrolladores que pueden tener ah, solución son ciertos pop up una opción slide out que podría hacer que este proceso sea aún más rápido. Entonces por ahora mismo, para marco de alambre básico y obtener algunas ideas del proceso general, creo que esto funciona bien. Revisan el orden que revisan, hacen clic fuera orden ahora, y tienen que agregar adopción. Y luego va a quedar una pantalla más después de esto. Y va a ser lo que pase cuando tengan un exitoso proceso de check out y va a mostrar el E. T. A. Es una pantalla de mapa realmente grande. Entonces lo que podría hacer es duplicar uh, algo aquí arriba. A lo mejor aquí ya tenemos un mapa y sólo ampliar eso un poco más allá. Va a mostrar cuánto tiempo va a tomar. no necesitamos a los competidores er, ya que se adelantaron y hicieron su pedido. Ponga esto frente y centro, y creo que si volvemos al diagrama de flujo de reserva, teníamos especie de la opción de contactar al restaurante si querían cambiar el orden. Entonces vamos a copiar este botón para que eso pudiera ser, Ah, cambiador de orden, orden de anuncios. Y ese botón tendrá una pantalla pop up que tendrá acceso al número y tal vez un mensaje de texto capacidades para contactar con el restaurante. Entonces hagamos otra opción creo que volvería al diagrama de flujo de usuarios que creamos. También está la capacidad de quizá revisar, pero eso no va a llegar hasta un poco más adelante en el proceso. Por lo que tenemos. Les estamos dando opción de cambiar o agregar orden. Hagamos realmente grande la NAPA, y esto se actualizará pero un poco más grande. A medida que la persona se acerque, será como uber donde cambie el curso donde obtengan el cambiará y luego tendremos la pantalla tras entrega exitosa que les pedirá que revisen la experiencia. Por lo que la entrega exitosa y tendrán una capacidad para poder calificarla Así, entrega exitosa. Tendremos, como tal vez un bonito gráfico. Es una oportunidad para hacer algún tipo de trabajo de diseño más adelante, va a poder cruzar la venta. Queremos enviarlos de vuelta, interesados y pedidos de abarrotes, consiguiendo que se emocionen con ese siguiente paso. Por supuesto, sus carros van a bajar a cero porque acaban de revisar. ¿ Verdad? Por lo que aún queda mucho por diseñar. Tenemos que diseñar los menús pop out. Tenemos que diseñar lo que sucede cuando hacen clic en la tarjeta. Si va a haber un pop up The New Yorker, va a ir directo al carrito. Hay muchas cosas que necesitamos desarrollar. Esto es sólo un ángulo. Es este un viaje a través, saliendo de un restaurante, Todavía necesitamos que revisen un nuevo abarrotes Si no hicieran eso esta clase, porque tardaría de 20 a 30 horas en diseñar realmente cada pantalla en la baja fidelidad manera. Entonces nos vamos a centrar en este proceso que hicimos y trabajarlo a continuación. Pasa a la alta Fidelidad. Esta es mi parte favorita. Esta es la parte divertida que pudimos incorporar los brazos de marca. El logo llegará a hacer algunos iconos personalizados. Llegamos a añadir nuestra paleta de colores ahí dentro, y va a ser un proceso muy rápido. Esta es la tarea dura Hemos hecho todo lo realmente difícil para el trabajo, y ahora es el momento de eclosionar a este diseñador, realmente sumergirse en nuevo deseo. 12. Marco de trabajo de alta fidelidad: Introducción: Aquí es donde realmente ocurre la diversión. Estamos listos para abordar por fin, ese marco de alambre de alta fidelidad cuando llegamos a traer realmente la parte de diseño de las cosas y divertirnos y correr un poco salvaje. Aquí es donde mi fondo de diseño gráfico realmente brilla y viene muy bien. Y si tienes un fondo de diseño, eso es fantástico. Aquí es donde realmente llegas a jugar y usar tus habilidades. Entonces aquí mismo tenemos nuestro marco de alambre de baja fidelidad batido. Aquí. Tenemos un maravilloso tipo de inicio, y ahora llegamos a pulir todo o simplemente ir pantalla por pantalla. Puede que no podamos hacerlas todas, pero estamos haciendo es muchas pantallas como sea posible y una cantidad de tiempo decente. Entonces una de las primeras cosas que queremos hacer es que queremos configurar nuestros colores, nuestras fuentes para una marca y traer algunos de nuestros archivos de logotipos. Por lo que tengo una guía de marca que desarrollé en Adobe Illustrator y tengo esta disponible para que los descargues. Si quieres seguir adelante y usar esto como una marca simulada para ti y tengo todos estos diferentes tipos de activos de estilo configurados. Tengo algunos códigos hexagonales de color. Tengo algunos logotipos sobre un fondo oscuro y sobre un fondo blanco, y tengo un par de iconos de colores diferentes. Entonces solo voy a traer todo esto como P y G. Sólo voy a mostrarte eso rápidamente. ¿ Por qué no? ¿ Por qué no mostrarte todos los pequeños pasos por los que paso? Simplemente voy a crear varios pequeños tableros de arte alrededor de mis logotipos. Siéntate y soy grupo aquí. Entonces todo lo que hice fue crear tableros de arte alrededor de cada uno de estos elementos que voy a necesitar como un PNG transparente va a borrar el fondo exportar eso y todo tipo de exportación muy bien. Estás en tu guía de recursos descargable. Tengo activos locales de marca de grub. Tengo todos los iconos como S. P G's, y también tengo algunos de los archivos locales como transparentes. P y G's estarán arrastrando eso y jugando con eso en nuestro simulacro de alta fidelidad . Entonces ahora que tenemos algunos archivos para trabajar con algunas imágenes, volvamos a Adobe X'd orden para configurar las opciones de tipo así como configurar nuestros códigos hex en nuestros activos de color. Son los tres códigos hexagonales que desarrollé para esta marca en particular. Simplemente los voy a traer uno por uno a Adobe X T, y va a dibujar un solo cuadro que va a dar clic sobre para llenar. Y solo voy a acelerar ese código hexadecimal y luego voy a desmarcar frontera, y luego puedo añadirlo ya que los activos iban a hacer clic derecho en agregar color a los activos. Sólo voy a duplicar esta caja y hacer lo mismo. Adelante y carga mis otros colores. Lo que me encanta de Adobe X'd es este panel de estilo global donde podemos editar algunos de estos estilos y no lo hace globalmente en todo el documento porque se podía ver ya hemos hecho tanto cuando se trata de nuestro tipo y tipo de conseguir que sea un vergüenza si tuviéramos que entrar y cambiar cada una de las opciones de tipo a la que quisiéramos. Entonces lo que podrías hacer es aquí los cuatro que se utilizan actualmente en el documento. Podríamos empezar a especie de conseguir un poco de una jerarquía de tipos pasando? Determina cuáles serán nuestros encabezados H uno o grandes. ¿ Cuál va a ser nuestro H dos? Un poco de un encabezado de tamaño más pequeño. ¿ Cuál va a ser nuestro párrafo? Nuestro tipo de copia corporal. Podríamos seguir adelante y establecer la fuente. Espera y sigue adelante y prepara todo eso. Entonces si alguna vez necesitamos cambiarlo a escala global y cambiar 50 pantallas diferentes, solo tenemos el dedo del pie derecho, ve a editar. Y puedes seguir adelante y cambiarlo una vez que estén todas configuradas y cambiaremos todas las tipografías que estén configuradas a ese estilo global. Entonces eso es realmente bastante útil cuando te estás haciendo. Yo diseño. Entonces lo que voy a hacer si quiero tipo de averiguar qué es seleccionado en este momento como lo hicimos nuestro marco de alambre de baja fidelidad fueron un poco locos. Simplemente lo abofeteamos juntos. Entonces ahora necesitamos ser un poco más precisos a la hora de este tipo de temas, porque vamos a empezar a diseñar mucho más pantallas y terminar todo esto. Entonces digamos que quiero saber Qué es este Aerial 16 Tengo cuatro diferentes que necesitábamos Título estos y asegurarnos de que montamos un bonito tipo R G antes de continuar. Entonces voy a hacer click derecho, y podría hacer resaltar en lienzo, y eso va a resaltar todo el tipo que se usa aquí. Entonces parece que eso se va a cortar de un cabezal superior aquí. Entonces consíguelo. Uh, adelante y nombra este tipo de encabezado superior. Ese es solo el tipo de ayuda para saber cuándo usar ese estilo en particular o qué es ese estilo . Voy a ir al siguiente. Adelante y resaltemos eso en el lienzo. De acuerdo, Entonces este es nuestro texto de botón para poder ver todos los botones. Tener este tipo a la misma. Adelante y dio do botón, pero en texto. Y vamos a seguir adelante y hacer eso. Sigue yendo a lo largo. De acuerdo, esa va a ser nuestra copia corporal. Un poco más pequeño. Vamos a pasar por eso y tipo de armar todo para que podamos tener no sólo un tipo agradable, Harkey. Sabemos cuál va a ser el tamaño de la cabecera. Qué va a ser para que todo sea consistente a lo largo de toda la pieza, así que sé que todos los encabezados o tamaño de 14 puntos o tamaño de 16 puntos, todas las copias del cuerpo, tamaño de 10 puntos y una espera regular. Entonces todo está tipo de set. Podrías configurar los colores. Estableces tu tipo y nos limitamos a en este tipo ya que trabajamos en su tipo de diseño porque podemos terminar cambiando la tipografía, podemos terminar cambiando el tamaño y siempre podemos agregar más estilos de carácter ya que realmente encarnamos esto diseñar hacia fuera. Entonces esto siempre va a ser una especie de área de trabajo para nosotros. Vamos a seguir agregándolo y editándolo a medida que sigamos haciendo esto, hagamos algunos símbolos. Por lo que probablemente podríamos haber hecho esto un poco en la baja fidelidad. Pero cuando estamos haciendo la baja fidelidad, no estamos pensando en toda esta configuración aún porque los diseños ni siquiera se aprobaron. Entonces ahora que tenemos tipo de aprobación para seguir adelante y realmente hacer de esto un diseño de acabado liso , vamos a tratar de vincular todos nuestros símbolos hacia arriba. Entonces, cuando vinculamos símbolos, podemos cambiarlo globalmente. Entonces ahora mismo, esto. Hice lo que hice. ¿ Tengo razón? Clicked Y acabo de crear Montar fuera de esto. Entonces ahora aquí está mi símbolo. Entonces ahora puedo seguir adelante y cambiar eso a leer si quiero. Lo que necesito hacer es reemplazar este símbolo. Simplemente mantenga presionada la opción y simplemente reemplace el símbolo por el símbolo del enlace. Entonces ahora cuando regrese y cambie el símbolo, lo hará en ambos. Y no tengo que sentarme ahí y cambiar el color en ambos. Eso realmente te será útil si vinculas todos tus símbolos para que todo lo que tienes que hacer es presionar un botón y todos ellos cambian a través de todos los diferentes encabezados. Vamos a armar eso y hacer que ensamblar también se querían a nuestras bolsas de compras armar. Entonces cuando un clic derecho y hacer ensamblar para que también podamos cambiar la bolsa de compras del barco de la misma manera, probablemente haría el encabezado como símbolo para que pueda cambiar este encabezado en todos los diferentes encabezados a la vez porque Es posible que quiera cambiarlos todos al final del proceso de diseño puede ser, el cliente dice que me gustaría que el encabezado sea blanco. Eso no va a ser un gran problema para nosotros cambiarlo en 100 pantallas si todas están enlazadas como símbolo. Entonces voy a hacer eso muy rápido. Voy a seguir adelante y conseguir todos estos enlaces para que nos cambien todos estos muy rápidamente. 13. Marco de trabajo de alta fidelidad: la pantalla de acceso: Entonces lo que hice aquí es agrupar este elemento. Voy a seguir adelante y un grupo y mostrar lo que hice todos estos aireados individuales, diferentes símbolos vinculados. Si vas por aquí, puedes ver todos estos símbolos de enlaces con, por supuesto, nombrarlos para que puedas llegar a saber cuáles es el menú de hamburguesas. Cuales No, pero todos son uno individual, así que puedo cambiarlos como símbolos individuales así como este gráfico o barra de fondo. Entonces todo lo que hice fue agrupar todos estos juntos, y simplemente estoy deslizando estos en su lugar. Se hace broches muy bien a la parte superior de la página, fue capaz de reemplazar esos todos muy rápidamente. Y ahora que los tengo en símbolos y tú te muestras lo divertido que es esto, así que vamos a ir al menú de hamburguesas aquí mismo. Este es nuestro símbolo de enlace. Sigamos adelante y solo titulemos todos estos. Y ahora voy a poder editar para poder seguir adelante, seleccionar este símbolo de enlace que en grupo y quiero cambiarlos todos. Entonces ahora solo lo hice todo rojo así como así. Entonces si queremos experimentar con el color. Podríamos empezar a afinar muy bien este encabezado. Entonces si quiero usar nuestro color de marca aquí, quiero cambiarlo a ese tipo de color azul verde. Así como así, ya está hecho. Um, también quiero quizá cambiar este color a como un gris claro hecho. Eso hice globalmente en todos ellos. No nos sentamos ahí y lo hacemos una y otra vez en cada pantalla. Es decir, es increíble. Me encanta esa parte de X'd en su mayoría quería cambiar una bolsa de compras a un color determinado. A lo mejor queremos agregar un nuevo color a nuestro paladar porque esta marca fue desarrollada pegándose sobre el logo. Pero no estaba pensando en ti. Yo, um, y he necesitado tener un botón de contraste realmente alto, un botón realmente brillante que es muy diferente al verde. Por lo que realmente sale. Vamos a añadir un nuevo activo de color aquí. Simplemente voy a añadir un nuevo color. Y vamos a hacer esto dorado a Phil lo va a hacer un rojo porque es muy diferente al verde. Pero tal vez agregarle solo un poquito de ella es un poco de tal vez rosa para darle una especie de vitalidad brillante. Simplemente un poco de meterte para encontrar el curso de color correcto. Podríamos meternos en Illustrator y loro juntos para encontrar la paleta de colores adecuada. Yo quiero algo bastante brillante y vívido para que definitivamente lo puedas ver. ¿ Quién sabe cómo cambio eso? Mira ese cambio en todos los encabezados. Simplemente me encanta que ahora pudiéramos cambiar esta cajita. Podríamos incluso ahora que no tenemos que hacerlo en todos ellos. Nosotros sólo podemos hacer este. A lo mejor hacer esta burbuja roja. ¿ Qué hay en editar? Eso tal vez no tener frontera y hacer un ville rosa. Creo que podría necesitar ONU agrupar ese símbolo causa tengo ah, escriba aquí. Hagamos el tipo blanco. Ahí vamos. Entonces creo que eso está empezando a quedar bien. Y queremos tal vez arrastrar algo en que armar tal vez una foto al igual que una pequeña foto de relleno para poder descargar todas mis fotos de Pecs ALS así que ten unas tomas a la cabeza realmente buenas . Voy a seguir adelante y arrastrarla dentro. Es dragger justo encima de la foto. Se debe poblar automáticamente. Podemos duplicar, hacer clic y ajustar el recorte. Bonito zoom en foto. Ahí. Ahora lo cambió todo para que pudieras empezar a ver cómo se juntaba el encabezado. Podríamos cambiar esta, uh, barra de fondo por nuestra marca gris de color oscuro. Y ahí lo tienes. Tenemos especie de la cabeza superior o hecho en todas las pantallas. Así que sólo un tipo de mostrarte cómo ese estilo global realmente puede ser útil a medida que comenzamos a desarrollar todos estos diferentes artículos. Entonces ahora vamos a empezar de nuevo por el principio. Estamos empezando nuestra primera página. Vamos a empezar a pasar a la derecha ahora que como que tiene configurado el estilo global. Sólo hay una cosa más que voy a hacer. Y voy a necesitar eso para mi pantalla de inicio de sesión. Voy a necesitar un logotipo, así que voy a traer eso como símbolo es Bueno, así que si alguna vez tuiteamos el logo y el logo está en cada pantalla, no lo hace globalmente. Entonces localicé los archivos PNG, y el recurso descargable es Pero si estás haciendo una empresa diferente, podrías intentar encontrar un PNG de tu empresa de logotipos. Entonces ahora mismo voy a arrastrar en ambos. Por lo que tengo un par de versiones diferentes. Tengo uno que funciona bien y espacios reducidos, así que especie de presentación horizontal. Y luego tengo una especie de versión apilada también, y tengo una sobre un fondo negro sobre uno bajo fondo oscuro. Entonces vamos a traer a los cuatro y sólo vamos a sumar esto como símbolo. Este es una especie del proceso de configuración de ustedes. I Hay mucha configuración inicial, pero se fue a armar todo. Se va súper duper rápido, y te prometo que se va a poner divertido. Y aún estaban haciendo una especie de montaje tipo de algunas de las cosas aburridas que forma parte del diseñador U I es que podría haber algunas partes tediosas que podrían ser algunas partes divertidas. Entonces vamos a conseguir uno de estos que va a funcionar muy bien en esto sobre este diferente fondo gris . Y vamos a seguir adelante, que esto sean de marca de color gris. Tienes un poco de sombra más oscura para debilitar el uso. Tenemos que averiguar qué funcionaría mejor. O incluso podríamos cambiarlo a nuestro Kareen. Aclararlo un poco y traer el que va a funcionar sobre fondos oscuros para pueda traer a éste o podría traer a éste. Por lo que parece que lo he desarrollado con ese dedo del pie de color más oscuro funciona muy bien en gris. Entonces cuando haces Gray Dragon y funciona muy bien, pero quiero probarlo con este color más claro. Piensa que eso es lindo. Simplemente voy a volver al tablero de dibujo muy rápido y desarrollar una versión que funcione muy bien en esa versión, que sería, creo, una especie de versión todo gris así como esa. Y exportaré esto como PNG y te veré enseguida. Así que ten cargadas todas las versiones del logo que funcionará en todos los fondos. Entonces ahora podemos tipo de intercambiar y ver qué se ve genial. Creo que esto podría ser un poco largo. Tienes un poco demasiado espacio. Entonces hagamos la versión apilada del logotipo aquí mismo en medio. Aquí es donde llegamos a hacer trabajos de diseño. No tenemos que preocuparnos tanto por el cliente extremadamente siempre estuvieron preocupándonos por la experiencia del cliente. Pero aquí es donde realmente llegamos a enfocarnos en lo que se ve bien, lo que se siente bien para mí como diseñador, um, para que podamos hacer un par de cosas. Esto es lo que nosotros Este es el momento en que decidimos, ¿Quieres un fondo sólido? Envía eso a la parte de atrás. Queremos un fondo sólido. ¿ Queremos tener especie de estos dos tonificados? Podríamos hacer que bajara hasta aquí y podemos usar elementos de fondo para ayudar a sacar ciertos botones. Por lo que queremos que tipo de botón de inicio de sesión es que realmente se junten. En realidad podrías tener esta parada a mitad de camino, y podemos añadir otra caja aquí para tener un contraste oscuro. Hagamos corte de nuestro color oscuro. Envía eso a la parte de atrás para que veas que tenemos que cambiar todo. Pero como que tienes este look de dos tonos. Realmente podría traer destaque a ese botón donde estos dos están divididos. Por lo que es usar esos elementos de diseño para realmente dibujar tu ojo hacia dónde quieres que vaya el usuario , que en este caso sería tu inicio de sesión en tu cuenta. Y así necesitamos tener ese botón de alto contraste. Entonces realmente quiero tener una especie de este tipo oscuro de color rosa claro. Creo que ya lo hemos puesto en nuestro panel de activos, pero por alguna razón, se perdió. Pero eso está bien, así que vamos a dibujar una caja nueva. De verdad quiero ese botón. El pop outs. Vamos a encontrar un botón de alto contraste realmente bueno. Quítate esa frontera. Simplemente vamos a hacer de esto un activo de color siempre lo cambiaría más tarde. Aquí está nuestro color rojo. Entonces hagámosla pero en un buen pop, salte a ti tipo de color. Entonces no va a ser de este color, ¿verdad? Porque eso se mezcla justo dentro. Hagamos una especie de color opuesto. De verdad te va a sacar el ojo. Queremos hacer crear un log in un diferente es Va a ser una ruta de registro diferente para que puedas iniciar sesión con tu lata. Si ya tienes uno. El registro creado será un poco diferente, pero no dramáticamente diferente, por lo que podemos ver con qué colores se verían bien. ese botón en particular. Y luego con nuestro login con nuestra cuenta de Facebook, podríamos hacer eso azul. Entonces voy a ir pop a Facebook y agarrar lo que sea que el color oficial de Facebook azul sea negativo. Cargar ese color hexadecimal en. 14. Marco de alambre de alta fidelidad: pantalla de entrada - parte 2: manera. Tomé una captura de pantalla del color de Facebook aquí, y sólo voy a tomar la herramienta cuentagotas y muestra que realmente quiero ser precisa. Cuando se trata de Facebook, eso realmente sale. Bueno, en realidad estoy haciendo el botón derecho aquí. Se va por aquí, despegamos una frontera y nos deja hacer un Phil azul, y estamos listos para golpear eso con White. Tienes algunos elementos extra aquí que no necesitamos. Hagamos eso un poco más claro de una sombra a ese pequeño botón divisor que sale. Ya no necesitamos eso y cambiamos esto a Blanco por nuestro color blanco. Entonces, ¿qué opinas? Entonces esa es una especie de la versión que tenemos hasta ahora. Probablemente. Es algún tipo de otro visual para agarrarte aquí mismo. Bueno, tal vez menos eslogan. Encuentra tu mejor comida ahora, o algún tipo de eslogan o tipo para tientar a la gente a iniciar sesión y emocionarse por usar esta app. Este también es un momento en el que duplique tableros de arte y puedo ponerlo lado a lado fue, una vez que determinemos esta pantalla de inicio de sesión, realmente va a empezar a determinar cómo se ve todo lo demás. Estas primeras pantallas el aire tan crítico en el proceso de diseño es una vez que configuramos todo tipo de si vamos a usar un Bracker oscuro sobre un fondo claro ¿qué tipo de logotipo estamos usando ? Vamos a poner esto, vamos a sentar el escenario para que todo avance. Entonces llegamos a pasar mucho tiempo asegurándonos de que esté bien para poder volver a lo que teníamos antes. Haz este tipo de registro Esos botones realmente salen por ahí. Eso es lindo. Podrías duplicar esto tanto como quieras hacer lo mismo con diseños de logotipos, haré un diseño local. Lo pondré justo al lado de una copia. Cámbiala, retírela, ver si me gustó la copia antigua en lugar de la nueva, y seguir adelante. Vamos a probar este, pero esperó con un gris claro o tal vez pegarse con blanco, sólo como que revertir todos estos fuera. De acuerdo, entonces esa es una opción para seguir aquí hasta que encontremos una especie de lo que pensamos que se sentiría bien . Y queremos que todo sea obvio para el usuario que fue el usuario para poder encontrar los botones lo más fácil posible. Y a veces usar esos fondos más oscuros realmente ayuda. Porque con el blanco, todo es una especie de mezclarse. Por lo que usar este tipo de cajas de colores es útil. Podríamos hacer una caja sólida. Siempre podemos pantallar la foto trasera. Podríamos hacer eso un poco más tarde. Es una especie de ponche esto. Haz eso blanco. Ver, ahora que ponemos nuestros Siles globales tanto más fácil dedo del pie tipo de, recoge tus paladares y elige tu tipo. Entonces, ¿en qué piensan ustedes hasta ahora? Ojalá pudiera obtener retroalimentación en vivo en esta clase, pero ¿qué antecedentes para ti sale más? Esto es cuando tal vez puedas ponerlo delante de alguien más e ir ¿Qué? ¿ Qué luce mejor? ¿ Qué funciona mejor? Siempre está la opción de tener un fondo blanco enteramente y luego hacer nuestro logo que tenemos aquí arriba. Entonces hay una especie de tu log básico en el que no soy un enorme Vanna siempre podría experimentar y hacer . lo mejor una caja diagonal que atraviesa que ha tenido la herramienta pin y ver cómo se ve romper un poco el molde para experimentar para que puedas ver aquí la amplia variedad de opciones de diseño que tengo y se podía ver donde está esto podría ser Uno de los retos más grandes no es falta de ideas, sino de falta de dirección y preguntarse qué va a funcionar mejor. Entonces voy a seguir adelante y experimentar con una opción más, y eso va a ser incorporar una foto para ver si la foto no puede como que se descomponga tipo de este gran tipo de áreas vacías, pero sin que parezca demasiado ocupada. Por lo que sólo vamos a dibujar caja contenedor para poner nuestra foto y vamos a un solo clic frontera. Sigamos adelante y traigamos una especie de foto genérica por ahora comida e iba a encontrar el cultivo adecuado. Yo sólo voy a doble clic de realmente bueno. Y yo asumí y tiro de esa comida porque eso es lo que queremos con lo que la gente tiene hambre cuando abren esta app. Vamos a atraer con poca comida, salir de las sombras. Se puede tener un poco de sombra de gota, por lo que se ve un poco en capas. Incluso puedes mantener presionada opción y especie de hacer de esto un poco de una foto redondeada que me podría parecer. Creo que el logo necesita realmente salir sobre eso un poco más a menos que decidamos bajarlo al fondo. Pero danos la oportunidad de cambiar los botones un poco más cerca juntos, pero no demasiado cerca justo ahí, ¿ verdad? Y podríamos poner nuestro pequeño logo aquí abajo siempre y cuando sea muy obvio que eso es todo. Para que eso pudiera ser grande se cambiará eso a azul. Podríamos incluso hacer una traiga de dos tonos en una caja. Simplemente tienes el fondo y los azules son verdes. Como llamarías, supongo que es más verde, ¿no? Verde azul y podrían redondear, tal vez opción tirar hacia abajo. Y alrededor de esto tienes, ah, ah, una especie de borde redondeado aquí, pero también un borde redondeado contrarrestante aquí en el lado opuesto. En la parte superior, estamos empezando a estar ocupados. Realmente quiero limpiar el diseño simple para nuestra pantalla de inicio de sesión. Podría incluso conseguir los logotipos si no puedo conseguir mirar hasta aquí. Eso tiene especie del verde y el logotipo para cooperar que eso se ve un poco mejor, por lo que esa es una opción de registro. Me gusta la idea de usar una foto. La foto podría intercambiarse. Y ya que no tenemos que preocuparnos de que la foto tenga texto encima o cualquier otro problema con una foto aleatorizada porque no hay nada encima que pueda ser difícil de leer. Podríamos ser muy flexibles con esto. Y me gusta esa idea para que se pueda intercambiar. Y desearía que Adobe X'd tuviera capacidades de edición de fotos donde pueda cambiar eso, uh, hacer un look do un tono o hacer algún tipo de edición de fotos, pero no tengo esa capacidad. A continuación t solo entro a la tienda de fotos y luego traigo esa foto de vuelta. Si quisiera tener una especie de tono dúo o sencillo en color, míralo. Voy a ir al punto com de Peck Sal y tipo de encontrar unas fotos que creo que podrían funcionar. Creo que tener una foto y el inicio de sesión realmente ayuda a saber que estás en una aplicación de pedidos de alimentos . Creo que realmente tiene mucho sentido, te pone un poco de hambre antes de iniciar sesión. Entonces creo que es una buena decisión de diseño decidir ir de esa manera porque esta pantalla podría ser cualquier aplicación. Grita. Es solo un pequeño logo, y es realmente limpio y sencillo pero no tiene mucha personalidad para ello. Y aquí es donde podrías empezar a pensar en esa experiencia de usuario y agregar un puñetazo de personalidad. Bueno, nunca llegas a estar ocupado, pero quieres tener Quieres ser divertido, quieres jugar. Depende de lo que tu público objetivo esté buscando. Uh, vamos a divertirnos un poco con nosotros y tener visuales a lo largo. 15. Marco de audio de alta fidelidad: pantalla de entrada - parte 3: Descargué unas fotos para checar. El tiempo va a arrastrar estos a través, A ver si no encuentro la combinación correcta de recorte de la foto. No quiero recortar la parte superior del tazón. A mí me gusta tener un tenedor ahí dentro. Eso se ve realmente maravilloso. Eso se ve limpio. A ver si no podemos encontrar una foto mejor. Siempre encuentra una mejor foto porque te sorprenderías ¿qué funciona? A mí me gusta esta foto. A lo mejor si hago una especie de zoom en el cultivo son recorte apretado como dicen. Eso se ve realmente bonito. Es complicado. Ahí hay muchos detalles, y no quiero ya complicar esta pantalla de inicio de sesión. Entonces tal vez necesitamos encontrar una muy simple Eso es bonito. Si zoom y no se ve casero, parece el Dios en un restaurante. A mí me gusta este. Ah se trata de encontrar ese correcto recorte. ¿ Quieres meter el tenedor ahí? Entonces no es tipo de la forma en que está esta curva. No sé si los tazones Brown tipo de lucha contra esa curva, así que volvamos a lo que teníamos antes, que es este tazón muy bonito y sencillo. No es complicado, no tiene muchas cosas pasando con su foto muy sencilla. Y creo que eso funciona muy bien con este log y pantallas está encontrando el recorte creo que funcionaría, y ahí está nuestra pantalla de inicio de sesión. Entonces lo que podemos hacer es que podríamos empezar a borrar los que no creemos que funcionen. No quiero tener aquí todas estas pantallas y mantengamos una alrededor de la diapositiva él camino por aquí solo para que nunca sepa lo que podríamos querer volver a ese layout. Aquí estamos. Tenemos su pantalla de inicio de sesión hecha con el primer verde hecho, y podríamos hacer algunos retoques con botones. Lo que hice es que decidí mantener esto el color azul verde marca este iniciar sesión en tu cuenta porque ese va a ser el botón más utilizado, y decidí hacer crear junto en rojo porque quiero años de Año Nuevo para poder ver ese botón muy fácilmente. Entonces pensé que podría ser el alto contraste, diferente color. Quiero asegurarme de que aquí es donde nos ponemos realmente quisquillosos con márgenes y relleno. Vamos a asegurarnos de que los márgenes y el relleno o lo mismo escuchen que están aquí y puedes usar la opción snap to grid, que es una especie de lo que estamos usando aquí es una especie de guías inteligentes. Supongo que se podría decir que eso está en todos los programas de adobe. Este podría tener más espaciado porque hay, ah tipo ritmo ahí e inicia sesión con Facebook. Podríamos pero poner un poco de frontera aquí. A lo mejor una luz como el color. Un poco de pop out mejor. ¿ Quién sabe? Hacer de la frontera uno. Tienes esa opción donde tienes ese trazo. Eso realmente ayuda a que salga ese botón si nos sentimos así. El Azul Oscuro es demasiado oscuro contra el gris para que podamos un poco de lío alrededor. Pero me gusta tener consistencia con mis botones. Y así aquí hay otra cosa con botones. Podemos un poco meternos con las esquinas para que pudiera convertirlo en una forma de pastilla. Podríamos hacerle una forma de píldora muy leve porque estábamos como que nos quitamos eso en el marcado de baja fidelidad. Pero ahora llegamos a hacerlo. Veamos pre seleccionar todos estos. Hagamos ese borde un poco más pequeño para hacer ese 1.5 y veamos qué podríamos hacer con las formas de las pastillas. Entonces aquí es donde podemos cambiarlo aquí mismo. Aquí tienes una especie de la selección en el panel de apariencia. Bueno dice, Prueba uno. Basta con seguir aumentando su intento. 11. Probemos cuatro. A mí me gusta el ligero alrededor. Este tipo de agrega un polaco realmente agradable. Mira a ella, ¿ no? No me gusta redondear por este caso en particular. Es sólo un poco sólo un poquito. Entonces ese tipo de suaviza todo. Tener esos lindos bordes redondeados. De acuerdo, así que todavía me siento así. El azul también lo es. Esto es demasiado del mismo tono, y esto no está saliendo tanto. Siempre agrego una ligera sombra de gota a estas cosas, por lo que podríamos simplemente bajar a su apariencia. Haz poco sombra de gota. Ve cómo eso realmente ayuda a que ese botón salga. Hacerlo sentir como si fuera una pulsación de un botón. Hagamos lo mismo con todos ellos, por lo que podría ser consistente, así que está agregando un poco de sombra de gota. Entonces ahora casi se siente como si estuviera en capas Es realmente agradable. De acuerdo, ahora podría ajustar el tamaño del logotipo. Asegúrate de que eso esté en el medio. Si arrastro esto alrededor, especie de ver estas pequeñas guías inteligentes ayudándonos por el verdadero medio ahí mismo. Y recuerda, siempre tienes la opción de activar las rejillas. Vamos a seguir adelante y seleccionar mi tablero de arte superior, y podemos alterar una cuadrícula para ver si no podemos usar esa cuadrícula para especie de ayudarnos a encontrar la ubicación exacta de ciertos elementos. A mí me gusta usar rejillas. No me gusta estar atascado. Siento como grids aire tomando las decisiones por mí. Entonces sí me gusta hacer una especie de diseño áspero de cómo me gusta. Yo solo hago pequeños movimientos y lo pongo en la cuadrícula. Sé que a mucha gente le gusta empezar con la grilla, pero muchas veces me gusta tipo de diseñado por hago mi maquetación y luego hago cualquier tipo de afinación fina como ves la poca diferencia aquí entre donde esta esta cuadrícula de cuatro columnas es que podemos fácilmente simplemente encajar eso al borde, sentir que usamos la cuadrícula para ayudarnos con tu diseño, pero la cuadrícula no encajaba. Ya sabes, no tipo de restricción nuestro diseño de flujo libre ya que así que si eres el tipo de persona a la que le gusta empezar con rejillas, puedes seguir adelante y cargar tus rejillas. También hay rejillas cuadradas. ¿ Quién te tiene una especie de brid tradicional o él hace la columna, Uh, rids hacemos sitios web. Podrías hacerlo en base al grado de 12 columnas, que es realmente popular de hacer. Podríamos poner tu canaleta dentro del problema con y todo ese jazz s. Así que sólo voy a usar esto para especie de tal vez chasquear todos estos hasta el borde de ese punto de cuadrícula . Entonces solo voy a detener todos estos hasta el borde. Algo así me da un poco de fundamento y sabiendo que las canaletas airean el mismo ancho aquí, y también queremos tu botón de Facebook, ¿ verdad? Así es apagar mis rejillas. Y siento que nos estamos acercando realmente esto asegurándonos de que esto va a ser lo mismo con la parte superior de la parte inferior. Asegúrate de que esa alianza central vea cómo estalló eso en ese pequeño azul. Pero nuestra pequeña línea azul como que sube hacia abajo. Ahora sé que eso está perfectamente en el centro, Fuera de la paz. Oye, vamos a guardar esto. Me siento bastante bien con esto. Entonces pasemos a la siguiente pantalla. Entonces lo que hicimos es tener una especie de fondo más oscuro. Nos estamos moviendo hacia esa dirección. Entonces eso podría establecer el tono para la app que tal vez tengamos fondos más oscuros de ellos cajas más claras en la parte superior, a diferencia de tener un fondo blanco con tal vez, como botones grises en la parte superior, ¿ Cuál es qué? Cómo lo diseñamos para tener ese fondo de luz. Entonces vamos a ver qué pasa cuando lleguemos a este punto si un fondo oscuro va a funcionar aquí. Tenemos que volver a este tipo de métodos. Por lo que solo estamos tratando de conseguir nuestro estilo aquí, tratando de tener una idea de consistencia que podamos usar en todo momento. Entonces a continuación vamos a seguir adelante, Saltar en esto va a ser muy fácil, causa que seas básicamente la misma pantalla. Solo vamos a voltear algunos de los colores aquí. Vamos a hacer eso muy rápido, y volveré enseguida 16. Marco de alambre de alta fidelidad: pantalla de Popup: derechos anunciaron tiempo para la suscripción de una página de cuenta se adelantó e hicieron de este fondo el símbolo, este gran tipo de fondo En nuestra primera pantalla. Hice que ensamble en eso. Sigo siendo una copia y pegada, igual que el resto de la pantalla. Entonces todos son como símbolos. Entonces si alguna vez quisiera cambiar el color, sería fácil cambiarlo en ambos. Entonces si quiero cambiar todo de nuevo a este color, que en realidad se ve bastante encantador, um, podríamos hacer eso por todas las pantallas y luego cambiar todo mucho más fácil, Así que solo asegúrate de usar esos símbolos enlazados como tanto como sea posible. Entonces hagamos ese tipo de color. Y también podemos hacer este ensamble. Esto va a ser una especie de botón estándar que vamos a tener. Siempre podríamos hacer click derecho y hacer montar, y luego desarmar eso por aquí. Ya tenemos nuestros pequeños bordes redondeados, bordes muy ligeramente redondeados, y podríamos simplemente cambiarlo cuando lo necesitemos. Por lo que regístrate para obtener una cuenta. Probablemente necesita ser un poco más grande tipo, tamaño como todo muy obvio y fácil para el usuario incluso intenta eso como un blanco. Sí, podríamos traer nuestro logo sobre. Manténgalo en la parte inferior. Está en el fondo aquí. Vamos a mantenerlo en la parte inferior y podríamos mantenerlo en la misma posición también. Debo seguir adelante y hacer el logo mientras estamos aquí. Se va. Hacerlo armar. Va a la derecha. Haga clic. Que sea un símbolo. Haré logo. Fondo negro. Entonces ahora cuando copio y pegue a Aiken, cambia eso. Eso podría hacer cambios muy fácilmente. Podemos seguir teniendo una foto arriba aquí en la opción Hold down del Tambor. Suaviza esa esquina redondeada aquí. Ahí está el punto. Se lo va a suavizar. Bajen eso. Debo hacer una foto diferente. Hacer el otro que queríamos usar en el otro. Ahí vamos. Haz un bonito recorte apretado para que no se vea demasiado ocupado. ¿ Quieres meter ese tenedor ahí y quieres asegurarte de que eso no esté redondeado arriba y asegúrate de que no tengamos una frontera ¿verdad? Yo quisiera incorporar ese azul verde en cada pantalla de posible, porque quiero poder conectarlo Así que este es un punto que podemos decidir. ¿ Nos gustan los grises en el trabajo no está funcionando. Entonces, ¿qué tiene de genial tener esto vinculado? Por lo que sólo voy a mis símbolos. Yo solo soy un título, este fondo de pantalla de fondo y podemos jugar con los colores aquí. Entonces voy a seguir adelante y lo pondré todo azul. ¿ Sientes que funciona un azul? Siento que un negro funciona. Entonces, ¿cómo podemos incorporar el azul aquí? Siempre podemos hacer terminar el proceso de registro. Podríamos hacer ese botón ojalá y meter eso más cerca del final ahí. Se va a cambiar a nuestra grilla y ver si no podemos conseguir que estas grúa se alineen. Todo es consistente. Cuándo tendría el mismo borde redondeado aquí, por lo que siempre podemos volver a ver qué usamos. Y usamos un cuatro. Entonces voy a volver y aplicar la misma opción redondeada. Genial. Ahora solo estamos modificando el diseño que deberías. Tenemos suficiente espacio para respirar entre todos los elementos de diseño. Observe cómo eso ayuda tanto tener un poco de espacio para respirar. Tan solo asegúrate de que el espaciado aquí sea consistente y eso nos da la oportunidad de tener un poco de una foto más grande perfecta así, recortando ¿cómo? Está cortado a la mitad. Su tipo de crea un cultivo dinámico. Me alegré y ahorré. Tenemos dos pantallas abajo. Ah, 100 más para ir. Bueno, no vamos a hacer las 100 pero haremos al menos 10 pantallas más. Por lo que la autorización de Facebook va a llevar este símbolo aquí. Pero esta es la parte de atrás. Las cosas van a empezar a ir muy rápido ahora que estamos empezando a establecer una especie de estándares de marca aquí para ti, yo estándares. Por lo que este será el mismo botón exacto. Entonces, ¿por qué no sólo tomamos este botón y simplemente seguimos adelante y ponemos nuestra autorización ahí dentro? Y entonces tenemos nuestro texto de botón. No nos gusta ese blanco. Entonces lo que esto va a ser probablemente en lugar de ser una pantalla separada, va a ser una caja pop up. Entonces sólo va a aparecer por aquí para autorizar No te va a mandar lejos a una pantalla. Entonces lo que yo quería hacer es una especie de tener un efecto borroso muy en algún lugar de lo que se ve por aquí, donde se tiene una especie de cuadro pop up, pero se desdibuja en el fondo. Sé que IOS hizo eso hace un par de años cuando hicieron una especie de actualización bochornosa, y eso ha sido algo muy popular de hacer. Entonces ese es el efecto que estaba tratando de emular. Pero parece que no soy capaz de tomar esto y desenfocarlo en su conjunto porque aquí no me da esa opción. Entonces voy a hacer un poco de engaño aquí. Simplemente voy a tomar una captura de pantalla de mi pantalla y traerla como foto, y podré tener el mismo efecto para poder emular ese efecto. Voy a traer esa foto con escritorio. ¿ Lo oyes? ISS Se va a dejar que ya no necesitamos eso. Ya veremos si no podemos emular ese efecto usando una foto tan especie de dar el tipo de sensación que va a aparecer y algo oscuro ahí dentro y sólo dame el botón rápido para presionar eso estoy ahora mismo. Está en el fondo difuminando. Prueba objeto Desenfocar. A ver si no puedo conseguir una especie de efecto más borroso. Perfecto. Ahí mismo. Entonces ahora lo que podemos hacer y sí entramos en el gemido prototipo. Empezamos a enlazar esto hacia arriba, podremos presionar ese botón y saldrá y aún así permanecerá en ese aspecto como sigue quedando en esa pantalla. Y así presionamos ese botón, podemos lamerlo hasta donde va a ir justo aquí. Entonces ahora tenemos nuestro segundo pop up. No importa de qué manera te identifiques, vas a tener que dar ah, acceso de grub local a tu ubicación, y podemos tener que este sea un evento de una sola vez. No tiene que pasar cada vez que inician sesión, lo cual es bueno. Entonces va a estilizar esta pequeña zona de caja pop up móvil para que coincida con nuestra marca para que podamos hacerla, uh, más oscura. Hazlo. Este color puede seguir usando el blanco, y podríamos hacer de este un bonito botón de alto contraste. Podríamos hacer que sean de marca de color verde. Podemos usar el mismo borde redondeado que usamos aquí. Entonces estamos usando un cuatro aquí en estas pequeñas, uh cajas para que podamos hacer cuatro aquí para que pueda ser consistente con todos nuestros bordes redondeados a través de todo lo que hacemos. Siento que estamos bastante contentos con eso. Podemos rodar con él. Podemos hacer que eso sea aún más alto, más alto contraste, pero que casi necesitamos leer. A veces significa advertencia. Ya sabes, cuando un asociado rojo cuando cuando tienen una decisión de compartir, Uh, información importante, como ubicación. No quieres usar el rojo porque es casi una advertencia como esto no es lo que se supone que debes hacer. Por lo que desde un punto de vista psicológico, a veces pegarse con el asesino de marca más suave podría funcionar y tener la casilla de verificación siempre permitir . Genial. Y podríamos incluso hacer un poco de sombra de gota aquí, tener una sombra un poco más significativa allí. Por lo que ahora llegamos a hacer la pantalla de inicio, la pantalla de inicio del usuario. Por lo que esta podría ser una página muy importante los va a mandar a abarrotes un restaurante cuando lo haces muy limpio. Um, simple y fácil de usar. Vas a pasar unos momentos trabajando en esto, y vamos a seguir trabajando a través de todo este proyecto. Entonces solo por el bien del tiempo, seguí adelante y pasé unos 20 minutos como trabajando en lo que creo que sería bueno para diseñar. Ya hemos hecho mucho de eso de antemano. No quería tomarme demasiado tiempo en cada verde pasando por el proceso. Pero quiero hablar de por qué terminé en esta etapa final. Entonces en este momento pensé en usar las dos cajas y tipo de tener un fondo mostrando a través. Pero después de un rato, pensé que parecía un poco ocupado tener ese entonces borde de fondo todo el camino alrededor estas dos cajas. Por lo que hacer una especie de derecho al borde le dio un aspecto realmente moderno, limpio, lijado que creo que funcionó muy bien. Y también tuve un problema poniendo el abarrotes encima de la foto. Entonces tuve que tener mucho cuidado con qué foto elegí, porque si estaba demasiado ocupada, no estaba apareciendo. Entonces traté de ponerlo en cajas. Intenté una especie de muchas maneras diferentes para que funcione, y también otra cosa es que necesitaba tener algún tipo de texto aquí, así que necesitamos dar algún tipo de dirección al usuario porque cuando acabamos de tener abarrotes y restaurante tipo de obvio lo que se presiona. Pero es agradable tener algún tipo de verbal llamado la acción también para guiarte a través del proceso para invitarte a entrar. Entonces tengo una especie de tomar tu pick, tener un tipo angosto de apuntar hacia arriba y hacia abajo para especie de realmente hacerlo. Obviamente, seleccionas una de las otras y que tienes dos opciones. Ya tenemos nuestra cabeza superior o hecho que hicimos antes en la lección, por lo que eso ya estaba terminado. Por lo que esta página esencialmente se hace. Acaba de encontrar las fotos correctas, trató de encontrar el diseño correcto. Y tal vez estas fotos puedan cambiar de vez en cuando, dependiendo quizá de tu restaurante favorito favorito. Eso es algo que podríamos explorar más adelante. Entonces eso es una especie de esta pantalla de usuario principal en casa. Ya terminamos con esa. Adelante y pasemos a la siguiente, que va a ser un poco más complicado porque tenemos que descifrar colores y tamaños de tipo , todo para esta siguiente pantalla 17. Pantalla de selección de la lista: Hagamos su lista de restaurantes. Entonces teníamos un mapa de restaurante que se supone que estaba aquí, y va a cargar Google maps. Por lo que sólo tomó una especie de captura de pantalla genérica de Google Maps que sólo puede tomar este marco y arrastrar en nuestra foto de esa manera. Así que adelante y se recorte automáticamente y vamos a hacer una sombra de gota aquí. Entonces realmente aparece por aquí. Saquemos esto adelante. Y también tenemos una especie de cosa de ubicación. Este es en realidad el antiguo logotipo, por lo que estamos incorporando algo de nuestros activos de marca para especie de tener aquí el marcador de ubicación . Entonces solo vamos a poner eso sobre el actual y convertirlo en un color que realmente va a destacar tan rojo. Y esto dice mapa del restaurante. Pero realmente no necesitamos decir mapa del restaurante, porque creo que es bastante obvio que esa es la ubicación del restaurante que la ubicación actual. Pero también queremos mostrar a todos los demás del mapa los temas reales, poner algunos de ellos sólo para especie de ejemplo. Entonces ahí está nuestro mapa, y así ahora podemos un poco meternos con estas burbujas, y ahora que sabemos especie del ángulo o el número de curvatura por aquí, decía el cinco, creo que hicimos cuatro en todos los demás botones. Así que sólo cambiando las curvas redondas a cuatro para igualar todo lo que hemos hecho aquí cuando acabamos de confirmar para y Ford quiere consistencia ahí. Por lo que ahora podemos determinar. ¿ Necesitamos un fondo oscuro o un fondo claro para nuestra página de listado? Entonces esto es lo que sería si fuera un fondo oscuro. Creo que realmente sale bien, pero también puede probar especie de nuestro color más claro también, porque realmente no lo hemos hecho. Tenemos un poco de uno más oscuro para iniciar sesión. Pero si lo cambiamos aquí cuando usted después de iniciar sesión, eso está bien. Sigue siendo bastante concursos consistentes con los colores de la marca. Sí. ¿ Y qué tiene de genial la herramienta de repito de cuadrícula? En lugar de tener que cambiar todas estas pequeñas cosas, puedo seguir adelante, borrar todo menos la de arriba, hacer esto perfecto, y entonces podría simplemente hacer repito grilla. Hagamos esto rojo. No queremos tener frontera. Haces esta calificación estelar podríamos hacer que sean nombre de restaurante color azul. Ya veremos qué luce eso azul y este color. Vamos a cambiarlo por uno de nuestros colores grises de marca así como toda la copia del cuerpo. Es este lío con el espaciado. Aquí es cuando realmente encontramos Tune nuestro look tipo y cuánto margen queda. Hacen todos los pequeños ajustes que necesitamos hacer para poder cambiar el color del borde, hacerlo más oscuro, tomar su herramienta cuentagotas y conseguir tal vez ese color claro o no, tener un borde en absoluto, o caer sombra, lo que sería congruente con sus botones. Y así que realmente estoy pensando que quedarme con este color de fondo más oscuro podría funcionar mejor para realmente ayudar a que salga el azul verde, te das cuenta de cómo estoy usando esa muy pequeña boca. Sólo lo estoy haciendo por The Star, lo cual es importante. Lo estoy haciendo por el nombre del restaurante, que es importante, y tengo este botón rojo para indicar pasar a la siguiente etapa, así que vamos a asegurarnos de que tenemos el mismo mercado de Horner redondeado es un cuatro Oh, eso se ve encantador. También necesitamos poner esquinas redondeadas aquí, pero solo en dos bordes, me estilizaría. Esto un poco. No tiene que ser ver opción de mantener pulsado. Sólo quiero cambiar. No, podemos estilizar esto y hacerla realmente redondeada en un borde, mucho que no podríamos tener una especie de borde redondeado ahí. Vamos a crear y cero lo que se hace bien alrededor de los bordes por aquí. Simplemente voy por encima de la apariencia, redondeando los bordes y luego redondeando las esquinas y luego cambiando el borde de tamaño se puede cortar esa mitad. A lo mejor hacer 1.5 ahí mismo en el medio y luego convertirlo en el color. Necesitamos la cantidad. Ve que tiene este pequeño bordes suaves. Piensa que así se ve mucho mejor. Asegurémonos de que todo esté alineado. Está consiguiendo tu herramienta de pin, asegurándote de que sea agradable y alineado genial. Y hagámoslo ensamblar mientras estamos en ello, porque vamos a estar duplicando bastante esto. Hazlo del tamaño correcto. Lo que me encanta de esto es una especie de emparejar todo lo demás que hemos hecho hasta ahora con este borde suave realmente pequeño, ¿ verdad? Entonces, vamos a hacer click derecho. Hazlo un símbolo hacer Mayo puede estrecharse. Entonces cuando duplicamos que todos sean objetos enlazados para que pudiéramos jugar bien con elementos de ID de contraste aquí, podríamos hacer que este tipo de gris claro despegue de la frontera. Es en eso al revés en nuestros pequeños bordes suaves, y entonces de esa manera ya no necesitamos esta pequeña línea divisoria. Tenemos una especie de área de contraste suficiente aquí para destacar realmente. De acuerdo, estamos llegando ahí. Hagamos que Boulder filtre restaurantes porque quiero que realmente destaque como una opción. Hagámoslo más grande. Que sea tal vez 12 puntos. Siempre podríamos ir a nuestros estilos de personaje y hacer clic en uno de estos tipos de encabezado superior. A lo mejor eso nos ayudará a obtener los mismos tamaños de encabezado. Usan tu nombre. Bajemos eso. Entonces solo hay suficiente un poco más de relleno y espaciado ahí y vamos a hacer el trabajo deshacernos. No olvidemos nuestra grilla que también nos ayudará, y necesito un poco más de espacio inmobiliario horizontal, así que no lo voy a llevar todo el camino hasta este borde, así que solo la estoy usando para asegurarme de que estos estén alineados, pero sí necesito más espacio horizontal. Ten mucho en lo que caber aquí. Pero mira, todavía tengo márgenes muy generosos, Mucho espacio para respirar. Entonces hagamos que estas burbujas sean las mismas que esta burbuja de aquí. Por lo que no tenemos un derrame en esos para despegar la frontera. Tenemos la palabra alrededor de esta perfecta, y queremos cambiar nuestra pequeña aerota también. Partido. Por lo que ahora necesitamos tener un símbolo oscuro sin cuidado del euro porque queremos hacer un nuevo símbolo. Ese va a ser de un color diferente. Así que me tomé unos momentos para intercambiar las flechas para tener nuestros bordes más suaves. Y también queremos una especie de retocar nuestros iconos aquí. Entonces en este momento, este es un ícono muy áspero. Queremos seguir usando que tú me tipo de bordes suaves, redondos. Entonces vamos a recrear este pequeño símbolo. Podríamos hacer eso muy rápido y solo conseguir la herramienta de círculo. Yo sólo voy a hacer una frontera, y vamos a agarrar el mismo color que estábamos haciendo antes, encontrar el grosor correcto y luego simplemente voy a dibujar una pequeña extensión de la barra de búsqueda y a dar la vuelta a las esquinas por aquí. ¿ Tu panel de apariencia consigue su herramienta cuentagotas en muestra son geniales y tienen un grosor similar ? Y ahí estamos. Acabamos de recrearlo a nuestro estilo. Agrupar, eliminar el viejo y traerlo, Hazte más pequeño, alejar. Ya sabes, tenemos un poco de iconos personalizados. Contamos con búsqueda calificaciones de UTA en cocina. Entonces si sentimos que estamos en un punto de parada, sentimos que es perfecto. Podemos utilizar la punta de herramienta de retícula de repetición. Replica esto, pero tenemos que sentirnos realmente confiados. Y esta es una decisión. Cuando jugamos con este botón, creo que eso podría verse un poco mejor que el rojo porque creo que el rojo repetido seis veces podría ser demasiada atención. De verdad tienes que usar las formas rojas y aún más sutiles que nosotros hacemos nuestro azul de marca. Bueno, vamos a replicar esto fue juntar un grupo y hacer repetir grilla y seguir adelante, hacernos muchos que se sentarán aquí. Entonces 1234 Ahora tenemos que encontrar el espaciado correcto de nuevo ahí mismo. Perfecto. Por lo que también podemos extender un poco esto, algo para hacer click en el tablero principal de arte. Podrías eliminar todo esto. Ya no necesito eso. Extiende nuestro tablero hacia abajo para que pudiéramos mostrar cómo se desplaza. Entonces lo hacemos. El modo prototipo que el usuario podrá desplazarse hacia abajo debe ser un poco más realista. Genial. Entonces ahí están nuestras opciones aquí. Entonces lo que vamos a hacer es que el usuario haga clic en uno de estos restaurantes y lo vamos a llamar Restaurant Select. Vamos a seleccionar en esta segunda opción, y van a ir a la siguiente pantalla. Por lo que estas serán las pantallas de menú. Vamos a hacer algo muy, muy parecido a qué? Tenemos dos segundos para mantenernos consistentes con nuestro tema. 18. Pantalla de menú: Aquí te dejamos nuestra página de aterrizaje del restaurante, así que tenemos la idea de poder recorrer todas las últimas fotos que se suben para los elementos del menú. Entonces sigamos adelante y arrastremos y soltemos algunas de estas fotos. Ya me siento bastante contento con el diseño. Cómo es ISS. Entonces vamos a traer uno de estos artículos de comida y traer algunos otros desguazándolos para que puedas decir que hay una foto por la que desplazarse. Creo que esos puntos son geniales. Eso indica que puedo atravesar y sigamos adelante y pongamos este stott como blancos y tiramos la segunda foto a la derecha. Ahí hay una foto a la izquierda, que ahí se desplaza. Maravilloso. Entonces sigamos adelante y adaptemos tipo del mismo estilo. Adelante y traigamos esto. ¿ Qué es copiar y pegar por aquí porque esto es un símbolo cuando tienen eso enlazado? Si alguna vez queremos cambiar el fondo en todas partes, no tenemos esa opción. Haz eso rápidamente. Entonces ahora que estamos consiguiendo una trampa, vamos a traer esto. Creo que esto se establece en un estilo de personaje, el encabezado por lo que todo va a tener el mismo tamaño. Vamos a plantear esto. Entonces hagamos lo mismo que hicimos arriba. Vamos adelante y yo soy grupo la grilla y vamos a borrar todo menos la parte superior . Y entonces vamos a poder jugar con esta profundidad, mismo estilo. Entonces te voy a dar el verde y vamos a hacer los bordes muy suaves, sacar la frontera de las rentas y repetir. Básicamente, vamos a obtener nuestro icono de que usamos nuestro símbolo. Haga clic en mi símbolo Dragón ahí dentro. Quiero ponerlo boca abajo para indicar que colapsa estilo acordeón, y esta será la flecha apuntando hacia abajo. Asegúrate de que eso sea más oscuro y ya terminamos. Entonces tenemos que ver qué tan rápido podría llegar cada vez más rápido. Conforme lo establecemos todo, Miss hacer eso muchos lados. Genial. Ya terminamos con eso. Entonces ahora tenemos que hacer esta parte donde se derrumba un poco, así que básicamente va a ser esta pantalla. Pero lo que esto sumó menú desplegable acordeón. Entonces, cuando adelante, ¿el colapso del menú plegable simplemente ahorró algo de tiempo? Así que hice lo mismo donde borré todos estos e hice el uno y luego hice la herramienta de repito cuadrícula para hacerlos todos. Por lo que ahora se suponía que la siguiente pantalla indicaría cuándo agregó la bolsa. Hay algún tipo de animación que ocurre en la parte superior cuando vamos a poder trabajar esa animación haciendo la pantalla. Y lo que es genial de esto es que podemos seguir adelante. Creed esto porque ahora tenemos todo esto diseñado porque la única diferencia con la pantalla va a haber un poco de animación que pase. Vamos a usar auto un innato para poder animar este ícono arriba. Vamos a hacer esto un poco más grande en la pantalla poetisa, desrecortada, y ya no lo hicimos armar. Vamos a hacer esto un poco más grande. Y aquí va un poco de animación que pasa. Voy a necesitar agarrar otros dos por aquí. Por lo que agregaron dos artículos a su carrito. En este ejemplo, ibas a convertirlo en un dos. Te mostraremos cómo hacer el auto animate para que eso sea animado. Una vez empezamos a enlazar todo para ahorrar un poco de tiempo. Pasé un poco mientras desarrollaba el siguiente par de sets de pantalla. Y sólo quiero caminar por una especie de por qué hice lo que hice. Entonces la última vez que nos fuimos, fuimos adelante e hicimos este pequeño tipo de pantalla donde vamos a poder animarlo más tarde y podrían poder agregar al carrito, y luego van a poder revisar su pedido. Se van a su carrito de compras. Y lo que hice es que te darás cuenta de que conozco uno o tengo el fondo oscuro, y eso hice intencionalmente. Entonces cuando van al proceso de check out, en realidad ven un fondo más claro diferente. Y definitivamente van a tomar nota de que esta es una dirección diferente. Se están preparando para hacer el check out. Es un poco diferente, y encuentro cuando estás haciendo una lista larga y estás haciendo números, es mucho más fácil de leer sobre un fondo blanco que está sobre el fondo más oscuro. Así que decidí mantener el proceso de check out con un fondo blanco para mantenerlo limpio y sencillo para el proceso de check out, y solo un poco se rompió estos tipo de usando una combinación de los botones verdes y para esos realmente, artículos realmente importantes que realmente quiero resaltar, incluso más que los botones verdes es, uh, este tipo de color rojo, que sería el pedido ahora y la tarjeta de carga. Entonces hay una especie de lo que hice ahí. Ahí hay unas pantallas muy similares que van a pasar a esta pantalla del mapa. Simplemente tengo el mapa que va a mostrar tu E T A y un simple cambio en el orden de los anuncios , y tú tienes la división donde puedes cambiarlo fuera de tu pedido. Y esto es muy similar a la caja pop up que hicimos antes. Entonces es una especie de copia y pegado que aquí está en el mismo estilo. Tengo algunos iconos para mi pequeña hoja de tramposos. Te gusta y corta un borroso el fondo usando desenfoque de fondo similar a lo que hice antes. Entonces esta no es una pantalla separada pero va a aparecer sobre esta y va a poder mostrar que cuando hagamos la animación en el modo prototipo y como todo juntos, Así que queda una última primavera por hacer, y eso es exitoso entrega. Pensé que tal vez incorporaría algunas fotos aquí y especie de caminar por el proceso del poder pensando en esto. Entonces tenemos, ah, ah, entrega exitosa y tenemos este bonito botón de restaurante de revisión que comprimen y revisen el restaurante. Eso serían más pantallas que podríamos dio en otro día, pero vamos a enfocarnos en esta pantalla, así que me dan un pequeño icono de caja de chequera y voy a descargar una de esas y tener eso ahí. Pero me gusta incorporar algunas fotos, así que me gustaría tener un llamado a la acción para que puedan revisar el restaurante. Pero, oye, volvamos a la pantalla de inicio y ordenemos algunos abarrotes. Vamos a mantenerte en la APP. Deja que te interese en usar esto en más porque cuanto más uses esta app, más dinero gana dinero la empresa. Traigamos una foto de abarrotes, ver si tengo una aquí, copiarla y pegarla. ¿ Tan interesado en pedir abarrotes? No. Podríamos simplemente recortar esta foto como tal dijo que hacia atrás en el sistema de capas sólo haciendo comando soporte los soportes tan interesados en orden y abarrotes. Entonces podríamos tener tal vez conseguir un pequeño icono de casilla de verificación aquí y necesitamos tener esto en algún tipo de fondo de contraste más alto. Entonces podemos ver este poco llamado acción a menos que hagamos eso un poco más pequeño. Tan interesado en orden y abarrotes nivel flecha hacia abajo Flecha. Creo que tenemos un downy o justo aquí que podemos localizar, ahorrar un poco de tiempo. Ya hicimos ese ícono, y a veces puedes tener iconos en el costado, así que al igual que el que te gusta, puedes tipo de coleccionar iconos y tener todos agrupados para que puedas localizarlos y arrastrarlo en sin tener que volver a las pantallas anteriores. Ahí. Sólo un pequeño consejo ahí. No he tenido tiempo de configurar eso con esta clase, pero si tuvieras un poco de tiempo extra realmente ayuda cuando estás haciendo 50 o más pantallas diferentes . Entonces, ¿qué? El flecha para indicar allí Así podría tener ah opinión restaurante tipo de grupo estos juntos Entrega exitosa y revisión restaurante. Voy a localizar a una pollita rápida, bloquea a Icahn y poner eso aquí. Pero creo que estamos prácticamente terminados aquí. Creo que hay tantas pantallas más, podemos desarrollarla por el bien del tiempo, por tipo de enseñanza tipo de este proceso. Creo que estamos en un buen punto de parada. Vamos a tener un proceso más por delante. Por lo que tenemos una aplicación maravillosamente diseñada que se pasó mucho tiempo haciendo investigación de fondo . Hicimos todo el proceso U X, desarrollamos una persona sin un flujo de usuario, e incorporamos que hacer nuestra baja fidelidad ahora son altos para el diseño final de Libia 2% . Una cosa más cuando lo presentamos, quiere poder tener un marco de alambre de trabajo para que pueda hacer click y que los enlaces vayan a lugares para que podamos hacer algunas pruebas de usuario y también mostrárselo al cliente y tener en nuestro portafolio para presumir de su bien, si no es por un cliente, vamos a hacer eso. Ahora vamos a voltear al modo prototipo. Voy a seguir adelante y en este video va a ser una nueva lección. Estoy emocionado porque esta es una parte muy divertida donde las cosas realmente empiezan a cobrar vida para que pudiéramos entrar en nota prototipo y enlazarla Next. Ya veré en la siguiente lección 19. Prototyping Linking todo: Entonces vamos a vincularlo a prototipo minutos on en prototipo gemido Adobe X'd. Vamos a vincular todo. Tienes que estar en modo prototipo. Para poder hacer eso, estoy borrando todas las pantallas innecesarias. Simplemente tenemos los principales artículos que necesitamos y vamos a empezar. Voy a seguir adelante y ahorrar. Este es un nuevo documento solo para tener a mano un respaldo extra. Hagámoslo. De acuerdo, Así que cuando el modo prototipo, ya has revisado como el enlace cosas arriba y cómo tipo de hacer auto animar. Entonces este va a ser un proceso muy rápido. No voy a entrar en cómo haces animaciones. Vamos a ir tipo de enlazarlo, ya que ya has tenido algunas lecciones de cómo hacerlo anteriormente. Entonces es todo un click en lo nuestro aquí. Por lo que ahora tenemos que recordar nuestro flujo de usuarios. Entonces cuando vayan a iniciar sesión en tu cuenta, vas a ir directamente al cuadro pop up porque vas a ir directo a iniciar sesión. Vas directo a través. Ni siquiera necesitas subir aquí, Baja aquí. Entonces eso va a enlazar a esta página y vamos a tener que sea un grifo. Entonces eso es solo un simple clic de botón. No vamos a hacer auto animates. Simplemente hacemos una transición simple y hacemos una disolución. De acuerdo, entonces ahora vamos a vincular nuestro crear un log in, que va a estar justo aquí arriba, va a esa página. va a salvar nuestra configuración anterior, que no tengamos que sentarnos ahí y hacerlo una y otra vez, y Facebook va a tener una pantalla pop up. Entonces ahora tenemos que averiguarlo, ¿Cómo hacemos que este pop up overtop, que ya hicimos el, uh,trabajo de uh, fondo en eso, todo lo que tenemos que hacer es conectar aquí. Ya como que hicimos el trabajo para que pareciera que es un pop up. Y esto podría ser Tal vez podamos hacer algo un poco diferente aquí. Podríamos hacer un auto animate otoñal o una superposición. Bueno, intentemos superponernos. Se superpondrá en la parte superior de la imagen anterior. Vamos a ver cómo funciona. Está bien, entonces tenemos todo eso vinculado. Entonces ahora solo asumamos que hacen clic en permitir y también queremos podría ser realmente querer conseguir detalle. Podríamos tener una pantalla separada Eso es exactamente así que tiene la casilla de verificación. Entonces cuando lo compruebas transiciones al estado de pantalla comprobada. Pero sólo vamos a hacer click en permitir No vamos a hacer siempre permitir. Vamos a ir directamente a las opciones aquí y no vamos a hacer superposición vencida transición. Y siempre podemos hacer Slide la dejó diapositiva. Correcto. Uh, vamos a hacer un simple disuelto por ahora mismo. Siempre podríamos hacer la animación de fantasía un poco más tarde una vez que enlazamos todo. Entonces ahora no estamos No hemos hecho abarrotes. Todavía no hemos trabajado en esa, pero hemos hecho restaurante. Entonces si hacen clic en cualquier parte de esta gran imagen, van a aterrizar tarde en la página del restaurante. Entonces supongamos que escogen el restaurante número dos o en cualquier lugar aquí es por ejemplo. Van a poder ir directamente a la página de aterrizaje. Entonces ahora cuando hagan clic en cualquiera de los lados, supongamos que haga clic en el 2do 1 Va a ser un menú desplegable. Buen click en eso. Entonces va a ser una disolución y podríamos probar un animate y ver cómo se ve eso. Entonces exploraremos eso un poco más tarde. Era podría hacer algo de vinculación básica. Por lo que una vez que hacen clic aquí, se suman a la bolsa para hacer clic en cualquiera de estos en los botones de la parte trasera, van a seguir adelante, llegar a esto. Esto va a ser una especie de pantalla de animación. Entonces esta cosita va a reventar y reventar. Haga click para aquí y vamos a hacer un auto animate. Y vamos a jugar alrededor de auto animate para ver cómo se ve bien eso. Y así nos vamos. Esto es sólo una especie de pantalla de transición. Vayamos a la transición de vuelta a aquí. Simple transición. Ya sabes, vamos a seguir bajando. El proceso es bastante fácil. Lo que van a hacer aquí es que van a ir a pedir ahora y hacer clic aquí, y luego van a cobrar tarjeta más. Eso podrían ser otras pantallas que podríamos desarrollar más tardíos en tarjeta de crédito a cartera y luego seguir adelante y dar click en el mapa y luego cambiar anuncio o van a cambiar en ese orden va a tener una caja pop up y vamos a tener que sea transición. Genial. Y así esta también otra opción para revisar restaurante que va a aparecer automáticamente después del proceso. Entonces lo que vamos a hacer es que sólo vamos a vincular esto aquí para que todo esté vinculado. Eso fue muy rápido, muy rápido. Van a ir con más detalle sobre eso en un momento. Así que no te preocupes si te sientes un poco perdido, Aquí está todas nuestras conexiones se destaca. Todo lo pude ver todas las conexiones Flujo muy simple que no hemos desarrollado que son donde van a abarrotes sin embargo varios arcos diferentes que no hemos desarrollado. Pero por solo una simple prueba, esto funcionará bien. Sigamos adelante y guárdalo y vamos a darle una prueba y a ver si necesitamos modificar alguna de nuestras transiciones a medida que avanzamos. Entonces voy a dar clic atrás y luego empiezas mi vista previa aquí. Te clip en este pequeño botón de vista previa, va a pop abrir nuestra vista previa. Entonces aquí está la vista previa de nuestra página web. Podríamos realmente probarlo. Podemos abrir esto en su teléfono también para probarlo. Pero justo aquí en mi navegador tanto tiempo con mi cuenta. Entonces sé que eso se puede hacer clic. Podría crear un log en Arkan, iniciar sesión con Facebook. Vamos Ah, cabildeo con mi o vamos, um, ¿qué es más con mis velas? Ya tienen mi contín login. De acuerdo, así que ahora aquí está mi acceso autorizado a la comida local. Entonces fui a, um, permitir. Entonces aquí estoy, vuelta a la pantalla. Por lo que quiero ir a recoger restaurantes. Eso y lo que desarrollamos. Gira una púa en el restaurante. Entonces ahora aquí está mi restaurante así que puedo hacer clic en realmente cualquiera de estos solo para las pruebas de usuario para que puedan probarlo. Da clic aquí y OK, así que aquí te dejamos algunos artículos secundarios. Exploremos lo que tienen. Siempre podemos volver a entrar y cambiar todos esos nombres, Así que creo que el 2do 1 es el que se puede hacer clic Click open. Eso es genial. Entonces ahora aquí es una especie de donde necesitamos trabajar tipo de transiciones. Entonces ahora mismo hice clic en esto, pero no puedo un colapso. Sería bueno poder agregar eso, por lo que necesitamos agregar otra pantalla cuando hacemos clic de nuevo en ella y vuelve a esa página. Um, para que podamos cocinar eso ahora mismo. Siempre que vea un tema, sigamos adelante y resolverlo de inmediato. Vayamos aquí. Entonces están aquí, y me encantaría este enlace del dedo del pie volver a esta página. Entonces sólo mirar eso retrocede dentro de un ciclo, es bueno para una agradable transición. Entonces ahora si vamos a previsualizar, en realidad podríamos iniciar el estado en cualquier lugar. Inicia la vista previa en cualquier lugar. Simplemente resalta por dónde quieres iniciar y haz clic en jugar. Cualquiera iría derecho a ello. Entonces vamos a dar click en esa segunda opción, ¿verdad? Entonces si vuelvo a hacer clic en esto, va a volver a esa pantalla anterior. Vamos a ver que se derrumba en ese Nice. Y solo necesito arreglar esa foto. Esa foto debió ser borrada. De alguna manera. Esa es una especie de buena opción. Y así ahora quiero agregar la bolsa. Entonces déjame añadir una bolsa. Ahí vamos. Ahí hay agregar la bolsa y, uh OK, así que creo aquí mismo, vamos a seguir adelante y pedir. Ahora estoy bastante contento con esto. Siempre podríamos desarrollar todas estas después. Agregar punta. Eso va a ser una pequeña transición diferente, nuestra animación o cambiar el total. Eso se podría hacer con las animaciones y diferentes pantallas. Así que ordena ahora. Entonces aquí vamos a cobrar tarjeta y él iría. Entonces ahí me va a dar 12 minutos et A. Eso sería mapa vivo siempre que se desarrolle. Para que una carga, lo que sea E. T. A. Es desarrollada por el algoritmo y podemos cambiar un orden de adder. Escucha, uno cambiando fuera de orden aquí con esos se pop up box aquí. Eso sucedió. Para que yo pueda cambiar. Y a mis órdenes, puedo llamar o mensaje de texto. Digamos que llamé y luego es una entrega exitosa. Puedo revisar restaurante e ir a una pantalla diferente trabajando, revisarlo, o ir interesado en orden y abarrotes y vamos a enlazar eso de vuelta. Ahora que estamos aquí, queremos vincular esto de nuevo hasta la página de aterrizaje de abarrotes, que va a estar arriba, que aún no hemos desarrollado. Y luego revisar Restaurant podría ir a la nueva pantalla donde pueden revisar el restaurante . Se podía ver que puedo seguir adelante con esto bastante. No va a retocar algunas cosas. Noté algunas fotos. Esta foto faltaba en especie de arreglar eso. Entonces, cuando haces la opción de menú desplegable, no ves que esa imagen desaparezca. Entonces solo haz algunos ajustes y arréglalo. Y te voy a mostrar cómo hacer la animación aquí que hará que esta bolsita tipo de pop arriba y abajo y le dé un pequeño jiggle para mostrar una especie de animación que algo fue agregado a la bolsa. 20. Prototyping creación de animaciones: Así que pasé unos 20 a 30 minutos realmente pensando en cómo todo esto va a animar en la vista previa y algo así como agregar un poco de emoción y animación para que no sea solo estático pasar de una página a otra. Hay algún tipo de movimiento para mostrarle al cliente, pero también para mostrarle al desarrollador cómo les gustaría que las cosas colapsaran se muevan, cambiaran de pantalla a pantalla. Simplemente voy a caminar por una especie de algunas de las cosas Ah, ve a mostrarte en la pantalla. Donde te voy a mostrar ahora mismo es cómo hace especie de hacer este poco animado. Pero hay algún tipo de acción donde agregaste a la carpa que cambia el color a rojo. Se pone un poco más grande en la pantalla, y luego vuelve al estado normal. Entonces si quisieras tener ah reseñas de lecciones sobre cómo usar las herramientas animate y transition y y Adobe X'd Jeremy Deegan tiene algunas lecciones impresionantes sobre eso en la sección Adobe X'd al final de la clase de definitivamente echa un vistazo a eso. Súbete a esa sección. Si de verdad quieres averiguar algo así volver a lo básico en cuanto a aprender a hacer algunas de estas animaciones y transiciones, pero tipo de mostrar cómo lo hice con este proyecto práctico. Aquí está la animación que en ella tomó tres pantallas diferentes. Tipo de hacer la animación. Podría agregar aún más si quiero tener una animación más suave con ese poco, um, agregando al carrito. Pero aquí está una especie de la imagen central. Por lo que tenemos nuestra página de aterrizaje dar click en Añadir la bolsa. Van a dar clic a la pantalla. Entonces la diferencia aquí es el modo prototipo de tendencia Arman. Ahora mismo voy a dar clic en el tablero de arte, y voy a seguir adelante y decirte que esto es sólo una transición típica. Ah, transición muy sencilla. No hay tiempo en ello, por lo que entra justo en la transición. No hay desvanecimiento pasando, así que básicamente, haces clic para agregar a la bolsa. Va a la misma copia, pero notaste la diferencia. Aquí. Tienes una especie de estado gris, y luego tienes tipo de tu agregando los dos artículos diferentes al carrito, y así cuando subes, tengo tres pantallas diferentes para hacer que la animación suceda. Entonces la siguiente que transité no auto animé. Y entonces qué? Esto lo hará auto animar desde ese estado hasta este estado, y notarás que lo hice un poco más grande para especie de indicar tipo de zoom en el icono, un poco de movimiento para que sus ojos se dirijan a la parte superior de la pantalla para que lo sepan. De acuerdo, agregué al CARRO. También le insinúa al usuario que haga clic en la bolsa de la compra para continuar en el proceso de check out si no vieron el botón de revisión del pedido a continuación. Entonces todo está pensado. Hay una razón detrás de todas las animaciones. Simplemente no se ven bonitas. Hay un tipo de formas en las que estamos dibujando al usuario hacia sus objetivos lo más rápido posible , lo que es fácil e intuitivo. Entonces aquí está la transición en la que entra, y esto es lo que es diferente ya que el gatillo es un tiempo. Entonces lo que pasa es que entra en esta transición y luego automáticamente hace una transición temporal por lo que va a pasar a la siguiente pantalla arriba sin tener que hacer clic o interactuar. Simplemente va a pasar con el tiempo, así que la duración es de un segundo. Entonces después de un segundo estás en la pantalla, va a estallar en esta pantalla y hacer la animación, y luego vas a tener otro momento. Transición auto, animar a lo más alto es el último es el estado final. Entonces ya tuviste que pasara la pequeña animación, y ahora tienes los dos añadidos al carrito, y entonces todo actuaría como normal en esta etapa. Esta es la pantalla que luego volverías a conectar. Si hacen clic desde un carrito de compras arriba, van a dar clic aquí abajo. Entonces sé que eso es un poco complicado, pero vuelve atrás y estudia los fundamentos de las lecciones de Jeremy Demons por donde realmente camina, como que se remonta a lo básico con algunas de estas transiciones. Tienen una idea de cómo emular algunos de estos en tus diseños. Entonces no voy a entrar en demasiados detalles, pero es una especie de show. Tú tipo de lo que hice ahí para que eso sucediera y por qué incluso hice ese tipo de por qué detrás. ¿ Por qué haría eso animado para poder hacerle saber al usuario que eso ahora es una bolsa de compras clicable. Un tipo icónico de realmente dibuja tu ojo ahí arriba. Entonces así fue como eso pasó a repasar algunas otras que hice aquí. Se puede ver cómo se tiene que crear tipo de pantallas múltiples y estados para especie de conseguir algunas transiciones para ir. Suceden algunas transiciones, que es una pantalla. No voy a repasar esto. Esto es lo que pasa. Voy a ir a dar click en previsualizaciones y llegué a ver algunas de las animaciones que construí aquí. Entonces lo vamos a hacer con iniciar sesión en tu cuenta. Solo vamos a ir directo ahí, y así vamos a hacer permitir. Entonces esto va a haber una animación que va a salir y mostrarte cómo conseguir que esta animación suceda. Por lo que haces click en permitir que va a ir a la pantalla de inicio. Eso va a hacer un poco de zoom hacia fuera en las fotos. Por lo que agrega una bonita animación. Pero también te das cuenta de cómo las flechas gastan dos. Hay algún tipo de acción que está sucediendo, y es suave. Entonces cómo hice eso es que fui por aquí y tuve que hacer a diferentes pantallas. Entonces tenemos este estado, que va a ser una especie de su, uh, antes del estado. Entonces va a venir aquí, déjame ir y dar click en la transición para poder mostrarte. Entonces esta es solo tu transición estándar. Ah, y tiene un 0.4 2da duración. Entonces esto va a la pantalla. ¿ Tiene una transición más? Lo que quiero hacer es que este giro se convierta en esto. Y yo quería ser esta animación agradable, suave. Entonces para hacer eso, vas a hacer auto un compañero de equipo. Entonces voy a dar click en la parte superior, y te voy a mostrar el tipo de lo que usé aquí. Entonces esto es auto animate. Hice un segundo, que es un poco más largo. Por lo que se puede ver realmente la animación pop en su lugar. Realmente se puede ver la cantidad de fotos. No es tan rápido que te lo pierdas, y también cambio las posiciones de los botones. Entonces tengo esto, uh, estas flechas. Lo siento. Las flechas, las flechas izquierda y derecha apuntan a izquierda y derecha. Y aquí arriba aparecieron arriba y abajo, para que puedas ver cuando lo hagas. El auto animado que va a tomar de una transición todo el camino a otra es como usar fotogramas clave. Si alguien alguna vez ha trabajado en flash o son algún otro tipo de programa como ese, puedes tener tu marco clave va a transitar de este dedo del pie al siguiente. Eso es una especie de auto. Cómo auto animar Obras Una vez más vio clases de Jeremy Diggins. No puedo enfatizar lo impresionante que es volver realmente a lo básico cuando se trata aire realmente aprendiendo lo que se podría hacer con las transiciones y el modo auto animate y prototipo . Entonces hice un par de animaciones muy pequeñas, no nada que se apoye de toda la pantalla solo pequeñas cosas. Ese tipo de hace ayuda a la app a sentirse un poco más viva y tiene un poco de acción, pero no tanto acción que está distrayendo. Entonces tomemos, por ejemplo, el mapa tipo de ver este pequeño cambio del mapa, y lo que tenemos aquí es que tenemos miembro aquí arriba tenemos. Este es nuestro estado final en la etapa. Esto conecta todo el camino hasta la bolsa de compras Así que esto es una especie de estado antes. Entonces tienes el mapa tipo de arrastrado aquí abajo en la parte inferior, y acabo de hacer un auto auto auto auto temporizado simple. Entonces, sabes, ya que en el momento para que no tengan que hacer clic en nada, simplemente se ponen en la pantalla y esperan 0.6 segundos, y luego el siguiente verde transita automáticamente y es un auto animado. Entonces va a ser unaanimación agradable y suave, animación agradable y suave, y el mapa vuelve a aparecer justo en su lugar donde debería estar. Entonces es solo una cosita muy pequeña que puedes agregar para realmente agregar. Respira un poco de vida en tu app en mismo fantasma de este estado s por lo que te darás cuenta. Es como todo aquí abajo en el fondo. Tienes un poco de un hueco blanco aquí si subes a la cima. Yo lo levanté para que se pueda ver esa pequeña animación snap up muy pequeña hace que se sienta como si fuera más interactivo en las piezas. Yo hice lo mismo. Traté de hacer un poco en cada página solo para especie de ser consistente. Y así aquí está el mapa. Es una especie de broche de presión en su lugar. Tipo de tener esto antes estado son el estado antes justo aquí y luego tipo de broches de presión en su lugar, y como que hones en ellos. Aplicación lo dijo Simplemente apareciendo hacia arriba la ubicación final. Tipo de ver el mapa moviéndose hacia ese destino final Así que podrías ver sólo algunas cosas pequeñas que van adelante y te muestran el proyecto final que tenemos hasta ahora, estamos listos para presentar esto a los usuarios para que hagan pruebas de usuario. Y va a haber una nueva sección agregada en el curso. Entonces si no está ahí, debería estar ahí muy pronto. Y si está ahí, adelante y continúa en Teoh, la prueba de usuario Sólo vamos a hacer un poco ir sobre brevemente tipo de lo que hago con las pruebas de usuario y tipo de algunas de las mejores formas de probar tu aplicación. Y luego una vez que haces uso de tus pruebas, regresas y revisas y haces algunas revisiones. Además, los clientes involucrados en ese proceso de revisión hasta que podamos algo así como preparar esta cosa final , entonces estás listo para enviarla a desarrollo para codificar, y ahí es cuando puedes ser un recurso para el desarrollador. Onda les dejó trabajar su magia para hacer de esto una realidad.