Daily UI Challenge

Background

I took part in the Daily UI Challenge to grow my UI design skills and give myself the opportunity to work on different types of design projects. When I finished a challenge, I would post my work on Dribbble to gather feedback. It was fantastic to get feedback on my designs via this channel as it was quick and connected me with designers all over the world. Below is a selection of the designs I created for this challenge.

DAY #072: IMAGE SLIDERThe Challenge: Design an image slider.Behind the Design: For this challenge I designed a desktop layout with an image slider giving information about each staff member at a company.Photo credits: Caroline Veronez, Eye for Ebony… — **DAY #072: IMAGE SLIDER**
**The Challenge:** Design an image slider.
**Behind the Design:** For this challenge I designed a desktop layout with an image slider giving information about each staff member at a company.
*Photo credits: Caroline Veronez, Eye for Ebony and Allef Vinicius on Unsplash*

DAY #021: HOME MONITORING DASHBOARDThe Challenge: Design a home monitoring dashboard.Behind the Design: For this challenge, I designed a home monitoring dashboard that displays security camera views, security alarm information, electricity, temperat… — **DAY #021: HOME MONITORING DASHBOARD**
**The Challenge:** Design a home monitoring dashboard.
**Behind the Design:** For this challenge, I designed a home monitoring dashboard that displays security camera views, security alarm information, electricity, temperature, device information, WiFi information as well as a power saver mode. I also included a settings menu option as well as the current weather. I chose blue as the main color as it represents reliability and security.

DAY #048: COMING SOONThe Challenge: Create a design for something 'coming soon.'Behind the Design: For this challenge, I created a minimalist design for a product coming soon relating to productivity. I wanted to boost the exclusivity of the product… — **DAY #048: COMING SOON**
**The Challenge:** Create a design for something 'coming soon.'
**Behind the Design:** For this challenge, I created a minimalist design for a product coming soon relating to productivity. I wanted to boost the exclusivity of the product, so I used light weight versions of the Gill Sans font and left lots of white space in the design.
*Photo credit: Bench Accounting on Unsplash*

DAY #070: EVENT LISTINGThe Challenge: Design an event listing.Behind the Design: For this challenge, I created a design for a Kesha concert listing that you might see on a ticketing website. — **DAY #070: EVENT LISTING**
**The Challenge:** Design an event listing.
**Behind the Design:** For this challenge, I created a design for a Kesha concert listing that you might see on a ticketing website.

DAY #055: ICON SETThe Challenge: Design an icon set.Behind the Design: For this challenge, I designed a fast food icon set. I decided to use a muted color palette for a different and unique feel. — **DAY #055: ICON SET**
**The Challenge:** Design an icon set.
**Behind the Design:** For this challenge, I designed a fast food icon set. I decided to use a muted color palette for a different and unique feel.

DAY #066: STATISTICSThe Challenge: Design something relating to statistics.Behind the Design: For this challenge, I designed a graph displaying statistics for page views on a web site. — **DAY #066: STATISTICS**
**The Challenge:** Design something relating to statistics.
**Behind the Design:** For this challenge, I designed a graph displaying statistics for page views on a web site.

DAY #030: PRICINGThe Challenge: Design something pricing related.Behind the Design: I decided to design a small menu for this challenge. This menu would be for a small cafe that just sells coffee and desserts. I wanted the menu and branding to feel … — **DAY #030: PRICING**
**The Challenge:** Design something pricing related.
**Behind the Design:** I decided to design a small menu for this challenge. This menu would be for a small cafe that just sells coffee and desserts. I wanted the menu and branding to feel retro so I added a script font, teal as an accent color, and cute icons.

DAY #064: SELECT USER TYPEThe Challenge: Design something relating to selecting a user type.Behind the Design: For this challenge, I designed user type selections for an education website. — **DAY #064: SELECT USER TYPE**
**The Challenge:** Design something relating to selecting a user type.
**Behind the Design:** For this challenge, I designed user type selections for an education website.

