INTERACTIVE DESIGN - TASK2
FANN WONG JING EN｜0382237
Design Principles | Bachelor of Design (Honours) in Creative Media
GCD60904 Interactive design
TABLE OF CONTENT
MODULE INFORMATION BRIEF (MIB)
TASK 2
Theme Planning
In this group project, each member was responsible for a different study scene theme. My part was the forest theme, so I started by thinking about how a forest could create a calm and focused study atmosphere.
First Draft
For my first draft, I placed a large 25:00 timer in the middle of the forest background and added a simple to-do list on the side. At this stage, I mainly focused on the visual mood, using green colors, leaves, and a soft forest image to make the page feel relaxing.
After presenting the first draft, I received feedback that the page needed a stronger reward system. It should not only show a timer and tasks, but also give users something to unlock after completing their tasks.
Reward Idea
Based on the feedback, I developed the idea of unlocking animals in the forest. Each completed task could reveal an animal or a small visual element. This made the forest theme more meaningful because the scene could slowly become more alive as users made progress.
Layout Improvement
During the process, I realized that putting everything together made the page look too crowded and unclear. So I used boxes and cards to separate the timer, to-do list, and garden reward area. This made the forest theme look more organized and closer to a real product interface.
Static Webpage
After that, I started turning the design into a static webpage using HTML and CSS. At first, the layout was still simple, but it helped me test how the timer, task list, and reward area could appear on the screen.
Final Forest Version
In this version, my forest theme became part of the group project’s study website. The design kept the calm forest atmosphere, but the structure became clearer. It included a timer section, a to-do section, and a garden reward section where animals could be unlocked after tasks were completed.
Cover Page Process
The cover page was designed as the first entry point of my project. Instead of showing only one study interface, I wanted the cover to work like a theme selection page, where users can choose different study scenes before entering the main app.
I created a large visual cover with the project title, navigation buttons, and several theme preview cards. Each card represents a different study environment, such as forest, beach, cafe, and picnic. This allows users to switch between different themes depending on the atmosphere they want for studying.
After receiving feedback from my tutor, I realised that using my own illustrations would make the project feel more personal and original. In the earlier version, some visual elements were based more directly on existing images, so the overall style did not fully represent my own design language.
To improve this, I used the original images only as references for mood, composition, and character direction. Then, I redrew the visuals in my own style. For example, I created a soft cartoon dog character with a red beret and bow, using a warmer and more playful visual style to match the calming study theme.
A short video demo was also recorded to show how the prototype works. The demo shows the timer, task input, and interaction flow, allowing viewers to understand how the interface functions.
REFLECTION
For this task, I created a forest-themed interactive study webpage. The main features included a 25-minute timer, a to-do list, a reward section, unlockable animal elements, and a cover page with different study theme options.
Before using AI, I had already planned the concept, chosen the forest theme, created the first layout draft, and decided on the calm visual direction. I also worked on the illustrations and adjusted the design based on tutor feedback. My own contribution included the main idea, visual style, theme planning, layout decisions, and final design refinement.
AI assisted me mainly in organising the webpage structure and improving the coding process. It helped me understand how to arrange the HTML, CSS, and JavaScript for the timer, task list, and reward interaction. AI also helped me refine the wording of my reflection and suggested ways to make the layout clearer.
After receiving the AI-generated output, I reviewed and edited the result instead of using it directly. I adjusted the layout, improved the spacing, changed some visual elements, and made sure the design matched my own style. I also redrew some illustrations myself so the final outcome looked more original and personal.
Through this task, I learned how to combine visual design with interaction design. I also learned how AI can support the development process, but the final creative direction, design decisions, and improvements should still come from my own judgment.
Comments
Post a Comment