#DailyUI Challenge

I completed 90 days of the DailyUI design challenge. My goals were to continue to surprise and challenge myself, to become a more design-oriented thinker, become a better designer, and to learn something new along the way.

DailyUI Challenge 001 - Sign Up Page

#001
Sign Up Screen

Day one, I have always liked space and so I wanted to do a few designs around that and this is the first; a sign up screen for a mock space program.

DailyUI Challenge 002 - Credit Card Checkout

#002
Credit Card Checkout

Day two, most of the credit card forms out there are very plain and monotonous so I wanted to go beyond that and design a credit one that was a little more fun and colorful.

DailyUI Challenge 003 - Landing Page

#003
Landing Page

Day three, I decided to switch things up and do a desktop mockup instead of mobile for today's challenge of designing a landing page and I wanted to cover a subject very important to me: saving our ocean.

DailyUI Challenge 004 - calculator

#004
Calculator

Day four was a fun challenge that required me to look at something I have seen a thousand times before and put my own spin on it.

DailyUI Challenge 005 - Design an App Icon

#005
App Icon

Day five, I wanted to challenge myself and create an app icon entirely from scratch with no pre-made elements. So I made an icon for a mountain biking brand using elements created individually created by me (including the wheel).

DailyUI Challenge 006 - User Profile

#006
User Profile

Day six asked me to design a user profile. I decided to take it in the direction of a mobile social platform for finding and connecting photographers and customers with potential models for shoots and other model work.

DailyUI Challenge 007 - Settings

#007
Settings

Day seven, I designed a settings page for a concept pool management application.

DailyUI Challenge 008 - 404 Page

#008
404 Page

Nobody likes seeing the 404 page but when a site has a funny/corny 404 page it makes the experience a little less upsetting. So for challenge day eight, I created my own./p>

DailyUI Challenge 009 - Music Player

#009
Music Player

Day nine's challenge was design a media player. I initially started designing a mobile only player but I wanted to challenge myself to create two different variations of it for both mobile and desktop.

#010
Social Share

I wanted to go beyond just creating a set of static images showing one or two icon states and try my hand at animation for the button sequence. It ended up being more challenging than I anticipated but once I got going it all fell into place.

#011
Flash Message

Day 11, flash message. I wanted to try another button animation after Challenge Day 10 and I got the perfect chance the next day. I created a simple enter button with a loading sequence and either a success or failure display as the end result. I wanted to do something with a loading sequence but beyond the typical spinning circle and this is my result.

DailyUI Challenge 012 - E-Commerce Shop (single item)

#012
E-Commerce Shop (single item)

Day 12, design a single item e-commerce page. I wanted to do something a little different than a traditional e-commerce page and go for a minimalist and modern feel using white-space and bold color.

DailyUI Challenge 013 - Direct Messaging)

#013
Direct Messaging

I want to further challenge myself and create beautiful and accessible designs for every project I do. Even for something small, such as challenge like this, because the internet is a place for everyone and its about time it was designed that way. Because of this, the font used in this project is OpenDyslexic; a font designed to enhance readability for dyslexic users like me.

DailyUI Challenge 014 - Countdown Timer)

#014
Countdown Timer

I wanted to go beyond your "traditional" countdown timer and create something I hadn't seen before. So I created a countdown timer to a mystery product launch that uses a barcode as the visualization.

#015
On/Off Switch

I have been liking the challenge of animating my designs and I knew I wanted to try that again for this challenge; so, I took a spin-off a traditional day-night / on-off switch and animated the button itself to be a changing moon to the sun for off to on.

DailyUI Challenge 016 - Pop-Up / Overlay)

#016
Pop-Up / Overlay

Day 16 I had a little more creative with today's challenge and created a pop-up asking users if they wish to become a wizard; just for fun.

DailyUI Challenge 017 - Email Receipt)

#017
Email Receipt

This is a email receipt concept for the brand Trek. I have seen a lot of these challenges posted with half of the image on the challenge board and the other half in the background, which I like a lot. So I challenged myself to incorporate that as well and I am pretty happy with the results.

