(EXERCISES) Web Design and New Media 2018

28th of Mar '18 - 3rd of May '18 (Week 1 - Week 6)

Jaslyn Tjhai (0333039)
Web Design and New Media
Exercises

LECTURES

Week 1
(27th of March 2018)

On the first day of class, Mr. Shamsul briefed us on the module outline for this module. We were told that there will be two projects and one final projects. There will also be exercises along the way. Then Mr. Shamsul showed us examples of students' works. We were also asked to read books and articles on HTML 5, CSS, User Interface (which will be the first thing we research about), and Usability.

Mr. Shamsul began explaining about websites, how there are good websites and bad websites and how we should be able to critically analyze and identify the demographic of the website. We should know what are the keywords to use when classifying a website as a good or a bad one, such as the typeface used, layouts, color schemes, graphics, navigation, etc.

Mr. Shamsul also explained about the process of designing a website.

Fig. 1.a. Process of creating an artwork

We will also need to come up with Mood board/Concept board so we can have a clear direction as to what we want.

(28th of March 2018)

Moving on to the second day of classes, Mr. Shamsul asked us to do a little research about websites where Mr. Shamsul discussed with the whole class. There are two types of website:

Static Website is the basic website that's easy to create using HTML, where the any users entering the site will receive the same information. If we were to update the content, it will have to be done manually.
Dynamic Website is the website where its content changes according to the users who access it. It accesses content from CMS (Content Management System) where if the content of the database is updated, the content of the website will also update by itself.

We also learn about two sides:
Server Side is the side where the programming is run on the web server.
Client Side is the side where the programming is run on the web browser, the users.

Week 2
(4th of April 2018)

For our second lecture, Mr. Shamsul explained about Colors. Mr. Shamsul introduced us to two website that can help us to decide a color scheme if we're still not used to swatches. The websites are color.adobe.com and paletton.com. Interaction of colors, as explained by Mr. Shamsul, is seen through complementation, contrast, and vibrancy.

Complementation is when colors are seen in terms of their relationship with other colors such as the triadic and compound color schemes, etc.
Contrast is when it reduces user's eye from straining too much and it focuses user's attention by dividing elements on the page.

Mr. Shamsul also mentioned a little bit about Gestalt theory, which states that things which shares visual characteristics such as shape, size, color, texture, or value will be seen together in the viewer's mind.
Mr. Shamsul then told us that the three commonly accepted structure for a good color scheme are triadic, compound, and analogous.

Fig. 2.a. Color Structure

Week 3
(11th of April 2018)

On the third week of class, Mr. Shamsul gave us a lecture on Web Standards. Web standards are there because of hardware and software issues such as the variety of browsers, operating systems, screen resolutions, etc. The way one user access the web may be different from other user depending on which browser, operating system, screen resolution of the hardware that they are using. Therefore, the World Wide Web Consortium(W3C) is there to create and manage web standards.The W3C defined one of the standards which is the Standard Markup Language for creating a web. The SML that's often used are HTML, CSS, Javascript, etc. Then Mr. Shamsul started explaining about the structure of web pages as well as coding. HTML codes are made up of two tags, an opening <> and closing </> tag, where the information inside the tag is called elements. Each element tells something about the information that sits between a closing and opening tag. Then there's attributes which provides us with additional information about the contents of an element. Attributes come in two parts, an attribute name and an attribute value which is seperated by a "=" sign. Then Mr. Shamsul showed us some of the codes for paragraph, headings, lists, bold, italic, etc.

Week 4
(18th of April 2018)

On the fourth week, Mr. Shamsul started with a lecture before letting us continue on our Project 1. This week's lecture is about organizing a website. The first step in organizing a website is a concept called chunking, diving the information in the website into a manageable chunks of content. Every site has an information architecture, where it describes the overall conceptual models and general designs used to plan, structure, and assemble a site. When confronted with a new and complex information system, users build mental models.
Mental Models is the pre-expectation for the users.
When organizing the navigation of a website, it is best to not use too confusing and bombastic words that will confuse the users. An efficient website should also have balance between major menus and individual page content. A website that's too shallow or too deep will also bring frustration to users. If there's too much sub-menu, you can try using drop down menu or also known as the jump menu. Feedback from users can also be tracked using Google Analytics, although it's limited.
Site file and directory structures are also important to ensure that you don't have any broken links when you design your website later on.
Then Mr. Shamsul explained that there are two types of wireframe.
Low fidelity wireframe, which is what we did for the exercise, by drawing only boxes.
High fidelity wireframe, which is what we did for our Project 1 where there's colors, typefaces, and graphics.
Before ending the lecture, Mr. Shamsul showed us a video about card sorting. Card sorting helps you to present the information according to the preference of the users. A few steps to do card sorting are as listed below.