DAY #067: HOTEL BOOKINGThe Challenge: Design something relating to booking a hotel.Behind the Design: For this challenge, I created a screen for booking a room at the Sixty SoHo Hotel in NYC. — **DAY #067: HOTEL BOOKING**
**The Challenge:** Design something relating to booking a hotel.
**Behind the Design:** For this challenge, I created a screen for booking a room at the Sixty SoHo Hotel in NYC.

DAY #060: COLOR PICKERThe Challenge: Design a color picker.Behind the Design: I chose to design a color picker for this challenge with the data and CTA items to the left of the main image. I chose a sage green color for the buttons as I feel like th… — **DAY #060: COLOR PICKER**
**The Challenge:** Design a color picker.
**Behind the Design:** I chose to design a color picker for this challenge with the data and CTA items to the left of the main image. I chose a sage green color for the buttons as I feel like that color goes well with the dark gray of the background, yet has enough contrast with it for CTA items.

DAY #051: PRESS PAGEThe Challenge: Design a press page.Behind the Design: I designed a press page for a fictional juice company for this challenge.Photo credit: Brooke Lark on Unsplash — **DAY #051: PRESS PAGE**
**The Challenge:** Design a press page.
**Behind the Design:** I designed a press page for a fictional juice company for this challenge.
*Photo credit: Brooke Lark on Unsplash*

DAY #033: CUSTOMIZE PRODUCTThe Challenge: Design something related to customizing a product.Behind the Design: For this challenge, I partially redesigned the page for one of Madewell's products at https://www.madewell.com/madewell_category/TEESANDMO… — **DAY #033: CUSTOMIZE PRODUCT**
**The Challenge:** Design something related to customizing a product.
**Behind the Design:** For this challenge, I partially redesigned the page for one of Madewell's products at https://www.madewell.com/madewell_category/TEESANDMORE/shortsleeve/PRDOVR~04346/04346.jsp
I think the design of their site is a bit boring, so I tried to jazz it up with larger imagery and image contoured text.

DAY #023: OnboardingThe Challenge: Design something onboarding related.Behind the Design: This design actually came from an idea to have an app where people would share their alien and extraterrestrial experiences in order to meet others in their ar… — **DAY #023: Onboarding**
**The Challenge:** Design something onboarding related.
**Behind the Design:** This design actually came from an idea to have an app where people would share their alien and extraterrestrial experiences in order to meet others in their area that have shared the same experience. It turned out to be more of a general couple of on boarding screens that could really be used for any app where people are trying to connect based on shared experiences. :)

DAY #062: WORKOUT OF THE DAYThe Challenge: Design a screen listing the workout of the day.Behind the Design: For this challenge, I did a redesign of this page: https://www.spartan.com/en/training/wods/spartan-wod?wod=WED — **DAY #062: WORKOUT OF THE DAY**
**The Challenge:** Design a screen listing the workout of the day.
**Behind the Design:** For this challenge, I did a redesign of this page: https://www.spartan.com/en/training/wods/spartan-wod?wod=WED

DAY #061: REDEEM COUPONThe Challenge: Design an online coupon.Behind the Design: For this challenge, I created an online coupon redeemable for a 20% discount on a Grand Canyon tour.Photo credit: Justin Luebke on Unsplash — **DAY #061: REDEEM COUPON**
**The Challenge:** Design an online coupon.
**Behind the Design:** For this challenge, I created an online coupon redeemable for a 20% discount on a Grand Canyon tour.
*Photo credit: Justin Luebke on Unsplash*

DAY #063: BEST OF 2015The Challenge: Design something relating to the best of 2015.Behind the Design: For this challenge, I designed a page within a fictitious entertainment website called 'The Buzz.' that lists the best in entertainment for 2015. — **DAY #063: BEST OF 2015**
**The Challenge:** Design something relating to the best of 2015.
**Behind the Design:** For this challenge, I designed a page within a fictitious entertainment website called 'The Buzz.' that lists the best in entertainment for 2015.

DAY #059: BACKGROUND PATTERNThe Challenge: Design a background pattern.Behind the Design: For this challenge, I chose to do a retro geometric design with a muted color scheme. I made the white lines in the design different thicknesses to add interes… — **DAY #059: BACKGROUND PATTERN**
**The Challenge:** Design a background pattern.
**Behind the Design:** For this challenge, I chose to do a retro geometric design with a muted color scheme. I made the white lines in the design different thicknesses to add interest.