DailyUI Challenge 018 - Analytics Chart)

#018
Analytics Chart

I wanted to create a unique analytics chart that I hadn't seen before but that was still usable. I have always liked how the "doughnut" charts look but I have found that they generally look very similar and not much of a challenge. So I decided to try to switch it up and create a stylized doughnut chart using only sketch and no pre-made elements; then put it on a quick little mockup for a dog walking app.

DailyUI Challenge 019 - Leaderboard)

#019
Leaderboard

I have never designed anything like a leader board before so this was a fun challenge from the start. I spent a lot of time looking at many examples and I learned a lot but I also saw a lot of tightly packed content and neutral color. I wanted to make one that was different and would stand out from the rest; because why shouldn’t the leader board be as colorful as the game?

DailyUI Challenge 020 - Location Tracker)

#020
Location Tracker

The last time I worked with map design was awhile ago while with Bloc when I was first starting my design career. Back then I had limited design knowledge and it took me a couple days to make one. Now with nearly a years worth of design experience behind me and one day for the challenge, the outcome is significantly better and the process more fun.

DailyUI Challenge 021 - Home Monitoring Dashboard)

#021
Home Monitoring Dashboard

I was challenged to design a realistic home monitoring dashboard that was aesthetically pleasing and easy to use. I created a simple yet effective mobile home monitoring dashboard with the features I would use most; the temperature and lighting.

#022
Search

The challenge directions for today were intentionally vague and left a lot up to the designer. So I wanted to go beyond a normal search button design and create a unique interaction animation for it; and this is the result.

DailyUI Challenge 023 - Onboarding)

#023
Onboarding

I wanted to do a mobile on-boarding sequence because in my past projects I haven't had the chance to do something fun and get creative with on-boarding, especially mobile. This is a three frame on-boarding sequence for a mock mobile weather application.

DailyUI Challenge 024 - Boarding Pass)

#024
Boarding Pass

This challenge was uniquely interesting because I haven't had the opportunity to design a boarding pass before so it was a little challenging as well. I spent awhile trying to get the layout and look minimalist but still easily readable but in the end I am happy with how it turned out.

DailyUI Challenge 025 - TV App)

#025
TV App

I haven't had the challenge of designing something for a tv before so this was a little new for me. My main focus was on making sure it would be usable via remote and not have too much information or content crowding up the screen.

DailyUI Challenge 026 - Subscribe)

#026
Subscribe

I have encountered many subscription forms in my lifetime and the only thing that makes them really stand out to me is the use of interesting imagery and colors. So for this challenge I decided to create my own using a unique image and bright colors

#027
Dropdown

For this dropdown challenge I wanted to do another animation, this time using InVision Studio to aid in the animation process. I wanted to do a dropdown menu that was a little different than your average menu and a pop of color. Overall I am pretty happy with how it turned out and I am excited for more animations and challenges.

DailyUI Challenge 028 - Contact Us)

#028
Contact Us

I wanted to do something a little more unique than the average contact page so I created a avant-garde type contact page for a modern art brand.

DailyUI Challenge 029 - Map

#029
Map

For a previous challenge that called for a location tracker I created a mobile map so for this challenge I decided to do desktop. This map highlights common traffic patterns and users can select things to find nearby to explore. This challenge was a lot more tricky than I thought it was going to be but in the end I am pretty happy with the result.

DailyUI Challenge 030 - Pricing)

#030
Pricing

I have always loved snakes and thought they were neat so for the challenge of designing a pricing table I decided to create a table for a mock reptile sanctuary. I really like the final design and I am really happy with how this turned out.

#031
File Upload

Instead of just a file upload static screen I wanted to create an animated element. So I created a document outline and created a fill/loading file upload element and animated it for challenge day 31.

DailyUI Challenge 032 - Crowdfunding Campaign)

#032
Crowdfunding Campaign

Instead of making up a fake product for a mock crowdfunding organization, I found a real organization named Save A Fox Rescues in my home state that is raising money to open up a new rescue in Florida. I then chose Save A Fox Rescues as the focus for this challenge. I am super happy with how the colors and the design turned out and I am excited for the days to come!

#033
Customize Product

I knew I wanted to create something interactive for this challenge to bring it to life. So I used Sketch to animate the frames and created a custom sizing t-shirt site.

DailyUI Challenge 034 - Car Interface)

#034
Car Interface

For challenge day 34, the only guidelines given were to design a car interface, be creative, and include what we thought was most important. In the end I went for a modern and minimalist look for a battery-powered electric car, and this is the result.

DailyUI Challenge 035 - Blog Post)

#035
Blog Post

I have only designed a blog post one other time while at Bloc/Thinkful so for this challenge I did a lot of research on blog design and layouts . This turned out to be a bigger challenge than I thought but a worthwhile one.

DailyUI Challenge 036 - Special Offer)

#036
Special Offer

For this challenge, I wanted to create something a little different and only use black and white for the color scheme and imagery; unlike the traditional bright colors and reds. This ended up being a super fun challenge and I am happy with the result.

DailyUI Challenge 037 - Weather)

#037
Weather

Challenge day 37 was worded intentionally vague and just asked for a design involving weather. I wanted to create something different than other weather apps I have used so I decided to create a minimalist and colorful mobile weather app.

DailyUI Challenge 038 - Calendar Element)

#038
Calendar Element

Day 38 called for the creation of a calendar element. I decided to try and create a “night mode” type calendar. Using a dark background instead of glaring white to reduce eyestrain and pastel event highlighter with the corresponding description.

DailyUI Challenge 039 - Testimonial)

#039
Testimonial

This challenge offered no directions only a title: testimonial. Everything else was up to me! I wanted to go beyond traditional boxes and quotes so I created a mock testimonial page for a glasses site. I created a glasses image outline to use as the testimonial "container" and also as a logo/background.

DailyUI Challenge 040 - Recipe)

#040
Recipe

This is a mockup of a colorful recipe page for one of my favorite deserts; monkey bread. Most recipe pages are really cluttered and hard to read with ads all over and a whole novel as an explanation before finally the recipe at the bottom. So, I wanted to make a clean and uncluttered recipe page and this is the result.

DailyUI Challenge 041 - Workout Tracker)

#041
Workout Tracker

Workout tracker; I have been wanting to do an apple watch design for awhile now and this challenge offered the perfect opportunity. This is a mockup of a biking workout tracker for a smartwatch featuring the distance traveled, calories burned, current heart rate, as well as a light and dark mode.

#042
ToDo List

It has been awhile since I last did an animation, so for this design challenge I wanted to go for it. So I created a ToDo list and a “finished item” animation. I am really happy with how this turned out and how the challenges are going.

DailyUI Challenge 043 - Food/Drink Menu)

#043
Food/Drink Menu

For challenge number 43 I created a modern food/drink menu featuring bright green accents to compliment the dark gradient and background as well as make the menu and purchase buttons stand out. The bright green also gives the design a bright and fresh feel.

#044

I wanted to do another animation for more practice as well as a challenge. I wanted to challenge myself to make a favorite icon animation that I had never seen before and I am super happy with the results.

DailyUI Challenge 045 - Card)

#045
Card

This is an location info card for a city; Chicago. The date the city was established, the population, and its geographical location are displayed at the bottom and I used a simplistic skyline silhouette as the image for the card. Navigation to home and search as well as the ability to favorite and save the city is all displayed in the corner.

DailyUI Challenge 046 - Invoice )

#046
Invoice

This is a mock invoice for an order of plants for challenge number 46. I wanted to create a minimalist and modern look on a plain white invoice and overall I am pretty happy with how it turned out.

DailyUI Challenge 047 - Activity Feed)

#047
Activity Feed

This is an activity feed for a shelter update/activity feed. Whenever an animal is available for adoption or has been adopted it would pop up on the feed to update followers. There are different colored subtle highlight bars on the bottom of each item and photo that correspond to the activity; pink for adopted, peach for dog available for adoption, and orange for cat available.

