Outline

I created an application with modern HTML, CSS, and vanilla JavaScript to replace an older vision protection application that was flash based. Computer use can strain your eyes and this application will give gentle reminders to take a break.

The application had a few criteria:

• 1. A display to show the time for both:
• a. Break time
• b. Work time
• 2. A quick start setting with default values.
• 3. The ability to customize the length of time for both:
• a. Break time
• b. Work time
• 4. Reminders to take a break and begin work time.
• a. There was to be a sound reminder.
• b. There was to be a pop-up reminder.
• x. Users needed the ability to grant permissions.
• y. Users needed the ability to revoke permissions.
• 5. Theme options with credits that can be changed.
• a. A "Mountain" theme option.
• b. A "Forest" theme option.
• c. A "River" theme option.

Planning

I sketched out the design and figured out the functionality of the application on pen and paper. I worked out where the most important elements needed to be placed.

Design

The aesthetic design began with a mood board in Illustrator. I visited Unsplash.com and selected images that users would find relaxing. Nature offers a respite from the day-to-day office work that most users will be doing. When the final images were selected I chose the accompanying colors for each theme. Icons and a simple logo mark was designed to fit the overall modern and clean look.

The design process moved to Figma. The layout began in grayscale to make sure the important aspects were highlighted and the process was not confused with various colors. Once the grayscale layout was finished, the final color design began with the "Mountain" theme option.

Development

It was now time to begin the final development process. HTML, CSS, and vanilla JavaScript were used. There were a couple of design tweaks that had to be adjusted for the final website. These tweaks were done to simplify the experience for the user.

Want to see the live website? Click here!