INTERACTIVE DESIGN - PROJECT 1
Interactive Design
Project 1 - Landing Page Design
LECTURE NOTES
Lecture 3: The Web
10/9/19 (Week 3)
Mr. Shamsul gave us a lecture about the web. We learned and understood the web standards, how the web works and the structure of a web page. We also learned about some tags and elements of HTML. He then introduced our first project, which is to design a landing page.
INSTRUCTIONS
PROJECT 1
Landing Page
10/9/2019 (Week 3)
For our first project, we are to design a static landing page of either our favourite singer, band or sports team etc. The goal of this project is to demonstrate an enhanced use of grids, layouts and page flow for effective typographic communication. Furthermore, we are to develop the ability to create a usable user interface with a specific goal in mind. To start off the project, we were required to determine what is our landing page about and what is the 'call to action'. Then, we were to sketch out 5 different wireframes for our landing page.
For my landing page, I decided to create a website about the band Lany, to promote their concert tours and the call to action is to buy their tickets. Below is the official website for it.
I proceeded to sketch out 4 wireframes and Mr. Shamsul said that he likes my second design.
Next, I begin creating my landing page on Illustrator.
Here is my first attempt on my landing page design.
I wasn't too satisfied with some of the typefaces used in the design, thus I changed it. Here is my second attempt.
I still wasn't satisfied with the outcome of my design. Therefore, I made another attempt and changed the pictures so that it gives off a more purposeful intention towards promoting their concert tours.
After having my feedback from Mr. Shamsul, he mentioned that my landing page design was clean but wasn't clean enough. He told me to fix the spacings and the alignments of the text. I was told to create more space between the sections too as it feels suffocating. I also have to adjust the size of the text and logo because they were too large.
I listened to his feedback and made more than five attempts to make it look right. Here is my final outcome.
1. Top 10 Guidelines For Homepage Usability by Jakob Nielsen
https://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
10/9/19 - 17/9/19 (Week 3 - Week 4)
This website talks about the importance of a homepage. It is the most important page in a website and gets more page vies than other pages. It has a great impact for companies and their business as customers will mostly check them online first before approaching in real life. There are some ways to increase homepage usability :
1. Include a one sentence tagline (summarising what your company does)
2. Write a window title with good visibility in search engines
3. Group all corporate information in one distinct area (detailed information about the company)
4. Emphasize the site's top
5. Include a search input box (users can directly find what they need)
6. Show examples of real site content/links (begin with the most important keyword)
7. Offer easy access to recent homepage features
8. Don't over format critical content
9. Use simple but meaningful graphics
2. A Brief History of HTML by Jeffrey Veen
https://www.wired.com/1997/04/a-brief-history-of-html/
24/9/19 - 31/9/19 (Week 5 - Week 6)
10/9/2019 (Week 3)
For our first project, we are to design a static landing page of either our favourite singer, band or sports team etc. The goal of this project is to demonstrate an enhanced use of grids, layouts and page flow for effective typographic communication. Furthermore, we are to develop the ability to create a usable user interface with a specific goal in mind. To start off the project, we were required to determine what is our landing page about and what is the 'call to action'. Then, we were to sketch out 5 different wireframes for our landing page.
For my landing page, I decided to create a website about the band Lany, to promote their concert tours and the call to action is to buy their tickets. Below is the official website for it.
 |
| Fig 1.1 Original website |
I proceeded to sketch out 4 wireframes and Mr. Shamsul said that he likes my second design.
 |
| Fig 1.2 Wireframe sketch #1 |
 |
| Fig 1.3 Wireframe sketch #2 |
 |
| Fig 1.4 Logo |
 |
| Fig 1.5 Image #1 |
 |
| Fig 1.6 Image #2 |
 |
| Fig 1.7 Image #3 |
 |
| Fig 1.8 Image #4 |
 |
| Fig 1.9 Image #5 |
 |
| Fig 1.10 Image #6 |
Next, I begin creating my landing page on Illustrator.
 |
| Fig 1.11 Process #1 |
Here is my first attempt on my landing page design.
I wasn't too satisfied with some of the typefaces used in the design, thus I changed it. Here is my second attempt.
I still wasn't satisfied with the outcome of my design. Therefore, I made another attempt and changed the pictures so that it gives off a more purposeful intention towards promoting their concert tours.
 |
| Fig 1.12 Image #7 |
 |
| Fig 1.13 Process #2 Using guides to help with the alignment of text |
After having my feedback from Mr. Shamsul, he mentioned that my landing page design was clean but wasn't clean enough. He told me to fix the spacings and the alignments of the text. I was told to create more space between the sections too as it feels suffocating. I also have to adjust the size of the text and logo because they were too large.
I listened to his feedback and made more than five attempts to make it look right. Here is my final outcome.
 |
| Fig 1.14 Final Outcome |
FURTHER READING
1. Top 10 Guidelines For Homepage Usability by Jakob Nielsen https://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/
10/9/19 - 17/9/19 (Week 3 - Week 4)
This website talks about the importance of a homepage. It is the most important page in a website and gets more page vies than other pages. It has a great impact for companies and their business as customers will mostly check them online first before approaching in real life. There are some ways to increase homepage usability :
1. Include a one sentence tagline (summarising what your company does)
2. Write a window title with good visibility in search engines
3. Group all corporate information in one distinct area (detailed information about the company)
4. Emphasize the site's top
5. Include a search input box (users can directly find what they need)
6. Show examples of real site content/links (begin with the most important keyword)
7. Offer easy access to recent homepage features
8. Don't over format critical content
9. Use simple but meaningful graphics
2. A Brief History of HTML by Jeffrey Veen
https://www.wired.com/1997/04/a-brief-history-of-html/
24/9/19 - 31/9/19 (Week 5 - Week 6)
For this week, I read about a brief history HTML.
Tim Bernes Lee, which is the creator of the world wide web, was his first elementary browsing and authoring system for the web when he first created a quick small hypertext system that could serve his purpose. He thought a about a bunch of different hypertext language and let it do its work. It was a system that could work on any platform and browser.
The problem with the html system was the simplicity of Berners-Lees language. Since it was text-based, you could use any editor or word processor to crate or convert documents for the web and html is something thats really easy to master. Because of HTML, everybody started to publish websites of their own.
As more and more content was uploaded to the web, creators thought that the HTML should be improved. So developers started to include and create new features to add to their browsers. If the community like it, it stayed, if not they were removed.
HTML then continued to grow more and more with new tags like <background>, <font> and others.
Comments
Post a Comment