Day 1 of making UI in 100 days

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:

Rules:

1. I will only spend 1 hour max on working on a Daily UI entry (e.g. blogging/writing excluded)
2. I will not use any UI Kit or UI templates (i.e. no Bootstrap4, no pre-made templates, no kits)
3. 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)
4. I will not only create designs, but I will implement them through code
5. 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.

#DailyUI