Daily UI
Collection of UI Challenges
Boarding Pass
Challenge:
Design a boarding pass. Consider the origin, the destination, gates, seats, the airline, etc.
Approach:
Create a boarding pass with a limited palette for a fictitious airlines, making sure important information stands out and is easy to read. With boarding passes like these, who wouldn’t want to fly Pan Globe Airlines?
Tools used:
Sketch and Adobe Photoshop CC
Onboarding
Challenge:
Design something onboarding-related. Are you recruiting people for an organization? To sign up for a new website? A mobile app?
Approach:
I chose to create a sequence of onboarding screens for a math tutoring app called Math Maven. The sequence prompts the student to answer a series of questions to determine the student’s subject of interest and the student’s current level.
Tools used:
Sketch and Procreate for iPad
Search
Challenge:
Design something search-related. It could be a search bar, an advanced search window, a search function, etc.
Approach:
I chose to do a filtered search for a used car web application. I did a brief competitive analysis of Carvana and Vroom and used inspirations from both sites.
Tools used:
Sketch
Location Tracker
Challenge:
Design a location tracker. Consider the icon, placement, and purpose of location.
Design:
Hit the trail with confidence. Pull up your map and watch your progress. Not gonna have mobile access? Download the map ahead of time.
Tools used:
Sketch and Procreate for iPad
Leader Board
Challenge:
Design a leaderboard. Is it for gaming, sports, politics, or something else? Consider the important statistics to show, percentages, points, profile pictures, etc.
Design:
Can’t get to the course? Don’t have four free hours? Pull up your phone and knock out eighteen holes in 20 minutes on Legends Golf. Hone your skills and climb the leader board.
Tools used:
Sketch, Adobe Illustrator, and Adobe Photoshop
Analytics Chart
Challenge:
Design an analytics chart. Is it to be used for web or app analytics, a health monitor, e-commerce analytics?
Approach:
I chose to create a monitoring system for home power usage. The goal was to create UI that delivers a lot of data in an easily understandable fashion.
Tools used:
Sketch and Adobe Photoshop
Email Receipt
Challenge:
Design an Email Receipt. What was purchased? On what date? Consider other elements such as customer support info, a tracking number, pictures, related items, etc.
Approach:
I chose to create a receipt and ticketing system for a performance theater. Upon completion of the order, the customer is presented with an image of the tickets and a receipt. The tickets and receipt may be printed. Alternatively, the customer may send the tickets to a smartphone, which may also be presented at the event. A link to a help center is provided at the bottom of the receipt.
Tools used:
Sketch
POP-Up/Overlay
Challenge:
Design a Pop-Up/Overlay. Is it a web sign-up form that pops up? Is it an ad overlay?
Approach:
I drew the yogini and mailbox in Procreate and then placed the graphic in Illustrator. I then used “Trace and Expand” to create a clean vector image and simplified the paths. I then imported the image into Sketch. The background and motion ovals were created in Sketch and are meant to make the pop-up stand out and assist the message of the composition.
Tools used:
Sketch, Adobe Illustrator, and Procreate for iPad
On/Off Switch (Animated)
Challenge:
Design an On/Off Switch. Consider what’s being turned on/off and how it should be done.
Approach:
I recently saw a really cool fireplace that can be controlled from a smartphone. I was inspired to create a design that features an on/off/dimmer switch that would also animate the system status.
Tools used:
Sketch, Adobe Illustrator, and Adobe After Effects
Countdown Timer
Challenge:
Design a Countdown Timer. Is it for an app? An interface for an oven? A sport-related countdown?
Approach:
Ok. Ok. So, I know neumorphic designs are not very practical, but they are kinda fun. The timer can be set by tapping on the input field, which brings up a numeric keypad, or by entering the time audibly.
Tools used:
Sketch
Direct Messaging App
Challenge:
Design a Direct Messaging app, profile, or chatbox. Consider the parties involved in the messages, images, placement, and context of the messages.
Approach:
Use availalbe UI kit for iOS. Employ simple and intuitive UI along with a complementary color palette.
Tools used:
Sketch
E-Commerce Page
Challenge:
Design an e-commerce shop. Is it simple for a local business or a large online retailer? Is it for clothing, shoes, handmade soap, or something else?
Approach:
Concurrent with this challenge I was working on a site for an author and chose to adapt this exercise to that project. I was striving for simplicity without sacrificing information.
Tools used:
Sketch
Flash Message
Challenge:
Design a Flash Message with both the outcome for an error and success.
Approach:
I chose to create a success and error message for a checkout process. Keeping it light, I thought it would be fun to present a thumbs up in a green theme and an inspector in a red theme. Please lemme know what you think.
Tools used:
Sketch, Adobe Illustrator, and Procreate for iPad
Social Share (Animated)
Challenge:
Design a social share button/icon.
Approach:
- Integrate share icons using a limited color palette.
- Micro-animate the five icons upon tapping the share button.
- Use bounce for anticipation and ease in/out for smoothing.
- Morph share button into a close button and vice versa.
Tools used:
Adobe Illustrator and Adobe After Effects
Music Player
Challenge:
Design a music player. Consider the controls, placements, imagery such as the artist or album cover, etc.
Approach:
Employ a dark theme with intuitive, user-friendly controls. Add glassmorphism for aesthetic appeal.
Tools used:
Sketch
404 Page
Challenge:
Design a 404 page. Does it suit the brand’s style? Is it user-friendly? It might sound mundane, but not everything can be flash or glamorous. Every day millions of people will be landing on 404 pages. You have an opportunity to help them in a way that’s useful and aesthetically pleasing.
Approach:
Use simple messaging and graphics coupled with subtle humor
Tools used:
Adobe Illustrator, Sketch
Settings Page
Challenge:
Design settings for something. Is it for security or privacy settings? Game settings? What is it and what’s important?
Approach:
I chose to create a settings page for a Mobile Marketplace App where individuals sell items C2C. I kept the UI very simple and user-friendly for all levels of digital literacy.
Tools used:
Sketch
User Profile
Challenge:
Design a user profile and be mindful of the most important data, names, imagery, placement, etc. Is it for a serious profile? A social profile?
Approach:
I chose to create user settings for a trails app with the core value of warm, inviting, and outdoorsy. The color palette was devised and the graphic was created to reinforce these values. The settings were kept simple and intuitive.
Tools used:
Adobe Illustrator and Sketch
App Icon
Challenge:
Design an app icon. What best represents the brand or product? Or is it incredibly unique?
Approach:
I used the logo from my Kittery Online Store and placed it against a complementary background that made it stand out. The icon is meant to appeal to cat owners sensibilities of seeing their cats as cute but also regal (purple and gold).
Tools used:
Adobe Illustrator and Sketch
Let’s Work Together
(949) 433-8943