Deadline [Web Design]
UI DESIGN | WEB PLUGIN
Do remember your deadline, and keep this little guy alive!
——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.
Some additional thoughts - Multi-deadline management
When there are more than one dues that users want to manage, they may add more "deadline pages". To differentiate each page, I can use different colors as followers: