Flame - Mobile Web - Signup/Login
This project was built in Figma, with iOS Safari as the target device to leverage proven design conventions familiar to a wide audience. Third-party component libraries were used to efficiently implement high-quality designs with a focus on usability.
These designs also showcase customizing components with custom icons and graphics for clearer communication and visual appeal. The layout is mobile only, organized from top to bottom. Starting with a logo, followed by a headline, information text, login buttons and a form. Error states are accounted for, and user flow is prototyped within Figma to systematically guide users through the process while addressing the stated requirements.
An a11y plugin was used to verify the designs meet color contrast requirements. Screenshots are included on the canvas. The error state of one screen’s input field passed all but the AAA requirements.
Reviews
1 review
You've done decent work with this signup flow! However, there are some issues that might be considered:
- The first thing that caught my eye is the mismatch between the straight-angled inputs for email and password and the rounded angles on the buttons. Although it’s a minor cosmetic issue, aligning these design elements would enhance the visual harmony of the design.
- The error messages are indented, which seems unnecessary and creates a visual imbalance on the page.
- Consider displaying the password requirements upfront, before users enter passwords that are too short or too simple.
- The adherence to WCAG's color contrast compliance is commendable. However, beyond color contrast, accessibility involves ensuring adequate touch target zones and providing options to fill in forms using a keyboard. These are important factors to consider and demonstrate in future designs.
Well done!
You might also like
Pulse — Music Streaming App with Accessible Light & Dark Mode
Islamic E-Learning Platfrom Dashboard
SiteScope - Progress Tracking App
Mobile Button System
FlexPay
CJM for Co-Working Space - WeWork
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
