Interactive Design / Lectures & Exercises

29.08.2022 - 04.12.2022  / Week 1 - 14
Yung Siew Weng / 0339847
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise 1 & 2

LECTURES

#WEEK 1
ID #1: Information Briefing
For this particular week, module information briefing was been conducted. We were instructed on "rule" regarding to this modules;
- All exercises and assignments need to be uploaded in Netlify, a web server except for Project 1 landing page (in google classroom)

#WEEK 2
ID LECTURE #2: Surveying the Possibilities


# Important Notes :

1. The Pros on surveying the Possibilities:
- Able to critically evaluate websites based on purpose, design and usability.
- Able to identify the major criteria that experts use to evaluate web sites and apply those criteria to your own evaluations.
- Understand website quality.

#WEEK 3
ID LECTURE #3: Color Theory


# Important Notes :

1. Pros of color in Web Design?
- Using the right color combinations in web design can help users understand and navigate the site.
- Improve visitors' online experiences
- Enable to find information that users need and respond to your Call to Action (CTA).
- Plays a significant role in branding and product messaging
- Colors can increase overall brand recognition.

2. Color Wheel

Fig 1.1 Color Wheel

The color wheel is a visual representation of colors, with hues arranged according to wavelength. Color wheels allow color relationships to be represented geometrically, and show the relationship between primary colors, secondary colors and tertiary colors.

3. Color Relationship
Monochrome : various tints, shades and saturation of the same color.

Fig 1.2 complementary color

Complementary : two colors from opposite sides of the color wheel. For example, Red and Green; Yellow and Purple; Orange and Blue; Green and Magenta.

Fig 1.3 Analogous color

Analogous : groups of three colours that are next to each other on the colour wheel, such as blue, blue-green, and green, your blue-green mix should be an even mix of the two for a balanced look. They usually match well and create comfortable designs.

Fig 1.4 Triadic Color

Triadic : comprised of three colors evenly spaced on the color wheel. The two most basic triadic palettes are the primary colors red, blue, and yellow, and the secondary hues orange, purple, and green.

3. Color System [RGB, CMYK, HEX]
- RGB
- CMYK : used in print design. Standard cartridges for most color printers
- HEX (Hexadecimal code) : a color system uses a six-digit, three-byte, hexadecimal description of each color, such as #000000 (black) or #ffffff (white)

4. Color Psychology
- Red; strong, energetic color, danger or anger.
- Orange; warm and happy color, result in memorable site.
- Yellow; joy, happiness and sunlight.
- Green; nature, ecology and renewing energy.
- Blue; trust and reliability.
- Purple; royalty, luxury and wealth, mysterious and magical color.
- Pink; youthful and romantic color, reminding user of everlasting love.
- Black; in western may be associate with evil and death; east symbolises strength and wisdom.
- White; popular choice for modern, minimalist.

#WEEK 4
ID LECTURE #4: Web and Language


# Important Notes :

1. Why Web Standards?
- To make internet a better place, for both developers and visitor, it is important that both browsers and web developers follow the Web Standards.
- Easier for a developer to understand another's coding.
- Ensure that all browsers will display your Web site properly, without time-consuming rewrites.

2. HTML
The HTML code is made up of characters that live inside angled brackets < >, which known as HTML elements. The elements usually made up of two tags: an opening tag "<" and a closing tag ">"

For example; <element>Information</element>
* Each element tells the browser something about the information that sits between its opening and closing tags.

<body> ; everything inside the <body> elements is shown inside the main browser window.
<title> ; the contents of the <title> elements are either shown in the top of the browser (tab bar)
<head> ; before the <body> element you will often see a <head> element. This contain informations about the page.

#Heading <h>
- HTML has six level of headings :
<h1> ; main headings
<h2> ; subheadings
....

Fig 2.1 Level of headings

If there are further sections under the subheadings then the <h3> element is used an so on.

#Paragraph <p>

Fig 2.2 paragraph

To create a paragraph, surround the words that make up the paragraph with an opening <p> tag and closing </p> tag.

#Bold <b>
#Italics <I>

#List
There are lots of occasions when we need to use lists. HTML provides us with two different types; ordered list <ol> and unordered list <ul>.

