Project 1

10 Sept 2019 - 17 Sept 2019(week 03-week 04)
Soo Wen Yi (0334653)
Interactive Design _ Project 1

---

LECTURES_

Lecture 03 _
10 Sept 2019 (week 03)

We had a lecture about web standards, page structures and a bit of html tags.



I took some notes during the lecture. 

Internet was created for Communication between allies countries
Web standards - Design the website using the same language(html & css)
If not complied with web standards most likely to unable to access for most people

Static website vs dynamic website
S-Edit the source (html) file
D-Edit using cms (content management system)

IP-internet protocol (address)

Why do most websites have similar layout?
Bc of how people browse the internet

Between the tags is called document content
For paragraph there’s not p1, p2, p3 or so on, only p for each new paragraph
Strong, bold, emphasis for bold text
Ordered list used for - Instructions, ranking etc. 
 
17 Sept 2019 (week 04) 
No lecture.

---

INSTRUCTIONS_

---

PROJECT 1_

Week 03
Project 1
We we're told that we can choose to design a landing page for anything we want, with minimum of 3 sections. After confirming the idea, we had to do 5 sketches and get approval. I decided to do a landing page for a band I like called "As It Is", I couldn't believe that the official website is official. I checked it multiple times, even on their record's profile their website is linked to the one that I found. 

 

Fig. 1.1: screenshot of the official website landing page

Fig. 1.2: scrolled down of the landing page

It's just not organised and seems to not have a clear call to action. There's too many tabs on the landing page where the tour dates suppose to appear (they are currently still on tour but there's no dates at all). The band logo on the top left corner is a bit small, the "Official Website Homepage" just brings us back to the landing page which the logo is already doing so its an unnecessary thing. So here's my 5 sketches.

 

Fig. 1.3: 5 sketches

 After showing them to Mr Shamsul, we chose the third one. My call to action for this landing page is to stream their new album and to have information for the current tour.  To start off I with the first section of the landing page which is just to guide the user to scroll down. I already had an idea to use a background from their audio video on youtube, and combine it with their album title from their album cover.

Fig. 1.4: screenshot of video background

Fig. 1.5: Album cover

First I used the pen tool on Illustrator to trace out the red arrows on the screenshot. I wanted to include the album title from the cover "The Great Depression" onto the middle of the arrows so I went into Photoshop and used the stamp tool to get rid of the red arrow on the album cover and extend the edges so it would fit the width of the landing page.

 

Fig. 1.6: process in Photoshop

 

Fig. 1.7: another process in Photoshop

This is how it looks with the arrows in Illustrator.

 

Fig. 1.8: screenshot of process in Illustrator

 Then I only found their logo in black, but my header is also black so I brought it into Photoshop to change it to white instead. 

Fig. 1.9: original band logo

Fig. 1.10: screenshot of process in Photoshop

Moving onto the banner for the tour, I used an image from their set in Slam Dunk festival that I found on Rock Sound website.

Fig. 1.11: image retrieved from
https://www.rocksound.tv/photos/view/25-photos-of-as-it-is-slam-dunk-main-stage-debut#

Fig. 1.12: screenshot of process in Illustrator

Fig. 1.13: screenshot of process in Illustrator

Fig. 1.14: screenshot of process in Illustrator

For the tour dates, they posted the latest tour dates on their Instagram so I based it off of that. And here is the first draft.

Fig. 1.15: 1st draft

After finishing this, I realised I didn't put a subscribe button so I put it in the footer as it is not a call to action for me.

Fig. 1.16: 2nd draft

Week 04
After getting feedback in class, this is the final outcome of the landing page. I added "hello consumer. welcome to the new era" on the first section to fill up the space. This greeting "hello consumer" is from one of their song lyrics "The Great Depression", and also its on their Instagram bio.

Fig. 1.17: As It Is's Instagram bio

Fig. 1.18: Final landing page outcome

Here's the PDF version.

---

FEEDBACK_

Week 03
After showing Mr Shamsul the official website he also couldn't believe that it was the official website and told me to go ahead and keep in mind that the call to action is important.  

Week 04
After showing Mr Shamsul and Mr Lun my 2nd draft, Mr Shamsul mentioned the proportion of the logo and the texts(buttons) on the header are a bit off. And he also mentioned that to add more information about the album or something. The treatment of the second section is different/header for the tour is in the second section, but no header for the second section it self. Lastly Mr Lun said that the overall theme is nice. 

---