1. Categorize older chunks of information
2. Ask users to categorized the information

From there on, you can know how users prefer the information to be categorized in such a way that it'll be easier for you to design the website later on.

(19th of April 2018)

On the second day of class this week, Mr. Shamsul explained about Dreamweaver to the class since we're going to be using Dreamweaver for today's exercise as well as others in the future. After explaining, Mr. Shamsul showed us how to include links in HTML where we will need to type out the text first, select the text, then go to insert and click on hyperlink. Since we're going to be directing the link to a new window, on the target option, we choose _blank, as for title, we just type in the title that we wanted and then click Ok, Dreamweaver will then automatically type the code for us. Mr. Shamsul also explained about how we should include images.

Week 5
(25th of April 2018)

No classes was conducted this week.

Week 6
(3rd of May 2018)

On the sixth week of class, Mr. Shamsul gave us a lecture and introduction to CSS (Cascading Style Sheet) and some extra mark ups. Before diving into the lecture, Mr. Shamsul asked us to try and look for the differences of HTML 4 and HTML 5. From what I found it says that HTML 4 is the oldest version and the most basic version of HTML where it's only able to do basic text coding. As for HTML 5, it's the newest version where you can now insert audio and videos. I also found this information which Mr. Shamsul find interesting, which basically shows the difference of HTML 4 and HTML 5 in terms of coding.

Fig. 3.a. Comparison of HTMl4 and HTML5

Mr. Shamsul then explained that HTML 5 is more semantic in a way that it gives meaning instead of simply coding. In HTML 4, the element such as < div > and < span > are meaningless. In order to insert meaning, you'll have to code it as shown in the picture, by inserting an identity. However, in HTML 5, you can code it directly. For example if you want to insert a header you can simply type < header > instead of < div id = " header " > like in HTML 4.
Afterwards, Mr. Shamsul started explaining about Attributes which is additional information that you can give to an element. There are two types of Attributes:

1. ID Attribute, giving a certain element a unique style
2. Class Attribute, giving more than one element the same style

Then there are block and inline elements. Block elements are those that starts in a new line. For example < p >, < h1 >, < h3 >, etc. Inline elements are those that starts within the line itself. For example < b >, < i >, < a >, etc.
Mr. Shamsul then moved on to explain about CSS rule where it contains two parts, selector and declaration.
Selector is the elements in which the rules apply to. Examples are p, h1, h2, a, etc.
Declaration is basically the style that you're giving to a selector. There are two parts in a dclaration, property and value. Property indicates the aspect of the elements that you wanted to change, for example the color, the font, etc. Value indicates the specific setting for the property.
Then Mr. Shamsul explained about the two ways where we could insert CSS.

1. Internal CSS, by placing them inside the same HTML that we are working on. Usually internal CSS is placed within < head >< /head >. It is done by inserting the rule < style type = " text/css " >. The rules of CSS will be within < style >< /style >.
2. External CSS, by creating another sheet that will be linked to the HTML later on.

Week 7
(9th of May 2018)

No class was conducted this week.

Week 8
(16th of May 2018)

On the eighth week, Mr. Shamsul gave us a lecture on box model. By default, HTML width is 100% where it fills up the entire screen. To control the size of the screen, one can use either pixels, percentage, or em. Pixels will allow users to accurately control the size of the screen while percentage is more relative to the size of the browser. For us to also limit the width, we can use min-width and max-width. We can also choose to hide certain content or even set a scrollbar by using overflow property. Then Mr. Shamsul explained about border, margin, and padding.
Border separates the edge of one box to another.
Margin creates a gap between the border of two boxes.
Padding is the space between content and the border of the box.

Fig. 4.a. Layout elements in HTML

Week 9
(24th of May 2018)

On the ninth week, Mr. Shamsul gave us a lecture on responsive website. The night before, Mr. Shamsul also asked us to do a research about viewport and @media.
Viewport is the user's visible area of a web page.
@media is a rule in CSS to include a block of CSS properties only if a certain condition is true.
So if you wanted to make a website respond and adapt to certain browsers, one will need to use @media to add on additional rules.

EXERCISES

Exercise 1
(28th of March 2018)

For the first exercise, we we're asked to browse through websites from webbyawards.com and thebestdesigns.com and try to find good and bad websites, 6 for each category. We were divided into groups and were asked to fill in a sheet based on our findings.

Fig. 5.a. Findings on good and bad websites

Afterwards we were asked to present in front of the class on what we found and why we think of it as a good or bad website.