Fig 2.3 ordered list

#Ordered list <ol> , numbering
#List item <li> , each item in the <li> is placed between and opening <li> and a closing </li> tag.

Fig 2.4 unordered list and nested list

#Unordered list <ul> , bullet
#List item <li> , each item in the <li> is placed between and opening <li> and a closing </li> tag.

You can pit a second list inside an <li> element to create a sub-list (nested list).  

#Links <a>
Links are defining features of the web because they allow you to move from one web page to another. Commonly type of links :
- Links from one website to another
- Links to one page to another on the same website
- Links from a part of a webpage to another part of the same page
- Links that open in a new browser window (tab)

#Link <a>, user can click on anything between the opening <a> tag and a closing </a> tag.
For example ; 

Fig 2.5 links 

<a href ="website">displayed text</a>

#WEEK 5
ID #5: HTML Practical (My First Web Page)
For this particular week, we are focusing on how to create a HTML file via TextEdit (application for Mac). This exercise can be stated as the practical part for the previous (week 4)'s lecture.

According to Mr. Shamsul's tutorial;
1. Open TextEdit , save as a file (named it as index.html) 
*do remember to arrange the folder and file properly.
2. Click the file (make sure it appeared in a web)
3. Start typing... 

#shortcut learning // 
To save, [cmd + S]
To refresh the site, [cmd + R]

Fig 3.1 Screenshot, progress on TextEdit ( week 5 / 06.10.2022)

Fig 3.2 Screenshot, progress on Web ( week 5 / 06.10.2022)

#Final Outcome HTML Practical (My First Web Page)

Fig 3.3 Final Outcome on Web, PDF ( week 5 / 06.10.2022)

Fig 3.4 Final Outcome, HTML, PDF ( week 5 / 06.10.2022)

#WEEK 6
ID LECTURE #6: HTML Extra Markup


# Important Notes :

*For this particular week, we had been informed to install the Adobe Dreamweaver or Visual Studio Code for the next practical exercise.

1. Adding an image in HTML
- The tag <img> is used to add an image in HTML. The tag is considered empty until you add an attribute.

#Image <img src="url">
For example;  <img src="https....">

- Describe the image, add the [alt] attributes
For example; <img src="img_flower.jpeg" alt="Flower in Denmark">
*when the image considering in a poor connection network, the alt [flower in Denmark] will appeared on the top-left of the image.

- Specify the width and height, adding [width] and [height]
For example; 
<img src="img_flower.jpeg" alt="Flower in Denmark" width="500" height="350">

2. Image Format for Web
Three common image formats for web: JPEG, GIF, PNG.

#JPEG  ( Joint Photographic Expert Group)
- The most common image format used on the web
- Highly compatible and small size and very little loss of quality
- Saved using lossy compression
- Usually used for photos on the web

#GIF (Graphics Interchange Format)
- Uses lossless compression
- Image been saved over and over without lose any data
- Uses 8-bit lossless format which support a maximum of 256 colors
- Unique feature: ability to be animated
- excellent choice for logos, small in size but not suitable for photos

#PNG (Portable Network Graphics)
- Contained a bitmap of indexed colors and uses lossless compression
- Allow full range of color and better compression
- Mostly used format on the Web
- Unique feature: support image with transparent background.

3. ID and Class attribute
#ID attribute {id}
- Every HTML element can carry the ID attribute
- used to uniquely identify the element from other elements on the page
- only one elements have a same value of ID attributes (if two elements and above, the value is no longer unique).

For example; <p id="history"></p>
*In this terms, the history can be changed to other word that you can identify the HTML element.

#Class attribute {class}
- Every HTML element can carry a class attribute
- Identify several elements, any elements can share the same value or name.

For example; <p class="history"></p>

*The difference between ID and class :
{id} can only stand for one element for a same value; but {class} can stand for more.

4. Other Elements 
#Block Elements
Some elements will always appear to start on a new line in the browser window, which known as block level elements.
For example; <h1>, <p>, <ul> and <li>

#Inline Elements
Some elements will always appear to continue on the same line as their neighbouring elements, which known as inline elements.
For example; <b>, <i> , <em>, <a> and <img>

