Daily UI Challenge: Day 41-50
The Daily UI challenge is a 100 day project in which I work on improving my design skills. You can follow along by viewing my design progression below.
Day 41: Workout
Day 41 called for a workout interface. I used a Fitbit design as inspiration and incorporated a few points:
- As in my previous designs I used a grid and layout to ensure that all elements are aligned and conform to the grid. This makes the design consistent and balanced.
- For a workout interface, the key workout metrics must be prominent. At first glance the user will have a good summary of all of his metrics and know where he stands right away.
- I used a nice icon set to associate the metrics with easy to grasp icons.
Day 42: Task List
Day 42 asked for a task list or to do list. I enjoyed this challenge as these types of apps are some of my favourite. Asana does a great job with their app as they keep things simple and clean:
- This view shows Incomplete tasks with an easily accessible drop down that allows the user to toggle between incomplete and complete, etc.
- I used a row format for mobile that allows the user to click on each row and quite easily access the task.
- The design is broken into easily recognizable sections and at the top the user can add a task at all times.
- I used a faded look for any tasks recently completed
- Overall I found this challenge incorporating simplicity, and easy access to an intuitive list
Day 43: Food
Day 43 was up my alley as my recent portfolio project was a food app. I leveraged some of its design and made some tweaks.
- One of my favourite food apps, Ritual, inspired my concept as I kept the menu clean and simple. The most important elements on a menu are the dish titles and the price, so I made these stand out.
- I placed less emphasis on the dish descriptions but they are easily legible if the user wants more information.
- This menu style is easily collapsable and because it's text based the user can view menu items very quickly. The information is organized well.
- Finally, I made some initial tweaks to the grid and layout from some recent lessons I learned and everything is lining up much more nicely.
Day 44: Favourites
Day 44 is a favourites design. I really liked how the Ritual app allows you to select favourite restaurants so I did something very similar.
- The favourite button (heart icon) when activated must be distinct from the off state. I did this with a nice color contrast so when you select a favourite you are certain of your selection.
- The favourite button is easily toggled on and off. The app should provide instant feedback so that the user knows that they have added a restaurant as a favourite.
- Ritual uses an additional micro interaction that demonstrates the favourite is selected. I would do something similar in the next iteration.
- The rest of the design follows the similar lessons I've learned in using a grid, layout, grey tones and color.
Day 45: Info Card
Day 45 said 'info card'. I didn't quite understand what an info card was so I thought about an example that does a good job of displaying information. It made me think of my childhood and how I would spend hours looking at baseball cards and devouring the stats.
- One of the biggest challenges was to incorporate a player's statistics on a small card. At a minimum I used a 12pt font so when the card is printed it is legible. Spacing and alignment are important to keep the rows and columns clear.
- A trick I learned by looking at an old baseball card, is adding some color columns in the background of the stats. This breaks the sections up and categorizes the data nicely.
- I used some retro colours to give it a baseball card look and feel. And a condensed font for the player name.
Day 46: Invoice
Day 46 was an invoice. I got a haircut from a place called Throne in Toronto and they sent me over a receipt that caught my eye. It was nicely designed and had the right information presented.
- The key bits of an invoice that a user will look for are invoice#, the amount, and the due date. So I placed these in strategic positions and called them out, especially the amount.
- I included a large pay now button that lets the user settle the invoice easily. In a receipt version, the button doesn't have to exist.
- There are some subtle design elements that I included that add some depth to the overall feel including a ridge pattern at the top and in the footer, some subtle dashed lines-that break up content- and some social icons.
Day 47: Activity Feed
Day 47 was an activity feed. This was a monumental design for me since when I started my training course at Bitmaker labs I completed a very similar assignment. Only then, I remember the challenge taking almost an entire afternoon. Whereas after countless hours of design, I was able to complete this one in about an hour.
- This design was straightforward with the pertinent information presented in rows.
- The challenging component was ensuring the text wrapped properly and contained enough space. If the feed item was particularly long then the row height would have to expand.
- I used a convenient tool called Craft that auto populated the images from a site called Unsplash.
Day 48: Coming Soon!
Day 48 asked to design a 'coming soon' page. I think there are a few sites that design these pages well. I prefer the ones with a timer so that I know specifically when something is available.
- I put a countdown timer and emphasized it with color and contrast so the user knows when to expect the program to begin. Ideally this would be animated and countdown in realtime.
- Another feature is to include notifications via email, so the email form serves two functions: it provides the user with an update a few days before launch and it allows the site owner to capture user information - a win-win.
Day 49: Notifications
Day 49 asked for a notification design. I thought Facebook is probably the king of notifications and so I designed modelling them:
- Each notification takes up a row and must be easily distinguishable. One way to do this is to use different row background colours.
- Each notification is time stamped so the user has a sense of timing and how fresh the notification is. This is critical in our always on social media environment.
- Icons are used to give a sense of the type of notification. For example you can easily tell which one is a video in the case the user is in the mood to watch something on their phone.
Day 50: Job Description
Day 50 asked to design a job description. This design was straight forward with an emphasis on a few points:
- LinkedIn does a good job of applying to a position by providing a one button application process. Indeed does something similar so having this option is important for the user.
- Knowing who the hiring person is and providing a way to contact them is also a good opportunity for the user to stand out.
- The job description text is expandable in this case the job searcher wants to read the description in its entirety. Otherwise there's room for other design elements.