UI/UX Development Basics with Figma 02: Log In Forms

A login form is often the user's first interaction with an app or website, so getting it right is crucial. Here's what you should and shouldn't do:

UI/UX Development Basics with Figma 02: Log In Forms

It's great to see you back! Yesterday, you created some awesome buttons, and today we're going to put those skills to good use. Let's dive into designing a key component of many apps and websites - a login form!

Why Login Forms Are Important A login form is often the user's first interaction with an app or website, so getting it right is crucial. Here's what you should and shouldn't do:

Do's of Login Forms

  1. Keep It Simple and Straightforward: Users should find it easy to log in. Limit the number of fields – typically just username/email and password.
  2. Clearly Label Fields: Each input field should be clearly labeled so users know exactly what information is needed.
  3. Provide Visible Password Requirements: If your site requires specific password criteria, display these requirements clearly to prevent user frustration.
  4. Offer 'Forgot Password' Help: Users often forget passwords; provide an easy way to reset them.
  5. Prioritize Security and Privacy: Assure users that their credentials are secure, possibly with visible security measures like SSL certificates.
  6. Responsive Design: The login form should look good and function well on any device, whether it’s a desktop, tablet, or smartphone.

Don'ts of Login Forms

  1. Avoid Information Overload: Don’t ask for unnecessary information – this can be off-putting and lead to abandonment.
  2. Don't Hide the 'Forgot Password' Option: Make sure the option to recover passwords is visible and accessible.
  3. Avoid Complex Captchas: While security is important, overly complex captchas can frustrate users. Find a balance.
  4. Don't Use Intrusive Error Messages: If a user inputs incorrect information, provide helpful, non-intrusive feedback.
  5. Avoid Slow Load Times: Ensure your form loads quickly; slow load times can lead to a poor user experience and loss of potential users.
  6. Don't Neglect Accessibility: Design with all users in mind, including those with disabilities. Use high contrast colors and allow navigation via keyboard for those who can’t use a mouse.

Today’s Mission: Design a User-Friendly Login Form in Figma Don’t worry, I'm here to guide you through it!

Step 1: Set Up Your Figma Canvas

Open Figma and start a new design file, just like you did yesterday.

Step 2: Sketching the Form Layout

Draw a rectangle using the 'Rectangle' tool. This will be the background of your form. Consider the size and placement. A centered form often gives a balanced, focused look.

Drawing the Rectangle that will contain our form.

Step 3: Adding Input Fields

Use the 'Rectangle' tool to create rectangles for the username and password fields. Remember to leave adequate space between the fields for clarity.

Sizing input fields between 32px and 40px in height makes your field finger-friendly and not very large at the same time. The default input field in Bootstrap (a common CSS framework) is 34px in height, this is a good base size. Input fields shouldn't be smaller than that to be easily tappable.

UI/UX Tip: Each field should be clearly labeled. Users should know at a glance what information is required.

Step 4: Integrating Your Buttons

Place a button similar to what you created yesterday below the password field. This will be your 'Login' or 'Submit' button. Ensure the button is aligned with the input fields for a cohesive look.

Remember that your button must be usable on mobile devices, so please ensure it's both wide and tall enough to tap.

Step 5: Enhancing Usability

Add text for 'Forgot Password?' or 'Sign Up' options. These are usually smaller and less prominent than the main action button. Consider the font size and color to ensure readability.

UI/UX Tip: Always think about the user's journey. For instance, a 'Forgot Password?' link should be easy to find but not intrusive.

Step 6: Practice and Share

Experiment with different layouts or color schemes. How does a minimalistic design compare to a more vibrant one? Once you're happy with your design, take a screenshot and share it on our ​​SkillSprints Slack​ channel​. Can't wait to see your creativity! Use the #ui-with-figma channel for this course.

Encountered a Hitch? If you run into any snags or have questions, head over to our ​Slack channel​. We're all about collaboration and helping each other out!

Your Takeaway Today, you’ve tackled an essential element in many digital products - the login form. This experience builds not only your Figma skills but also your understanding of functional design.

Final Thought Awesome work today! You're turning those UI/UX concepts into real, tangible designs. Ready for tomorrow? We'll be creating a Personal Mobile Landing Page. It's going to be fun, so make sure you're there!