#<em>: the Emphasis element. 

#WEEK 7
ID LECTURE #7: Introduction to CSS


# Important Notes :

1. CSS (Cascading Style Sheet)
- CSS allows you to create rakes rear specify how the content of an element should appear. 
For example; you can set the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level header should be in blue, italic.... (you can make the customisation yourself)

#CSS rule
CSS rule contains two parts : a selector and a declaration.

Fig 4.1 CSS Rules

- Selector indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas. 
*basically the {p} here means the name that you identified for the elements.
For example; the elements named History.
then the selector should be .history { ....}

- Declarations indicate how the elements referred to in the selector should be styled.
*the elements within the {..}

ID PRACTICAL #7: Introduction to CSS
For this week tutorial and practical, we are focusing on the development of CSS Document. The session was instructed to conduct on either Visual Studio Code or Adobe Dreamweaver. As having the free in Adobe license, I chose to use Adobe Dreamweaver for the practical.

Fig 4.2 Progress in Adobe Dreamweaver (Week 7/ 11.10.2022)

Fig 4.3 Screenshot, outcome on web (Week 7/ 11.10.2022)

Overall, Mr. Shamsul had gave us instructions and tutorials on how to develop in CSS and I documented the important notes in the PDF file below :

Fig 4.4 Notes for CSS development, PDF (Week 7/ 11.10.2022)

#Final Outcome CSS Practical , WEEK 7

Fig 4.5 Final outcome, Practical Week 7, CSS, PDF (Week 7/ 11.10.2022)

Fig 4.6 Final outcome, Practical Week 7, on web, PDF (Week 7/ 11.10.2022)

#WEEK 8
ID #8: Independent Learning Week

#WEEK 9
ID LECTURE #9: The Display Property

# Important Notes :
1. The Display Property
- Display is CSS's most important property for controlling the layout.
- Every element has a default display value depending on what element it is (block/inline elements).

#Block-level element <div> / <p>...
- <div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.
- other common block-level element are <p>, <form> and new in HML5 are header, footer, section and more.
#div is the most common in block.

#Inline element <span> /...
- <span> is the standard inline element. An inline element that can wrap some text inside the paragraph. 
- other common likely as <span> is the <a> </a> that used previously within the paragraph.

To create a navigation bar ; create an #id (selector), then adjust the details for the id (declaration).

Fig 5.1 Navigation bar, step and outcome (Week 9/ 25.10.2022)

#WEEK 10
ID LECTURE #10: CSS layout
During this particular session, we are instructed on how to do a CSS layout based on the layout of Exercise 3

# Important Notes :
After having the html file, [create a new file > create CSS file and renamed it as "style.css"]

Fig 6.1 create a CSS style file (Week 10/ 01.11.2022)

#If having more than one style, the name might be "style_x" for example, [style_about me] [style_home]

To link the CCS style file with HTML file [CSS Designer > + sources > Attach existing css file > open the file]

// Not commended on using background image.//

Mr. Shamsul had gave us tutorials on how to code the CSS layout, and I documented some notes into PDF below;

Fig 6.2 notes for CSS layout, PDF (Week 10/ 01.11.2022)

Although having a version of pdf, but I felt that the full text pdf would be more applicable and useful for future:

Fig 6.3 HTML source code (Week 10/ 01.11.2022)

Fig 6.4 CSS style file (Week 10/ 01.11.2022)

#Final Outcome Layout Exercise , WEEK 10

Fig 6.5 Final Outcome, Layout Exercise (Week 10/ 01.11.2022)

#WEEK 11
ID LECTURE #11: Bootstrap
During the session, we will focused on the 4.2 version.
//this week, I referred the Friday session recordings since Tuesday class was cancelled.

# Important Notes :
1. What is bootstrap?
- A framework for building responsive, mobile-first sites , with JsDeliver and a template starter page for users.
- provide the CSS code, and JavaScript code.

2. The most basic elements in bootstrap:
#container 
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and center the content within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with different containers : 

Fig 7.1 type of containers in different screen (Week 11 / 11.11.2022)

//sm- small ; md- medium; lg- large; xl- extra large//
//container.fluid = a full width container, spanning the entire width of viewport.//

