Interactive Design | Task 2

- 5/5/2026 ~ 8/7/2026 (Week 4 ~ Week 12)

- Interactive Design
- Takeguchi Shunta/0386416/Bachelor of Design in Creative Media




PROCESS

Since we received a good evaluation from my teacher for Task 1 presentation, we proceeded to prototype creation without changing the basic business principle of being able to find affordable local restaurants even late at night. I decided that it would be difficult to create everything from scratch, so I first gave the Moodboard we created with Figma to the AI ​​to create a basic framework.

Figma moodboard 1

Figma moodboard 2


Website draft: https://amazing-elf-6f550a.netlify.app/.
As a result, I was able to create the basic structure according to the mood board, and then I edited the details such as effects when hovering, inserting `<a>` tags to move between pages, and inserting images. 

Home page


After the homepage was mostly complete, I moved on to creating the restaurant search page. First, I reused the same header and footer as the homepage and then created a simple restaurant search page. Using the foodpanda page as a reference, I divided the restaurants into categories such as Cuisine, Special Offers, and restaurants that are open late at night, which is a business feature. Users can scroll horizontally within the categories to find the desired restaurant. In the areas that scroll horizontally, elements that overflow can be scrolled and displayed by clicking the arrow icon. This required JavaScript, but I was able to set it up using AI. We've also introduced a filter (not functioning). This allows users to search for restaurants based on their individual needs. Additionally, I added a story section based on feedback from the teacher.

Fliter

Story section


Since there was still time before the submission deadline, the leader took the lead in using AI to make improvements, and ultimately, a more refined website was completed.

Creating a single website as a group was challenging for this task. Since it's difficult for multiple people to work on a single codebase, we divided the work among ourselves, each responsible for a specific page. Even then, we made sure to communicate to ensure that we used consistent colors, footers, and other elements.

In this task, I was mainly involved in website creation. I had the AI ​​create the basic initial layout of each page, and then I manually corrected the flaws in the output (irrelevant images and text content, misaligned text positioning, etc.).




Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises

Image
  -26/09/2025 - 31/10/2025/(Week 1  - Week 6) -Takeguchi Shunta/ 0386416/Bachelor of Design in Creative Media -Typography  -Task 1: Exercises TABLE OF CONTENTS   Lectures   Instruction   Process Work   Feedback   Reflection   Further Reading LECTURES Lecture 0: Typography Introduction Summary -Typography is a fundamental skill set of design - Typography is the act of creating letters -Typography can be animation, web design, app design, book, poster, logotype, etc -Reading books about typography helps understand it -In 500 years, calligraphy became lettering and lettering became typog...
Read more

Digital photography and imaging - Project 1

Image
-24/09/2025 - 28/10/2025/(Week 1  - Week 4) -Takeguchi Shunta/ 0386416/Bachelor of Design in Creative Media -Digital photography and imaging -Project 1 ARTWORKS Physical collage Production process:  https://shuntatakeguchi.blogspot.com/2025/11/digital-photography-and-imaging-week-2.html Digital collage Production process:  https://shuntatakeguchi.blogspot.com/2025/11/digital-photography-and-imaging-week-3.html Hearst Mansion Demo  Hearst Mansion Original Work Recoloring Exercise 1 Recoloring Exercise 2 Production process:  https://shuntatakeguchi.blogspot.com/2025/11/digital-photography-and-imaging-week-4.html REFLECTION   With these 3 practical tasks, I could learn basic use of Photoshop. I felt the cropping and mask part was easy since the computer can help do it automatically. But like in the Shaza...
Read more