DailyUI Challenge 048 - Coming Soon)

#048
Coming Soon

This challenge was harder than I thought it would be because I couldn't find an idea I liked for a coming soon page that was unique so I ended up with a lot of iterations of my idea but in the end, I settled on a minimalist white page and a bright image.

#049
Notification

I am trying to grow a little bit with every challenge by learning something new or honing a new skill and for this challenge, I wanted to spend some time getting to know Animia better to learn how to create better animations. In the past, my earlier animations especially were quite choppy and I couldn't seem to get it right but I was determined for this challenge. I wanted to create a smooth flowing transition and I think I achieved that pretty well with this challenge!

DailyUI Challenge 050 - Job Listing)

#050

These are two alternative color style versions of a job listing page. This challenge took a little longer than I anticipated. In my original thoughts for the design, I thought of creating something simple and plain like most job postings. But I have been on the job hunt for a while now and I wanted to create something I would like to use; something that made the hunt a little more fun.

#051
Press Page

This was one of the most challenging days I have done during this challenge. I did a lot of research on different types of press page designs to get a feel for current uses and content before brainstorming ideas. After a while of brainstorming, I eventually came up with the idea of creating a press page for a nonprofit that supports the adopt don't shop movement; complete with an interactive button click/ download element.

#052
Logo

I created this logo for an aspiring Producer & DJ. I wanted to create something that would be instantly recognizable and easily translates colors for use in visuals. I didn't want to create something too complex that was hard to incorporate in visual effects or hard to see at certain sizes. So I took inspiration from a visual equalizer and sound bars for a simple yet intriguing logo. This logo can change colors and be nearly any size and still recognizable as the logo.

#053
Header

This is a header navigation and interaction animation. In all of my design challenges where I have created a functioning header, I have only created top-headers. So for this challenge, I wanted to create something different. So I created a full-page opening drawer and interaction animation, and I am pretty proud of the result!

#054
Confirmation

This is an animation of a confirmation sequence for a plane ticket/flight. I played around with a lot of ideas for this challenge but I knew I wanted to create another animation so I settled on the idea of a flight confirmation to specifically focus on the object motion of the plane.

#055
Icon Set

I wanted to do something for the season and because it is nearly October 1st; here is a halloween icon set! Everything is created out of mostly simple shapes and animated by me using Anima plugin and Sketch.

DailyUI Challenge 056 - Breadcrumbs)

#056
Breadcrumbs

I thought about creating real fancy breadcrumbs but when I thought about it in terms of usability I knew that sometimes less is more. So I created a subtle breadcrumb menu for a pet supplies shop. Every “crumb” before the current “crumb” is underlined to show it is a clickable link as well.

DailyUI Challenge 057 - Video Player)

#057
Video Player

I wanted to create a design that was clean and a somewhat familiar face but using a bit of a different color scheme than the traditional black and white. I am quite happy with the final design, it is subtle but still uniquely interesting.

DailyUI Challenge 058 - Shopping Cart)

#058
Shopping Cart

I wanted to do more than just make a boring white and grey shopping cart but I also wanted to make the design usable. So I spent a good amount of time researching shopping cart best practices and which elements are most commonly included in shopping cart design. I did this to create a design that was somewhat familiar and easy to navigate but still unique and catches your attention.

DailyUI Challenge 059 - Background Pattern)

#059
Background Pattern

These are four different background patters I made shown on three different screen sizes & device shapes. All elements of the background pattern were designed and created by me using sketch. I am really happy with how this challenge turned out and I had a lot of fun making a bunch of different backgrounds (but less fun narrowing them down to four) and a lot of fun with this challenge.

#060
Color Picker

This is an animation I made for a color picker! I wanted to create something unique and unlike other color pickers I have seen before and this is the result.

DailyUI Challenge 061 - Redeem Coupon)

#061
Coupon

I wanted to create a coupon that was more memorable so I created a bold and bright color palate and put it all on a dark background to make the colors pop. I really like how this turned out and the challenge of a "dark-mode" coupon.