Fig. 5.b. List of bad websites

Fig. 5.c. List of good websites

During week 2, Mr. Shamsul concluded the exercise by explaining to us what are the key points that we can used when classifying a website as good or bad. A few of the key points include: clear navigation, subtle animation (not "noisy"), good choice of typeface, color schemes that complimented and goes well with the logo or the type of product, etc.

Fig. 5.d. Conclusion of exercise

Exercise 2
(5th of April 2018)

For exercises on week 2, we were asked to read a few articles online, then try to answer a few questions.

Fig. 6.a. Questions from lecture slide

Here are the answers that I found based on the resources given.

Fig. 6.b. Answers to exercise questions

Week 3
(12th of April 2018)

We were given an exercise to create a simple and most basic form of HTML after our lecture. We were asked to write a paragraph about ourselves, a list of our hobbies, favorite movies, as well as a list of places that we wanted to go. Here's the coding for it.

Fig. 7.a. Coding on HTML

Fig. 7.b. Web View of HTML

The process was very fun as I find it really interesting. So far through this exercise, there was not much difficulty yet.

Exercise 4
(19th of April 2018)

For exercise 4 we were required to start coding on Dreamweaver. Mr. Shamsul uploaded the images that we needed for this exercise as well as the content of the web.

Fig. 8.a. Materials needed for exercise

Then we started doing the coding in Dreamweaver. Mr. Shamsul also told us to organize our files accordingly to make it easier for us.

Fig. 8.b. Web view of exercise 4

Fig. 8.c. Web view of exercise 4

Fig. 8.d. Web view of exercise 4

Fig. 8.e. Coding for exercise 4 on Dreamweaver

Exercise 5
(4th of May 2018)

For week six, since we started to get into CSS, we were asked to try and insert CSS to the exercise that we did last week. For this exercise, we will be applying the rules of CSS internally.

Fig. 9.a. First step on applying internal CSS

Fig. 9.b. A few rules to style the web document

Fig. 9.c. Final coding on my CSS rules

Throughout this exercise, there's was still not very much difficulty yet as I really enjoyes the process of coding web. We also have not gone into using ID and Class Attribute which I think will start to get a little more complicated then.

Exercise 6
(9th of May 2018)

Since there's no classes on this week, we were given an exercise through Google Classroom where in the exercise, we were asked to try and create a similar content to what Mr. Shamsul uploaded. We will be required to use CSS rules for this exercise.

I started by typing all the contents into Dreamweaver before working on any CSS. Then I started to change the color of the header as well as the font.

Fig. 10.a. Applying CSS rule

Afterwards I tried changing all the colors and fonts for selected words or paragraph and even header.

Fig. 10.b. CSS rule

This is where things get a little complicated and a little confusing for me at first because I had to use ID and Class Attribute and when I first tried it, some didn't work because I forgot to add certain rules.

Fig. 10.c. Using ID and Class Attribute

Then I started to search on how to decrease paragraph spacing, as well as some other styles to make sure the end result will look as similar to Mr. Shamsul's as possible. I changed the width and margin of the whole document.

Fig. 10.d. Width and margin adjustment

Here are all the CSS rules that I used for this exercise as well as my coding.

Fig. 10.e. All CSS rules applied

Fig. 10.f. Content

I decided to add line break after a few paragraph because the space between paragraphs are too tight.

Fig. 10.g. Overall coding

Fig. 10.h. Final outcome

Exercise 7
(16th of May 2018)

The exercise for today's class is to introduce and prepare us for our second project. We were asked to try and create a simple layout for a web page. We were required to use External CSS. There's a part in external CSS where you can add notes to it.

Fig. 11.a. Notes for CSS

Then we started coding, adding style from CSS. For this exercise we're more focused on the layout and not the content yet, to get us familiarize with how the layout works. Then Mr. Shamsul also explain a few other extra mark ups such as display, flex-wrap, etc.

Fig. 11.b. Display options for CSS

Fig. 11.c. Final look from the exercise

Exercise 8
(23rd and 24th of May 2018)

On the first class of ninth week, Mr. Shamsul gave us an exercise where he drew a wireframe on the board and posted a few content and images for us to insert everything into Dreamweaver. 

Fig. 12.a. Result of exercise

On the second class, Mr. Shamsul wanted us to make the website responsive to different sizes of browsers. For this we will have to use @media. 

Fig. 12.b. Responsive exercise

I manage to resize the picture on header and made the content responsive. However, the only problem that I'm currently having is on reducing the spaces on top and on the bottom of the header when the browser size is reduced as well as adjusting the navigation to turn into blocks instead of inline-block.