Labels

Advanced Interactive Design | Task 1: Thematic Interactive Website Proposal

24.09.2024 - 15.10.2024 / Week 1 - Week 4
Khu Ying Ying / 0357306
Advanced Interactive Design / DST60804 / Bachelor of Design (Honours) in Creative Media
Task 1: Thematic Interactive Website Proposal

TABLE OF CONTENTS






INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1FmQhAShEGNyPvuPQGyPve22qjwbLwxgL/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 1: THEMATIC INTERACTIVE WEBSITE PROPOSAL

Week 2 (01/10/2024)

Requirements:
  1. Students are required to create a thematic interactive website proposal with the topic of their choice that can be based on:
    • A specific product of a particular brand launch/special (e.g. Nike brand new shoe).
    • Beauty product launch (e.g. Sephora compact powder).
    • Movie promotion.
    • Game release promotion.
    • Gallery/Museum exhibit launch.
    • Band/Artist latest release.
    • Or anything else you have in mind (subject to the module coordinator’s approval).
  2. The proposal contents must include visual references and website references.

Submissions:
  1. Completed UI/UX proposal document.
  2. All processes (concept, wireframes, mood board, flow chart).

Progress:

Initial Ideas

For my initial ideas on the 5 topics, I was thinking of:
  • Logan (movie).
  • Eilish Perfumes (fragrances).
  • Barbie (movie).
  • Peripera Ink Airy Velvet (beauty product).
  • Dress to Impress (game).
We were required to include visual and website references as moodboards for our topics. We were also encouraged to explore website references, such as The FWA, to gain insights, concepts, and inspiration for our work. After exploring, I began listing the concepts and rough ideas for each topic.
Figure T1.1: Initial Ideas (PDF), Week 2 (01/10/2024)

Week 4 (15/10/2024)

Further Development

After receiving feedback from Mr. Shamsul, he suggested I choose the topic I was most interested in from my initial ideas. I decided to go with Logan (movie promotion) as my final topic for Task 1. He also advised me to maintain consistent fonts and colors with the movie poster for a more cohesive look. I then added more detailed information about the chosen topic, Logan.

Goals:
  • Personal Passion: Create the website with elements that reflect my love for the unique tone of the movie. 
  • Immersion: Let users experience the same emotions as the characters.
  • Interactivity: Allow users to explore deeper insights into Logan's journey.

Colour Schemes: 
  • Primary Colours:
    • Dark Gray/Charcoal (#333333): Reflects Logan's harsh, gritty tone.
    • Muted Yellow/Gold (#C4A000): Evokes emotional warmth and nostalgia.
  • Secondary Colours:
    • Earthy Brown (#682f14): Add warmth and contrast.
    • Orange (#d8782c): Sunset-inspired orange for highlights and emphasis.
    • Off-white (#fdfbe3): For readability and balance.
    Figure T1.2: Colour Schemes, Week 4 (15/10/2024)

    Typography:
    I chose Sans-serif typefaces to match Logan's rough, modern, and straightforward style. They are perfect for the website because of their effortless and minimalistic design, which ensures readability and clarity. This will preserve a smooth, user-friendly experience while blending in with the tough tone of the movie. 
    • Logo: Bebas Neue.
    • Title: Open Sans.
    • Body Text: Helvetica.
    Wireframes:
    I kept the same initial ideas for Logan as before.
    • Character Profiles: Logan (Wolverine), Laura (X-23), Charles Xavier
    • Movie Plot Overview: The key scenes of the movie, trailer
    • Interactive Section: Scroll the timeline of Logan’s journey (from the origin to the final).
    Figure T1.3: Wireframes, Week 4 (15/10/2024)

    Figure T1.4: Wireframes, Week 4 (15/10/2024)

    Flowchart:
    Figure T1.5: Flowchart, Week 4 (15/10/2024)

    Week 4 (15/10/2024)

    Final Submission of Task 1: Thematic Interactive Website Proposal

    Figure T1.2: Final Submission of Task 1 - Thematic Interactive Website Proposal (PDF), Week 4 (15/10/2024)

    FEEDBACKS

    Week 4 (15/10/2024)

    Specific Feedback: To refine your wireframes, use a minimalist font inspired by Logan's movie poster, such as a bold, clean sans-serif. Ensure your layout stays simple and focused, allowing the typography and colours to communicate the mood effectively.

    General Feedback: Choose the topic that you want to do, you can upload your Canva slides in your e-portfolio.

    REFLECTIONS

    Experience
    I really enjoyed Task 1 because it allowed us to choose a topic we were passionate about. However, I struggled to fully grasp Adobe Animate since it was my first time using the software. Initially, it was straightforward with just drawing, but as the tasks became more complex, it got harder to follow. I'll do my best to catch up and improve.


    Labels:

    Comments

    Post a Comment

    Popular Posts