Skip to main content

INTERACTIVE DESIGN | FINAL PROJECT — DESIGN, EXPLORATION & APPLICATION


Week 10 – Week 15 | 26/06/24 – 03/08/24
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Interactive Design | Section 03 | GCD60904
Final Project — Design, Exploration & Application

TABLE OF CONTENTS 

1.0 LECTURES 

*Sidenote: All lectures have been completed in Exercises and Project 1 — Prototype Design.

2.0 INSTRUCTIONS 


3.0 FINAL PROJECT — DESIGN, EXPLORATION & APPLICATION 

Instructions: 
  1. Create a single-page website dedicated to a topic of your choice. 
  2. Requirements:
    1. Artist Selection:
      1. Choose your favourite topic as the subject of your website.
      2. Decide on the site's goal to ensure clear content.
    2. Content:
      1. Should have at least 5 sections.
      2. Should include one CTA button that reflects the content.
    3. Design Elements:
      1. Choose a colour scheme and fonts that reflect the site's style.
      2. Have a balance of text and multimedia.
      3. Create a responsive design that adapts to different screen sizes (mobile-friendly).
    4. Navigation: Implement smooth-scrolling navigation or a simple menu that allows users to jump to different sections.
    5. Interactivity: Consider adding interactive elements, e.g. image sliders, hover effects, or lightboxes for multimedia content.

3.1 RESEARCH

I'm going to base my webpage around the 2014 manga and anime series by Ryoko Kui: Delicious in Dungeon, better known as Dungeon Meshi. 

Figure 3.1-1: Mood Board — Colour Palette, Week 11 (02/07/24)

Figure 3.1-2: Colour Palette, Week 11 (02/07/24)

While the anime is associated with earth tone colours, I like the pastel duotone effect of the Dungeon Meshi second anime opening theme song, so that's the colour palette I'm referencing for my webpage. 

Figure 3.1-3: Mood Board — Webpage Layouts, Week 11 (02/07/24)

I looked up examples of single-page website layouts on One Page Love. These are my favourites. My webpage's colour palette also is partially inspired by Café Frida and Naseba's colour palette. 

Figure 3.1-4: Fonts, Week 11 (02/07/24)

I'll be using the font I'm designing in Advanced Typography Task 3 for the franchise's logo. It is, as of writing this, in the sketching phase (more information available here). 

3.2 SKETCHES

Figure 3.2-1: Sketches, Week 13 (15/07/24)

Figure 3.2-2: Case File Container in the Naseba Website, Week 13 (15/07/24)

The case file (?) container for the "Main Characters" section is based on the one seen on the Naseba website (Figure 3.2-2). I figured it would display the character descriptions without the webpage looking too crowded. Not sure if I'll be able to code this, especially with the time constraint; I might change the design during prototyping. 

3.3 CONTENT & IMAGES

Figure 3.3-1: Content, Week 13 (18/07/24)

Figure 3.3-2: Images — Before (Left) & After (Right), Week 13 (19/07/24)
Software: Adobe Photoshop

I sourced these images from the official Dungeon Meshi website, the author's blog, and websites with high-resolution anime screenshots. Did some minor Photoshopping to match my colour palette. 

3.4 PROTOTYPE

Figure 3.4-1: Prototype — Figma, Week 14 (28/07/24)

Figure 3.4-2: Prototype — PDF, Week 14 (28/07/24)

3.5 HTML & CSS

Figure 3.5-1: HTML — PDF, Week 15 (01/08/24)

Figure 3.5-2: CSS — PDF, Week 15 (01/08/24)

I kept the design of my website mostly the same as the prototype, save for some minor changes:
  • Navigation bar alignment — Align left → align centre.
  • "Favourite Moments" section — 2 × 2 columns and rows → image carousel.
    • The carousel design can be seen in my sketch. I struggled to implement the carousel in Figma, so I put the 2 × 2 as a placeholder.
  • H1 & H2 font — Barlow Condensed Bold → Impact 200.
    • For some reason, Barlow can't register in my code, even though it's a computer default font. I substituted it with a similar font.

With that, it's ready to upload to Netlify.

