Interactive Design Project 2

23/10/2022-3/12/2022 (week9-week14)

Ng Jia Xien / 0355062

Bachelor of Design in Creative Media / Interactive design

Project2

Task 2 - Exercise 1 (Final Project)

We will create a professional website for our classmates. This website could take the form of a web design portfolio, small business website, informational site, or whatever else the client desires. Projects must be approved by the lecturer/tutor to ensure that they are feasible in an introductory level class, but are otherwise up to the client to decide. The client will decide of setting the project goals and providing all the content for the site. The designer is responsible for all other aspects of the site. 

fig 1.1 Landing page design

Based on the landing page I designed in project 1, I am making a downloadable music website that provides a platform for users to listen to their favorite music anytime, anywhere, and for free! For this task, we need to develop a website of at least 5 pages of websites. The site should use valid XHTML and use external CSS.

Visual Research

fig 1.2 visual research 1

fig 1.3 visual research 2

fig 1.4 visual research 3

As shown in Figure 1.2 and Figure 1.3, I tried to make a design with text placed on top of the image. It was easy to do in Adobe Illustrator, but when I needed to create it on a website, I spent a lot of time searching for tutorials on YouTube.

I also want to try to insert the ability to play music into the site so that when users find music they are interested in, they can play it directly as shown in figure 1.4.

Process

fig 1.5 HTML 1

Above is the HTML that I learned to create the banner shown in Figures 1.2 and 1.3. below is the CSS.

fig 1.6 CSS 1

fig 1.7 Banner

And Figure 1.7 is the result.

fig 1.8 audio HTML

fig 1.9 audio

Figures 1.8 and 1.9 above show the HTML and final result of the audio function, and I am quite happy with the successful result, it is very useful.

Below is a simple way to insert icons in a website taught to me by a classmate, it is much easier than manually inserting images of icons and it really helps me to save more time.

fig 1.10 icon HTML

fig 1.11 icon

The forms for user login and contact were the most difficult part of the task for me, so I asked my friend who studied IT for help. Even though I couldn't create what I wanted, I think it was pretty good, so I'm happy with the result.

fig 1.12 forms HTML

fig 1.13 forms

fig 1.14 forms 2

Final Submission

FinalProject

This is the link to my final submission for Task 2, which was also my final project. It includes a landing page, and four extension pages for Explore More, Download Now, Sign In and Contact Us.