[Daily UX Mimicry Challenge] Login Page in web
June 24, 2024
UX
Mimic Example
Thanks for the designer Carlene Lim. It is not an official credit.
Analysis
1 Layout and content
- A simple centered card in the middle of the screen.
- Inside the card, it has a left-side image and a right side input area.
- Input area includes:
- Welcome words
- Two input fields and labels and one Forget password link
- Two buttons in the same form
2 Color
4 major color using Image Palette Plugin to find out.
3 Other Details
- Input fields have different colors in active and inactive mode
- In the “welcome”, it actually has letter spacing of 3% than default 0
Take away
1 How to recognize the font from the image
WhatTheFont is a website which can recognize the fonts from your uploaded image. In this way, we can learn from the design in a fast way.
However, in this design, the font used is Inter. But the result is still neat. I think basic fonts can also be good to use in design, since there are lots of situations that web fonts may not be working.
2 How to extract colors quickly from the image
Image Palette Plugin in Figma can help you extract colors from your image! It will create a 5-color palette for you.
Later, we can name the colors using styles. In this way, we can manage the color in a better way.
3 A better workflow for learning from others’ design
- Find a page to mimic
- Draw Layout using gray boxes
- Use Image Palette to extract and name colors
- Duplicate the design little by little
- Compare and Check details
- Think how to improve and use in my own design
- Conclusion as a blog
END