Mitratech Login Revamp
Overview
This Login/SignUp form prioritizes accessibility by combining a visually engaging design with user-friendly features and adherence to accessibility standards.
Key Design Decisions & Rationale:
- Visual Appeal: Engaging background imagery enhances the user experience while maintaining sufficient color contrast for readability.
- A centered white container provides a clear focus for the form.
- Form Elements: Inline validation provides immediate feedback to users.
- Password visibility toggle improves usability and security.
- Focus indicators and hover states provide visual feedback and enhance user experience.
- Accessibility Features: Meets WCAG 2.1 color contrast guidelines for text and icons.
- Includes social login and SSO for convenience, with alternative login methods available.
- Focuses on keyboard accessibility and screen reader compatibility.
In essence: This form aims to be both visually appealing and accessible to all users, regardless of their abilities.
Tools used
From project brief
Topics
Share
Reviews
3 reviews
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...
Lorem ipsum dolor sit amet consectetur. Pretium pulvinar odio aliquet condimentum suspendisse nibh vel arcu. Bibendum in imperdiet sapien quisque odio gravida. Malesuada aliquet elit egestas placerat amet. Ornare in scelerisque ut gravida amet. Tristique amet amet bibendum enim cursus. In vehicula mauris tincidunt arcu aliquam nunc. Tincidunt vitae netus ante eu et bibendum. Eget amet nibh vel est congue tellus tortor gravida nascetur. Ut vestibulum elit pulvinar netus in ante lectus turpis auctor. Nulla purus morbi adipiscing quisque in sodales aliquet. Ultricies a elit quis metus. Aliquet cras pretium platea lacinia mi et orci volutpat vulputate. Bibendum massa fusce...
Great job! You did everything right according to accessibility guidelines. The design is clear and helpful. Just one small suggestion: while hovering, some users with poor eyesight might not notice it, so I'd recommend increasing the contrast between the default and hover states.
(edited)
14 Claps
Average 4.7 by 3 people
You might also like
Project
Redesigned Heroku Sign-up page
This project aimed to enhance the accessibility and user experience of the Heroku sign-up page. The original design presented several challe
Project
Empathy Map - Hargreaves Lansdown
Design Task OverviewProduct Name: Hargreaves Lansdown Device Type: Desktop Platform: Personal investments account Target audienceSelf-direct
Project
Sojo News
Role: Lead UI/UX Designer Spearheaded the end-to-end design process for SojoNews, a news aggregation platform, focusing on enhancing user en
Project
OBEREK Typography System
OBEREK is an innovative game studio and entertainment platform that merges traditional Slavic culture with cutting-edge digital gaming exper
Project
Revocube Spaces | Website Design
Overview Revocube spaces is a company that provides long and short term rentals uniquely designed for your well being. Main Task Build a web
Project
Prototyping - Light/Dark Mode
My first try to prototype a slider for light/dark mode.
Visual Design Courses
Course
UX Design Foundations
Learn UX design basics to acquire a solid foundation in UX design principles. Acquire the skills needed for product development and improving user experience.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics every UX designer needs to create clean, user-friendly designs.
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.