TO DO LIST - HIVE
This is a UI design for a to-do-list app.
- Before I started my design, I found that most of the to-do-list apps were limited in the form of "list". I would like to design a UI that different from others, so why not be more creative? At first I wanted to use bubbles as "list", but someone had had similar ideas. Then, an idea of "favous list" came to my mind.
- In my first version of design, I would like to use gradient ramp basing on yellow. However, this design looks somehow messy and dirty. Thus, in the next version, I (1) abandoned gradient ramp and only keep one yellow color; (2) enlarge the size of hexagons; (3) change the detail bubble as banner.
User Flow & Functions
- User can drag the hexagon to any position they want.
- User can see different tasks by swiping around.
- By clicking the hexagon once, the "edit" button and "finish" button will appear.
- Click "edit" button: go to the edit site
- Click "finish" button: delete this hexagon .
- User can click the "+" button at the right corner to create a new task. They can press "return" on the keyboard to finish creating the task.
- If there are too many words in one task, the whole texts would not appear on the hexagon. When the user long press this hexagon, there will be a banner appear, and at this time all the other parts in this site will become blurry. If the user long press the hexagon and drag it simultaneously, the banner would disappear and come back to .
TIME COUNT DOWN - DEADLINE
This is a UI design for a time count-down website plug-in.
About the design
- Users can set the time and title that needs to count down, then they will see the count-down site.
- There are five changes during the count down: from the character easily holding up the "deadline" to the character being pressed to death by the "deadline".
- Users are able to change the title and due date.
- General Design
- Flat design: great contrast in color, and big shadow without gradient ramp.
- Font style: "Impact" - match with the general design style. I considered to add shadows for all the text, but this would make the whole design too heavy and distracting. So I decided to keep the shadow of time-count-down part but delete them in normal text.
- Calculate Method
- The five changes are based on the percentage of days from the start date to the due date (“76%~100%”，“51%~75%”，“26%~50%”，“1%~25%”，“0%”).
- In this design, the start date is from 0:00AM, 15/6/2017, and the due date is at 12:00PM, 1/7/2017.
LOG IN SITE - DONUTS
This is a UI design for an app in which people can customize donuts.
About the design
- Users can see the big logo when they enter the log in site. The whole process is about 0.7 second, which can enhance users' impression on the brand.
- In order to make the design simple and clear, I only chose two colors (pink and white). The bottom design (waved lines and white grains) is echo with the logo design.
- I use "New to Donuts? Join us!" as the "sign up" reminder because this can make it more friendly, which is good for user's first impression on the app.
ps. Logo design comes from Vita Spenser, I made small changes on it.