DailyUI Challenge 062 - Workout of the Day)

#062
Workout of the Day

Before starting this challenge I did some research on other workout page designs and because of this I learned that a large image and bright colors made for some of the most effective designs. So I wanted to go off that and create a design using a large header image as the focus and bright colors to give the design energy.

DailyUI Challenge 063 - Best of 2015)

#063
Best of 2015

For the background and design of this challenge I decided to go a more abstract route. I challenged myself to use a bright gradient in a new way. So I created two gradient boxes and manipulated the shapes to form an abstract, unique, gradient background. I found this font and made it white to look like little lights for the page and section titles. I spent a lot of time iterating and brainstorming this design trying to create something different.

DailyUI Challenge 064 - Select User Type)

#064
User Type

In the spirit of Halloween, for this challenge I created a spooky select user type mockup with three spooky characters; a ghost, vampire, or werewolf.

DailyUI Challenge 065 - Notes Widget)

#065
Notes Widget

I created a unique shape for the notes on the home page to make it more interesting to look at and the use of such a bright main color makes it pop no matter the color background of the note it is on. I also used a rounded typeface to give it a more friendly and appealing feel.

DailyUI Challenge 066 - Statistics)

#066
Statistics

For this design challenge I created a "dark mode" statistics mockup showing weekly revenue statistics for 4 potential store types. I used a dark background to make the colors pop and make the graph easy to interpret even from a distance due to the contrast between the background and the line / text colors.

DailyUI Challenge 067 - Hotel Booking)

#067
Hotel Booking

This is a hotel booking app mockup. Many of the hotel apps I have seen use a lot of white and jarring colors, which while it attracts your attention it can also become a lot and make the process a bit of a headache. So this is my solution to that problem. I used cohesive colors and a darker background with minimal use of an aggressive highlight color to make this stressful process a little less so.

DailyUI Challenge 068 - Flight Search)

#068
Flight Search

This is a pop-up to search for airline flights. The bold image and bright blue used stand out and invoke the feelings of adventure.

DailyUI Challenge 069 - Trending)

#069
Trending

I am back again ,after a small break, with another #dailyui challenge! This time it is a trending page for a photo-sharing application.

DailyUI Challenge 070 - Event Listing)

#070
Event Listing

This is an event listing for my favorite event Lost Lands Music Festival. The re-occurring theme of the festival is dinosaurs and so I wanted to make a fitting event listing. I am happy with how the colors and everything turned out, I feel like this listing captures the event really well and I am happy with the results.

DailyUI Challenge 071 - Schedule)

#071
Schedule

This is a schedule for a puppy play daytime event named Bark! Featuring a timeline on the left side and info cards on the right a glance is all the user needs to determine what is going on and where. Each activity has its own card, icon to represent the activity, a name, description, and location so all the important information is in one place. I also wanted to challenge myself to design for as close to a universal screen as possible for device-wide usability.

#072
Image Slider

This is an image slider homepage I created for challenge #072. The design features an eye-catching main image that covers the whole background and the title of the article is bold and center of attention along with the button to read the article. The images continuously loop, pushing out the frame before it, in order unless a specific page is selected from the pagination bar on the right-hand side.

DailyUI Challenge 073 - Virtual Reality)

#073
Virtual Reality

This is a homepage mockup for a company that specializes in VR Headsets for Dailyui challenge #073 - Virtual Reality. I took a picture from Unsplash and then created a bright duochrome version of the photo to serve as the focal point for the homepage. I then added bold text, a navigation button, a header, and finally a blob to serve as the text background for readability.

DailyUI Challenge 074 - Schedule)

#074
Schedule

For this challenge, I wanted to create a page that tempts the user to download an application. I didn't choose to redesign the app store badges due to the detailed existing guidelines for both the iOS and Android app stores. After spending a while debating which app to showcase I decided to combine two daily challenges and use Bark!, the app I created for challenge #071 - Schedule.

DailyUI Challenge 075 - Pre-Order)

#075
Pre-Order

