Daily UI

Design a UI element everyday, for 100 days.

#001 - Sign up

What is, at a minimum, required to sign someone up? Two fields - an email address and a password. The email address can be used for account confirmation, and allows a user to regain access if mistakes were made while creating a password. An option to view the password in clear text is also available to assist the user.

The display picture is not mandatory. However, and especially on mobile devices, users may have a profile picture readily available and the field provides the opportunity to personalise an otherwise sparse sign up form.


#002 - Credit Card Checkout

The design of this screen was driven by two requirements. The first is to have the items in the cart and total visible throughout the checkout process. The second is to clearly inform the user where they are situated in the checkout process.

A lengthy checkout form is chunked into smaller and more manageable screens. Colour is used to differentiate among completed, current and pending steps.


#003 - Landing Page (above the fold)

For this exercise, I designed the landing page for Shayan - a company that specialises in textiles and bedding. The banner allows the firm to showcase new collections and products. When I made this, I pictured someone in bed who did not want to wake up despite the hot coffee on the table, which explains the headline. The top-level navigation links are kept to a minimum. However, corporate and social responsibility gets prominent placement since they can be key differentiators in the industry. The fonts and use of a desaturated blue communicate elegance and sophistication.


#004 - Calculator

My goal was to improve the standard calculator in a few ways. First, simplify the memory operations. Usually, a physical calculator has 5 memory buttons (MR, MC, MS, M+ and M-). This functionality is not always easy to understand and use. I did away with these buttons to opt for more direct manipulation of the number in memory.

The equation view informs the user of the calculation sequence that led to the answer. Backspace to correct errors in typing. And the history view to recall calculations done in the recent past.


#005 - App Icon

I came up with this for a hypothetical text playlist app. I had a lot of ideas and variations, and wasn't really happy with most of them. But this has potential. It's not great, but it'll have to do. Even skimming through the wonderful icon handbook could not help this. Icon design is hard.


#006 - User Profile

An important feedback for Atmos was to show real users in the mockups, and avoid idealised versions with pretty but implausible display and cover images. This is a basic user profile with room for a headline, bio, link and location. There are two actions - message or follow. It's simple and works.


#007 - Settings

I focused on the layout and architecture of the settings screen, than the visual design itself in this exercise. I arrived at 4 major sections on the sidebar after going through common options for a hypothetical web application. The sidebar and sub-headings are used to chunk the available options. Finally, an option to delete the account is just good manners.


#008 - 404 Page

I had a bit of fun with this challenge, opting for a striking visual aesthetic that might pleasantly surprise the user. The shot came together around a pun that Vaidehi really wanted to incorporate. A strong angled overlay is used to emphasise the theme of sharp hawkish eyesight. The photo used is by Kim Taylor Hull, licensed under CC by 2.0.


#009 - Music Player

I opted to design a mini view for a music player because the iTunes miniplayer is bad and Spotify does not even have one. I usually listen to complete albums, and that's what the shot shows. Since this is a mini view, the goal was to show the essential playback controls, and some functionality to see upcoming tracks in the album.


#010 - Social Share

A simple share widget on a website. The screen shows the sequence of user actions - selecting the social networks, adding a description and a confirmation.


#011 - Flash Message

A simple success and error dialog. I started with something more traditional, but experimented with the colour volume. This could work because flash messages cards are small in size. There's room to provide more details to the user, and an action.


#012 - E-commerce Shop (Single Item)

A product page in an e-commerce store, and I love a good bag. I built this around the items you would expect to see in a page of this nature - product photos, reviews, customisation options and specifications.


#013 - Direct Messaging

Messages sent in succession are grouped in the same bubble. Timestamps are relative, and a checkmark indicates if the message has been read.


#014 - Countdown Timer

The countdown is visualised in percentages using a grid made up of 100 squares. The blue filled-in squares show the amount of time remaining.


#015 - On/Off Switch

I worked on a few variations for this. I tried to avoid using shades of red for 'off' - a light shade of grey is a better signifier for a feature which has been disabled. Colour is used to communicate the 'on' state.



#016 - Pop-up / Overlay

The shape of an envelope is used to convey the nature of the notification - a message. The overlay will be dismissed automatically if there is no action from the user.


#017 - Email Receipt

A large message area on the top is used to thank the customer, and provide an action to manage the order. The body of the email is divided in two columns. The left column provides a summary of the transaction, and shows the delivery date. The larger area shows the items in the order, and a breakdown of the price.


#018 - Analytics Chart

I decided to go a with a simple income and expenses chart for this exercise. Data points are shown using circles, and a legend explains the colours. Arrows and numbers in green and red show variances between the current month and previous month at a glance.


#019 - Leaderboard

Popular podcasts showing number of listeners and likes. The leader is given a prominent position with a larger cover image. Green and red chevrons show movement in the leaderboard.


#020 - Leaderboard

The app is about tracking somebody stranded on a remote walking trail. A card shows information about the person with a profile picture and their current state (assuming that a tracking beacon would allow the hiker to relay this information).

Other sections show information about the route to the tracking beacon - geographical coordinates, distance and time.

020-Location Tracker.png

#022 - Search

A dropdown allows filtering search locations. Click "everything" and the search will be across all content types. I went with a large striking and quirky background to complete the shot.