DAY #058: SHOPPING CARTThe Challenge: Design a shopping cart.Behind the Design: For this shopping cart design, I wanted an elegant feel to it, so I made sure to leave lots of white space and use a smaller font. I have never used this font before in … — **DAY #058: SHOPPING CART**
**The Challenge:** Design a shopping cart.
**Behind the Design:** For this shopping cart design, I wanted an elegant feel to it, so I made sure to leave lots of white space and use a smaller font. I have never used this font before in my designs so I wanted to try it.

DAY #008: 404 PAGEChallenge: Design a 404 page.Behind the Design: For this challenge, I chose to design a 404 page for desktop. I used a photo of the night sky for the background, choosing bright yellow and blue as accent colors as they stand out ni… — **DAY #008: 404 PAGE**
**Challenge:** Design a 404 page.
**Behind the Design:** For this challenge, I chose to design a 404 page for desktop. I used a photo of the night sky for the background, choosing bright yellow and blue as accent colors as they stand out nicely over the black of the sky.
*Photo credit: Paul Volkmer on Unsplash*

DAY #057: VIDEO PLAYERThe Challenge: Design a video player.Behind the Design: I designed a simple video player for this challenge, using a bright green to call out the movie's elapsed time. — **DAY #057: VIDEO PLAYER**
**The Challenge:** Design a video player.
**Behind the Design:** I designed a simple video player for this challenge, using a bright green to call out the movie's elapsed time.

DAY #046: INVOICEThe Challenge: Design an invoice.Behind the Design: For this challenge, I designed a simple invoice for a custom greenhouse business. Inspired by the product, I chose green, white and black for the color palette. For the background,… — **DAY #046: INVOICE**
**The Challenge:** Design an invoice.
**Behind the Design:** For this challenge, I designed a simple invoice for a custom greenhouse business. Inspired by the product, I chose green, white and black for the color palette. For the background, I created an elegant logo and reduced the opacity of it so it is very subtle, resembling a watermark on the page. I chose to call out major elements of the invoice in green capital letters.

DAY #047: ACTIVITY FEEDThe Challenge: Design an activity feed.Behind the Design: I don't feel like purple is used enough in design, so I decided to make that color star as the main one in this design. This is an activity feed for a foodie social med… — **DAY #047: ACTIVITY FEED**
**The Challenge:** Design an activity feed.
**Behind the Design:** I don't feel like purple is used enough in design, so I decided to make that color star as the main one in this design. This is an activity feed for a foodie social media site where people share their love of cooking.

DAY #044: FAVORITESThe Challenge: Design a favorites menu.Behind the Design: I wanted to design a simple and unique favorites menu for this challenge. Instead of keeping the heart icon small as is normally seen on favorites menus, I made it large an… — **DAY #044: FAVORITES**
**The Challenge:** Design a favorites menu.
**Behind the Design:** I wanted to design a simple and unique favorites menu for this challenge. Instead of keeping the heart icon small as is normally seen on favorites menus, I made it large and transparent. I added an option to remove the item from the list as well as a description with the item name and price.

DAY #024: BOARDING PASSThe Challenge: Design a boarding pass. Behind the Design: For this challenge, I decided to design a paperless boarding pass with a scannable barcode. I decided to do a transparent overlay over the photograph, and then use one… — **DAY #024: BOARDING PASS**
**The Challenge:** Design a boarding pass.

**Behind the Design:** For this challenge, I decided to design a paperless boarding pass with a scannable barcode. I decided to do a transparent overlay over the photograph, and then use one of the purple shades in the background of the photograph for the background on the lower half of the ticket.

DAY #043: Food/Drink MenuThe Challenge: Design a food/drink menu.Behind the Design: For this challenge, I designed a menu for a fictitious casual restaurant serving southern fare. I would imagine this restaurant also showing all the sports games on … — **DAY #043: Food/Drink Menu**
**The Challenge:** Design a food/drink menu.
**Behind the Design:** For this challenge, I designed a menu for a fictitious casual restaurant serving southern fare. I would imagine this restaurant also showing all the sports games on TV, from baseball to football, so in choosing my color palette, I was inspired by sports. I designed this menu as tablet-size, imagining this restaurant giving each table one to place their orders from.
*Photo credit: Kevin Curtis on Unsplash*

