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.
La página de inicio de sesión en sí es sencilla, con etiquetas claras para el correo electrónico y la contraseña, y un elegante botón para «Iniciar sesión ahora». Para mayor comodidad, también hay una opción de inicio de sesión social con Google. Por último, un discreto enlace «Haz clic aquí» lleva a los usuarios olvidadizos a la recuperación de contraseña. En general, este inicio de sesión es limpio y tan estéticamente agradable como fácil de usar. ¡100% recomendable!
Bondroy no es el típico snoozefest. Es como el hermano mayor de las páginas de inicio de sesión: vanguardista y funcional al mismo tiempo. La parte izquierda utiliza un tema de color blanco y negro con rayas diagonales, creando un diseño claro y moderno. A la derecha, vemos que se ha adoptado un enfoque más fácil de usar. Los campos etiquetados para el correo electrónico, la contraseña y una casilla de verificación «Recordarme» garantizan una experiencia de inicio de sesión sin problemas. Además, se proporciona un enlace «Restablecer contraseña» para las necesidades de recuperación de cuenta.
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.
El ejemplo de página de inicio de sesión de Tasky, encontrado en Dribbble, ejemplifica un diseño UX que combina a la perfección estética y funcionalidad. El esquema de color lila, a menudo asociado con la tranquilidad, crea una atmósfera calmante durante el registro, especialmente para los nuevos usuarios. Esta sensación de tranquilidad se refuerza aún más con la clara y encantadora ilustración de una figura de palo que sostiene una lista de tareas pendientes.
En nuestra opinión, no hay necesidad de otra imagen, ya que así está un poco más desordenado. Sin embargo, el diseño da prioridad al formulario de inicio de sesión con los campos de correo electrónico y contraseña. En definitiva, Tasky se ha ganado nuestros corazones con este ejemplo de página de inicio de sesión.
Este concepto Nike La página de inicio de sesión pone la carne en el asador con una atrevida combinación de colores morados que resaltan sobre elementos blancos nítidos. Es elegante y moderna, como sus zapatillas. El swoosh de Nike ocupa un lugar central, tanto en la parte superior como dentro de la página de inicio de sesión, manteniendo la marca en primer plano. Además, tienen una bonita imagen de una zapatilla Nike para captar tu atención.
A pesar de todo el estilo, la página es fácil de usar. Mucho espacio en blanco y un diseño limpio evitan que la página parezca recargada. El texto es moderno y fácil de leer, perfecto para deportistas en movimiento. Funcionalmente, es un éxito. Los campos del formulario son sencillos, y hay un práctico enlace «¿Has olvidado la contraseña?» por si acaso. Las opciones de inicio de sesión en redes sociales están ahí para mayor comodidad. Y ese gran botón «Iniciar sesión» prácticamente te ruega que «¡Simplemente hazlo!».
Diseña páginas de formularios de acceso a sitios web con Justinmind
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!
¿Te apetece un acogedor piso parisino o un vibrante bungalow de playa? El inicio de sesión de Airbnb es tan sencillo como una cama recién hecha. Deshazte de las luchas de contraseñas: utiliza tu cuenta de Google o Apple para acceder al instante.
Con unos pocos clics estarás de vuelta en el paraíso de Airbnb, listo para explorar anuncios únicos o gestionar tus aventuras de alojamiento. Es la cura perfecta para el jet lag: sáltate la espera y sumérgete directamente en la planificación de tu próxima escapada inolvidable.
Echa un vistazo al inicio de sesión de Slack para una clase magistral de eficiencia UX. Diseñado para reflejar su función principal de agilizar el trabajo en equipo, te permite colaborar cuanto antes con el mínimo esfuerzo.
Lo consiguen con un combo de características matadoras: un inicio de sesión sencillo que sólo requiere correo electrónico y contraseña, integración familiar con cuentas de Google y Apple para evitar la creación de nuevos inicios de sesión, e incluso enlaces mágicos para facilitar el acceso en nuevos dispositivos. La interfaz en sí es limpia y despejada, con un flujo claro e intuitivo que minimiza la necesidad de exploración o instrucciones.
La página de inicio de sesión de Zoom alberga opciones de inicio de sesión familiares como Google, Apple, Facebook u otras cuentas SSO que agilizan aún más el acceso. La interfaz es limpia e intuitiva, priorizando la experiencia del usuario con instrucciones claras y un proceso de incorporación sencillo.
Sin embargo, no se sacrifica la seguridad: las contraseñas de reunión, la autenticación de dos factores y las salas de espera garantizan que sólo se unan los participantes autorizados, lo que hace que el inicio de sesión de Zoom sea una solución completa para una experiencia de videoconferencia fluida y segura.
La experiencia de inicio de sesión de Microsoft hace malabarismos con las necesidades de una amplia base de usuarios, desde usuarios ocasionales de Outlook hasta profesionales de empresa. Esto se traduce en un enfoque polifacético que equilibra la accesibilidad con una sólida seguridad. Los usuarios pueden aprovechar su cuenta Microsoft familiar para una experiencia unificada en todos los servicios.
La interfaz se adapta al método de inicio de sesión elegido, mostrando las opciones pertinentes, mientras que funciones como el acceso condicional y la autenticación multifactor garantizan la seguridad sin interrumpir el flujo.
Netflix es el primer amor de todo el mundo por las plataformas de streaming. Sigue superando las expectativas en cuanto a diseño UX y UI, y esto se refleja en su página de inicio de sesión. Nos encanta el contraste entre negocio y diversión. El negocio es su sólido formulario de inicio de sesión en negro contrapuesto a una divertida selección de sus películas y series, presentadas al más puro estilo de una plataforma de streaming.
Tus opciones son iniciar sesión con tu correo electrónico o número de móvil o utilizando un código de inicio de sesión. También puedes solicitar una nueva contraseña desde el mismo bloque y pedirle que te recuerde para no tener que pasar por el proceso de inicio de sesión cada vez que quieras darte un atracón de Bridgerton. (Sí, nosotros también estamos obsesionados).
Quieres hacer tus compras de la forma más rápida y eficiente posible. Amazon lo sabe. Por eso su página de inicio de sesión va directa al grano. Inicia sesión con tu correo electrónico o número de teléfono y pulsa continuar, introduce la contraseña y ¡boom, ya estás dentro!
El espacio en blanco proporcionado en esta página de inicio de sesión es intencionado, asegurándose de que sólo se muestra la información esencial, incluso preguntando si podrías necesitar ayuda para iniciar sesión. También te enlaza a Amazon Business para facilitar el acceso y aumentar la eficacia.
¿Necesitas echar un vistazo rápido a las últimas noticias o a los temas de moda? No hay problema. Reddit te permite explorar contenidos libremente sin necesidad de tener una cuenta. Para los que quieran unirse a la conversación, crear una cuenta lleva menos de un minuto. Sólo tienes que añadir un nombre de usuario, un correo electrónico y una contraseña.
La interfaz da prioridad a la experiencia del usuario con un diseño limpio, opciones claras tanto para la creación de cuentas como para la navegación anónima, y una función «Recuérdame» para los visitantes frecuentes. Y para que todo sea un éxito redondo, la compatibilidad con múltiples dispositivos garantiza una transición fluida entre pantallas.
Para los desarrolladores, el inicio de sesión de GitHub es como un compilador bien engrasado, diseñado para la velocidad y la eficiencia. Al igual que su enfoque en la productividad de los desarrolladores, el inicio de sesión te permite programar y colaborar en un instante.
Los campos mínimos -nombre de usuario/correo electrónico y contraseña- agilizan las cosas, mientras que las opciones de inicio de sesión familiares a través de cuentas existentes de GitHub o Google/Apple eliminan la necesidad de credenciales independientes. La autenticación de dos factores está disponible para los desarrolladores preocupados por la seguridad sin obstaculizar el flujo de inicio de sesión.
Diseña páginas de formularios de acceso a sitios web con Justinmind
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.
La página de inicio de sesión de Linkedin tiene un diseño sencillo: no encontrarás imágenes de fondo ni animaciones. La cuestión es que una página de inicio de sesión no necesita ser interesante en última instancia. Es un simple medio para un fin, lo que la convierte en una página perfecta para un diseño sin distracciones.
Linkedin lo refleja en la sencillez del diseño de su página de inicio de sesión. Con un texto amable y motivador, la posibilidad de utilizar tu número de teléfono para iniciar sesión y la opción de mostrar la contraseña, cumple todos los requisitos. Cumple su función y ofrece a los usuarios validación si la necesitan. ¿Qué más necesitamos de un formulario de acceso?
Uber utiliza unas ilustraciones geniales y acordes con la marca en su página de registro.
Los usuarios no estarán mucho tiempo en una página de registro (si la has diseñado bien), pero el uso de ilustraciones añade interés visual y da un poco de vida a una pantalla que, de otro modo, sería anodina.
Aquí los usuarios pueden registrarse con su correo electrónico o su número de teléfono móvil. ¡Muy fácil!
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.
El caso del título es habitual entre las empresas estadounidenses y canadienses, y National Geographic ha seguido la tradición.
Lo que nos gusta de esta página es el texto «¿Necesitas ayuda para iniciar sesión? Visita nuestro centro de soporte». Los buenos textos utilizan un lenguaje que resulta familiar a sus lectores, y podemos imaginarnos esta frase saliendo directamente de la boca de alguien.
Cuando se trata de páginas de inicio de sesión rápidas y sencillas, Medium podría llevarse el premio. De hecho, a los usuarios no se les pide inmediatamente su correo electrónico, nombre de usuario ni ninguna contraseña. El acceso a la plataforma puede obtenerse basándose en tu acceso a otras plataformas populares, como Facebook o Twitter.
Si los usuarios lo desean, pueden elegir la opción Iniciar sesión con correo electrónico, siguiendo un enfoque más clásico. El formato de inicio de sesión modal del diseño de la página de inicio de sesión ofrece una experiencia minimalista, en la que el blanco es el color dominante.
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!
Diseña páginas de formularios de acceso a sitios web con Justinmind
El diseño de la página de inicio de sesión de Spotify es la simplicidad en sí misma. Los usuarios ven un fondo blanco, sin ilustraciones ni ningún otro elemento gráfico. Spotify ofrece a los usuarios la alternativa de iniciar sesión utilizando Facebook, así como la opción de mantener la sesión iniciada.
Lo que nos gusta de este formulario de inicio de sesión es que dispone de validación en línea tanto en el campo de nombre de usuario como en el de contraseña, lo que ofrece un poco de orientación fácil de usar a los usuarios. Otro tipo de validación aparece sobre el formulario de inicio de sesión tras un intento fallido. Todas las validaciones tienen color y otras señales visuales.
El formulario de inicio de sesión de Dropbox se encuentra justo en su página de inicio. El formulario de inicio de sesión, en un lado de la página, te pide que inicies sesión con tu cuenta de Google o Apple. También incluye campos para rellenar tu correo electrónico y contraseña.
La otra cara de la página incluye una ilustración de un empleado «fichando» para ir a trabajar. ¡Muy ingenioso! El resultado es un bonito contraste que divide claramente la pantalla y evita que el formulario de inicio de sesión parezca soso.
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.
También apreciamos mucho la validación adicional del campo de entrada de correo electrónico. No sólo avisa al usuario de que algo va mal con el correo electrónico tecleado, sino que también incluye el formato correcto de cualquier correo electrónico. Es un pequeño detalle, pero algunos usuarios en la naturaleza virtual agradecieron la ayuda adicional.
La página del formulario de inicio de sesión de Ted también divide la pantalla por la mitad, utilizando blanco liso para la zona del formulario y tonos coloridos para el lado opuesto de la página. El formulario de inicio de sesión en sí es sencillo, dando a los usuarios la opción de iniciar sesión con sus cuentas de Facebook o Google.
Este es otro ejemplo de página de formulario de inicio de sesión que separa el proceso de inicio de sesión en dos pasos. Siempre nos alegra ver una validación en el formulario que aclare el formato correcto para escribir la dirección de correo electrónico.
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.
Squarespace lleva su formulario de inicio de sesión al límite del minimalismo. Es sencillo y sin distracciones, más o menos lo que quieres en un formulario de inicio de sesión.
Con los formularios de inicio de sesión, no necesitas convencer a la gente del mismo modo que con un formulario de registro, por lo que crear un entorno en el que la gente pueda iniciar sesión sin frustraciones es esencial. Squarespace opta por utilizar iconos de redes sociales para su inicio de sesión en lugar de los habituales botones de llamada a la acción que se ven en otros formularios. Funcionan bien con el diseño y contribuyen a ese enfoque minimalista.
La página de inicio de sesión de Evernote tiene un diseño sencillo, sin distracciones de color ni animaciones. El proceso de inicio de sesión se divide en dos pasos, en el segundo los usuarios dan sus contraseñas. Alternativamente, los usuarios pueden iniciar sesión con su cuenta de Google.
El propio formulario de inicio de sesión se ciñe al punto, mostrando a los usuarios sólo la etiqueta del campo de entrada y el eslogan de la marca. El formulario de inicio de sesión también da a los usuarios la opción de permanecer conectados otros 30 días: dar una ventana de tiempo específica para permanecer conectado es un detalle interesante.
Diseña páginas de formularios de acceso a sitios web con Justinmind
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.
El diseño de la página de inicio de sesión de Mangools es predominantemente blanco, pero aún así consigue ofrecer salpicaduras de color que se ciñen a la identidad de la marca. Aunque no existe la opción de iniciar sesión utilizando plataformas de redes sociales, dada la naturaleza empresarial de la herramienta, es perdonable.
La validación que aparece tras un intento fallido de iniciar sesión funciona para ayudar a los usuarios, mostrándoles el formato correcto de los correos electrónicos. Nos encanta que el formulario de inicio de sesión tenga tanto etiquetas como marcadores de posición con un ejemplo de lo que los usuarios deben poner en ese campo. ¡Puntos para la usabilidad! Un gran rasgo de la página es que con las pequeñas pero potentes formas gráficas del fondo, casi se tiene sensación de movimiento. Es una forma suave de hacer agradable el diseño de la página de inicio de sesión, sin distraer al usuario del formulario de inicio de sesión.
Otro diseño de página de inicio de sesión que divide todo verticalmente por la mitad. AWWWARDS utiliza una imagen para el lado izquierdo que capta perfectamente el encanto de la plataforma, atrayéndonos hacia una multitud de ansiosos asistentes, todos esperando oír quién ha ganado un determinado premio.
El formulario de inicio de sesión, a la derecha de la pantalla, es sencillo y directo. Los usuarios obtienen una validación visual de los campos de entrada de nombre de usuario/email, así como la opción de permanecer conectados. Como siempre, las opciones para iniciar sesión utilizando las redes sociales son bienvenidas. La combinación de colores es un toque agradable.
Headspace es un servicio de meditación. Su página de inicio de sesión es lo que cabría esperar de una empresa que quiere que encuentres la paz interior. Es mínima y los colores son apagados. El tipo y la composición de los elementos están bien construidos y son espaciosos. El formulario de inicio de sesión respira.
La página de inicio de sesión nos ofrece tres formas de conectarnos. Una de ellas, curiosamente, es Spotify. Headspace pone su material de audio en Spotify, así que tiene sentido que los usuarios puedan iniciar sesión con esas credenciales: esto demuestra que Headspace conoce a su público y se preocupa por él, y quiere hacerle la vida aún más cómoda.
Diseña páginas de formularios de acceso a sitios web con Justinmind
Charles Schwab es un banco y una empresa de corretaje. Su página de formulario de acceso es sencilla -como la mayoría de los formularios de acceso- y no es nada fuera de lo común. Lo bueno de este formulario es el texto «4 consejos rápidos para proteger mejor tu cuenta». Demuestra que el banco se preocupa por ti y por tu seguridad. Los consejos son prácticos, lo que significa que puedes ponerlos en práctica en cuanto los leas.
También nos ha gustado mucho el menú desplegable de la página de inicio de este formulario de acceso. Puedes hacer muchas cosas con tu banco y hay mucha información que digerir cuando se trata de banca online e inversiones. Esta función permite a los usuarios elegir en qué página quieren empezar. Esto significa que es menos probable que se pierdan al navegar, lo que puede frustrar a tus usuarios.
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!