#grid (.col)
Use the powerful mobile-first flex box grid to build layouts of all shapes and sizes in twelve column system, five default responsive tiers, Sass variable and mixing, and dozens of predefined classes.

// why twelve column system? //
The number 12 is the most easily divisible among reasonably small numbers; it's possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout. While the 12-column grid is a popular choice among many designers, it's not a one-size-fits-all solution.

#button; custom button styles for actions in forms, dialogs and more with support for multiple sizes, states and more. 
#button group ; group a series of buttons together on a single line with the button group.
#card ; provide a flexible and extensible content container with multiple variants and options.
#carousel ; a slideshow component for cycling through elements- images or slides of text.
#Navs ; navigation

Mr. Shamsul had gave us tutorials (recordings) on how to use the bootstrap code, and I documented some notes into PDF below;

Fig 7.2 notes for bootstrap, PDF (Week 11 / 11.11.2022)

#Final Outcome Bootstrap Tutorial , WEEK 11

Fig 7.3 Final outcome, inspect version (Week 11 / 11.11.2022)

Fig 7.4 Final outcome bootstrap tutorial, PDF (Week 11 / 11.11.2022)

Fig 7.5 Final outcome bootstrap tutorial codes, PDF (Week 11 / 11.11.2022)

#Textedit version;

Fig 7.6 Textedit file source code, PDF (Week 11 / 11.11.2022)

Fig 7.7 Textedit file css style, PDF (Week 11 / 11.11.2022)

#WEEK 12
ID LECTURE #12: Progression Check
This week, we focused on doing the Project 2. The full development and exploration can be view in Project 2 : Working Landing Pages.

#WEEK 13-14
Final consultation

Exercises : HTML Document Development & HTML, CSS Document Development,
SS Layout Model

MODULE INFORMATION


Interactive Design Exercise
# Exercise 1 - HTML Document Development

INSTRUCTION
We are required to create a web document based on the content given. We are interested to follow exactly the format as in the document (Heading, Sub-Heading, Paragraph, list, including links). For a start,  create the document using Text Edit or Note Pad as shown in class. Add a related image on top of the document. Name the file as index.html and save the file in a folder Exercise One. 

After completed the task, we are required to upload the web document to a web hosting (Netlify) and submit the link in Google Classroom. Rename the netlify file name to exercise1_yourname from the change site name setting. 

EXPLORATION
#The given content : 
Fig 8.1 Given Content (week 5/ 01.10.2022)

As we had been instructed on some HTML during the previous class (week 5), I "reused" the knowledge and also did some learning from the online source.

There are some basic tags that did not mentioned in class. 
#My notes :

Fig 8.2 Tags, further reading (week 5/ 01.10.2022)

After learning about the "desired tags," I started my exploration by entering the HTML file in text edit.

