For 100 days, I will be doing one UI prompt per day courtesy of www.dailyui.co. This will help me explore new designs and continually challenge myself to grow and expand my knowledge. I will continue to update this page as I go through the challenges for each day.

I wanted to create a sign in/sign up screen that played off each other. I decided to go with complementary colors to make it vibrant and playful. The playfulness was supposed to be shown with how the two different cards interacted with each other when toggled. However, I'm still learning how to animate my mockups and will hopefully have more fluid animations for future days. It was my first time trying to animate with Principle. 

Unlike the first challenge, I wanted to work with an established brand instead of creating a generic page. I checked out a bunch of my favorite brands to see if there was a checkout page that I thought could be better. I landed upon Nike's checkout page and thought to myself that while usable, their checkout process wasn't as forward-thinking as their products. I decided to use their orange (#FA7E3F) as the main color. They currently use it as a secondary color.

I focused on another big brand in today's challenge. Michael Kors has a variety of products with vibrant colors. I wanted to make an eye-catching landing page that wows the user with strong colors.

I decided to design an icon for a fictional app called Goalfish that helps you keep track of your tasks so you can achieve your goals.

Spotify's profile page is a little lacking. Sure, you can see someone's public playlists and recently played artists. But, you have no incentive to really follow anyone. There's not a lot of interaction between someone's profile page and the user. I wanted to marry the idea of social aspect of Instagram with Spotify for this challenge. The user would be given the option to list out favorite songs in an Instagram-like grid to show off in their profile page. Other people will get a sense of what kind of music a person likes right away. Other tabs will include public playlists that the user have made and a list of songs recently listened to (this can be optional for those who want to listen in private).

I decided to redesign the iPhone's text size page in Settings. I wanted to experiment with an animation that responds as you slide it. This was my first animation with Flinto which I found a lot more user friendly than Principle (the software I used for my previous animations). 

Often times, I want to sing along to a song but don't know all the lyrics. Spotify used to play lyrics as the song played, but has since gotten rid of that feature. I knew I wanted to incorporate that in my music player. As the song plays, each line is highlighted along with the future four and past four lines fading in and out.

I wanted the focus to be on the animation for this challenge. This was more of a practice trying to get used to Flinto and seeing what I can do with it. It was a good practice and I'm learning new things about the tool.

I wanted to have a little fun with this and create something light-hearted. First thing that came to my mind was Lego and their vibrant colors and amusing characters. I also love The Lego Movie and thought of the song "Everything Is Awesome" as a good message on a success card. 

I decided to try something fun and quirky again with a Super Mario themed shop. Instead of breaking open random bricks, I would imagine Mario and friends shopping for items on a smartphone in the 21st century. The idea of a "Buy Now" button instead of having a "Add to Cart/Bag" option was inspired from the Mario games. Games like Mario Party allowed you to purchase single items at a time and Super Mario Bros. lets you hold one item. 

I wanted to create a visual cue to go with timer ticking down. As the shape goes down, the user gets a feeling of "time is running out!".

I played off the concept of on and off being opposite. Day and night. Spring and winter. I wanted the toggle to activate an animation that will show these opposites.

Users should feel excited about signing up for something. Many products give a bland confirmation screen after a user signs up. I wanted to create a modal that reinforces the user's excitement to help them look forward to using a new service. Emojis are extremely popular and the yellow gives a fun pop to it. 

I was checking my emails for a receipt that I could work on. I found a movie receipt that had information all over the place. The payment information was all the way at the bottom and the movie/theater information didn't have a clear hierarchy. I wanted to be very intentional in how I laid out all the information.

P.S. Congratulations Moonlight for winning Best Picture!

I designed a chart to track my daily UI challenge statistics. The most important information I wanted displayed are the views and the likes on each post. Users can sort the chart by current week, last week, and all time. 

I wanted to design a leaderboard that showed the minimum amount of information. In this design, I only wanted to show who the player is and how much they scored per game (it would change depending on which category you're looking at). If I am trying to find out who leads the NBA in scoring, I only want to see who the player is and how much they score. Their assist averages are extra information I am not actively seeking.

I often have a problem trying to figure out where my friend who I am meeting up with is. Sometimes they'll give me the cross streets or sometimes they'll name things they see nearby. I designed a location tracker to help you find your friend in one easy go. Both parties would connect on the app and one person would ping their location. The map will lay out a route to the ping from the other phone.

Dashboards can often times be overwhelming. I wanted to create something that is simple and that anyone, young or old, can pick up fairly quickly. As seen in the mockup, all controls in each tab can be controlled by swiping through the rooms and by sliding the slider. All tasks can be done with just your thumb. 

The biggest complaint I have against the otherwise amazing Google search bar is that I can't search image or video right away from Google's homepage without going to another link. I wanted to give users these options without having to click another link or even search first. By holding down on the search button, users are given the option to search images, videos, or shopping.

I decided to revisit a project I did for ProtoHack back in November. We weren't able to design the onboarding screens during the competition but we did come up with some one-liners that went with our app name "YouGive". The onboarding screens give a short yet informative and colorful idea of what the app is and how to use it. The "skip" option is put on the top right so that it's a bit out of reach and would hopefully encourage users to give each screen a read.

Missing your flight can get stressful so I added a countdown clock on the top of the screen to alert users on the day of. Users can choose to receive push notifications when departure time is an hour away, 30-minutes away, etc.

Designing for a smart TV was a first for me. I found a great read about designing for television and learned a few things along the way like 18px is the smallest readable size. The featured series below would ideally display recommended shows/movies/songs/etc. based on what the user watches/listens to.

I wanted to play off subscribing for a newsletter by using an envelope. By displaying it in a 3D space, I could use both sides to represent the form and confirmation.

I wanted to explore new ways to display a dropdown. I was inspired by how Pantone swatch books fan out. Going off a Pantone swatch book, I thought it would be cool to incorporate that idea to change the color scheme of a website/navigation bar. The color swatches show the primary color and the background color.

I wanted to create a clean page that would be easy to use on mobile. The email and twitter options will bring you to your native mail app and Twitter app, respectively. These options are what the owner of the site would ideally want the user to click. With that in mind, I placed the buttons at the bottom where it is completely and comfortably accessible to the user's thumb.

Description

Description

Description

Description

Description