INTERACTIVE DESIGN- EXERCISES

August 31, 2022

INTERACTIVE DESIGN- EXERCISES

Week 1 (29/8/22)- Week 12(15/11/22)
Student: Tai Ser Yeet (0345798)
Programme: Bachelor of Design (Honours) in Creative Media
Task: Exercises

WEEK 1

LECTURE

To start off, Mr. Shamsul briefly went through the Module Information Booklet & its content. Next, we began setting up the necessary platforms for submissions such as our blog as well as entering the Google Classroom channel.

WEEK 2

Fig 1.1 Lecture Slides, Week 2 (6/9/22)

LECTURE

In today's lecture, we got a basic understanding of the principles behind effective website design and implementation.

PRACTICAL

GROUP WORK- BECOMING A WEB CRITIC

Mr.Shamsul instructed us to form groups of 6 with our classmates & conduct a website evaluation; whether the website is good or bad based on a few distinctive characteristics. A table in Excel was already prepared for us to fill up. Next, all website examples must be taken from 'Malaysia Website Awards' & 'Awwwards'.

Not only that, during the evaluation process, our group divided the listing into 4 categories; Design, Usability, Creativity & Content.

Fig 1.1.2 Examples of Good Websites, Week 2 (6/9/22)

Fig 1.1.3 Examples of Bad Websites, Week 2 (6/9/22)

WEEK 3

Fig 2.1 Lecture Slides, Week 3 (13/9/22)

LECTURE

In today's lecture, we learned about the importance of color in web design. A few key reasons include the purpose of brand recognition, easy user navigation with regards to finding the Call-to-Action Button & lastly, sales. The 4 main color relationships are monochrome, complementary, analogous & triadic.

Next, color warmth is colors that possess a high amount of yellow & red. Cool tones, on the other hand, contain high amounts of blue & purple.

Warm colors- passion, heat & happiness, aggressiveness & danger.

Cool colors- sadness & formality.

RGB- Web & Digital Design

CMYK- Print Design

Tints- created by adding white to any color

Shades- created by adding black to any color.

Hue- degree of similarity between colors (e.g yellow & green are 2 diff hues)

Saturation- color intensity (increase= vibrant/darker, decrease= faded/pale)

Lightness- how bright a color is compared to white

Contrast- important for readability & content hierarchy

COLORS

1. Red- love, passion, danger, anger

2. Orange- happiness, friendliness, motivation (good for leaving a positive first impression)

3. Yellow-joy, happiness, confidence, inspiration

4. Green- nature, ecology, refreshing, environmentally-conscious

5. Blue-trust, reliability( used by a lot of corporate brands), (highly saturated- calm & pale- distant, sad)

6. Purple- royalty, wealth, mystery, magical, (highly concentrated-distracting)

7. Pink- youthful, romantic, sensitive, femininity

8. Black- (Western-evil, death ), (East- strength, wisdom)

9. White-minimalism, increase readability, cleanliness, light

Examples of color scheme generators: Kuler, Paletton

PRACTICAL

CLASS EXERCISE- ANSWER THE QUESTIONS

Paragraph lorem ipsum

WEEK 4

Fig 3.1 Lecture Slides, Week 4 (20/9/22)

LECTURE

Today, we learned about bootstrap, cards, breadcrumbs

The wireframe can specify what type of shape you want
The landing page must have a primary call-to-action button (try to contrast with other options so there is a difference e.g u can change it to a solid color)
Primary call-to-action button (must be big & placed where the user would see it first- e.g search bar also can be CTA button)
No more than three columns for Cards- not enough white space, looks cluttered & cram (e.g Shopee)
Purpose of breadcrumbs - the user doesn't get lost while browsing through different pages (e.g home>shops>skirt)
The home button is the brand logo so two-in-one
Footer: social media icons, copyright info, contact info, terms & conditions, secondary info, payment. If there are a lot of things in the footer, it is necessary to put an arrow to scroll all the way back up. The size of it varies.
Pagination- used when u have a lot of content & we can't cram everything into one page
Typography- think about readability, Best if used in the same type family.
Moodboard - can include how you use each typeface for the hierarchy of info (e.g subheading is semibold), which info is clickable (e.g highlighted info)

Fig 3.2 Card Example, Week 4 (20/9/22)

