Daily UI Design Challenge
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 an UI example that I like and try to replicate that design, and have an 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 image.
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 image.
I forgot to copy the source of the original design, but I believe it 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 has nice icons and drop shadows to further emphasize the hierarchy. Last, I like 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 exploring different options to design the sign up page. I tried to use an image instead of 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 add challenge to the font size and color choices.
More thoughts...
These design exercise are for desktop, so there are lots to learn for other mobile decives (ipad/tablet, smart phones, wearable devices)
