Final Project: Creating Single-Page Website

24/06/2024 - 15/07/2024  (Week 8 -  Week 13)  

Alya Rahima Zahra (0363588)  

Interactive Design / Bachelor of Design (Hons) in Creative Media  

Interactive Design 

Final Project: Creating a Single-Page Website

---

---

▸Project Overview:

    In this web design project, I will create a single-page website dedicated to my favorite topic. This project will help me develop my web design and development skills while allowing me to showcase my passion for the topic of my choice.

▸Project Requirements:

Artist Selection: I chose 'DPR Ian' as my topic for my website.

DPR Ian is a singer and musician from South Korea. I'm going to create a fan page website for this singer.

Fig 1. Images of DPR Ian as my website topic

    I'm genuinely interested in this topic, because he is my favorite singer at the moment. The site's main goal is to give information regarding the singer and also to attract the fans to join the community/fan club of DPR Ian.

▸Contents:

    The content should have at least 5 sections that explain the topic of interest. It should be engaging and significant to the topic. It should also include one CTA button that reflects the content.

The content contains: 

- Introduction to DPR Ian

- The biodata

- The music albums

- Behind his musics

- His Social medias

- His sponsored brands

- Featurings 

- World Tour concert pictures

The CTA button: 

The button of 'Subscribe' input email for latest news about DPR Ian and also to Join the community or Fan club.

▸Design Elements:

    Must ensure a visually appealing layout with a balanced use of text and multimedia. Creating a responsive design that adapts to different screen sizes (mobile-friendly).

Colors

I need to choose a color scheme for the website.

Here shown below, is my color mood board that reflects the artist's style:

Fig 1.2 My color mood board

Fonts

I might change my chosen fonts, but here is some of the fonts that I will use according to the website style:

Fig 1.3 Fonts that I chose for the website (might change)

Layout

We are required to search for layout design inspirations/a mood board.

Here are the following mood boards inspirations for my website layout:

Fig 1.4 Layout design mood board 1

Fig 1.5 Layout design mood board 2

▸Wireframes:

Example 1

Fig 1.6 Example of wireframe 1

Example 2

Fig 1.7 Example of wireframe 2

▸Prototype:

    I decided to create my web design prototype in Figma, as suggested by Mr. Shamsul. I started off from finding the fonts, choosing the images, and worked on the positions of the elements.

Fig 1.8 Prototype making process 1

Fig 1.9 Prototype making process 2

Fig 2.0 Prototype final PDF

Creating The Website

    We are required to use Adobe Dreamweaver to create the final project and use HTML & CSS as what Mr Shamsul has taught us before.