3.6 FINAL SUBMISSION



Figure 3.6-1: Screenshot of Chrome Browser on PC — JPEG (Final Submission), Week 15 (02/08/24)

5.0 REFLECTION 

Honestly, I'm just glad to get this over with.🫠 Coding is a non-stop cycle of fixing one problem and another popping up. Uploading the webpage to Netlify was a whole other problem, as my original account was apparently suspended. When I tried to create a second account using another email address, Netlify wouldn't send the verification email. I ultimately had to use my mother's email account because the appeal process took too long. 

Getting Netlify to work caused me more headaches than the coding itself. 3/10, would not recommend.😐

Labels:

Comments

Post a Comment

Popular posts from this blog

ADVANCED ANIMATION | EXERCISES

Week 1 –  Week 5 | 22/04/25 – 20/05/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Advanced Animation  | Section 01 | GCD61604 Exercises TABLE OF CONTENTS  1.0 LECTURES 2.0 INSTRUCTIONS 3.0 EXERCISE 1 — BOUNCING BALL ANIMATION     3.1 PROGRESS     3.2 FINAL SUBMISSION 4.0 EXERCISE 2 — BALL WITH TAIL ANIMATION     4.1 PROGRESS     4.2 FINAL SUBMISSION 5.0 EXERCISE 3  — GOOD POSES     5.1 PROGRESS     5.2 FINAL SUBMISSION 6.0 FEEDBACK     6.1 WEEK 12 7.0 REFLECTION 8.0 FURTHER READING     8.1 WEEK 4 — THE BOUNCING BALL WITH A TAIL 1.0 LECTURES  1.1 WEEK 1 — INTRODUCTION & FLUIDITY Introduction We were introduced to Advanced Animation along with the expectations and objectives of the module. We were also shown some of our seniors' works  and given a taste of future assignments. Fluidity Due to Mr Kamal's absence during Week 2, we...
Post a Comment
Read more

MAJOR PROJECT I | TASK 1 — PROPOSAL DEVELOPMENT

Week 1 –  Week 4 | 04/02/25 – 25/02/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Major Project I | Section 01 | PRJ64904 Task 1 — Proposal Development TABLE OF CONTENTS  1.0 INSTRUCTIONS 2.0 TASK 1 — PROPOSAL DEVELOPMENT     2.1 IDEATION     2.2 GAMEPLAY & STORYLINE     2.3 ART DIRECTION      2.4 FINAL SUBMISSION 3.0 FEEDBACK     3.1 WEEK 1     3.2 WEEK 2     3.3 WEEK 3     3.4 WEEK 4 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 TASK 1 — PROPOSAL DEVELOPMENT  Instructions:   As a group, present an innovative concept that introduces social, cultural and/or economic value to the target audience within your field of specialisation. Research current technologies and design trends that influence your field of specialisation. Your project must address the gap you have discovered with realised ideas and solutions. Brainstorm and develop a project proposa...
Post a Comment
Read more

FILM STUDIES & CINEMATOGRAPHY | PROJECT 2 — PITCH BIBLE

Week 6 –  Week 9 | 29/10/24 – 19/11/25 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Film Studies & Cinematography | Section 01 | PVT60104 Project 2 — Pitch Bible TABLE OF CONTENTS  1.0 LECTURES 2.0 INSTRUCTIONS 3.0 PROJECT 2 — PITCH BIBLE     3.1 PROGRESS      3.2 FINAL SUBMISSION 4.0 REFLECTION 1.0 LECTURES  *Sidenote:  All lectures have been completed in Project 1 . 2.0 INSTRUCTIONS  3.0 PROJECT 2 — PITCH BIBLE  Instructions:   Create a pitch bible based on your story from Project 1. The pitch bible serves as a comprehensive document that communicates the concept, characters, visual style, and potential of the animation to potential investors, production companies, and distributors. Requirements: PPT: Format: A4 (landscape), PDF. Content: Cover Page (title and name). Logline. Product Specifications (genre, target audience, duration, technique). Synopsis. Theme. Character Description (chara...
Post a Comment
Read more