DAY #039: TESTIMONIALSThe Challenge: Design a testimonial.Behind the Design: For this challenge, I designed a testimonial for a fictional tour company, RPG Tours. I decided to experiment with a grid structure, circles and the color purple. — **DAY #039: TESTIMONIALS**
**The Challenge:** Design a testimonial.
**Behind the Design:** For this challenge, I designed a testimonial for a fictional tour company, RPG Tours. I decided to experiment with a grid structure, circles and the color purple.

DAY #040: RECIPEThe Challenge: Design a recipe.Behind the Design: For this challenge, I created a simple recipe card. The overlapping stripes of red on the card design were inspired by the gingham print of the tablecloth in the photograph. — **DAY #040: RECIPE**
**The Challenge:** Design a recipe.
**Behind the Design:** For this challenge, I created a simple recipe card. The overlapping stripes of red on the card design were inspired by the gingham print of the tablecloth in the photograph.

DAY #032: CROWDFUNDING CAMPAIGNThe Challenge: Design a crowdfunding campaign.Behind the Design: For this challenge, I created a page for a crowdfunding campaign for a company who creates hand blown glass air plant terrariums, called Airy Globes. The… — **DAY #032: CROWDFUNDING CAMPAIGN**
**The Challenge:** Design a crowdfunding campaign.
**Behind the Design:** For this challenge, I created a page for a crowdfunding campaign for a company who creates hand blown glass air plant terrariums, called Airy Globes. They need funding to move into a warehouse in Manchester, New Hampshire. I used circles to highlight the text in the design as it reflects the shape of the globes. The shades of green I used were taken from the background photograph.
*Photo credit: Jeff Sheldon on Unsplash*

DAY #037: WEATHERThe Challenge: Design something related to weather.Behind the Design: For this challenge, I designed a user interface for a mobile weather app. I wanted to keep a sharp contrast in the design, so I used black, white and gray and red… — **DAY #037: WEATHER**
**The Challenge:** Design something related to weather.
**Behind the Design:** For this challenge, I designed a user interface for a mobile weather app. I wanted to keep a sharp contrast in the design, so I used black, white and gray and reduced the opacity of the image to 60%. To switch things up, I put the logo and the navigation on the bottom of the design. I added a cheeky statement relating to the forecast on the top of the design for the fun of it. :)

DAY #035: BLOG POSTThe Challenge: Design a blog post.Behind the Design: I created a blog and a blog post with a retro style design. I chose to use fonts and a dusty blue accent color that reminded me of the 60's and 70's.Photo credit: Eric Gilkes on… — **DAY #035: BLOG POST**
**The Challenge:** Design a blog post.
**Behind the Design:** I created a blog and a blog post with a retro style design. I chose to use fonts and a dusty blue accent color that reminded me of the 60's and 70's.
*Photo credit: Eric Gilkes on Unsplash*

DAY #050: JOB LISTINGThe Challenge: Design a job listing.Behind the Design: For this challenge, I designed a job listing page for IT Engineering jobs in Boston. — **DAY #050: JOB LISTING**
**The Challenge:** Design a job listing.
**Behind the Design:** For this challenge, I designed a job listing page for IT Engineering jobs in Boston.

DAY #025: TV APPThe Challenge: Design an app for a smart TV.Behind the Design: For this challenge, I designed an entertainment app for a smart TV. This is the view that you would see if you were looking for a movie to watch. I used neon green for th… — **DAY #025: TV APP**
**The Challenge:** Design an app for a smart TV.
**Behind the Design:** For this challenge, I designed an entertainment app for a smart TV. This is the view that you would see if you were looking for a movie to watch. I used neon green for the call-to-action buttons as it is a nice contrast to the deep purple color, which I also enjoy.

