For the uninitiated, Daily UI is an interface design challenge lasting 100 days. Each day, a new keyword and a new design to imagine. I embarked upon this adventure to better my knowledge of design and to expand my areas of interest. I challenged myself to complete the majority of each design before work started. Hit by other duties, I had to stop prematurely. Here is a collection of what I had created with brief comments on each.
Please note that a number of these are developed on CodePen. It is recommended that you open them on CodePen rather than inline. I also do not update them, so they may break as browsers change.
#001 – ‘Sign Up’
The input fields’ text act as placeholders until the field is focused. Then it transitions from a placeholder into a header. I think this is great, as it acts as a non-intrusive way of reminding the user of the content without having to splash additional labels around the element in question. The submit verification animation is nice, but could be better.
#002 – ‘Credit Card Checkout’
The first of the mobile UI designs. While this interface is functional, I feel as though it could have displayed a product, or at least an indication of how much was purchased (e.g. a shopping cart with a notification icon). The currently selected payment method also seems a little faint and could be pulled more into focus.
#003 – ‘Landing Page’
Another experiment with input field labels and placeholders. An idea similar to that of the first, but with separated elements, allowing for a more specific description for the placeholder.
#004 – ‘Calculator’
A simplistic interface designed for desktop or tablet use. The triple dot at the bottom center switches to an advanced mode where other functions become available.
#005 – ‘App Icon’
A piano application icon for a mobile device. Negative space used for the black keys. I particularly like this one, but I may be biased!
#006 – ‘User Profile’
In this imaginary social app, a user’s social feed is consolidated into one, with links to each provided. Useful for following somebody who posts on multiple networks.
#007 – ‘Settings’
This application controls the settings of a connected light source. The color can be modulated using the hex wheels in the center in combination with the brightness slider below. The bulb at the top changes color to match. I feel that something more creative could have been done for the brightness control, potentially involving the bulb itself, and revealing more screen space for it to exist.
#008 – ‘404 Page’
Large, simple, and bold to get the point across, with a little lighthearted humor.
#009 – ‘Music Player’
I had experimented with using the audio waveform as a timeline for the progress of the song. Unfortunately, it took too long and ate up my time, therefore the design was simplified. It feels as though this design still has potential, but is missing key components upfront like volume control.
#010 – ‘Social Share’
The icons use actual brand colors for recognition. When focused, a snappy, bouncy, but not overkill animation floods the background with the respective brand color. The logo then inverts to create a negative space cutout. This is reversed when focus is lost. I find these kinds of buttons appealing when used correctly.
#011 – ‘Success Message’
Not only is toast nutritious, it is great for notifications, too! The SVG animation draws attention to the popup in addition to it just appearing, and adds a layer of interactivity. It could definitely use work, but it is functional.
#012 – ‘Single Product’
A simplistic yet effective product page. I find that adding an offset in size of the element in focus – the product – to the content next to it draws the eye toward that element. I do think that the colors could have been implemented in a smarter way, and somehow indicated what they actually change, too. Most of the core information is available, but it is missing some essentials such as the size.
#013 – ‘Direct Messenging’
The color of the heading and the color of the contact’s messages are matched for consistency and easy identification. Colored blocks on each message are simple enough to read at a glance, but do not take up too much whitespace, which is vital for mobile. The input at the bottom of the screen is kept in a minimal state unless interacted with to allow for more reading room.
#014 – ‘Timer’
Unfortunately, too much experimenting left no time available (pun intended), reducing the design to a simplistic form. That said, sometimes less is more. The tabs at the top switch modes. The three buttons at the bottom control the stopwatch. Placing them at the bottom and making them large makes them sit directly under the resting position of the thumb, making it easy to use. In retrospect, the icons on the buttons at the bottom are way too large.
#015 – ‘Toggle’
A simple binary switch. Labels are placed inline on each side of the toggle to confirm what each state means. I think that the shadow may be overdone, though.
#016 – ‘Modal Dialog’
When handled incorrectly, modal dialogs can completely break a user’s flow. As such, I find it important to make the message clear and provide an obvious method for closing the dialog quickly.
#017 – ‘Email Receipt’
This minimal receipt had people questioning if I had bought an Apple Watch. In my books, that’s a win for the design. I found that the distribution of elements plays a large role in the appearance and flow of a design. While visually appealing, it is missing a number of features often found in emails, such as clickable links for tracking, quick links to account settings, reviewing of orders, and so on.