Daily UI Challenge — Part 2
Hello Everyone!
If you are a first-time visitor to my Daily UI Challenge, let me give you a brief introduction to what this article is about. At the beginning of October 2022, I decided to challenge myself to start the Daily UI for the next 30 days. I think this is quite reasonable for me to build a design habit. Please read the first part of my Daily UI Challenge to see my progress.
In this second part, I will share Day 11 — Day 20 of this Daily UI Challenge. I am starting to feel the improvement in my design process, I hope you enjoy my design!
Day #11 — Flash Message
This is flash message toasts. It usually appears on top of the screen to show us a message from our recent action. The first are the standard toasts, and the second are toasts with a progress bar to indicate that they will disappear if the timer runs out.
Day #12 — Single Product
This is a footwear product from @nah.project. I like the color tone of their products and website — dark gray combined with light green. This product also looks great for casual daily use. Hopefully I can have this one someday 😄
Day #13 — Direct Message
This is a messaging screen on the desktop version.
Day #14 — Countdown Timer
This is a countdown timer for watch devices. Honestly, I’m a bit clueless because I’ve never designed for a watch device before. I hope this is not a bad one for a starter.
Day #15 — On/Off Switch
This is the toggle component for light and mode.
Day #16 — Pop-Up / Overlay
This is the logout pop-up/overlay. A pop-up or overlay is a floating screen that appears on top of your screen because you triggered an action. It usually displays some brief information and allows you to take action based on it.
Day #17 — E-mail Receipt
This is an email receipt. After we complete a transaction on a website or app, we will get an e-mail from them to inform us that our transaction was successful.
Day #18 — Analytics Chart
This is a money management mobile app that I usually use to monitor my expenses. It already has a good analytics app in the form of a pie chart that is quite informative for me. I made some changes to the information structure on that, such as the ‘total expense’ label, its comparison of expenses with last month, and button placement for date control and tabs.
Day #19 — Leaderboard
I love to play and watch football games, especially the EPL. Today I’m designing the EPL Top Scorers leaderboard page. I emphasize the first place, the monster one so far, Erling Haaland with his 17 goals 🤖
Day #20 — Location Tracker
Today’s design is about location tracking. My inspiration came from my last trip using online transportation 2–3 days ago.
From this second part of my Daily UI Challenge, I learned some new things:
- I can explore new components that I’ve never designed before; all of them (from day 11 — day 20) are new things for me.
- I learned to use smoother color choices with HSL, and I play the lightness and saturation for the background color and neutral color with the same hue level.
- Designing a watch user interface is a new world for me. I never had a smartwatch, but thankfully we have YouTube and Google. I see many watch design interface references, and I feel a new challenge from it.
Thank you for reading my article about the second part of my Daily UI Challenge! 🙏
Please let me know if you have some thoughts and feedback about my designs (or also my content writing) here. I would really appreciate it! 😁
