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

VIDEO & SOUND PRODUCTION | FINAL COMPILATION

Week 1 –  Week 15 | 26/04/24 – 04/08/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Video & Sound Production | Section 03 | VSP60104 Final Compilation TABLE OF CONTENTS  1.0 PROJECT 1 — AUDIO EDITING EXERCISES     1.1 EXERCISE 1 — AUDIO DUBBING     1.2 EXERCISE 2  — SOUND SHAPING 2.0 PROJECT 2 — SHOOTING & EDITING     2.1 PROJECT 2A — PRODUCTION SHOOT     2.2 PROJECT 2B  — IG / TIKTOK VIDEO 3.0 FINAL PROJECT — STOP-MOTION 1.0 PROJECT 1 — AUDIO EDITING EXERCISES  1.1 EXERCISE 1 — AUDIO DUBBING Google Drive Link to Project 1 blog post Figure 1.1-1:  Exercise 1 — Video (Final Submission), Week 4 (19/05/24) Figure 1.1-2:  Exercise 1 — PPT (Final Submission), Week 4 (19/05/24) 1.2 EXERCISE 2 — SOUND SHAPING Google Drive Figure 1.2-1:  Exercise 2 — Phone Call Sound Effect (Final Submission), Week 10 (27/06/24) Figure 1.2-2:  Exercise 2 — Closet Sound Effect (Fina...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 3 — FINAL PROJECT

Week 6 –  Week 8 | 11/03/24 – 29/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 3 — Final Project TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 3 — FINAL PROJECT     2.1 TASK DELEGATION     2.2 SKETCHES     2.3 CRAFTING     2.4 DECORATING & ASSEMBLY     2.5 PHOTOSHOOT      2.6 FINAL SUBMISSION 3.0 FEEDBACK     3.1 WEEK 7 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 3 — FINAL PROJECT Instructions:   Produce a visual design outcome that reflects your interpretation and definition of "framing". Consider the cultural and aesthetic aspects of your design. 2.1 TASK DELEGATION 1. KANZASHI OF THE PAST: Sketching:  Ying Ying, Velicia Crafting:  Emily, Velicia Decorating:  Emily, Ying Ying Photoshoot: Ying Ying (photography), Velicia (modelling), Emily (editing) 2. KANZASHI OF THE PRESENT: Sketching:...
Post a Comment
Read more

INTERCULTURAL DESIGN | PROJECT 2 — FIELD STUDY

Week 4 –  Week 5 | 26/02/24 – 10/03/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Intercultural Design | Section 01 | GCD61304 Project 2 — Field Study TABLE OF CONTENTS 1.0 INSTRUCTIONS 2.0 PROJECT 2 — FIELD STUDY     2.1 RUNDOWN     2.2 OSAKA     2.3 KYOTO     2.4 NARA     2.5 INFORMATION COMPILATION      2.6 FINAL SUBMISSION 3.0 FEEDBACK 4.0 REFLECTION 1.0 INSTRUCTIONS  2.0 PROJECT 2 — FIELD STUDY Instructions:   Collect research materials (i.e. visual, oral, textual, tactile artefacts) to support Project 1. All research materials must be recorded, documented, and should include information such as: Type of artefact / material. Purpose. Symbolism. Cultural / historical background. 2.1 RUNDOWN We decided to base our field of research on the three major cities in the Kansai region: Osaka, Kyoto, and Nara . This is for two reasons: 1. The Heart of Japan:  Osaka is known...
Post a Comment
Read more