11/09/2017-29/09/2017 (Week 3-Week5)
Liam Yue Wei (0327686)
Web Design and New Media
Landing Page Design (and Coding)
A browser war is a competition for dominance in the usage share of web browsers. The first Browser War was Microsoft's Internet Explorer against Netscape's Navigator during the late 1990s. Browser wars continued with the decline of Internet Explorer's market share since 2003 and the increasing popularity of browsers including Mozilla Firefox, Google Chrome, Safari and Opera.
Recently, the introduction of HTML5, CSS 3, and extensive client-side scripting to the World Wide Web, as well as more widespread use of smartphones and other mobile devices for browsing the web, have added new browsers, ensuring that browser battles continue. Browser vendors also fought a format war over which codecs are used for the HTML 5 video and audio elements.
We have also learned that the largest screen resolution is 5120 x 2880 px while the largest screen dimension is 2880 x 1800 px. Browser connects to a Domain Name System (DNS) server to find location of the web server, The full name for URL is Uniform Resource Locator, it is a web address ( or link). Also, Internet traffic can affect the speed of the URL, for example if the online result is out on Times today, and everyone tried surfing the Times now, the URL will be loading very slow.
We have also learned that there are 2 types of newspaper, one is News, another is digital newspaper. And what makes the newspaper look appealing is the Hierarchy, meaning the size, color, bold and such. Usually when we type on computer, we always increase the size of the font and bold it. Mr.Shamsul said that we must not enlarge and bold the title, in fact, change the word from 'normal' to 'heading', and right click to modify. Web documents consist of 3 main things, title, paragraph and also image.
<HTML code>
<element>information<element>
An element has 2 parts , an opening tag and a closing tag. For example, an opening tag would be <p> while a closing tag is </p>. While we enlarge the size of headings in coding, we use <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Usually, <h1> is used for main title as it is the biggest, while <h6> is the smallest. Also, there is no <h7>.
<u> = underline
<i> = italic
<b> = bold (to emphasize word)
<ol> = ordered list (numbering)
<ul> = un-ordered list (bullet points)
<li> = list items
There is also 'Nested list" which is more complicated.
If we want to insert a link : <p>______<a href="http://_______>link
Due date- Week 4
Choose the subject matter given and design ONE (1) landing page for each subject. Each design should be able to present what the company does clearly. Be creative yet able to describe the page usability and information structure distinctly. Look for inspiration and refer from other establish website to have better idea on the design. Propose the product and service that you chose to your lecturer before you start to design the final artwork.
Topic:
• Product
• Service
You can choose any existing local company for the assignment and use all the information and images from the Websites.
Requirement:
Landing page dimension should not exceed 1024 X 768 pixels*. Color mode RGB. File resolution must be 72dpi. Each file size should not exceed 10MB.
Objective:
1. To develop students sensitivity to typography, grid and layout.
2. To develop students understanding of the hierarchy of information.
3. To develop students ability to communicate visually.
Submission Requirement:
Please convert the file to .pdf or .jpeg and upload the files in TimES within the given time.
*Page height maybe extended depending on the content
Final Outcome
Google Drive Link : https://drive.google.com/open?id
Mr.Shamsul has given me permission to proceed with my assignment 1. During week 4, I have received more feedback from Mr.Shamsul on Google Classroom. He told me that I can learn how Vivien did for her sketches. She did the wireframe and also added a description so that the lecturer can understand what she is going to have in the landing page. Also, he told me to proceed with ntcdental #5 and printmark #10.
Liam Yue Wei (0327686)
Web Design and New Media
Landing Page Design (and Coding)
Lecture
Week 3
During the lesson, we have learned a lot of new things that Mr.Shamsul said that they are general knowledge. The Sputnik launched on 4th October 1957. Tim Bernes-Lee in CERN invented World Wide Web (WWW) in 1989. However, during that time, web is not for public but only education purpose. Also, the inventor for e-mail was Shiva Ayyadurai V.A., an Indian-Born American Scientist entrepreneur. There is variety of browsers, operating system and screen resolution.A browser war is a competition for dominance in the usage share of web browsers. The first Browser War was Microsoft's Internet Explorer against Netscape's Navigator during the late 1990s. Browser wars continued with the decline of Internet Explorer's market share since 2003 and the increasing popularity of browsers including Mozilla Firefox, Google Chrome, Safari and Opera.
Recently, the introduction of HTML5, CSS 3, and extensive client-side scripting to the World Wide Web, as well as more widespread use of smartphones and other mobile devices for browsing the web, have added new browsers, ensuring that browser battles continue. Browser vendors also fought a format war over which codecs are used for the HTML 5 video and audio elements.
We have also learned that the largest screen resolution is 5120 x 2880 px while the largest screen dimension is 2880 x 1800 px. Browser connects to a Domain Name System (DNS) server to find location of the web server, The full name for URL is Uniform Resource Locator, it is a web address ( or link). Also, Internet traffic can affect the speed of the URL, for example if the online result is out on Times today, and everyone tried surfing the Times now, the URL will be loading very slow.
We have also learned that there are 2 types of newspaper, one is News, another is digital newspaper. And what makes the newspaper look appealing is the Hierarchy, meaning the size, color, bold and such. Usually when we type on computer, we always increase the size of the font and bold it. Mr.Shamsul said that we must not enlarge and bold the title, in fact, change the word from 'normal' to 'heading', and right click to modify. Web documents consist of 3 main things, title, paragraph and also image.
Coding
Each element has different purpose .<HTML code>
<element>information<element>
An element has 2 parts , an opening tag and a closing tag. For example, an opening tag would be <p> while a closing tag is </p>. While we enlarge the size of headings in coding, we use <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Usually, <h1> is used for main title as it is the biggest, while <h6> is the smallest. Also, there is no <h7>.
<u> = underline
<i> = italic
<b> = bold (to emphasize word)
<ol> = ordered list (numbering)
<ul> = un-ordered list (bullet points)
<li> = list items
There is also 'Nested list" which is more complicated.
If we want to insert a link : <p>______<a href="http://_______>link
Week 4
On Monday, Mr.Shamsul conducted a lecture on organizing a website. A key to successfully designing a large website is to organize the information logically, so that users can easily locate the information they're looking for. First step in organizing a website is "chunking", it means dividing the site's content into manageable chunks of information, with all chunks related conceptually to one another.
Consistent methods of organizing and displaying information permit users to extend their knowledge from familiar pages to unfamiliar ones. If we mislead users with a structure that is neither logical nor predictable, or constantly uses different or ambiguous terms to describe site features, users will be frustrated by the difficulties of getting around and understanding what you have to offer.
An efficient web site design is largely a matter of balancing the relation of major menu or home pages with individual content pages. This is to build a hierarchy of menus and content pages that feels natural to users and doesn't mislead them or interfere with their use of the site. Websites with too shallow an information hierarchy depend on massive menu pages that can degenerate into a confusing laundry list of unrelated information. People are fond of using F-shaped pattern for reading web content.
There are 2 type of site structural themes - Hierarchies
1. Simple hub-and-spoke structure.
2. More complex hierarchy.
Block element and Inline element:
Block element is an element to start on a new line such as <hl>, <p>, <ul>, and <li>.
Inline element is an element to continue on the same line as their neighboring elements such as <b>, <i>, <em>, <a>, and <img>.
When there are several images that we have to include in the website, we use class attribute instead of id. Also, when we use id attribute, we have to put a hash (not hashtag) '#'.
CSS (Cascading Style Sheet) allows us to create rules that specify how the content of an element should appear. There are two types of CSS which are the selector and the declaration. For example:
'h1, h2, h3' = selector
'font-family: Arial; color= yellow' = declaration
'font-family' and 'color' is the property, while 'Arial' and 'yellow' is the value.
Do note that the 'color' in the above is only meant for font color, if we ever want to use background color, we have to write 'bg color'
1. browser default rules.
2. external style sheet rules.
3. embedded style.
4. inline style rules.
It is said that external is the best to use because the HTML can link to CSS file. When we do the coding, the <style></style> needs to be within the <head></head>. Also, we have learned some new names for the punctuation. such as
1. ":" colon
2. ";" semi-colon
3. "{}: curly braces/brackets
4. "<>" angle brackets.
Originally, we could go to Image > Canvas size to change the size of our canvas. But in 2017, one of the ways is to not use artboard from the beginning. However, there is another way to resize the canvas, which is to click on the 'artboard' in the layer, and add the height value. We have to use RGB and not CYMK, because CYMK is for printing.
Measurement for web content:
Width = 1366 px (Default)
Height = 2000 px (Can be adjusted based on own design)
Consistent methods of organizing and displaying information permit users to extend their knowledge from familiar pages to unfamiliar ones. If we mislead users with a structure that is neither logical nor predictable, or constantly uses different or ambiguous terms to describe site features, users will be frustrated by the difficulties of getting around and understanding what you have to offer.
An efficient web site design is largely a matter of balancing the relation of major menu or home pages with individual content pages. This is to build a hierarchy of menus and content pages that feels natural to users and doesn't mislead them or interfere with their use of the site. Websites with too shallow an information hierarchy depend on massive menu pages that can degenerate into a confusing laundry list of unrelated information. People are fond of using F-shaped pattern for reading web content.
There are 2 type of site structural themes - Hierarchies
1. Simple hub-and-spoke structure.
2. More complex hierarchy.
Week 5
During the lecture, Mr.Shamsul has talked about semantic HTML tag and generic HTML tag. <div> is used for block level element, <span> is used for inline element. Eg: <div id="audio"> , it is important to not to use spacebar when we do naming, we can use "_" or "-" instead, but "_" is more preferably to be used. We cannot combine 'id' and 'class' when we do the coding, it would be complicated but there are cases where we can combine them as well, that will be taught in the class next time.Block element and Inline element:
Block element is an element to start on a new line such as <hl>, <p>, <ul>, and <li>.
Inline element is an element to continue on the same line as their neighboring elements such as <b>, <i>, <em>, <a>, and <img>.
When there are several images that we have to include in the website, we use class attribute instead of id. Also, when we use id attribute, we have to put a hash (not hashtag) '#'.
CSS (Cascading Style Sheet) allows us to create rules that specify how the content of an element should appear. There are two types of CSS which are the selector and the declaration. For example:
h1, h2, h3 }
font-family: Arial
color: yellow
'font-family: Arial; color= yellow' = declaration
'font-family' and 'color' is the property, while 'Arial' and 'yellow' is the value.
Do note that the 'color' in the above is only meant for font color, if we ever want to use background color, we have to write 'bg color'
Precedence CSS
CSS rules can "cascade" in their order of precedence, where the rules are located is one factor in the order of precedence. Location order of precedence:1. browser default rules.
2. external style sheet rules.
3. embedded style.
4. inline style rules.
It is said that external is the best to use because the HTML can link to CSS file. When we do the coding, the <style></style> needs to be within the <head></head>. Also, we have learned some new names for the punctuation. such as
1. ":" colon
2. ";" semi-colon
3. "{}: curly braces/brackets
4. "<>" angle brackets.
In Photoshop CC
We were shown the steps to start our first assignment in Photoshop, which is to New> Document Type (Web)> Artboard Size (Web Most Common 1366px,768px). Then, Mr.Shamsul mentioned that the important thing about making a website is to have the width of the content fixed, which is maybe 1000px. We can use ctrl+R, multi-tool> style> fixed size and click within the page.Originally, we could go to Image > Canvas size to change the size of our canvas. But in 2017, one of the ways is to not use artboard from the beginning. However, there is another way to resize the canvas, which is to click on the 'artboard' in the layer, and add the height value. We have to use RGB and not CYMK, because CYMK is for printing.
Measurement for web content:
Width = 1366 px (Default)
Height = 2000 px (Can be adjusted based on own design)
Instruction
First assignment - Landing page design (20%)Due date- Week 4
Choose the subject matter given and design ONE (1) landing page for each subject. Each design should be able to present what the company does clearly. Be creative yet able to describe the page usability and information structure distinctly. Look for inspiration and refer from other establish website to have better idea on the design. Propose the product and service that you chose to your lecturer before you start to design the final artwork.
Topic:
• Product
• Service
You can choose any existing local company for the assignment and use all the information and images from the Websites.
Requirement:
Landing page dimension should not exceed 1024 X 768 pixels*. Color mode RGB. File resolution must be 72dpi. Each file size should not exceed 10MB.
Objective:
1. To develop students sensitivity to typography, grid and layout.
2. To develop students understanding of the hierarchy of information.
3. To develop students ability to communicate visually.
Submission Requirement:
Please convert the file to .pdf or .jpeg and upload the files in TimES within the given time.
*Page height maybe extended depending on the content
Project Tutorial
Week 3
On Monday (11/9/2017), we were told by Mr.Shamsul to look for 2 websites that we think can be improved, preferably, look for those that look really bad. So, we have to look for one product company, and one service company. For my case, I chose ntcdental (www.ntcdental.com.my) as a product company website and Print Mark Sdn Bhd (www.printmark,com.my) as a service company website.
Reasons for me to choose the websites:
1. ntc dental (Product)
This website looks very plain and boring on homepage, there are a lot of words but less things to make it look more appealing. Also, the colors chosen was a big problem, if we move our cursor to the labels above such as 'Product', it will show a list, but we can't read the words due to the dark red and grey combination.
2. Print Mark Sdn Bhd (Service)
To be honest, I do think that this website is not bad, but it just seems a little bit outdated. Since this is a website about printing service, I think it would be best if they can put some examples of what they can do, like what mummydesign (https://www.facebook.com/mummydesign/ )always do on their Facebook page, to promote the service that they can provide. Of course, there is a difference between promoting a company on Facebook and another website, but there are a lot of ways for them to improve the website.
For this week, we couldn't have our class on Tuesday because Mr.Shamsul had to attend an urgent meeting. Nonetheless, we still had to do an exercise online, which is to fix our HTML file for Triathlon website. Mr.Shamsul gave us an example of his HTML page, and he asked us to add any necessary tags and codes and send the file to him. I did use Mr.Shamsul's HTML file as reference, to see a 'proper' coding, unlike mine which may be a mess in the first place. However, I did not do everything exactly like Mr.Shamsul did in his HTML file, part of the reason was that I didn't want my picture to be left and right (class='right'), and such. I didn't add footer tag because there wasn't any footer in the original website, and I didn't know what could I write within the <footer></footer>. When I finished my HTML file, I sent the file to Mr.Shamsul on Google Classroom.
Wireframes
ntcdental |
| ntcdental - part 1 |
 |
| ntcdental - part 2 |
Print Mark Sdn Bhd
 |
| Print Mark Sdn Bhd - part 1 |
 |
| Print Mark Sdn Bhd - part 2 |
Week 4
For this week, we couldn't have our class on Tuesday because Mr.Shamsul had to attend an urgent meeting. Nonetheless, we still had to do an exercise online, which is to fix our HTML file for Triathlon website. Mr.Shamsul gave us an example of his HTML page, and he asked us to add any necessary tags and codes and send the file to him. I did use Mr.Shamsul's HTML file as reference, to see a 'proper' coding, unlike mine which may be a mess in the first place. However, I did not do everything exactly like Mr.Shamsul did in his HTML file, part of the reason was that I didn't want my picture to be left and right (class='right'), and such. I didn't add footer tag because there wasn't any footer in the original website, and I didn't know what could I write within the <footer></footer>. When I finished my HTML file, I sent the file to Mr.Shamsul on Google Classroom.Week 5
Final Outcome
ntcdental (Product)
 |
| ntcdental |
Print Mark Sdn Bhd (Service)
 |
| Print Mark Sdn Bhd |
Google Drive Link : https://drive.google.com/open?id
Feedback
Mr.Shamsul has given me permission to proceed with my assignment 1. During week 4, I have received more feedback from Mr.Shamsul on Google Classroom. He told me that I can learn how Vivien did for her sketches. She did the wireframe and also added a description so that the lecturer can understand what she is going to have in the landing page. Also, he told me to proceed with ntcdental #5 and printmark #10.Reflection
Experience
I used plenty of websites to do my research on how they design their landing page. Then, I designed my wireframe from whatever ideas I have collected. I actually don't really like Google Classroom because I realized that when I sent Mr.Shamsul my exercise file, I couldn't see whether I DID send to him or not, so I got confused for a moment whether I sent it to him and got it checked or my file wasn't sent to him in the first place. I think Mr.Shamsul is planning to use Google+ after that, which is a good thing since it is less complicated. Also, I sort of got confused and dumbfounded in the class when Mr.Shamsul was giving lecture about HTML and CSS.
Observation
The more I find websites for reference, the more I realized that all the websites have a general or basic structure for landing page. It just depends on how they display it and the accessibility to their website. Also, I decided that it is best for me to do some readings of the HTML and CSS book before I go into Web Design class, just so that I have a better idea of what is happening in the class.
Findings
I learned that the most important thing in this project is to make the layout pleasing to the eyes of the audience. Though that being said, it may be challenging for learners like us to do everything correctly on first try, so it will take some times before we get to explore more about it. Also, doing researches on color scheme is very useful and fun as we can know how to work with colors, and it is very crucial in web design.
Comments
Post a Comment