Interactive Design | Final Project

28/05/2024 - 03/08/2024 (Week 8 - Week 15)
Yong Xiao Tong / 0368290
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project

Instructions


Final Project - Creating a Single-Page Website

In this project, we need to create a single-page website dedicated to our favourite topic. 

I have chosen "Mariah Carey" as the subject of my website. Mariah Carey has always been my favourite singer. I have been listening to her songs since I was very young, and her music has greatly influenced me. To this day, I still listen to her songs before bed.

Therefore, I want to create a website about her. I’ve decided to name it the "Mariah Carey Intro Website." It will serve as an introductory overview of Mariah Carey, including basic information about her and her discography.

Fig 1.1 Content Structure

Fig 1.2 Moodboard

Fig 1.3 Fonts

Fig 1.4 Wireframes

Fig 1.5 Design the layout in Figma

Fig 1.6 Design the layout in Figma

Mariah Carey has her own logo, so I decided to use her original logo to create the favicon.

Fig 1.6 Design the favicon using Mariah Carey’s original logo as a reference

Fig 1.7 Favicon

Fig 1.8 Final design in Figma

Fig 1.9 Working in Dreamweaver

Fig 1.10 Working in Dreamweaver

I checked to see if my website adapts to different screen sizes and found that it looks terrible on mobile. So, I refined my design to ensure it adapts well to different screen sizes.

Fig 1.11 Old version (left) vs. new refined version (right)


Fig 1.12 Old design (left) vs. new refined design (right)


Fig 1.13 Old design (left) vs. new refined design (right)

Fig 1.14 The design is well adapted for mobile phones



Final Submission

Link: https://mariah-carey.netlify.app/ 

Fig 1.15 Website screenshot


Comments

Post a Comment

Popular posts from this blog

Experiential Design | Task 1 : Trending Experience

Image
23/09/2024 - 14/10/2024 (Week 1 - Week 4) Yong Xiao Tong / 0368290 Experiential Design / Bachelor of Design (Honours) in Creative Media  Task 1: Trending Experience LIST Instructions Exercises • W eek 1 • W eek 2 • Week 3 • Week 4 Proposal  Ideas Reflections INSTRUCTIONS WEEK 1 Task 1 Identify what type of XR experience is AR or MR? Describe why? I think XR experience is an AR experience because it shows digital information on top of the real world without interacting with real objects. XR includes MR, but it’s broader because it also covers AR and VR. So, XR is not the same as MR, but MR is a part of XR. Activity 1 launch google.com on phone browser, search for dinosaur or dog, cat, tiger. View in 3D/ View in AR (Life Size) ...
Read more

Game Development | Task 2 : Art Asset Development

Image
22/05/2025 - 08/06/2025 (Week 5 - Week 7) Yong Xiao Tong / 0368290 Game Development / Bachelor of Design (Honours) in Creative Media  Task 2: Art Asset Development In this task, we need to create the art assets for our game.  This includes designing characters, environments, items, props, obstacles, power-ups, and the HUD. Characters Our game features 4 characters: 1 protagonist and 3 unique enemies. Aura (Protagonist) idle walking jump boost Human patrol (Enemy) human patrol Dog (Enemy) idle attack Owl (Enemy) idle attack NPC Firefly firefly Effect boosting UI Elements buttons Props & Obstacles home grass direction signboard box ladder moon spike Backgrounds & Tileset For our game, we designed four unique levels, each with its own distinct background to reflect the environment and mood of the stage.  Background design process in Adobe Illustrator The backgrounds are as follows: BG#1: City street scene, filled with urban elements and modern structure...
Read more