This is a Pre-Order page mockup for the album "Swimming" by the late Mac Miller. I took inspiration from his "Swimming" tour poster(s) and used the same colors for the design so it would be cohesive with the existing marketing. The image is a logo made for the album/tour by Mac which I really liked and wanted to incorporate into the design as much as possible. The font I used was also Helvetica Nue, the same primary font used on his website and throughout his brand.

#076
Loading...

This is a loading animation I made for challenge day 76; animated in Sketch App.

#077
Thank You

For this challenge, I wanted to go beyond just a simple static thank you element so I created a background animation to give the page motion.

DailyUI Challenge 078 - Pending Invitation)

#078
Pending Invitation

This is a pending friend invitation I designed for challenge #079. I used a plain dark frame to offset the bold background behind it and colors pulled from the background to give the design a cohesive look and feel.

DailyUI Challenge 079 - Itinerary)

#079
Itinerary

This is a travel itinerary for a road trip around the state of Oregon. I found a recommended road trip route on the Travel Oregon website here and decided to use that information to populate the design. Oregon has a lot of greenery and natural colors so I wanted to make the itinerary reflect that using a subtle topography background and a dark green/tan color scheme.

DailyUI Challenge 080 - Date Picker)

#080
Date Picker

This is a date picker I designed for challenge #80. Today's date is in bold and the day(s) selected are highlighted. Presets for different times are on the left-hand side to make quick date picking even easier. A double calendar layout in the center shows two months consecutively to allow the user to see an expanded calendar. The dates picked are in bold at the top and a colorful gradient background was used to give the design uniqueness.

DailyUI Challenge 081 - Status Update)

#081
Status Update

The 'design hint...' given to me for this challenge was, "Create a status update for a social site, a flight planner, or something entirely unique." I took inspiration from this hint and decided to design beyond the obvious choices and create something unique.

DailyUI Challenge 082 - Form)

#082
Form

This is a mobile form design for DailyUI #082 - Form. I used a calming color palate, easy to read font, and off-white text entry fields for usability to make this form simple and easy to complete for everyone.

#083
Button

For this challenge, I created a colorful and unique button with a fun hover feature. This challenge was a lot of fun playing with the colors and figuring out how to create a smooth and fun interactive element as well. I liked this challenge a lot and I am happy with the ending result!

DailyUI Challenge 084 - Badge)

#084
Badge

I created four progressing "levels" of badges for challenge #084 - design a badge. I wanted to design a badge for something relevant to this challenge so I decided to make four correlating badges. Each badge grows from the previous badge, like your knowledge does throughout this challenge, until the final 100-day badge composed of all the previous layers.

#085
Pagination

This is a minimalist pagination element that can be scaled up or down to fit universally on any screen. I kept the look of the design more simplistic and added a page-turning animation to make the element stand out when it needs to and fade away to the background when it doesn't.

#086
Progress Bar

Staring at a progress bar is many times anything but fun. Yet the user has to spend time waiting for content, looking at an uninteresting progress bar as the time seems to stretch on endlessly. So I created a progress bar that is colorful and interesting to watch as it progresses, making waiting a delight rather than a chore.

#087
Tooltip

I used a dark background and white text to make it stand out from the content around it, as well as spacing inside the tooltip between the text and edge to ensure the text is easily readable and understood. I also created a hover effect to show how the tooltip would appear on a page when hovering over an element.

DailyUI Challenge 088 - Avatar)

#088
Avatar

For this challenge, I put together four avatar options and created backgrounds for them using Sketch App.

DailyUI Challenge 089 - Terms of Service)

#089
Terms of Service

This is a clean and minimalist mockup of a Terms of Service page on a mobile device I created for DailyUI 089 - TOS. It features generous use of whitespace and San-Serif fonts to create a clean and easy to read site on any device, even screens as small as mobile.

#090
Create New

For this challenge I wanted to go beyond making a simple page and decided to create an animated/ interactive "Create New" button. This took a lot of frustrating tweaking to get the elements to animate in the right order but in the end, it was worth it because I am happy with the result.