Interactive Design: Landing Page Design/ Project 1
Interactive Design: Landing Page Design/ Project 1
10/09/19 - 17/09/19 (Week 3 - Week 4)
Sia Man Sheng
0333877
LECTURE NOTES
Lecture 3: Introduction to Module
10/09/19 - week 3
This week's lecture is about web standards and page structures. There is 3 factors that affects the performance of a website, including hardware and software:
Besides, we did have a discussion on the differences between a static website and a dynamic website:
Static Website
INSTRUCTION
This week's lecture is about web standards and page structures. There is 3 factors that affects the performance of a website, including hardware and software:
- Browsers - Different Browsers contain variation of hdml at the early stage which result in the design of a web page to be vary. (e.g: google chrome, safari, firefox)
- Operating system - Windows and IOS system could affect the presenting result of a web page as well.
- Screen Resolution - With thousands of variation from billboard to phones, different screen resolution has been developed.
Besides, we did have a discussion on the differences between a static website and a dynamic website:
Static Website
- Which can be only edited through changing the HDML source file
- For example: coachella, Apple official website, etc.
Dynamic Website
- Can be edited using cms which is called content management system
- For example: blogger, facebook, wikipedia, etc.
Week 3: Landing Page Design
10/09/19
We are required to select a topic and design a landing page for it while considering the functionality and aesthetic. I have chosen the topic to design a landing page for the movie - IT: Chapter 2. Below are the references I looked into:
Figure 1.2 Merchandise Image Sources
Figure 1.3 Movie Image Sources
Figure 1.3 Icon Image Sources
Figure 1.4 First page
Increased the highlight and shadow of the image to give the sense of the movie at the first glimpse, with the clown facing right side to guide the visual flow to the main focus - call to action button "visit our store".
Figure 1.5 Adding cracking texture to the call to action button to make it stand out
Figure 1.6 Arrow to indicate drop down menu button
We are required to select a topic and design a landing page for it while considering the functionality and aesthetic. I have chosen the topic to design a landing page for the movie - IT: Chapter 2. Below are the references I looked into:
Figure 1.1.1 Draft Layout
Figure 1.1.2 Draft Layout
Figure 1.1.3 Draft Layout
As my topic is a website that introduce the movie and selling the merchandise online as well. Therefore, I have search for some merchandise as my source images as well. With thousands of merchandise photos, I have selected few images that looks like the are the same series or manufactured by the same company to achieve the visual consistency.
Increased the highlight and shadow of the image to give the sense of the movie at the first glimpse, with the clown facing right side to guide the visual flow to the main focus - call to action button "visit our store".
Figure 1.7 First Attempt
Figure 1.8 Second Attempt
Figure 1.9 Final Design
After first reviewing with Mr. Shamsul, he said that my purpose is not clear and confusing between whether it is a online merchandise store website or a movie official website. Hence, I have making the focus of the first page to become statue of Pennywise to brings out the main focus is the merchandise. Adding product information and price to enhance the purpose of this landing page is to sell merchandise and caption for trailer to further clarify it. Besides, I have replace the menu bar of each page with the title and increasing line spacing to reduce complexity in order to achieve user friendly website by showing clear directions and throw away confusing elements.
Increase the spacing between button is crucial as sometimes phones are small and user might feel inconvenient when wants to press on certain button.
After first refinement, I decided to reduce the usage of arrow and limit the style of arrow to only one. Hence, second page has replace with the arrow design same as third page to achieve the consistency. I have added a thin white border to the trailer as to avoid it blending from the background.
FEEDBACK
Week 3 - 10/09/19
Personal Feedback:
When I ask for the approval for my topic of design a landing page for a a horror movie - IT: Chapter Two with my fist draft of layout, Mr. Shamsul said that the purpose of a movie website could not be too strong as cannot buy ticket from a movie official website but only in the cinema website. Then he approved with my purpose of either to watch the trailer or to buy merchandise.
Ask for second feedback when I got few draft layouts, Mr. Shamsul suggest that calling for subscribe could be the "call to action". He said that if I make the main purpose of the website is to sell merchandise is good and could add "shop now" or "visit us now" as the button. My idea of creating comment/review session is annoying, making things complicated. Hence, is not suggested to do so.
Week 4 - 17/09/19
First Feedback:
Well colour template selected to highlight essential information. overall is not bad but the main purpose is confusing. Please select either want to focus on online merchandise selling or introduction to the movie. Too much menu bar which is annoying and confusing. Maybe the arrangement and content could follow the sequence of the main menu stated in the first page. Please add caption to different trailer and add the product information(most important is the price) as well. Body content are too compact, try to increase the line spacing and the arrangement as well. Maybe could show the image of t-shirt and even poster as example of the merchandise available.
Second Feedback
The information content is good, well structured. Composition are fine. Just to reduce the style of arrow used to make it consistent. The key is to minimize it and making it simple to understand. Product description is too long but the price is stated clearly and content are arranged in a hierarchy manner which is good. Mr. Shamsul advised me to add a very thin(1px) white border to the trailer to clarify its size.
When I ask for the approval for my topic of design a landing page for a a horror movie - IT: Chapter Two with my fist draft of layout, Mr. Shamsul said that the purpose of a movie website could not be too strong as cannot buy ticket from a movie official website but only in the cinema website. Then he approved with my purpose of either to watch the trailer or to buy merchandise.
Ask for second feedback when I got few draft layouts, Mr. Shamsul suggest that calling for subscribe could be the "call to action". He said that if I make the main purpose of the website is to sell merchandise is good and could add "shop now" or "visit us now" as the button. My idea of creating comment/review session is annoying, making things complicated. Hence, is not suggested to do so.
Week 4 - 17/09/19
First Feedback:
Well colour template selected to highlight essential information. overall is not bad but the main purpose is confusing. Please select either want to focus on online merchandise selling or introduction to the movie. Too much menu bar which is annoying and confusing. Maybe the arrangement and content could follow the sequence of the main menu stated in the first page. Please add caption to different trailer and add the product information(most important is the price) as well. Body content are too compact, try to increase the line spacing and the arrangement as well. Maybe could show the image of t-shirt and even poster as example of the merchandise available.
Second Feedback
The information content is good, well structured. Composition are fine. Just to reduce the style of arrow used to make it consistent. The key is to minimize it and making it simple to understand. Product description is too long but the price is stated clearly and content are arranged in a hierarchy manner which is good. Mr. Shamsul advised me to add a very thin(1px) white border to the trailer to clarify its size.
FURTHER READING
This book includes step-by-step guides that are clear and easy to follow to make learning simple. The book also showcases principles of a good web design by guiding readers through the process of creating a site. Fundamentals of layouts and contents for a professional web page are talked about, as well as effective navigation which makes website easy to get around.
From the chapter of the book that discusses about how devices affect design, it states that various devices will have different capabilities and this should be taken into consideration while making decisions when designing a website. For example, there is a wide range of screen sizes. Even for a desktop computer, the size of the monitors may differ and the window may be opened with different widths.
I also got to read up about the principles of accessibility. It is important to use a clear and consistent navigation which will ensure that the users can understand how to browse through the web easily. Each page should also have a title to show its purpose. Besides that, making sure it is easy to go straight to the content, is important. It isn't ideal for a web page to have a long and never ending list of content. Instead, provide links for users to go straight to where they want to go. Opening pop-up windows (without warning) are also a big no, as it may be confusing to users when they click the back button but it doesn't work since it's opened in a new window. Designers should also remember to avoid having page layouts that appear to be overcomplicated. If there are too many sections it may be overwhelming for the users when they are navigating through a site
Figure 2.1 Web Design in Easy Steps by Sean McManus
Web Design in Easy Steps by Sean McManus
From the chapter of the book that discusses about how devices affect design, it states that various devices will have different capabilities and this should be taken into consideration while making decisions when designing a website. For example, there is a wide range of screen sizes. Even for a desktop computer, the size of the monitors may differ and the window may be opened with different widths.
I also got to read up about the principles of accessibility. It is important to use a clear and consistent navigation which will ensure that the users can understand how to browse through the web easily. Each page should also have a title to show its purpose. Besides that, making sure it is easy to go straight to the content, is important. It isn't ideal for a web page to have a long and never ending list of content. Instead, provide links for users to go straight to where they want to go. Opening pop-up windows (without warning) are also a big no, as it may be confusing to users when they click the back button but it doesn't work since it's opened in a new window. Designers should also remember to avoid having page layouts that appear to be overcomplicated. If there are too many sections it may be overwhelming for the users when they are navigating through a site
Comments
Post a Comment