Project 1 - Landing Page Design

13/9/2018 - 20/9/2018 (Week 3 - Week 4)
Ng Jia Jin (0331589)
Interactive Design
Web landing Design

Instructions

Module Information Booklet for Interactive Design:

Lecture Notes 

20/9/2018 (Week 4) 

To start of this week's class, Mr Shamsul gave a lecture about type for screen. We learned about how there's so many fonts for us to choose from when creating a website of our own because of the popular web font services such as Adobe Typekit and Google Fonts. There were limited fonts back in the old days such as Arial and Times New Roman. Lastly, Mr Shamsul also talked about why some fonts are only available in certain operating system such as Mac OS and Windows OS and what fonts are pre installed in the OS itself. 

Here are the slides for the lecture notes: 

Project 1

13/9/2018 (Week 3) 

We were given a brief to start our first project for Interactive Design. For our first project , we need to design a web landing page for our favorite artist/band/game. We need to do our own research on what should be included in an artist's landing page such as home, tour and news. We can download fonts from Google Fonts to use it in the web and we can use as many colors as we want. Before designing our website, we need to sketch out some rough ideas of how the layout should be. We should also follow the rules to design a good landing page.

I decided to go with my favorite artist - The Weeknd. My target audiences are of course his fans and anyone who wants to view his website. My main purpose is to promote his albums and his latest tour dates. For the color scheme, I decided to go with the white background for a more minimal look. But, I decided to try out some other backgrounds to explore the web landing design a bit. Here is how it all turns out to be:

Fig 1.0: Web Lnading Page Attempt #!

Fig 1.1: Web Landing Page Attempt #2

Fig 1.2: Web Landing Page Attempt #3

20/9/2018 (Week 4)

I tried to use 2 typefaces which are Josefin Sans and Teko as my title's typefaces and my overall website's typefaces because I find them clearer and more visible to the viewers. After exploring around and attempting 3 different types of design, I designed my last web landing page with all the required contents in a web page and a footer.

Before designing it. I went to the artist's website to gain some inspirations for my design of the web landing page.

Fig 1.3: Inspirations #1

Fig 1.4: Inspirations #2

Fig 1.5: Inspirations #3

Since the artist's website brings a minimalistic and clean vibe, I decided to bring out the same vibe on my own web landing page design. I included the artist's latest 2 albums, his upcoming Asia tour dates and some other important information.

Fig 1.6: Process on Photoshop

Fig 1.7: Final Web Landing Page Design

Feedbacks

20/9/2018 (Week 4)

General Feedback: For our first project which is to design a landing page for our favorite artist, we need to include a footer on our website. The overall arrangement of the information should also be evenly spread throughout the page and not too much white space. 

Specific Feedback: Mr Shamsul said that my website information need to have a better alignment overall. Some information are too left aligned and some are too right aligned. For the font choices, he said it's a good choice because it's big enough to view and consistent throughout the website.

27/9/2018 (Week 5)

Specific Feedback: Mr Shamsul said that my overall design for the web landing page design is relatively average as compared to the artist's existing website. My web landing page can be improved in terms of placing more content because my website design looks empty.

Reflection

Experience

10/9/2018 (Week 3 )

For this week, I didn't really do anything except going through artist's website to see what are the necessary information needed for the landing page. I also went on and search for what layout is best suited for an artist's website. 

20/9/2018 (Week 4)

I started to create the landing page for The Weeknd this week. It was an interesting experience we got to try out the taste of designing a web page and since it's for our own favorite artist, it made everything even more interesting. I did a few samples for the website design.

27/9/2018 (Week 5)

This week is a little bit different from the past few weeks because we learned about basic HTML coding this week and it was tough. To compare it to the past few weeks when we need to design our own web landing page, it was rather 'dry'. But, this week's exercise is important because it sets a foundation for me to code in the future.




Observation

10/0/2018 (Week 3)

Every website of an artist has their own unique style of it, some complicated ones and some are the minimal ones. But one thing they have in common is that their website always revolve around their music style and their personal vibe to it

20/9/2018 (Week 4) 

I find that the key element while designing a website is the layout and the information that is in there. I always have to look at the artist's website to make sure that my information are all in the place that it should be.

27/9/2018 (Week 5)

I observed that everyone is also struggling to learn about coding at the start of the class. The codes that were introduced to us is basic HTML coding. It is normal because everyone tend to find it 'dry' and hard to code at first.

Findings 

10/9/2018 (Week 3)

When I was designing the website, I find myself doing the same layout over and over again and repeating the information that is already included in the website. I decided to come out with a mind map on what are the information that is going to be included at the landing page. 

20/9/2018 (Week 4)

I find that to start of our first project with designing a website landing page is important because it let us know about what should be included in a website and how we can design a good website. It's all a learning process now and I'm actually quite interested in it.

27/9/2018 (Week 5)

I find coding hard at the start of the class but as time goes, I manage to adapt to it as it was just basic HTML coding.