Daily UI is an email system that automatically sends a unique design topic to designers every day for 100 consecutive days (exclude Saturday and Sunday). I started the challenge to improve my design skill as well as to practice incorporating my expertise in User-Centered Design into UI design. Apart from visual appearance, I designed the UIs in a way that provides the best User Experience.
All UIs are designed using Sketch (sometimes together with Photoshop and Illustrator). The challenge is still ongoing and the new design will be updated daily.
The sign-up page I designed is trying to make everything simple. The page is really simple that only requests username, email address, and password. An extra email confirmation column is also presented to avoid typos.
002 Credit Card Payment
The design of the page tries to map the payment experience with what we are used to in the real world. The columns (Credit card number, cardholder names, due date, and card type) were designed to match exactly what a credit card looks like (except CVV which is usually at the back) so people will not be confused while filling the information, and the receipt is designed to present detailed payment information so the user can review it before making a payment.
003 Landing Page
The simple landing page only features the logo, product name, tagline, and two call-to-action buttons. Users can sign-up using the yellow button, or click on the blue button to get more information.
005 App Icon
Unision (for this design) is a travel planner application.
006 User profile
The setting menu is designed for most text-novel games. The slide bar uses positions, colors, and numbers to indicate current settings.
The portrait image used are from Yurudorashiru http://yurudora.com/
008 404 Page (Collapsed)
008 404 Page (Expended)
Designing a 404 page is different from creating other web pages since the 404 page is meant to communicate to the user that something went wrong. So instead of showing some cool images, I decided to include some essential information that helps the user to understand what just happened and how to resolve it. For users who had never seen a 404 page before, they will be able to learn about the page by clicking the help icon.
009 Music Player
010 Social share
Two important concerns were address while designing the icons, to avoid hit by accident, and to clearly indicate that it had already been shared. I considered the combination of slider, text, and color will be the best way to convey these information.
011 Flash message (Error/Success)
It is important to let users know what had been done and what have not, and what they need to do next.
012 E-Commerce (Single item)
013 Direct message
The design focused on how to show who posted what messages in a clear way. I added a color coding together with a name tag at the bottom of the message box, which will benefit the user from knowing who sent the message when it is long.
014 Countdown Timer
015 On/Off switch
One of the complaints that I had usually heard is that the user was not able to clearly identify whether the switch is currently on or off. To solve this problem, I used not only colors but also text descriptions to guide user how to interact with the switch.
Images and texts were from Alienware official website. http://www.alienware.com/
017 E-mail Receipt
Images and logos were from HTC Vive official website. https://www.vive.com/us/
018 Analytic Chart
The is a simple website analytic interface. It comes with all essential functions and allows the user to view the traffic data quickly with color codes.
As a League of Legends player, I redesigned the Ladder board in LOL that the user can click on the tier icon to see the information of top-ranked players. The information presented includes ranking, summoner name, total game played, win/loss, and points. All images belong to Riot Games. http://www.riotgames.com/
020 Location Tracker
This location tracker helps traveler plan the route between locations. I used different colors (gray, orange, and blue) to represent places or routes that the user had or have not visited.
021 Home Monitoring Dashboard
022 Search (Collapsed)
022 Search (Expended)
It is challenging for the new player of the Tabletop RPG Call of Cthulhu to learn how to create their player character, so I designed the Onboarding screen for noob.
024 Boarding Pass
This is the digital boarding pass. The boarding pass is the most critical document for passengers. I designed it according to how people will search the information and how critical the information are. The name of the airline and the flight number were placed on the top follow by the departure, arrival, boarding time and gate. The name, seat, and zone were put in the section since users only need this information once they are onboard. Lastly, a reminder was printed at the bottom to remind the passenger about the gate and boarding time
025 TV App
The challenging part of the TV App is that the user could only use the remote to control. So instead of using just icons, the icons have information telling user which button to press.