Fig 8.3 screenshot of progress (week 5/ 01.10.2022

For the image <img scr=" url link'>

Fig 8.4 proof of the "files"  (week 5/ 01.10.2022)

After complete the HTML exercise, we are required to publish on Netlify. 
Netlify link : https://exercise1-yungsiewweng.netlify.app

 #Final Outcome ID Exercise 1 ; HTML development

Fig 8.5 Exercise 1, Web Overview, PDF (week 5/ 01.10.2022)

Fig 8.6 Exercise 1, HTML File, PDF (week 5/ 01.10.2022)

Netlify Link for Submission : https://exercise1-yungsiewweng.netlify.app

Interactive Design Exercise
# Exercise 2 - CSS Document Development

INSTRUCTION
We are required to create a single HTML page that contains the document and images from the link provided. In each main section, you need to include an id attribute that will be later used as an anchor to be linked from the navigation. You are also required to change the font accordingly and format the text and link as shown in class. Use the appropriate CSS style to style the page. Kindly adjust the width of the page so the content doesn't fill up the entire screen. Upload the completed web page to Netlify. Make sure the name of the file is correct (index.html).

EXPLORATION
#The given content: 

Fig 9.1 Given Content (week 8/ 17.10.2022)

After having the contents, I started coding the contents through Adobe Dreamweaver.

The step based on tutorial;
1. Open TextEdit, save a index.html file in a folder.
2. Open Adobe Dreamweaver, define server (add site) and open the file.
3. Start coding!

Fig 9.2 screenshot, after insert all the text (week 8/ 17.10.2022)

Fig 9.3 screenshot, after insert all the text , CSS (week 8/ 17.10.2022)

Outcome before (left) and after (right) insert the image; 

Fig 9.4 - 9.5 screenshot, before and after inserting the image (week 8/ 17.10.2022)

#To insert the image;
<img src="copy the file name from desktop" alt="the identities name" width="value">

#To align the image;
center; <center></center>
left; <left></left>

#To bold/ condensed the text; { font-stretch : ... }

#Final Outcome ID Exercise 2 ; CSS development

Fig 9.6 Final outcome, CSS development in text , PDF (week 8/ 17.10.2022)

Fig 9.7 Final outcome, CSS development in HTML , PDF (week 8/ 17.10.2022)

As the outcome in figure 9.7 seemed not in full, I converted all the HTML text to TextEdit, in order to save as a PDF file (fig 9.8).

Fig 9.8 Final outcome, CSS development in HTML , PDF (week 8/ 17.10.2022)

Netlify Link for Submission : https://yungsiewwengidex2.netlify.app/#home

FEEDBACK_WEEK 7 / 25.10.2022 @ ID Exercise 2
- usually for world of CSS, we used pixels (px) instead of cm.
- recommend to save all the images in a folder.
- For <id>, only word with "no gaps" allowed. For example; {imagegap}, {image_gap} but not {image gap}

Interactive Design Exercise
# Exercise 3 -  Layout Exercise

INSTRUCTION
Independent Learning Week Task (Exercise 3)
Please choose one of the websites from the list in the link provided and replicate the entire main page/landing page design. This task is to enable you to look at the nuances of website design and to have a better understanding of the layout. All the website listed is the current trend in web design. You may use any images from any stock image website to replace the original image. Submit the jpeg file once you've completed the task.

EXPLORATION
Based on the requirements, I picked the contents about WWF.

Fig 10.1 WFF website (week 8/ 19.10.2022)

As the requirement mentioned that we need to "copy and paste" all the layouts, I used Indesign as my 'weapon' to complete this task.

Before develop in tracing the layouts, I did some research regarding on the fonts for WWF. Based on the online source, WWF Brand fonts are WWF, Georgia and Open Sans. To make the layouts to be more "WWF", I installed the fonts from google fonts and yet start my exploration!

Fig 10.2 proof of sources (week 8/ 19.10.2022)

To make the layout more perfect, I used multiple layers to construct it.

Fig 10.3 screenshot, progress in Indesign (week 8/ 19.10.2022)

Fig 10.4 Layout outline, JPEG (week 8/ 19.10.2022)

After having the outline version, I continued insert all the text to the layout. (I converted all the text from WWF to my version). Also, place colours for the layout too.

Fig 10.5 Layout with text and colour, JPEG (week 8/ 19.10.2022)

When tracing the layout, I noticed on a "small detail". There are a line of text place on the top-left of each images. I guess it act as the {alt} attributes that we learn before.
the code ; <img src="image" alt="the line of text" > 

But as my images was all from Unsplash, a stock image website so I indicated the img as "xxx/WWF" at top-left of each image.

Fig 10.6 small details (week 8/ 19.10.2022)

After somewhat 6 hrs' exploration on researching and tracing, I finally complete the entire main page.

#Final Outcome ID Exercise 3 ; Landing Page (Website provided)

Fig 10.7 Final Outcome, JPEG (week 8/ 19.10.2022)

Fig 10.8 Final Outcome, PDF (week 8/ 19.10.2022)

FEEDBACK_WEEK 7 / 25.10.2022 @ ID Exercise 3
Overall, great job! 

Interactive Design Exercise
# Exercise 4 - Layout Design

INSTRUCTION
This task is to create an interesting and clear layout based on previous class. Use the content given in the link to complete the task. Your layout must have rows, colums and a clear navigation system. Use all the given image to suit with the layout. You could also look for related images if necessary.

EXPLORATION
After receiving the requirements and materials, I was so exciting to develop in it. By having the contents and images provided, I start my exploration.

As usual, create a new HTML file in Adobe Dreamweaver and start to code the contents. 

Fig 11.1 content in web (week 10/ 03.11.2022)

After having the full contexts, I started to stylise the CCS file by insert an existing CSS file through CSS designer and continued my exploration.

Before going deeper, I did some visual research on the context. Since most of the context comes from the site name "Just Creative" and similar article is found in the site. So, I use the web as a reference for the colour schema and fonts for this particular layout exercise.

The font family used : Open Sans

Fig 11.2 web colour schema (week 10/ 03.11.2022)

Following by the stylise the CSS file, I met some challenges within and did some research online to get in with it. At first, I was struggle on the image size which make the overall user experience look so dull and ugly.

Fig 11.3 Original version (week 10/ 03.11.2022)

I felt that the image size is too big and I set a width and height towards all the image (to make in a same size). 

For example :
<img src="Image/img_article2.jpg" alt="Image/img_article2.jpg" class="gallery" style="width:300px;height:300px"/>

Fig 11.4 with width 300px, height 300px (week 10/ 03.11.2022)

Although the facts of having a same image size, but the image of column 2 & 3 seems been stretched. I applied a declaration towards all the image in the file.

img{
object-fit: cover;
}

#Knowledge about {object-fit} gained from W3 school, an online sources. There are 5 kinds of {object-fit} that can be applied in CSS which is :

Fig 11.5 object-fit (week 10/ 03.11.2022)

Also, as I like the style of having a round border instead of a guided square, a declaration being added. <gallery> is the class of my image in the columns.

.gallery {
border-radius: 15px;
box-sizing: border-box;
}

Fig 11.6 outcome, after adjustment (week 10/ 03.11.2022)

During the process, I also struggled on the height of the heading which showing an imbalance in the context :

Fig 11.7 imbalance in heading (week 10/ 03.11.2022)

After the exploration, I finally solved the issue on adding a class attribution to the headings and stylise the CSS file by adjusting the height. In the meantime, I also want to align the heading on left so that it will a trouble when viewed in other device.

.heading{
text-align: left;
height: 50px;
}
Fig 11.8 after adjustment (week 10/ 03.11.2022)

#Final Outcome ID Exercise 4 ; Layout Design (Contents provided)

Fig 11.9 Final Outcome, Layout design in web, JPEG (week 10/ 03.11.2022)

Fig 11.10 Final Outcome, Layout design in web, PDF (week 10/ 03.11.2022)

Fig 11.11 Final Outcome, screenshot HTML/CSS file (week 10/ 03.11.2022)

As usual, I compiled all the code to textedit and export as PDFs :

Fig 11.12 Final Outcome, HTML source code (week 10/ 03.11.2022)

Fig 11.13 Final Outcome, CSS style (week 10/ 03.11.2022)

Netlify Link for Submission : https://yungsw-ex4layoutdesign.netlify.app

FEEDBACK

WEEK 7 / 25.10.2022 @ ID Exercise 2
- usually for world of CSS, we used pixels (px) instead of cm.
- recommend to save all the images in a folder.
- For <id>, only word with "no gaps" allowed. For example; {imagegap}, {image_gap} but not {image gap}

WEEK 7 / 25.10.2022 @ ID Exercise 3
Overall, great job! 

WEEK 12 / 15.11.2022 @ ID Exercise 4
Great, it's nice.

REFLECTION

Overall, it seems like the lecture and tutorial experience were both engaging. Before the prior of taking this module, when noticing other doing the HTML coding, I feel so envious of them as it seem so interesting and yet I did not have the time to discover on that. However, as a design student who specialised on UI/UX, I am fully aware that I may someday have to work with code, but I also have certain worries and apprehensions about it. Furthermore, being a computer moron, I have little expertise of this domain but still have the spirit to discover it.   However, after attending this module thus far, I feel very at ease and love it; it may also be viewed as gaining another unexpected piece of knowledge! 

I find that if I hadn't studied his theory, it would have felt complex, but after I grasped his theory, I could easily comprehend that it was truly the same component of the same theory. 

Comments

Post a Comment