Interactive Design Project 1

30/8/2022-22/10/2022 (week1-week8)

Ng Jia Xien / 0355062

Bachelor of Design in Creative Media / Interactive design

Project1

 

Task 1 - Exercise 1 (Landing Page Design)

In our first exercise, we learned about website design, we search for good and bad website designs and also analyzed them in class as a team and even present it. After that, we were asked to come out with our own landing page design, 20 wireframes were required as a sketch before the final work. 

I decided to create a music website that provided users to download it on their desktop and they are able to listen to their favorable music for free. So, before I start my design, I do some visual research online. Below are some good websites that are related to my theme, I learn a lot from those good designs.

Visual Research

fig 1.1 Spotify landing page 1

fig 1.2 Spotify landing page 2

fig 1.3 Spotify landing page 3

fig 1.4 Spotify landing page 4

fig 1.5 Spotify landing page 5

Spotify

fig 1.6 epidemic sound landing page 1

fig 1.7 epidemic sound landing page 2

fig 1.8 epidemic sound landing page 3

fig 1.9 epidemic sound landing page 4

fig 1.10 epidemic sound landing page 5

fig 1.11 epidemic sound landing page 6

fig 1.12 epidemic sound landing page 7

epidemicsound

Sketches

After doing all the research, I learn that we should understand clearly our website's purpose. As we need to decide what we should put as an action button or even what the main message is that we want to convey from our website to our users. 

fig 1.13 20 sketches on Miro, by Ng Jia Xien

After creating 20 sketches on Miro, I understand more about landing page design and then continue my work using Adobe illustrator. Below is my logo created for my music website named "star".

fig 1.14 Logo for Star, by Ng Jia Xien

I also do some research for images online to insert on my landing page, since my website is for users to listen to music for free. In my landing page, I should focus on letting the users download the application on their desktop by promoting the amount of music provided by my "star".

fig 1.15 Online image 1

fig 1.16 Online image 2

fig 1.17 Online image 3

fig 1.18 Online image 4

Below is my final design for my music website landing page, the most information to show up is the button for users to download, so I place it twice on my landing page. Also, there is a slogan for my website for users to impress the users. 

Final outcome 

fig 1.19 Final landing page design, by Ng Jia Xien

In the end, I also create a Google slide to do further explanation on my landing page design. 

fig 1.20 Google slide 1

fig 1.21 Google slide 2

fig 1.22 Google slide 3

fig 1.23 Google slide 4

fig 1.24 Google slide 5

fig 1.25 Google slide 6

fig 1.26 Google slide 7

fig 1.27 Google slide 8

fig 1.28 Google slide 9

fig 1.29 Google slide 10

Task 2 - Exercise 1  (HTML and CSS Document Development)

In exercise 1, we used notepad to create our HTML file and also make it online using Netlify. The whole process is quite hard and there are a lot of things we need to learn. We learn about how to format the text and even insert images in exercise 1. 

exercise1-ngjiaxien

Task 2 - Exercise 2  (HTML and CSS Document Development)

In exercise 2, we can choose whether to use visual studio code or Adobe Dreamweaver to complete the exercise. And in this exercise, we even learn how to change the text style, text color, text size, and more. 

fig 2.1 HTML 1

fig 2.2 HTML 2

exercise2-ngjiaxien

Independent learning week task - Exercise 3  (Landing page learning)

In exercise 3, we were asked to replicate the whole landing from a good web design example, and it will give us a better understanding of the layout.

statecreative

fig 3.1 Layout design

Task 2 - Exercise 4  (Layout Design)

In this exercise, we were asked to create a layout design by using text and images provided by the lecturer. I use a color palate to create the design but the whole design seems a bit heavy and the lecturer asked me to make improvements to the background to make it white for a simpler layout.

fig 4.1 Layout design

Task2-Exercise 4