WHAT: a daily UI challenge for UI exercising
WHY: I want to be more familiar with the UX/UI tools
HOW: a UI design prompt is generated by Daily UI, find a UI example that I like and try to replicate that design, and have a self-reflection for each challenge
Today's UI Challenge: Sign Up
Design Hint... Create a sign-up page, modal, form, or app screen related to signing up for something. It could be for a volunteer event, contest registration, a giveaway, or anything you can imagine.
I forgot to copy the source of the original design, but I believe it is from design+code.​​​​​​​ The information on the sample design is straightforward. The illustration on the left is an instant attention grabber. The email and password fields have nice icons and drop shadows to further emphasize the hierarchy. Last, I like the purple color.
Tools and resources that I used for this challenge
Design Tools: Figma, Photoshop
Photo resource: pexels.com
Illustration: manypixels.co
My Process
I want to understand the structure of the design by removing the eye catching graphics, so I use a standard UI tool kit to create the sign up page. Then I fill it in with more details. Below is my 1st copycat attempt. I don't want to spend too much time on recreating the same illustration, so I use a free illustration from manypixels. Below are my results.
Try something new I want to explore different options to design the sign-up page. I tried to use an image instead of an illustration. The one on the left is using a full image as the background, so I have to make the sign-up page transparent to not fully block the image. That also adds challenge to the font size and color choices.
More thoughts...
These design exercises are for desktops, so there are lots to learn for other mobile devices (iPad/tablet, smartphones, wearable devices)
Comments