Cards- it is best if the CTA button is within the borders of the card
Best if the button is placed on the right side because users read from the top left all the way to the bottom right
It is necessary for the carousel to have indicators if they do not move by themselves

WEEK 5

Fig 3.3 Lecture Slides, Week 5 (27/9/22)

LECTURE

create two sets of designs for different browsers
when designing a web development, the size of the screen doesn't really matter because they would use a percentage
content is super important- should be accessible to everyone- therefore should be developed based on web standards
Following web, standards prevent the need to rewrite for other browsers
Standard mark-up language used in this module - HTML & CSS
After programming, host your document on a server
IP address- Internet Protocol address
You need a web server to host your website
Web Server- a computer that is connected to the web 24/7
When it's formal, then the credibility is high
Information hierarchy is very important
Primary Call-to-Action on the right
Apply Gestalt Theory to your web design
Use Styles in Word Doc- to change the style of all the headings - save time
Ai & InDesign also has the Styles function
Do not put too much content in the Cards. If you have a lot of content to put in the website, you can hide it and put a button for viewers to know that there is much info to read.

When coding...

Use American English
Lowercase letters
Body text must be within </html>
Write the code based on a wavey pattern

Fig 3.3 Notes, Week 5 (27/9/22)

Write the code based on a wavey pattern
main headings <h1>, subheadings <h2>, ........<h6> (don't have <h7)

Fig 3.4 Lecture Slides, Week 5 (27/9/22)

Paragraphs does not have number beside the 'p' (e.g <p>, </p>)
To make a text bold, we can use <emphasis>, <strong> & <b>
Ordered List - list with the numbering, chronological order (e.g 1. bla 2. bla)
Unordered List- bullet points
<li>= li stands for list items
<hr/>=single sided HTML tag so the slash comes after the letters

Fig 3.5 Lecture Slides, Week 5 (27/9/22)

Pressing 'Tab' is optional but it's better so can detect the errors faster & more organized

target="_blank is the code for opening the link in a new tab

title=" " is the label when you hover over the link

PRACTICAL

CLASS EXERCISE

For today's practical, we learned the basics of coding in HTML. To start off, Mr.Shamsul requested us to open the Notepad app & save the file name with an HTML behind it. This tells the system that we want to open the document in the browser. One downside to this app is not editable after the app has been closed so make sure to save it & keep a backup for emergencies.

Fig 3.4 Coding In Notepad, Week 5 (27/9/22)

Fig 3.5 Coding Language, Week 5 (27/9/22)

Fig 3.6 Hosting, Week 5 (27/9/22)

To learn more about HTML, we can check out the W3 Schools website.

Then, he also wanted us to complete another exercise...

EXERCISE 1

Fig 3.7 Exercise 1, Week 5 (27/9/22)

Fig. 3.8 Lecture Slides, Week 5 (27/9/22)

Fig 3.9 Upload to Netflifys, Week 5 (27/9/22)

Fig 3.10 Lecture Slides, Week 5 (27/9/22)

LINK TO EXERCISE 1:

https://exercise1-taiseryeet.netlify.app/

WEEK 7

Fig 4.1 Lecture Slides, Week 7 (11/10/22)

FILE NAMING CONVENTION

IMAGE FILES

create a folder called 'images'
image for header - img -about-header.jpeg
image gallery - img-gal-01.jpeg

ITEMS FOR MENU

create a folder for the menu - 'menu'
all the things such as "about, gallery, work, home'
e.g about.html, gallery.html, etc

CSS

In a selector, there can be multiple declarations ( in <p>, there can be font style, color, and size)
separate the multiple declarators using a semi-colon ;
the arrangement does not have to be in order (can start with typeface, color, etc)
best to use an external CSS style sheet
h1 & h2 can be separated. If you want to change the different sizes of h1 & h2, then no need to separate them into different lines actually because, by default, they are already two different sizes.
make sure to check that you are using the curly brackets '{'.
for id, put a hashtag in front
for class, put a full stop in front
difference between id & class- id is specifically for an element (e.g if u want the header to be a certain style, then use id// as for class, it is used for multiple elements if u want it all to be the same)
what if I want all the headings to be in different styles? use a class because usually, it would not be a different style so that's why u use class instead of id.
how to do animation in visual studio code?

EXERCISE 1

When coding for HTML, I followed the format of the Word Document given. After that, coding in CSS format was fairly simple.

Fig 34.2 Coding in Dreawmwever Week 5 (27/9/22)

Next, a HEX color code is identified from the Word document provided & applied to the header, headers 1 & 2, and more.

Fig 3.51 Choosing a Color from the Color Spectrum, Week 7 (11/10/22)

PROBLEMS FACED

PROBLEM 1: UNABLE TO INSERT IMAGE

Fig 4.0 Scaling the Image Size, Week 7 (11/10/22)

Fig 4.0 Coding Progress, Week 7 (11/10/22)

FIG 4.2 The difference in Size of Images, Week 7 (11/10/22)

Fig 4.3 Uploading to Netlify, Week 7 (11/10/22)

PROBLEM 2: UNABLE TO VIEW THE IMAGE

After uploading my coding sheet into Netlify, I opened the link in a new tab. To my dismay, I was unable to view the images inserted for some reason. I then did some troubleshooting and found that the folder containing the images ought to be placed inside the folder I uploaded to Netlify. I am guessing it is because Netlify would know where to extract the images from whenever the page is open. Nevertheless, I did the necessary changes and it solved the issue!

FINAL LINK SUBMISSION

https://exercise2-taiseryeet.netlify.app/

WEEK 8

PRACTICAL

REPLICATION OF EXISTING LANDING PAGE DESIGN

We were tasked to select an existing main page design from the 4 that Mr.Shamsul had posted in the Google Classroom and turn it into a landing page design in Adobe Illustrator. I chose the WWF website just because it resembled the landing page I created in Project 1 and I thought that doing so might be beneficial for when I am required to code the CSS layout of the design.

PROGRESS

I screenshotted the chosen website and imported it to Illustrator for easy referencing.

Fig XX Screenshots of Main Page, Week 8( 18/10/22)

Finding the closest typeface I can get to the ones used from the page and adjusting the letterspacing by kerning or tracking wherever necessary.

Fig XX Finding Typeface, Week 8( 18/10/22)

Fig XX Eyedropping Color, Week 8( 18/10/22)

Fig XX Adding the Details, Week 8( 18/10/22)

Fig XX Creating the Footer, Week 8( 18/10/22)

SUBMISSION OF EXERCISE 3

Fig XX Submission of Exercise 3, Week 8( 18/10/22)

WEEK 9

LECTURE - DISPLAY

the inline element has to be under the id attribute
this would turn the menu display into a horizontal line
initially, the arrangement of an order/unordered list would be a block element and go vertically down but with the inline, it would go horizontal

WEEK 10

LECTURE - CONTAINER AND NAVIGATION

<div>= creating containers// used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.
<nav>= section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
<-- this is a comment -->= used to remind yourself what you were doing in the coding sheet
padding & margin = insert the pixels into CSS coding so that the text has a marginal space instead of sticking to the very side of the screen.
box-radius= making the curved corners for the box
Overflow: find out what the purpose
Clear: find out what the purpose
Search for a multiple-column carousel for the "Our Collection" category and accordion style for the drop-down option
margin-auto is to make the content not stick to the side
HTML code: <div class=" column big aqua blue" //
CSS code: .column { background: color; }, .big { min-width: 30%), etc
So actually, you could have multiple class in one sentence so that you can customise each columns individually.

Fig XX Creating Menu Navigation Horizontally, Week 10(1/11/22)

PRACTICAL

SUBMISSION OF EXERCISE 4

https://exercise4-taiseryeet.netlify.app/

INSTRUCTIONS

Fig XX Image Citations, Week X (X/X/22)

FEEDBACKS

WEEK 9 - OVERALL FEEDBACK

EXERCISE 2- HTML & CSS WEBPAGE

change the size of images
there is no smooth scroll behavior animation after clicking on the link
very clear information hierarchy in terms of differentiating the heading, subheading, and body text
adjust the size of the image, and set the width of the images to a specific size so that the ratio maintains

EXERCISE 3- REPLICATE AN EXISTING WEBPAGE

very good layout and alignment

WEEK 11- OVERALL FEEDBACK

there is no container to hold the contents because the content is outside of the <div class="container">