100 Days of UI
A test of skill and development
The 100 Days of UI Challenge was a journey of growth, experimentation, and creative endurance! The idea was to design a new user interface element or concept each day for 100 days straight, forcing myself to improve through repetition and exploration. Here’s a recap of the journey, from the major highlights to the lessons learned:
Kick-Off (Days 1-10): I started with basics like buttons, forms, and simple animations. The focus was on getting comfortable with the challenge's daily rhythm. Each day, I tried to push slightly beyond my comfort zone, playing with color schemes, shadows, and typography.
Settling In (Days 11-30): With the basics covered, I moved on to more complex components: navigation bars, modals, and card designs. During this time, I experimented with layouts and created a few interactive prototypes. I noticed that I was becoming faster with Figma (or any tool of choice) and started refining my personal style.
Finding My Flow (Days 31-60): I was fully in the groove by now! This phase included more challenging UI concepts like dashboards, settings screens, and even a few micro-interactions. I spent time studying real-world apps for inspiration and implemented some new techniques, like glassmorphism and neumorphism, while also focusing on accessibility.
Burnout and Breakthrough (Days 61-80): I hit a bit of a creative wall around this time, as daily designing became mentally exhausting. However, instead of giving up, I allowed myself to take on "simpler" days or revisit previous concepts, adding more polish and details. This phase taught me the importance of persistence and pacing.
Final Push (Days 81-100): In the last stretch, I focused on tying everything together. I created cohesive design systems, added design annotations, and refined interactions. I also spent time documenting what I'd learned to share with others. These final days were about quality over quantity, making sure I ended on a high note.
What I Learned: Consistency truly is key. I developed a much deeper understanding of UI principles, improved my speed, and learned the value of iteration. By forcing myself to design something every day, I could look back and see how much I'd progressed. Plus, I have a solid portfolio of unique UI elements to show for it!
Overall, the 100 Days of UI Challenge was a whirlwind experience but incredibly rewarding. It's amazing how much you can grow with daily, focused practice!
For this UI design, part of the 100 Days of UI Challenge, I focused on creating a visually clean and modern landing page for "PlantLand." The design emphasizes a minimalist layout with plenty of white space, letting the bold "NATURE" text stand out as the main visual anchor. The text uses an image masking technique, allowing a leafy background photo to fill the letters, adding a natural texture and depth.
This project required skills in typography, layout design, and image manipulation. The floating leaves add subtle movement, achieved by overlaying transparent PNGs strategically across the screen. A simple green and white color scheme was selected to reinforce the brand’s natural theme, and the interactive elements, like the "Shop now" button and "Check available plants now" link, guide the user’s journey intuitively. This project also reinforced my understanding of balance, hierarchy, and visual flow in UI design, enhancing my proficiency in tools like Figma or Photoshop.
I designed this task management app interface to streamline productivity and make task organization intuitive and visually appealing. The layout is clean and structured, with a strong focus on usability and easy navigation. At the top, the user can see an overview of "Today's Tasks" and an option to create new tasks, which reinforces the app's focus on efficient task management. The "Create New Task" button, styled in a bold red, stands out as a primary call-to-action. This decision required understanding color theory and hierarchy to draw attention to key actions without overwhelming the user.
For the "Upcoming Deadlines" and "Task Categories" sections, I used collapsible cards and icons to organize content and improve readability. Small profile images within each task category add a social aspect, indicating collaborators for specific tasks, which involved knowledge of iconography and UI patterns that subtly enhance functionality. Additionally, the bottom navigation bar was designed with icons representing core app functions, facilitating easy navigation across screens. Designing this app required skills in layout design, typography, and information hierarchy, as well as proficiency in tools like Figma or Adobe XD. This project emphasized the importance of consistency and minimalism, as each component was designed to be as functional and user-friendly as possible while maintaining visual appeal.
I designed a status update application focused on simplicity and user engagement. The goal was to create a platform where users could post updates, share their moods, and interact with friends' posts in a clean, visually appealing interface. Key features included a streamlined feed displaying status updates with text, images, and reactions, as well as an intuitive posting feature where users could easily share their current status or mood with an emoji or icon selector for quick expression.
Design elements focused on usability and a social, welcoming aesthetic. I used a card-based layout for each post, ensuring consistent spacing and readability, with clear, easy-to-tap icons for reactions like thumbs-up, comments, and shares. Each user’s profile picture and name were prominently displayed to add a personal touch and make the app feel connected and community-oriented. The color palette was friendly and modern, with accent colors highlighting interactive elements to guide users intuitively.
Additionally, the app included a "status bar" at the top, similar to stories in social media, where users could view the most recent updates from friends at a glance. This project required skills in layout design, color theory, and interaction design, with a focus on building an intuitive, visually engaging experience. Designing this status update app emphasized the importance of clarity and simplicity, allowing users to quickly engage with content while maintaining a cohesive and enjoyable interface.
I designed a splash screen for a dating app, focusing on creating an inviting and stylish first impression that reflects the app's brand. The splash screen features a large, eye-catching logo centered on a soft gradient background, with colors chosen to convey warmth, approachability, and modernity—think soft pinks, purples, or blues. This color palette aimed to evoke a sense of comfort and trust, essential for a dating app. To add a subtle dynamic touch, I integrated a gentle animation, such as a pulsing effect around the logo or a gradual color shift in the background, giving the splash screen a bit of life and setting a welcoming tone.
Key features include the app's tagline placed just below the logo in a friendly, approachable font, giving users a quick insight into the app's purpose or values, such as "Find Your Perfect Match" or "Meet New People, Make Real Connections." Below the tagline, there’s a prompt for users to "Get Started" or sign in with social options, displayed in minimalist icons to keep the interface clean and simple. The design elements focused on creating a seamless introduction to the app, emphasizing accessibility and an aesthetically pleasing first interaction.
Crafting this splash screen required skills in color theory, typography, and motion design, especially for the subtle animations that enhance the user experience without distracting from the core message. This project taught me how small details in a splash screen—like color choices and simple animations—can make a significant impact on first impressions, setting the tone for the rest of the app experience.
I designed a vibrant plant giveaway screen aimed at drawing attention and excitement for an eco-friendly campaign. The screen was built around a lush green color scheme, with varying shades of green used to evoke a sense of freshness and connection to nature. The design's background featured soft, organic shapes or leaf patterns to subtly reinforce the plant theme without overwhelming the content. This natural aesthetic aligned with the theme of the giveaway, making the screen visually cohesive and inviting.
Key features included a large, bold header reading “Plant Giveaway!” at the top, set in a friendly, rounded font that gave the screen a welcoming feel. Below this, an eye-catching image of a plant or potted greenery provided a focal point, making the giveaway’s subject immediately clear. The main call-to-action button, “Enter Giveaway,” was prominently displayed in a darker shade of green, standing out while maintaining harmony with the color scheme. Additional details like giveaway rules, entry requirements, and a countdown timer were organized below in a clean, card-based format, enhancing readability and keeping the user focused on the primary action.
To further engage users, small decorative elements, such as leaf icons or animated falling leaves, were added around the screen, creating a dynamic, nature-inspired effect. This design required skills in color theory, iconography, and hierarchy to make each section distinct yet part of a cohesive whole. Working on this screen highlighted the importance of using color and imagery strategically to evoke the right emotions—in this case, excitement and environmental connection—while maintaining a user-friendly and visually appealing interface.
