I see a lot of so called “challenge posts” in my social-network circle lately. I then began to wonder — It’s been a while since I took on a personal challenge.
And then I discovered the Daily UI Challenge, which is a series of daily design challenges where the challenger is to create a specific concept/page on a daily-basis. “This sounds like fun, and this should be a perfect opportunity to polish some specific rough-edges that I have, which if I polish would give an edge to my company,” my brain thinks. Given my work as an executive, I don’t think I have the time to commit to one, unless I get a little bit creative…
To work around my schedule, I am enforcing a set of rules to constrain myself:
- I will only spend 1 hour max on working on a Daily UI entry (e.g. blogging/writing excluded)
- I will not use any UI Kit or UI templates (i.e. no Bootstrap4, no pre-made templates, no kits)
- I will try to learn as much as I can, regardless of the end-result of my work (e.g. I will explore different techniques, technologies, principles, etc, as much I can)
- I will not only create designs, but I will implement them through code
- Though I can share my Daily UI entries on my blog, I am not forced to share every entry (i.e. reduced pressure)
The Theme: Sign Up Page
The theme for the first entry is a Sign Up page/modal/form/screen, anything that is related to signing up for something.
Step 1: Mockup
To not limit myself to technological constraints, I first made a quick freehand sketch on my phone. I made a mobile version, and a desktop version. Below is the concept I thought of…
Step 2: Tailwind CSS
Afterwards, I wanted to try my hand at TailwindCSS since I’ve heard many good things about it, and I wanted to polish my designing skills without having to rely on designers.
I dug some documentation and checked some examples.
Step 3: Implementation
Then I proceeded to implement my design. Since it’s my first time with TailwindCSS, I still went back-and-forth with its documentation.
I originally planned to have a background image on the left portion, and to make the right portion presentable (it sucks right now — alignment, padding, originality). I was also planning to implement the mobile version, but I didn’t have enough time to do it. Unfortunately 1 hour was too short considering it was my first time to use TailwindCSS.
Overall I am getting better, and I find this is a good, fun, and productive respite.