Interactive Design - Project 1

13/09/18 - 20/09/18 (Week 3 - Week 4)
Mohamad Irfan Mohamad Zaim (0326620)
Interactive Design
Project 1 - Landing Page Design

---

LECTURES

Week 4 (20/09/18)
Lecture 4 - Type for Screen

• Nowadays typefaces are easier to access; using Google fonts, Adobe Typekit, Hoetler & Co's Cloud.Typography.
• URL - Uniform Resource Locator
• HTML - Hypertext Markup Language
• HTTP - Hypertext Transfer Protocol
• Tim Berners-Lee created the web browser and wrote the software to run the web server.
• HTML is used to format
• Typeface were designed in Bitmap and then translated into outline fonts.
• X-height was enlarged so typeface is not pixelated.
• Before, designers had to convert text to images to use different typefaces so that they did not have to deal with font licensing.

---

INSTRUCTIONS

---

Project 1 - Landing Page Wireframe Sketch (Week 3)

For this project we are required to design a static landing page for any of our favourite singer, band, movie, or show. The landing had to include a footer, header, and call to action. I chose to do 'Twice' who are a K-POP girl band. The call to action this landing page would be to listen to buy their latest album or book tickets to their next concert. We were required to do 5 wireframe sketches:

Fig 3.1 - Sketch 1 and 2

Fig 3.2 - Sketch 3 and 4

Fig 3.3 - Sketch 5

Project 1 - Landing Page Design (Week 4)

I looked at several websites, these in particular caught my eye, especially MGK's website. I loved the content formatting, the colours, and the content shown on the landing page itself.

Fig 4.1 - https://www.thechainsmokers.com/

Fig 4.2 - http://got7.jype.com/

Fig 4.3 - https://www.netflix.com/my/

Fig 4.4 - https://www.machinegunkelly.com/

After looking at these websites and getting feedback from Mr Shamsul and Mr Lee, I did 2 more wireframe sketches before starting to make the landing page in Adobe Illustrator. I realized I needed more content which can be scrolled down to and a relevant call to action.

Fig 4.5 - Final wireframe sketches

Fig 4.6 - Moodboard / Colour Pallete

Fig 4.7 - Project 1 Final Outcome

Fig 4.8 - Final Outcome (Hovering cursor over Photo)

---

FEEDBACK

Week 4
General Feedback - The elements on the website should be aligned, grids and ruler tool should be used in Illustrator/Photoshop. The height of the page depends on your content. The page height should be increased from the standard dimensions in order to fit more content.
Specific Feedback - In my initial sketches there is not enough use of space, not enough content, too empty. On the landing page there should be the call to action, for my case, to buy more tickets or info about the new album. Do not use a video on the landing page as it is not attractive. Look at other websites/bands for more ideas.

Week 5
General Feedback: When working with code, it is normal to make a lot of mistakes, running into problems is inevitable. Dreamweaver can help see what the code does in realtime, while in notepad for example, you will have to open the file in a browser to see changes. Specific Feedback: The overall design of my landing page is decent. The colour choice could have been better.

---

REFLECTION

Experiences
Week 3 - It was difficult to come up with all the content, let alone the wire-framing for the interactive kiosk. I had to work fast making the design in Illustrator.
Week 4 - This project was very enjoyable, we could choose to design for whoever we liked. It was fun yet challenging.
Week 5 - I found Dreamweaver to be super useful. It is better than coding using notepad.

Observations
Week 3 - The other groups had unique designs. It was good to see different approaches to the exercise.
Week 4 -  A lot of the good web designs for singers and bands had clean and modern layouts, and somewhat simple.
Week 5 - It is definitely difficult to elements on a website. Looking at my classmates they did not get it right the first time either, using the wrong typeface, using bad colours, etc.

Findings

Week 3 - Some groups used a lot of icons, but not enough text. Icons that are universally recognized should be used. The user should be able to tell what the icon means straight away.

Week 4 - The landing page need to clearly show the call to action. The height of the page is only restricted to how much content you want to put on there. For navigation the landing should clearly show that the user is on the home page.
Week 5 - Wire-framing is extremely important. It should be a rough sketch and give you a general idea of where the content will be, where certain elements are placed, colours used, and font size.