Daily UI Challenge: Day 1-10
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 1: Sign Up
The first Daily UI challenge was creating a sign up form. This wasn't too difficult as my course at Bitmaker had several apps that involved a sign up page. My philosophy around sign ups:
- Use social logins to allow for one button sign up
- Keep the fields minimal and straightforward
- Dynamic password validation
Day 2: Credit Card Form
The second day of the challenge asked to create a credit card form. I wanted to create something very simple. This is a step in the checkout phase that is very critical and so I wanted to eliminate distractions.
- Credit card type (Visa/Mastercard) is auto-detected upon number input
- Security message at the top of the page provides a sense of security
- Button includes final purchase cost, providing the user further assurance
Day 3: Landing Page
Day three asked to create a landing page and to pay attention to key elements. Some ideas I implemented:
- Clear call to action to download app in the header
- 8px grid for consistent spacing and layout
- Clarity with a prominent CTA button
Day 4: Calculator
The challenge today said 'Calculator'. So I went to the source and designed after Apple's built-in calculator which uses a flat design. I had a lot of fun with this exercise, especially with spacing.
- Used rulers strategically to create even layout
- Used Apple's San Francisco font to replicate the look
- A flat design eliminates unnecessary details
Day 5: App Icon
On Day 5 I was asked to create an app icon. I decided to design an icon for my Hangry case study. I incorporated my Hangry mascot into the icon for easy identification.
- Bright gradient that makes the app easy to identify
- Monster icon also makes the app icon easy to remember
- Fun and colourful, creating a positive mood when using the app
Day 6: User Profile
Day 6 was a fun day! I was asked to create a user profile. I decided to take a page out of the Bitmaker book and mimic my student profile.
- Replicated a best in class design to learn for myself
- Multiple layers in the header with a blur effect
- Incorporate a variety of icons to tie in the design
Day 7: Settings
I had to do Day 7 rather quickly as my schedule was full. I decided to do a settings page for an iPhone app. I timed myself for this design and it took about an hour.
- Used repeated elements for efficiency.
- Used Sketch's Mirror functionality to ensure spacing was right on an actual device.
- Sped up the design process to fit a hyper tight deadline.
Day 8: 404
The 404 page is always a fun page to design. Yet at the same time, it's a page that many companies neglect. Here are some pointers:
- I used a fun monster, that matches the site branding, and gives a sense of calm or lightheartedness.
- Injected some humour so the user finds value from the page in the hopes of reducing frustration.
- Indicates it's a 404 error to provide some familiarity and so users understand what is happening based on conventions.
- Provide next steps and links for further navigation so they can get back to what they were doing.
Day 9: Music Player
The challenges continue to be fun and insightful. For the music player I really had to pay attention to usability.
- Are the buttons (play button, volume control, forward and backward) easy to control. That is on a real device can someone press them easily.
- Initially the controls I designed were too small. I realized I had to make the fonts and buttons much larger so people can use them
Day 10: Share Button
Today's challenge was a bit ambiguous as they asked to create a share button. There are many ways to go about this and I decided on creating a simple mobile drop down.
- Include a straight-forward drop down and overlay
- Allow to instantly share the article to the main social hubs
- Easy scalable downwards to add more social sites
- Good spacing for touch devices