#DailyUI

For the uninitiated, DailyUI is a design challenge lasting 100 days. Each day, a new keyword and a new design to imagine. Constant creation. I embarked upon this adventure to better my knowledge of design and to expand my areas of interest. Working full time, I only had a little time before work each day. Hit by other duties, I had to stop early. Here is a collection of what I created with brief comments on each.

#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.

See the Pen #DailyUI 001 (Chrome) by KasumiL5x (@KasumiL5x) on CodePen.

#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.

See the Pen #DailyUI #003 by KasumiL5x (@KasumiL5x) on CodePen.

#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.

#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.

See the Pen #DaliyUI 008 - 404 page by KasumiL5x (@KasumiL5x) on CodePen.

#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 as ate up my time, and the design was simplified. It feels as though this design still has potential, but is missing key components 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.

See the Pen #DailyUI 010 by KasumiL5x (@KasumiL5x) on CodePen.

#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.

See the Pen #DailyUI 0011 by KasumiL5x (@KasumiL5x) on CodePen.

#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, 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.

#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.

See the Pen #DailyUI 015 by KasumiL5x (@KasumiL5x) on CodePen.

#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.