Interactive Design - Project 1

4/4/19 -  / /19 (Week 1 to Week )

Jasmine Teoh Lee Suan (0331993)

Interactive Design

Project 1 - Landing Page

---

Instructions:

Module Information Booklet:

---

 

Lecture Notes:

Week 3 

The Difference of Internet and Web

What is Internet
https://www.history.com/news/who-invented-the-internet

What is Web
https://www.whoishostingthis.com/resources/history-of-web/

Web Standards
High probability that your website will look different to many visitors
Most important part of website is content
Ensure website works across all devices is to develop with web standards
Might be possible to develop sites that do not comply with usual websites
World Wide Web Consortium (W3C) - standard markup languages we use to build websites
Using HTML, CSS

Why web standards?
Make internet a better place for developers and visitors
development is simplified easier for a developer to understand the coding

How does web work?
When you visit a website, the web server hosting that site could be anywhere in the world
Find the location of the web server your browser will first connect to domain name system (DNS) server
Connect to web via ISP - type a domain name or website address into your browser

Understanding structure 
Learning about markup
Tags and elements
https://www.usability.gov
https://www.nngroup.com/
https://uxplanet.org/

Design your website landing page
Length, width 1024 or 1190

---

 

Project 1

Week 3 (16/4/19)

First Attempt sketches:

Figure 1.1 Wireframe of Landing Page

First Attempt:

Figure 1.2 Landing Page 1st Attempt

Week 4 (25/4/19)

I revised my whole project after getting the feedback, also because I was unsatisfied with my first attempt as I didn't really know what I was focusing on. I then started to plan properly what I wanted to create and design by listing down the key points of the landing page on paper, while making a mind map so that I could visualize properly what I had to work on.

Mind map and content:

Figure 1.3 Landing Page Planning + Mind Map

Wireframe Sketches:

Figure 1.4 Wireframe Ideas for Landing Page

Figure 1.5 Wireframe Ideas for Landing Page

I also looked for the images that I was going to use for the landing page, and created a colour scheme with the main colours of the pictures I found, thus creating a theme for my landing page.

Moodboard and Colour Scheme:

Figure 1.6 Mood Board and Colour Scheme

Before I started working on my landing page, I surfed the web (pinterest) for web designs that I could refer to. As I am still a newbie at this, I figured that it would be best to have reference from actual web designs so that I wouldn't be lost or confused as to what I will be designing.

Visual References:

Figure 1.7 Visual References of Web Designs

Figure 1.8 Process of working on Landing Page

2nd Attempt:

Figure 1.9 Landing Page 2nd Attempt

Week 5 (2/5/19)

---

Feedback: 

Week 3: Mr Shamsul looked at my wireframe and told me to give him examples of it by the next week. He asked what topic I was focusing on and told me to choose one part of my favourite singer's career/activities

Week 4: Mr Shamsul said that the hierarchy for my logo and navigation is not clear - too cluttered - can do without the gradient - not professionally designed - look at other websites and reference from there - more breathing space - have a same loayout - grid

---

Further Reading: