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 REFLECTION 7.0 FURTHER READING     7.1 WEEK 4 — THE BOUNCING BALL WITH A TAIL 1.0 LECTURES  1.1 WEEK 1 — 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. Due to Mr Kamal's absence during Week 2, we were taught Week 2's material this week. 1.2 WEEK 3 —  2.0 INSTRUCTION...
Post a Comment
Read more

DESIGN PRINCIPLES | LECTURE NOTES

Week 1 –  Week 2 | 06/02/24 – 14/02/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Design Principles | Section 01 | GCD60804 Lecture Notes TABLE OF CONTENTS 1.0 ELEMENTS & PRINCIPLES OF DESIGN 2.0 CONTRAST & GESTALT THEORY 3.0 BALANCE & EMPHASIS 4.0 REPETITION & MOVEMENT 5.0 HARMONY & UNITY 6.0 SYMBOL, WORD & IMAGE 7.0 VISUAL ANALYSIS 1.0 ELEMENTS & PRINCIPLES OF DESIGN ELEMENTS OF DESIGN: Design elements are individual "building blocks". Point, line, shape, form, texture, space, and colour. PRINCIPLES OF DESIGN: Design principles are rules that guide the arrangement of the elements. Contrast, balance, emphasis, rule of thirds, repetition / pattern / rhythm, movement, hierarchy, alignment, harmony, unity, and proportion. 2.0 CONTRAST & GESTALT THEORY CONTRAST: Definition of Contrast:  The juxtaposition of strongly dissimilar elements. Purpose: To provide visual interest. To emphasise a point. To express content...
Post a Comment
Read more

INTERACTIVE DESIGN | EXERCISES

Week 1 –  Week 8 | 23/04/24 – 11/06/24 Emily Soh Ching-Ling | 0359478 Bachelor of Design (Honours) in Creative Media Interactive Design | Section 03 | GCD60904 Exercises TABLE OF CONTENTS  1.0 LECTURES     1.1 WEEK 1 — INTRODUCTION & BRIEFING     1.2 WEEK 1 — USABILITY     1.3 WEEK 3 — UNDERSTANDING WEBSITE STRUCTURE     1.4 WEEK 4 — THE WEB & LANGUAGE     1.5 WEEK 5 — HTML 2.0 TUTORIALS     2.1 WEEK 2 — PROTOTYPE DESIGN     2.2 WEEK 4 — HTML WEBPAGE #1 (PART 1)     2.3 WEEK 5 — HTML WEBPAGE #1 (PART 2)     2.4 WEEK 6 — HTML WEBPAGE #1 (PART 3)     2.5 WEEK 7 — HTML WEBPAGE #1 (PART 4)     2.6 WEEK 9 — HTML WEBSITE #2     2.7 WEEK 10 — FINAL PROJECT SAMPLE 3.0 INSTRUCTIONS 4.0 EXERCISE 1 — WEB ANALYSIS     4.1 WEBSITE #1 — HAUS     4.2 WEBSITE #2 — ARTS TECH 5.0 EXERCISE 2 — WEB REPLICATION     5.1 MAIN PAGE #1 — BANDIT R...
Post a Comment
Read more