Los diseños de las páginas de inicio de sesión deben ser fáciles de entender y no requerir ninguna reflexión por parte del usuario. Aquí tienes más de 40 para inspirar tu próximo diseño.
Después de nuestro artículo sobre increíbles formularios de registrovamos a echar un vistazo más de cerca a formularios de inicio de sesión inspiradores que tienen una gran UX y facilitan el inicio de sesión.
Cuando se trata de un buen diseño de página de inicio de sesión, quieres que a tus usuarios les resulte lo más fácil posible acceder a tu producto o servicio.
Diseña páginas de formularios de acceso a sitios web con Justinmind
Un obstáculo de más y frustrarás a tus usuarios. Para evitar la frustración, aquí tienes 40 diseños de páginas de inicio de sesión que nos encantan. Inspírate en ellos para crear prototipos y ¡valida los formularios!
¿Listo para sumergirte? InsideBoxLa página de inicio de sesión de Justinmind está diseñada para que sea muy fácil. Es refrescantemente sencilla, como una página de inicio de sesión bien diseñada. Dos campos claros para tu correo electrónico y contraseña es todo lo que necesitas para empezar. Un amistoso mensaje de «comienza tu viaje» te da la bienvenida, y un ejemplo de correo electrónico pre-rellenado te asegura que sabes exactamente qué formato utilizar. Además, una práctica opción de «mostrar contraseña» te permite ver lo que estás escribiendo para mayor seguridad. Es todo lo que necesitas para una experiencia de inicio de sesión fluida y atractiva.
Olvídate de los formularios desordenados: este prototipo de página de inicio de sesión está diseñado para ofrecer una experiencia refrescante y sencilla. Es clara y concisa. Sólo tienes que introducir tu nombre, correo electrónico y elegir tu área de interés para personalizar tu viaje. Directa al grano, esta página de inicio de sesión se asegura de que todos los usuarios puedan identificar los campos principales y rellenarlos respectivamente. Además, la ilustración de la chica leyendo con su gato invita a registrarse y a ponerse cómodo con su libro favorito y su amigo peludo. ¡Nos encanta este ejemplo de página de inicio de sesión!
La página de inicio de sesión de LemonPie está diseñada para facilitar al máximo las cosas. Esta página mantiene las cosas claras con sólo dos campos: tu dirección de correo electrónico y una contraseña para proteger tu cuenta. El mensaje tranquilizador «Mantén tus datos seguros» aparece encima del formulario, para que sepas que tu información está en buenas manos. El ejemplo de la página de inicio de sesión también ilustra el codiciado proceso de verificación en dos pasos que garantiza un acceso seguro a la plataforma. ¡Tranquilo LemonPie squeezy!
La página de inicio de sesión de TheCubeFactory, te da la bienvenida con un aspecto amigable y elegante. A la izquierda, el formulario de acceso es sencillo: sólo tu correo electrónico y contraseña. ¿Necesitas entrar más rápido? Hay una opción de «Recordar durante 30 días», y si has olvidado tu contraseña, ahí tienes un enlace rápido. Incluso puedes elegir «Iniciar sesión con Google» para una experiencia más rápida.
Kryptonite es sencilla y clara. Justo en la pantalla de tu teléfono, te recibe un cálido «Bienvenido a nuestra aplicación». Crear una cuenta es rápido, sólo tienes que rellenar tu correo electrónico, establecer una contraseña y repetirla para estar seguro. El botón «Regístrate» es grande y fácil de ver. ¿Aún no estás preparado para crear una cuenta? No te preocupes, hay un enlace «Iniciar sesión» en la parte inferior. Con su diseño limpio y fluido, Justinmind hace que empezar a utilizar la Criptonita sea muy fácil.
La página de inicio de sesión de TrackTV está pensada para que entres rápidamente. Con su encabezado amarillo brillante, llama la atención al instante. El formulario sólo te pide lo básico: tu correo electrónico y contraseña. ¿Quieres ahorrar tiempo después? Haz clic en «Recordar durante 30 días». ¿Has olvidado tu contraseña? No hay problema, hay un enlace rápido para restablecerla. También puedes saltarte el tecleo e iniciar sesión con Google. Y si eres nuevo aquí, sólo tienes que pulsar el enlace «Regístrate» de la parte inferior. Fácil, amigable y sin complicaciones, ¡tal y como debe ser el inicio de sesión!
CubeFactory te lo pone fácil. Inicia sesión con Google o utiliza tu correo electrónico y contraseña. ¿Necesitas un recordatorio para la próxima vez? Sólo tienes que marcar «Recordar durante 30 días». ¿Has olvidado tu contraseña? El enlace está ahí mismo. A la derecha, una imagen tranquilizadora y un mensaje que dice: «Da vida a tus ideas». ¿Aún no te has registrado? Haz clic en «Regístrate» en la parte inferior. ¡Fácil y acogedor!
Esta página de inicio de sesión es muy sencilla. Introduce tu correo electrónico y contraseña, o ahórrate algunos clics iniciando sesión con Google. Si has olvidado tu contraseña, hay un enlace para ello. Además, la opción «Recordar durante 30 días» significa menos complicaciones la próxima vez. ¿Listo para unirte? El botón «Regístrate» te está esperando en la parte inferior.
A veces menos es más, y esta página lo consigue. Con sólo un campo de correo electrónico y una contraseña, vas directamente al grano. El aspecto limpio y minimalista mantiene alejadas las distracciones. ¿Has olvidado tu contraseña? No pasa nada, el enlace está justo donde lo necesitas. Y en lugar de un gran botón, hay una flecha suave que te guía hacia adelante. ¿Aún no te has registrado? «Regístrate» está en la parte inferior, esperándote. Sencillo, elegante y directo.
Esta página de inicio de sesión es acogedora. El saludo dice: «Hola, bienvenido a tu cuenta», estableciendo un tono amistoso. Aquí se trata de facilitar el acceso, sólo tienes que introducir tu correo electrónico y contraseña. ¿Quieres ahorrar tiempo la próxima vez? Marca la opción «Recordarme». ¿Has olvidado tu contraseña? El enlace está ahí para restablecerla rápidamente. El botón «Iniciar sesión» en negrita destaca, listo para usar. ¿No te gusta teclear? También puedes iniciar sesión con Facebook, Google o Apple. Sencillo, amigable y sin complicaciones.
Esta pantalla de inicio de sesión te da la bienvenida con un mensaje amistoso: «¡Bienvenido de nuevo a tu aplicación de ejercicio favorita!». Está diseñada para ser sencilla, sólo tienes que introducir tu correo electrónico y contraseña, y pulsar el botón azul «Iniciar sesión». Si has olvidado tu contraseña, hay un suave enlace recordatorio justo debajo. El diseño curvo de la parte inferior añade un toque agradable y refrescante, que hace que toda la experiencia resulte relajada y motivadora.
¿Quién puede resistirse a esa pila de tortitas? Esta pantalla de inicio de sesión establece un tono acogedor y atractivo. Un amistoso «¡Hola de nuevo!» te saluda, facilitándote el acceso. Sólo tienes que introducir tu correo electrónico y contraseña, y pulsar el botón púrpura «Iniciar sesión». ¿Necesitas restablecer tu contraseña? El enlace está ahí mismo. Si eres nuevo, simplemente pulsa «Regístrate» en la parte inferior. Es cálido, acogedor y te lleva adonde necesitas ir.
Atrevida y directa, esta pantalla de inicio de sesión va directa al grano. Con un fondo azul brillante y un icono sencillo, te invita a «Hablar, amigo, y entrar». Sólo tienes que introducir tu correo electrónico y contraseña, y listo. El botón negro «Entrar» destaca, por lo que es fácil de localizar. Incluso hay un pequeño icono de información junto al campo de correo electrónico, por si necesitas un poco de ayuda. Limpio, nítido y sencillo.
La página de inicio de sesión de SaleSkip logra un equilibrio entre una estética limpia y la facilidad de uso. Utiliza un moderno esquema de colores azul y blanco con un sutil fondo geométrico para dar una sensación de frescura. Un saludo amistoso con el icono de una estrella establece un tono acogedor, mientras que un texto claro destaca la propuesta de valor de SaleSkip.
Por último, se ha colocado un botón destacado de «Iniciar sesión» para facilitar el acceso. El registro de nuevos usuarios está disponible a través de un enlace dedicado, mientras que los usuarios existentes tienen la opción de iniciar sesión utilizando sus cuentas de Google o Twitter para mayor comodidad. ¡Un ganador a nuestros ojos!
Estamos absolutamente enamorados de este ejemplo de página de inicio de sesión. Hay algo en ese color que nos encanta, ¿no? ¿No? En cuanto a la página de inicio de sesión, es va al grano, ofreciendo un diseño limpio y fácil de navegar. Aquí no hay gráficos locos ni fuentes extravagantes, sólo un diseño claro que te ayuda a planificar tu viaje. El mensaje de bienvenida es amable y directo, y te hace saber que se alegran de tu regreso.
Las opciones de inicio de sesión son sencillas: continúa con Google para ir a la velocidad del rayo, o introduce tu nombre de usuario y contraseña como un jefe. ¿Necesitas restablecer la contraseña? Ahí también te cubren las espaldas.
Sumérgete directamente en tu feed con la página de inicio de sesión de la aplicación de Instagram. Complementa perfectamente su enfoque en bellos elementos visuales con un flujo mínimo e intuitivo, consiguiendo que vuelvas a tu mundo Insta más rápido de lo que puedes decir «doble toque».
Con sólo el mínimo de información (tu nombre de usuario y contraseña) ya estás de vuelta, desplazándote por las fotos y vídeos de tus amigos y creadores favoritos. Se deshacen del desorden y de los campos adicionales que ralentizan a los usuarios, e incluso te permiten iniciar sesión con tu cuenta de Facebook existente, eliminando la necesidad de crear nuevas credenciales. ¡Te queremos Insta!
Agiliza tu acceso al mundo digital con el proceso de registro de Google. Con todas las características ganadoras de una buena página de inicio de sesión, prioriza la claridad y la facilidad de uso. Introduce tu nombre y crea tu contraseña: ¡ya está!
No necesitas diseños complejos ni información excesiva. Google también te permite utilizar tu dirección de correo electrónico actual para mayor comodidad, evitando la necesidad de crear una nueva específicamente para sus servicios. Así se hace, Google, allanando el camino a la excelencia como siempre.
Reflejando el énfasis de la plataforma en el compromiso instantáneo, iniciar sesión en X (antes conocido como Twitter) lleva menos tiempo que decir el nombre de la propia plataforma.
Las opciones de inicio de sesión social con tus cuentas de Google o Apple te hacen la vida mucho más fácil, ¿verdad? X lo sabe y lo prefiere, por eso lo ofrece como primera opción de inicio de sesión. La segunda opción es la forma tradicional de introducir tu número de teléfono, correo electrónico o nombre de usuario. Ambas son válidas, pero creemos que la primera opción gana en nuestra humilde opinión.
En Pintrest se trata de encontrar esa estética con la que no puedes evitar conectar. Por eso se les presiona para que presenten la información de forma clara y concisa, al tiempo que se aseguran de que atrae la atención de los creativos. Los niveles de exigencia son altos, y están a la altura del reto en cada oportunidad.
Sólo tienes que introducir tu dirección de correo electrónico o tu nombre de usuario y contraseña, o simplemente iniciar sesión mediante Facebook o Google, y ¡prepárate para sumergirte en un mundo de inspiración infinita!
PayPal se lleva el premio al minimalismo. No sabrías en qué sitio estás si no fuera por el pequeño logotipo de PayPal en la parte superior del inicio de sesión.
Lo interesante e inusual de esta página de inicio de sesión es que consta de dos partes. Introduces tu correo electrónico y luego pulsas «Siguiente» para ir a una pantalla para cambiar tu contraseña.
No sabemos por qué PayPal ha descompuesto así su proceso de registro, sobre todo porque tarda más de lo normal.
National Geographic tiene un formulario de inicio de sesión estándar: no hay sorpresas aquí. Hay pocos elementos que merezca la pena comentar porque es un buen ejemplo de formulario de inicio de sesión.
Al igual que Paypal, The Washington Post también divide su formulario de inicio de sesión en dos pasos. La página de inicio de sesión en sí es bastante sencilla, y el formulario ocupa el centro del escenario.
Cabe destacar que los usuarios pueden iniciar sesión con su cuenta de Amazon. Dado que tanto el gigante del comercio electrónico como la plataforma de noticias pertenecen a Jeff Bezos, ¡deberíamos haberlo visto venir!
Mailchimp ha pasado recientemente por un cambio de marca a medida que empieza a madurar para convertirse en una plataforma de marketing de pleno derecho. Su página de inicio de sesión es similar a la antigua, con algunos cambios menores.
Una es la inyección de personalidad. Sus ilustraciones son extrañas y adecuadas. Lo bueno de esta página de inicio de sesión es que puedes iniciar sesión como lo harías en cualquier página de inicio de sesión, pero tienes la oportunidad de aprender algo nuevo: cómo construir mejores relaciones con tu audiencia, algo que presumiblemente quieren hacer muchos usuarios de Mailchimp. Aunque el texto es mínimo en esta página de inicio de sesión, sigue siendo claro y coherente, como puedes ver en la sección de olvido de contraseña/nombre de usuario.
Sephora utiliza una ventana modal para el diseño de su página de inicio de sesión. Nos encanta que utilicen una elección inteligente de palabras. Los usuarios pueden diferenciar entre iniciar sesión y registrarse: todo se reduce a la pregunta «¿Eres nuevo en Sephora?». Si ya tienes una cuenta, puedes seguir adelante y utilizar tu dirección de correo electrónico y contraseña para iniciar sesión. Y si no, pulsa el botón de crear cuenta, que te llevará a otra página para hacer exactamente eso.
El inicio de sesión social es genial porque permite a la gente iniciar sesión en un servicio con un solo clic. No es necesario rellenar ningún formulario ni escribir la contraseña. Skillshare da a su inicio de sesión social un lugar privilegiado en la parte superior del formulario de inicio de sesión.
Pero si no quieres hacerlo, justo debajo puedes escribir tu correo electrónico y contraseña. Este formulario de inicio de sesión hace el trabajo.
Este diseño de página de inicio de sesión también juega con el contraste entre un lado colorido y otro más sencillo donde se encuentra el formulario. Dribbble tiene una separación vertical de la pantalla, mostrando a los usuarios una colorida ilustración realizada por un usuario de Dribbble. Ni que decir tiene que la ilustración es extravagante y colorida, como el propio concepto de Dribbble.
En cuanto al formulario de inicio de sesión, apreciamos que las etiquetas de los campos de entrada no desaparezcan una vez que el usuario empieza a escribir. Los usuarios también tienen la opción de iniciar sesión utilizando sus redes sociales. La validación del formulario de inicio de sesión aparece tras un intento fallido, pero no especifica exactamente qué ha fallado. Aunque siempre nos alegra ver un poco de texto y no sólo el uso del color para la validación (¡el daltonismo es un problema común!), nos gustaría que hubiera un poco más de detalle para los usuarios confusos.
Vimos este cartel en la página de Dribbble de Selecto y nos pareció impresionante.
La animación combina las páginas de registro e inicio de sesión, lo que es un bonito detalle. Como era de esperar, hay iconos de inicio de sesión social y texto indicativo de marcador de posición, todo para ayudar al usuario a hacer lo que quiere.
Los formularios de inicio de sesión son un ejercicio para facilitar la vida a tus usuarios. Los inicios de sesión sociales, el texto de marcador de posición y las etiquetas claras son algunas de las formas en que puedes crear un formulario de inicio de sesión fácil de usar. Utiliza los 40 anteriores como inspiración. Ahora, ¡empieza a crear prototipos!
