Interfaz de Login (Inicio de sesión) - Tutorial Básico Figma

[Música] matute decir les saluda lector galería y bienvenidos a un nuevo vídeo de su canal jr en el día de hoy vas a aprender a diseñar esta interfaz de usuario para iniciar sesión y registrarse totalmente hechos en facebook vamos a manejarlos este diseño con consistencia con elementos básicos de la herramienta y vamos a también a lograr hacer unas pequeñas micro interacciones entre estas dos pantallas así que quédate para saber cómo logras hacer esto antes de comenzar te quiero invitar a que visiten la tienda virtual de ayer en puntocom donde encontrarás increíbles frutos que he creado para ti muy entretenido tanto potente que cada semana así que si quieren liga en la descripción con muy bien ya estamos en pickman si lo que no has visto el vídeo anterior donde el egipcio never view se los voy a estar dejando aquí en este momento mencionado aquí una etiqueta arriba o también lo van a tener en la descripción para que sepan de qué se trata este software de edición de diseño de interfaces en el día de hoy pues como les decía vamos a diseñar estas dos pantallas para lo que sería una supuesta no una hipotética a la aplicación de juego más que nada como para juegos de realidad virtual por eso la imagen de este chico allí y básicamente lo que queremos hacer es diseñar la interfaz de donde van iniciar sesión los clientes o los usuarios que van a hacer uso de esta de esta aplicación no de este aplicativo que bien puede ser el teléfono también puede hacer desde un navegador web desde tu computador en fin cuál es que es un que es una interfaz de inicio decisión eso no básicamente donde un usuario entra ingresa a sus datos generalmente un correo electrónico y una contraseña y desde allí puede acceder a distinta información que le otorgan la aplicación como pueden ser su nombre su apellido si hay tarjetas de por medio información más digamos más sensible y obviamente poder entrar en este caso a la aplicación para poder darle uso y tener todas las funciones que ella nos ofrece que en este caso será jugar a través de nuestros lentes virtuales ok entonces este es más o menos el contexto para que se entienda que de por qué estamos haciendo este ejemplo de diseño ok bueno como lógicamente esto es un sencillo digamos es un ejemplo vamos a entonces yo tengo creada una página que la llame demos vamos a agregar una nueva página está decidimos agregar nueva página y vamos a decirle a gamer bueno yo le puse un nombre x y acá el estado una página vamos a crear nuestra interfaz vamos a hacer lo que es el tutorial si se acuerdan bueno en él overview vimos que está digamos que eran las herramientas básicas que se encontraban de feedback a pues acá nosotros tenemos la herramienta frame que nosotros llamamos frame piense que automáticamente en el panel de la derecha me muestra las plantillas predefinidas que me ofrece speedman yo también puedo crear las mías propias mis propias plantillas ok pero fíjense voy a trabajar con la plantilla de iphone 3g pro maps y automáticamente me agrega este nuevo lienzo con el tamaño de la pantalla de este teléfono que es el 13 pro más ok está esta experiencia lo puedo renombrar bien sea desde aquí desde el panel de capas o desde directamente acá en el digamos en la mesa de trabajo le doy doble clic y puedo llamarle en este caso lo que va a ser inicio de sección que la interfaz de inicio de sesión a este digamos este lienzo por para más o menos que se se parezca a lo que es la pantalla redondeada de los iphone le voy a dar digamos este lienzo este frame acá le voy a poner esquinas redondeadas de delicias puntos automáticamente me las aplica en las cuatro de forma distinta luego podemos tomar la herramienta rectángulo o con la tecla r de tu teclado podemos tomar la herramienta rectángulo y dibujar el digamos la caja donde va a estar ubicado imagen ok de momento la vamos a dejar vacía la dejamos allí con ese color gris que yo creo que está más que bien después podemos tomar la herramienta de texto y vamos a colocar la palabra que diga inicio de sesión el inicio de sesión y vamos a establecer ciertas configuraciones bases para este título de texto primero que lo quiero en un tamaño 28 24 si más no lo recuerdo y lo ponemos en en esta ocasión institución de la fuente llamada inter generalmente estas son fuentes usadas para uso web y para uso de aplicaciones de interfaz entonces la ponemos en inter 24 creo que en este caso le voy a aumentar el tamaño a 28 el tamaño del texto recuerden bueno no recuerden pero para que vayan sabiendo esto a nivel de diseño como como dejen el diseño gráfico en general nosotros tenemos que generar jerarquías como este es un título y esta es la interfaz o la pantalla de inicio de sesión hay que quedar bien claro que es lo que yo voy a hacer a cabo en mis pantallas y disociación por tanto este primer título tiene que tener mucha relevancia por eso yo lo pongo en negrita en un tamaño mucho más grande que el resto para que vayan teniendo esa jerarquía no de hecho estos márgenes nosotros podemos establecer qué márgenes de seguridad queremos aquí para que esto no esté es tan pegado acá ni tan pegado por acá podemos nosotros tomar la herramienta rectángulo y podemos darle clic y automáticamente me hace un rectángulo de cien por cien pero yo después puedo venir acá y en el ancho es decirle que no se tenga un ancho por ejemplo de 25 ó 35 mejor esto lo pongo aquí a la izquierda y me va a servir como guía si yo presionó las teclas mayor o la tecla shift y junto a la r me va a mostrar en la mesa de trabajo la regla de manera que yo puedo arrastrar y sacar quién acá y colocarla justo donde el min este rectángulo y lo mismo entonces puedo agarro arrastramos este digamos que rectángulo hacia el otro lado usa lo usa lo estoy usando sencillamente para poder establecer mis guías que en este caso van a ser de 3 con un margen de 35 por cada lado no entonces ya con esas guías ya yo puedo saber exactamente dónde voy a empezar a colocar mis elementos el ancho de los botones y todo esto entonces ahí lo tenemos inicio de sesión yo puedo duplicar puedo duplicar este texto presionando la tecla alt y voy a establecer que el subtítulo que va a ser como la descripción de qué es lo que voy a hacer le va a poner el 14 lo ponemos justificado la izquierda esto tiene que estar justificado la izquierda perdón criticado la izquierda y el tamaño va a ser en regular lo colocamos por acá y pues aquí vamos a colocar que no recuerdo exactamente pero aquí decía inicia sesión con tu cuenta de gamer toy entonces eso lo que vamos a hacer ahí inicia se inicia sesión con técnica de gamer él me sabe como no tiene el logo pero yo para resaltarlo para que se sepa que está en la aplicación de gamer toys lo voy a colocar en negrita o en una fuente mucho más brothers entonces estoy trabajando igual con la fuente inter pero ahora la voy a colocar en word eso para que se destaque y no tenemos que estar allí de todas maneras en todo lo que es el diseño tienen que fijarse que por ejemplo haya una buena distancia de aquí acá y buena separación entre esto que no esté así tan pegado porque eso no está bien a nivel de diseño no nos da una buena lectura tiene que tener buen espacio web buena cantidad de aire como se le llama para que la lectura sea amena sea no se vea tan cargada ok y puede hacerse mucho mucho más fácil el recorrido de la lectura entonces qué es lo siguiente que viene pues nosotros vamos a diseñar lo que son estos títulos y el botón o en este caso los campos de rellenos donde el usuario va a tener que vaciar sus datos para poder iniciar sesión entonces tomamos la herramienta de texto y vamos a escribir e mail que está en inglés pero no en jaffa que hay muchas estas cosas se usan en inglés lo colocamos unas fuentes semi volts y este le vamos a colocar un tamaño de 18 justificado la izquierda igual ok con la fuente interna luego para crear el campo de relleno tomamos la herramienta rectángulo como ven es bastante fácil en este sentido yo igual no les quise hacer un ejercicio es tan difícil y fíjense que ahí tenemos nuestro rectángulo para nuestro botón consejo otro consejo por ejemplo cuando estamos creando perdón una botón sino un campo un campo de vacío para información es recomendable sobre todo para el desarrollador que luego voy a construir esta aplicación o el sitio web es importante que por ejemplo todos los elementos digamos geométricos como en este caso un rectángulo una elipse y todas estas cosas es preferible que siempre esté en números enteros en números redondeados como en el caso que es un rectángulo de 358 62 ok no lo deje así con el 61 72 una cosa así decimal porque créanme que al momento de montar o construir esto eso va a ser muy difícil meter decimales que eso complica mucho más las cosas además que mantienen dos números redondos es mucho más fácil diseñar entonces este rectángulo que hemos creado lo vamos a colocar acá le vamos a dar un radio en sus esquinas de 10 píxeles ok y le vamos a colocar un trazo acá donde hizo stroke yo les digo más y nos vamos a colocar un trazo de de tres puntos de grosor ok y de momento lo que es el color de relleno que por defecto viene en ese color gris está bien yo lo voy a dejar en una opacidad del 10 por ciento ok ok se me movió un poco el rectángulo perfecto y el color del trazo lo vamos a dejar en este color violeta que ya yo he escogido previamente ok luego vamos a duplicar el título email vamos a cambiarle digamos sus atributos vamos a dejarlo en una fuente regular y vamos a escribir bueno es que fíjense que el rectángulo quedó por encima de ese email lo vamos a bajar y ahora sí fíjense aquí en el panel de capas ok y vamos a escribir bueno aquí lo que sería un correo ficticio para que la persona sepa que aquí tiene que rellenar su correo y robar su email un top com y la vamos a colocar un color mucho más suave aunque no sea un negro totalmente completo y antes de seguir lo que voy a hacer es que nuestro lienzo por defecto confirma lo coloque con un relleno blanco presidencia seleccionó el lienzo acá arriba acá yo puedo darle un color de relleno en este caso yo le voy a dar un color de relleno que es este grises citó o este negro no este negro perdón de hecho pueden copiar el código si así les interesa acá en el el código ejes en 111 eje para que lo tenga en cuenta porque estamos haciendo una interfaz de una aplicación para juegos porque para poder real y virtual tiene que hacerse ver así como como de juego con tomó oscuro así como lo que usted al régimen- ok entonces o bien en un mente para que esto sea visible para que haya buen contraste y wayne buena lectura todos nuestros títulos yo lo voy a colocar en color blanco preferiblemente no me lo voy a matar mucho la cabeza este color que la vemos tus emails y se dan cuenta es muy poco visible y puede que el usuario no lo vea tanto entonces es preferible aumentarle un poco más de color a esto quizás poner un gris un poquito más clarito pero que se sigue notando que esto no es digamos no está relleno sino que te está invitando a que rellenes y pongan un email más o menos similar a ese ok con ese formato ok entonces una vez que nosotros tenemos esto podemos seleccionar todo esto con la tecla mayo puede seleccionar con el realmente con la tecla alt haces clic y arrastras y puedes esto sea automáticamente duplicar todo esto que y aquí cambiar los valores en este caso yo voy a escribir acá que está la contraseña contraseña y le ponemos a la introducción introduce a tu contra entonces ya el usuario entrar yo vas a ver bueno yo todo acá que rellenar poner mi email mi correo electrónico y acá tengo que colocar una contraseña ok entonces piense que ya más o menos nos vamos pareciendo a esto que hicimos previamente y ahora lo que nos toca es hacer el botón y este mensaje que está en el pie de la aplicación ok entonces para eso entonces seguimos duplicó este rectángulo al porque ya tengo el formato esto es parte de lo que ya de lo que yo les digo cuando el diseño tanto interfaz del sitio web y el diseño gráfico en general eso cuando hacemos un flyer póster en un globo tiene que haber consistencia es decir yo por ejemplo acá estoy usando el grosor del trazo de tres puntos con el este color violeta con el rectángulo tiene las mismas dimensiones entonces no puedes hacer esto como que el botón sea más grande y no sé en este caso yo lo voy a cambiar el color de relleno hacer ese violeta ok y lo voy a quitar en este caso el trazo y no sea y voy a hacer acá y voy a poner otro color a menos que a menos que esté de alguna forma esté justificado en el resto de la aplicación porque está usando este otro color pero si no no tiene ningún sentido que haya un color de un color un botón con este color y de repente en la otra pantalla este un color un botón pintado de amarillo por decir y después en otra pantalla este un botón pintado de verde entonces es como que eso es un genera confusión al usuario porque puede llegar a pensar bueno estoy dentro de navegando dentro de la misma aplicación porque me está pasando esto será que es un error entonces hay que eliminar todas esas malas llegamos todas esas malas prácticas ok terminó el trazo yo voy a colocar este color de relleno y lo que ayuda a hacer acá es que en vez de hacer un relleno lo voy a colocar un degradado entonces yo puedo cambiar aquí el color que yo quiero en vez de que sea un color sólido cambiarlo a un degradado lineal éste permite hacer otros degradados como radiales angulares en diamante o colocar una imagen entonces yo lo va a hacer en lineal y estos digamos estos colores del gradiente lo voy a disponer de esta forma horizontal perdón y acá donde está este violeta o en este otro color voy a colocar este este con éxito que ya es como un fucsia para que se vea un poquito más vivo en ese en ese sentido que luego tomo la herramienta a texto y aquí vamos a escribir la palabra inicial inicia sesión que básicamente este botón esto que estamos haciendo acá es el llamado a la acción después de haber rellenado estos campos que es lo que debes hacer el siguiente paso es para terminar de salir de esta campaña es darle clic a este botón o darle tap a este botón de iniciar sesión entonces lo colocamos aquí en el centro lo voy a poner en negritas que sería volts lo mantenemos en el mismo tamaño de 18 píxeles y vuelvo y repito esto también mantiene la consistencia todas estas están los títulos que están en el mismo digamos en el mismo tamaño haciendo entender que cuando veamos este tamaño de letras porque hay que rellenar algún botón o porque hay que generar una acción título grande bueno eso esto nos indica que es un título que nos describe que estamos haciendo acá y en las descripciones es una fuente mucho más chiquitita que describe ya con detalle qué es lo que quiere que hagamos en este en este momento la aplicación bueno quiere que iniciemos sesión con nuestra cuenta que de hecho por eso mismo yo la descripción aquí abajo con este mismo tamaño de fuente que es número 14 entonces yo voy a tomar la herramienta texto que también puede ser con la con la letra p del teclado y escribimos acá ahora mismo no recuerdo pero decía no tiene en cuenta registro esto tenemos que colocarlo porque recuerden que siempre tenemos que darle a los usuarios una salida no no qué pasa si yo no tengo cuenta entonces te quedas aquí anclado en esta pantalla y no puede salir tiene que haber una salida y la salida va a ser esta descripción no tienes cuenta no tienes cuenta bueno entonces regístrate le decimos regístrate está la pregunta la vamos a dejar en tamaño o perdón en formato regular ok listas le presionamos escape y le decimos que esto va a estar centrado y de hecho aquí con las herramientas de alineación podemos alinearlo al lienzo y automáticamente es en el centro y ya después con el teclado lo podemos ajustar y subirlo ok entonces dice que tenemos eso allí le decimos no tienes cuenta registro de entonces aquí lo va a llevar a nuestra siguiente pantalla que va a ser la pantalla de registros pero antes de ir para allá tenemos que colocar una imagen acá como colocamos imagen bueno sencillamente hay muchas formas es realmente pero podemos ir a nuestro navegador ok podríamos ir a nuestro navegador y buscar por registro la palabra perdón la página on splash y que es una página que yo uso mucho que buscarnos e imágenes de gamer ok en muchas formas por ejemplo yo puedo copiar abrir esta imagen darle clic derecho copiar y más y me voy a firma me pegó y fíjense como automáticamente se pega mi imagen pero hay otra forma mucho más fácil que evita que nosotros salgamos de firma y es a través de los plugins nosotros podemos ir acá abrir estas opciones buscar plugins y le decimos buscar louis y buscamos el que yo uso que es de la misma página un flash un splash y le decimos instalar ya yo lo tengo instalado y una vez que tienen instalado vuelves a tu lienzo donde estábamos trabajando y lo vas a encontrar acá le das clic derecho te dice plugins y acá están nuestros plugins que ya está instalado pesos sobre rápido y lo que hace es que claro te abre esta ventanita como si fuese un pequeño addons que me permiten directamente buscar imágenes de este banco de imágenes llamado antes y no tengo que ir al navegador copiar y ponerle gamer y lo mejor de todos fíjense que yo selecciono el rectángulo donde tengo la imagen y le doy clic al alimento y automáticamente me la incrusta dentro del rectángulo eso espero muy maravilloso hecho a buscarla y más acá de nuestro querido que éste y ahí le está podemos cerrar nuestro plugin y seguimos trabajando pero vemos un pequeño problema que la imagen está fuera del cuadro que nosotros creemos cómo podemos reubicar la experiencia que automáticamente la añadió como parte del relleno fíjense que el primer relleno es un color gris pero ahora mismo la está pasando la imagen si yo abro las propiedades de la imagen veo acá que está en el modo rellenar y yo le puedo decir que la quiero recordar que en realidad no la quería recortar sino que la quiero reubicar pero al colocar en este modo me permite moverme mover la imagen y reubicarla o re posicionalmente siguió el rastro presionando mayor para que no se me salga de este eje vertical y más o menos la sitúa y le doy x acá salimos y ya tenemos nuestra imagen re posicionada para nuestra interfaz de inicio de sesión ok y ya luego lo que sí vamos a hacer con la herramienta pluma vamos a dibujar lo que sería un icono de una flecha que me permita retroceder e ir a la página de hong que en este caso yo no la estoy diseñando pero más que nada para que se entienda qué pasa si yo no quiero iniciar sesión en 50 entonces yo puedo dibujar con la herramienta pluma hago clic acá presionando mayos hago una línea de 45 grados y otras de 45 y cierro y así hemos hecho nuestra flechita le damos aquí down donde dice tom y podemos establecer que las puntas sean redondeadas si le damos a que los tres puntitos le establecemos que los verdes sean también o las juntas sean también redondeadas le damos lo que pasa que como ya lo he dicho anteriormente ya me lo cierto finalmente tenga un valor de 1 yo le digo que lo quiero un grosor de 4 y bueno sencillamente después lo colocamos siempre siguiendo lo que es nuestra línea guía de los márgenes que eso es súper importante porque ya con eso nosotros sabemos que bueno estamos dentro del mapping y ahí los y estamos viendo y opresión presionó por ejemplo maius ere maius server digamos me desactiva o me oculta las reglas y las líneas guía de manera que poder la pantalla totalmente limpia bueno como vieron que esto ya es super repetitivo no tiene sentido que yo les explicará todo esto que yo hice acá salvo este icono que se agregue que lo hice a través de otros plugins que se llama y con scouts que igual como vieron en los plantear esta pantalla y yo en este caso es que el icono que fuese del check lo puse en gratis porque este plugin también tiene iconos pago y baje este que tenemos acá le dije clip lecciones acciones y le dije insertar y automáticamente insertó el el icono bien que ahí está y lo pinté de este color citó que es el fucsia más clarito y ahí lo coloque esto es básicamente es un indicador para el usuario de que cuando coloque su correo bueno él sepa qué jabón y ya con lo que me correo y está correcto no hay ningún error no se me pasó algún signo que no que no es compatible esto ayuda mucho en lo que es la experiencia para el usuario de que sea amigable de que la misma aplicación sea capaz de poder corregirlo y hacerle ver cuando hay un error del dato que ha introducido ok entonces ya yo diseñé lo que es la pantalla de registro y está listo entonces que lo que vamos a hacer nosotros ahora es imaginar qué bueno estética digamos cómo van a interactuar estas pantallas para eso entonces vamos a la pestaña prototipo y yo lo que quiero es que cuando que quiero que haga cuando inicie sesión como yo no tengo la pantalla de iniciar sesión que ya sería como entrar al home de la aplicación pero hagamos que interactúe estas dos pantallas que pasaría por ejemplo como les decía al principio si la persona no tiene cuenta y necesita registrarse le puede dar clic acá abajo a este enlace donde dice no tienes cuenta regístrate donde eso lo que yo quiero cuando le dé clic allí me lleve a esta pantalla fíjese que hay un más cuando se lesionó está este fin se decidió lesionó este rectángulo sea lo más aquí al lado por este título también o incluso el icono y entonces me permite añadirle una acción a estos elementos en este caso el título fíjense que parece un más yo le doy al más no pasa nada pero si lo presionó y lo arrastró fíjense que sale una flechita que me puede indicar hacia donde quiero que vaya esto después de presionarlo cuál es el flujo que va a tener este caso yo quiero que vaya a esta pantalla y ciencia como automáticamente la agarra como se presiona mapa y se abre esta esta ventanita que nos pregunta cuáles son los detalles de interacción que nosotros queremos hacer básicamente ya nos está diciendo que al darle clic acá para navegar a la pantalla de registro y acá podemos establecer parámetros de animación estoy muy interesante porque esto lo filman es muy bueno en esto y tenemos distinta no va a moverse dentro no mover afuera empujar animación inteligente disolver o sencillamente instantáneo que sería hace como para pasar de una pantalla a la otra pero en este caso iba a usar el slide en que va a ser como que se está metiendo dentro como que esta pantalla le da el pase a la otra page bien sé que ahí te da un ejemplo de cómo es la animación que está como que jala a la otra batalla y la mete y lo mismo quiero que haga cuando cuando yo esté en esta pantalla de registro qué pasa si la persona dice no yo no me quedo registrado ya yo tengo una cuenta entonces le da le da clic acá abajo donde dice ya tienes y ya tienes cuenta inicia sesión agarro el icono el maf arrastró y lo llevó hacia la pantalla de inicio de sesión pero como en este caso yo vengo desde la pantalla de inicio de sesión valga la redundancia yo quiero que haga una salida entonces la animación puede ser es light in quiero que se deslice hacia atrás y que se deslice en la forma contraria ok y eso sería de hecho aquí tú puedes establecer los milisegundos animación y todo eso como quieres la curva que la quiere personalizar esto se parece mucho a lo que a una señas perfect constantemente en el editor de gráfica de velocidad esto es exactamente lo mismo el mismo de hecho ya nosotros agregamos fíjense que si hago un clic acá afuera me muestra cuáles son los flujos que están ahora mismo interactuando este este esto va a ser que me hay esta pantalla y este va a ser que me haya esta pantalla e incluso también lo podemos agregar a esta flechita para que se devuelva a la pantalla de inicio de sesión yo lo demás le pinchó acá y es lo mismo la misma animaciones light out con el sentido hacia la despacio a la derecha entonces pasa exactamente eso yo voy a hacerlo en el tema que teníamos anteriormente y lo voy a dar aquí una vez que nosotros ya tenemos el prototipado hecho nosotros podemos darle a tenerlo en el botón de play y nos va a abrir entonces una interfaz digamos prototipo de cómo estaría funcionando nuestras pantallas vuelvo al inicio y aquí tenemos la pantalla inicio creencia que me la muestra en la en el mercat original del iphone 13 pro maps como para que nos hagamos la idea de cómo sería estar en ese teléfono y éste sería mi vídeo entonces si yo le doy aquí en cualquier punto que dice que me resalta qué única acción está disponible para hacer esta conseguir o eléctrica fíjense que aquí nos hace la animación como nosotros establecimos voy a registrarme relleno vida para crear cuenta pero yo no quiero crear cuenta que ya tengo una cuenta entonces yo quiero iniciar sesión le digo iniciar sesión y se devuelve a la pantalla príncipe a la pantalla de inicio de sesión y como veis es súper sencillo esto yo pretendía que ofrecer lo más básico posible para que puedes entender pero que también puedan lograr hacer este resultado y entre tanto darles ahí algunos tips y consejos de cómo usted debe diseñar correctamente por ejemplo lo que son interfaces para aplicación y todo esto así que no hay nada más que decirle amigo este ha sido todo el vídeo espero que les haya gustado y que dejen sus comentarios la parte de abajo si no te has suscrito a mi canal suscríbete y si no conoces más recuerda que como les mencioné al principio hay un vídeo over vivo que yo hice la semana pasada que la tienen aquí en la caja de comentarios para que puedan ir descripción perdón ahí está el enlace para que puedan acceder a ese vídeo así que los veo en el próximo [Música] [Música]