DAY #028: CONTACT USThe Challenge: Design a contact us page or form.Behind the Design: For this challenge, I decided to design a desktop contact us page for a company in New York. I chose warm colors inspired by the photo of the map. I used transpar… — **DAY #028: CONTACT US**
**The Challenge:** Design a contact us page or form.
**Behind the Design:** For this challenge, I decided to design a desktop contact us page for a company in New York. I chose warm colors inspired by the photo of the map. I used transparent overlays to create different parts of the design.
*Photo credit: Steve Richey on Unsplash*

DAY #003: LANDING PAGE (ABOVE THE FOLD)The Challenge: Design a landing page above the fold.Behind the Design: I redesigned the Thoroughbred Charities of America landing page at http://www.tca.org/index.html for this challenge. I found the landing pa… — **DAY #003: LANDING PAGE (ABOVE THE FOLD)**
**The Challenge:** Design a landing page above the fold.
**Behind the Design:** I redesigned the Thoroughbred Charities of America landing page at http://www.tca.org/index.html for this challenge. I found the landing page rather dated and chaotic in regards to content. For this redesign, I wanted to leave plenty of white space to increase prestige, while also using the color red that they used on their original design. I added the sage green color as it reminds of nature and the grass that horses eat. It also looks great with red, in my opinion. :)

DAY #016: POP-UP/OVERLAYChallenge: Design a pop-up/overlay.Behind the Design: For this challenge, I just designed a simple pop-up screen for an environmental website. I chose a beautiful picture of ocean cliffs for the background. For the CTA button… — **DAY #016: POP-UP/OVERLAY**
**Challenge:** Design a pop-up/overlay.
**Behind the Design:** For this challenge, I just designed a simple pop-up screen for an environmental website. I chose a beautiful picture of ocean cliffs for the background. For the CTA button, I thought the pink really popped nicely against the background.
*Photo credit: Rich Lock via Unsplash*

DAY #015: ON/OFF BUTTONChallenge: Design an on/off switch.Behind the Design: I just made a simple switch here using a somewhat retro font. I added the white outline to the buttons to make them really pop. — **DAY #015: ON/OFF BUTTON**
**Challenge:** Design an on/off switch.
**Behind the Design:** I just made a simple switch here using a somewhat retro font. I added the white outline to the buttons to make them really pop.

DAY #017: EMAIL RECEIPTChallenge: Design an email receipt.Behind the Design: For this challenge, I decided to create a receipt received for an online shoe purchase. These just happen to be the shoes I will be wearing at my wedding next year. ;) — **DAY #017: EMAIL RECEIPT**
**Challenge:** Design an email receipt.
**Behind the Design:** For this challenge, I decided to create a receipt received for an online shoe purchase. These just happen to be the shoes I will be wearing at my wedding next year. ;)

DAY #014: COUNTDOWN TIMERChallenge: Design a countdown timer.Behind the Design: For this challenge, I decided to make a countdown timer for cooking. Usually, someone is cooking multiple items for a meal, so I thought I would have multiple timers in … — **DAY #014: COUNTDOWN TIMER**
**Challenge:** Design a countdown timer.
**Behind the Design:** For this challenge, I decided to make a countdown timer for cooking. Usually, someone is cooking multiple items for a meal, so I thought I would have multiple timers in the same view for convenience. I used the color red as it is a color that has been found in studies to make people actually eat more. I thought that it was appropriate in that case. ;)

DAY #011: FLASH MESSAGE (ERROR/SUCCESS)Challenge: Design a Flash Message with both the outcome for an error and success.Behind the Design: I wanted to create flash messages that were both well designed and funny for this challenge. I chose the Typew… — **DAY #011: FLASH MESSAGE (ERROR/SUCCESS)**
**Challenge:** Design a Flash Message with both the outcome for an error and success.
**Behind the Design:** I wanted to create flash messages that were both well designed and funny for this challenge. I chose the Typewriter font to give a retro feeling to the designs.

DAY #012: E-COMMERCE SHOP (SINGLE ITEM)

Challenge: Design an e-commerce shop.

Behind the Design: I wanted to design a product page for a high end clothing brand so I left as much white space as I could in this design, using accent colors of black and light blue. The blue gives a feeling of reliability, while the black gives a feeling of prestige paired with the white. A minimalistic font rounds out the design and also adds to the feeling of prestige.