Daily UI Challenge: Day 31-40
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 31: File Upload
Day 31 was a file upload. I'm a big fan of the upload applications that provide a drag and drop feature with a large canvas. That's the design style I incorporated.
- Used a large canvas area so the user can easily tell where to drag a file to upload. In a similar fashion I used a large font and strong weight so the user is drawn to that element first.
- Provide an option to upload traditionally by selecting a file through the user's file system
- The status bars below the upload section give a good idea of the status of the file upload. I included the file size status as well so the user will know when the upload is done. I would also include a micro interaction to indicate the completion of the upload.
Day 32: Crowdfunding
Day 32 was a crowdfunding page. I took my inspiration from Kickstarter which is a great example of crowdfunding..
- I think using the color green really serves a crowdfunding campaign well as it signals success and inspiration. The main areas of focus that need to be highlighted right away are the total money raised and the button to back the project.
- The main photo acts as a placeholder for a video that provides a trailer or more information about the scope of the project. It's an important element as well and has prominence in the design.
- The rest of the page is simple, clean and straightforward and allows the rest of the design to be in focus
Day 33: Customize Product
Day 33 was a super fun design challenge. It asked to customize a product. One of my favourite shoes, The Boost by Adidas is an excellent product that fits this design.
- The left nav is a critical component of the design and acts as the hub where all customization can apply to the shoe
- The menu is collapsable and each section works the same as the other creating consistency and easy navigation/customization
- In each section as the user selects an item, the change is reflected on the shoe so the user can see what the live version will look like
Day 34: Car Interface
Day 34 asked to design a car interface. This was a bit of a challenge as there were multiple components in the design I had in mind. For me, when driving, I need my controls to be easily accessible and within reach.
- Focused on four important components and restricted the design to: navigation, audio, phone, and temperature controls.
- Kept all the controls simple. large and within reach. I removed any other buttons that aren't necessary during driving.
- The back buttons, the plus button and the dashboard button allow the user to reach previous settings or adjust more advanced settings when not driving.
Day 35: Blog Post
Day 35 was the design of a blog post. I quite enjoyed this challenge as I learned some principles from my recent course in UX Design at Bitmaker Labs. Some of the things I learned:
- An 8 point grid and a 12 column layout with a 20px gutter and column width of 60px. I created margin space on the left and the right and one main column in the middle to centre the main content. Using the grid and the layout settings, I'm able to design a clean and well aligned design.
- The design is modelled after the Medium blog which I think does a great job of blog content. It utilizes a lot of white space and has a large and prominent title and image. I would say this layout is image and title focused.
- The profile information is also important and the line that indicated the read time (3 min read) is in my opinion and important indicator.
Day 36: Promotion
Day 36 was a promotion. I decided to design a quick card or pop-up with a discount for a nice watch.
- For a discount to be effective there are two components that are important. The product and the value. I used a nice image of the watch and place prominence on the discount by making the font large and bold
- The text is nicely aligned left to guide the eye from the top to the promotion button
- After the discount, the button is probably the next important element so the user can view the actual discount.
Day 37: Weather
Day 37 was a weather app. For this design there are certain pieces of information that need to be highlighted right away.
- When opening a weather app it goes without saying that the current temperature is the most important piece of information. I made sure it was large and centered
- After the current temperature, there are other cues that can give some important overall information on the type of day it is. The sun icon lets the user know it's a sunny day, along with the 'sunny day' caption. The high and low for the day gives a sense of what's to come.
- From there, I provide the forecast for the next few days so the user gets a sense for the week and knows what to expect in the immediate future.
- Overall, I wanted to include the most prominent and vital information in my version of the weather app
Day 38: Calendar
For Day 38, a calendar design I took a page out of Erik D. Kennedy's article called 7 Rules for Creating Gorgeous UI In particular I focused on the following:
- I used a greyscale design first, which is the second image in the carousel. You can see what the design looked like without any color. This made me really focus on text, spacing, alignment and positioning.
- This challenge was in part mostly a task in alignment and using equal distances. Especially with the dates, everything had to be aligned properly and equally to maintain the aesthetic appeal.
- One of Erik's rules is to steal from the best, and so my design is modelled after the iPhone built in calendar. I'm finding this technique extremely helpful and it doesn't feel like cheating at all. Instead I'm able to focus on very specific parts of a design and ensure they are done well.
Day 39: Testimonial
For Day 39 I designed a testimonial page or a product review. This design is mostly about trust and user assurance. The layout itself is straightforward but there are key elements or cues that the user would look for in a review:
- First and foremost the title of the product is the most important element and must be identified right away. I used a strong color and bolded this element. Next the 5 star rating system is what users will use to gauge the quality of the product. The stars need to be clear and legible.
- On the right there are additional cues that support the legitimicy of the review such as the validated review and verified user.
- Overall the design is to ensure trust since most product reviews or testimonials involve a purchase.
- As for the design itself, I worked on this in three stages. First I created a b&w version. Then I added some icons and finally I found a nice color palette and incorporated color. You can scroll through the gallery to see the different versions.
Day 40: Recipe
I had a lot of fun with this recipe design. The image has been enlarged for legibility but the design is adapted for an iPhone display. This challenge was mostly an exercise in layout and grid.
- I used a 12 column layout grid and all of the design elements are aligned to the grid. When an element breaks the grid, its parent container is at least on the grid.
- For a vertical baseline, I use an 8px grid with a line spacing in multiples of 8. This keeps everything consistent despite the font size itself.
- For the recipe itself, the key elements are of course a nice image that supports the design, the ingredients and the preparation steps. Those must be clear, straight-forward and sequential. Add in some nice fonts and some hints of color and overall I think it's a nice design.