Interactive Design // Exercises
02.09.22 - 9.11.22 (Week 1- Week 11)
Emelyne How Sok Hing (0352938)
Bachelor of Design (Hons) Creative Media
Interactive Design // Exercises
LECTURES
Week 1:
For the first class of this semester, we were briefed about what is expected from us and our soon to be tasks. We were also told that every project that we are to do except from Project 1 needs to be posted on a site called 'Netlify'.
Week 2:
Surveying the Possibilities
Our week 2 lecture consisted of learning how to determine whether a site is effective or not. As we were grouped together with some of our classmates, we were tasked to evaluate and find websites from two links which were provided to us.
Links provided to us:
- https://www.mwa.my/2021/
- https://www.awwwards.com/
The purpose of this lesson is to begin considering what makes a high-quality
website. As a group, we are needed to explore questions such as these:
• Why do you feel that some websites are good?
• Why do you feel that some websites are not so good?
• Do others agree with your opinion?
• Does anyone disagree?
• Who is the target audience for a particular site?
• How might website quality be judged differently across different audiences?
• Are there some qualities of websites that all audiences would agree are good? What
are these qualities?
Week 3:
Colors for Web
Why color matters in Web Design?
- The perks of using the right colour combinations in web design is that they help users understand and navigate this site.
- Can improve visitors’ online experiences
- Enabling them to find the information they needand respond to your Call to Action (CTA)
It plays a significant role in branding and product messaging. Research has found that color plays a huge role in customers’ decisions about purchasing a product.
Colors can increase overall brand recognition
Color Wheel
 |
| Figure 1.0 Colour Wheel image, 16th September 2022 Source: https://www.peachpit.com/articles/article.aspx?p=2162084&seqNum=2 |
Colour Relationship
Monochrome:
Consisting of various tints, shades, and saturation of the same color.
Complementary:
Based on two colors from opposite sides of the color wheel.
Analogous:
Featuring three colors that are next to each other on the color wheel.
Triadic:
Using three colors that are at the points of a triangle drawn within the color wheel.
Complementary and analogous color schemes are the easiest to work with for many designers.
 |
| Figure 1.1 Colour Relationship, 16th September 2022 |
Colour Warmth
- Hues that contain higher amounts of yellow and red are considered warm colors.
They evoke a sense of passion, happiness, and heat. They can also seem aggressive and bring feelings of danger. That’s why they’re often used in alert messages.
- Cool colors contain higher amounts of blue and purple
Reminisce of chilly climates, crystal clear waters, or the sky. They are considered more soothing and relaxing than warm colors. They can also carry connotations of formality and sadness.
Color System [RGB, CMYK, and HEX]
 |
| Figure 1.2 Colour System, 16th September 2022 |
CMYK is used in print design.
These are also the standard cartridges for most color printers.
HEX color system uses a six-digit, three-byte, hexadecimal description of each color, such
as #000000 (black) or #ffffff (white).
Every two characters represent a color value
Tint and Shades
 |
| Figure 1.3 Tints and Shades, 16th September 2022 |
Tints are created by adding white to a color.
- Higher levels of white will produce lighter tints.
- If add black, will produce a different shade. The darker the shade, the more black it contains.
Hue, Saturation and Lightness
 |
| Figure 1.4 Hue, Saturation and Lightness, 16th September 2022 |
Hue describes the degree of similarity between colors.
- Point of reference is usually a color such as red, green, blue, or yellow.
- When describe a color as yellow-green, you’re thinking of it as having two hues
Saturation refers to color intensity.
- Increasing it will make the color more vibrant and darker
- Decreasing it will make the color appear faded and pale.
Lightness defines how bright a color is compared to pure white.
- Changing only the lightness parameter in graphic editing software will produce different tints and
shades.
Contrast
- Contrast is a crucial element of any website, especially when it comes to background color and
text.
- If the contrast is too low, users are more likely to have trouble differentiating between elements.
- Is vital not only for readability but content hierarchy as well
Color Psychology
- Red is a strong, energetic color.
It can symbolize many emotions and ideas, both positive and negative. Users can associate it with love and passion, but it can also signal danger or anger.
- Orange is a warm and happy color that reminds many users of friendliness, enthusiasm, and motivation. Using orange as your color scheme can result in a highly memorable site that leaves visitors with positive first impressions.
- Yellow is another warm color that symbolizes joy, happiness, and sunlight.
When used strategically on a website, can easily inject confidence and inspiration in the design.
- Green is a positive and calm color widely associated with nature, ecology, and renewing energy.
This color is pleasant and refreshing to look at, and it’s often used for environmentally-conscious
brands.
- Blue is a popular choice for many corporate brands as it symbolizes trust and reliability.
It’s a calm, soothing color that can easily create a sense of freshness when highly saturated. Blue can also look distant and sad when pale, so it’s essential to strike a thoughtful balance with this
color.
- Purple is associated with royalty, luxury, and wealth.
It’s also sometimes can associated as mysterious and magical color. Can be relaxing as it reminds many people of the dream sphere. High concentration of this color may also distract users.
- Pink is a youthful and romantic color, reminding users of everlasting love.
Widely associated with sensitivity and femininity, and it can also be a bold statement color.
- Black has many meanings and can evoke different feelings when used in combination with other
colours.
Western cultures will sometimes associate it with evil and death. In the East, it symbolizes strength and wisdom.
- White is a popular choice for modern, minimalist websites as it increases readability and pairs well
with any color.
The use of white space creates a feeling of cleanliness and light.
Week 5:
Web Standards
Today, there is much more variety in the ways people access the Web.
Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.
HTML elements
<p> - opening tag
</p> - closing tag
HTML has six levels of headings:
<h1> - main headings
<h2> - subheadings
<h3> - .....
NOTES:
<p> paragraph <p>
<b> bold </b>
<i> italic </i>
Ordered list
<ol>
<li>
<li>
</ol>
Unordered list
<ul>
<li>
<li>
</ul>
Writing Links
First step : <a> </a>
Second step: <a href = " website link " > word to click for link </a>
Week 6:
Adding Image in HTML
- The tag <img> is used to add an image in HTML
- IMG tag is a single sided element which does not have a closing tag like other HTML element.
<img src="url">
src attributes specify the location of the image
Example: <img src=“img_flower.jpeg”>
Alt attribute is added to described the image
Example: <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
Alternatively, you could also specify the width and height by adding those attributes
Example: <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
Image format for web
Three common image formats for Web
• JPEG (Joint Photographic Expert Group)
• GIF (Graphics Interchange Format)
• PNG (Portable Network Graphics)
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
- It is saved using lossy compression
- JPEG format usually used for photos on the Web
GIF (Graphics Interchange Format)
- Uses lossless compression
- You save the image over and over again without lose any data
- It uses 8-bit lossless format which support a maximum of 265 colors.
- Unique feature of this formate is its ability to be animated
- This format is an excellent choice for logo, limited color images that need to be in small size
- It is small in size but not suitable for photos
PNG (Portable Network Graphics)
- It contained a bitmap of indexed colors and uses lossless compression
- It also allows full range of color and better compression
- The most used format on the Web
- Support image with transparent
ID and Class attribute
ID attribute
- Every HTML element can carry the ID attribute
- It is used to uniquely identify the element from other elements on the page
- It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
Class attribute
Every HTML element can also carry a class attribute.
- Sometimes you will want a way to identify several elements as being different from the other elements on the page
Block elements
- Some elements will always appear to start on a new line in the browser window
Example: <h1>, <p>, <ul> and <li>
Inline elements
- Some elements will always appear to continue on the same line as their neighbouring elements
Example: <b>, <i>, <em>, <a> and <img>
Week 7:
Introduction to CSS
CSS allows you to create rules that specify how the content of an element should appear.
Example: Colour of a typeface.
CSS Style Rules with HTML Elements
A CSS rule contains two parts: a selector and a declaration.
SELECTOR (p)
p {
font-family:Arial;
} DECLARATION (font-family:Arial;)
This rule indicates that all <p> elements should be shown in the Arial typeface.
Selectors indicate which element the rule applies to. Thesame rule can apply to more than one element if you separate the element names with commas.
Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value) and are separated by a colon.
Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color property then the value is the color that you want it to be for the elements.
Method to employ CSS
Using External CSS
<link>
• The <link> element can be used in an HTML document to tell the browser where to find the CSS file used to style the page
• It is an empty element and it lives inside the <head> element
• It should use three attributes:
• href; To specify the path to the CSS file
• type; This attribute specifies the type of document being linked to. The value should be text/css
• rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
Using Internal CSS
<style>
• You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page
• The <style> element should use the type attribute to indicate that the styles are specified in CSS
• The value should be text/css
• When building a site with more than one page, you should use an external CSS style sheet. This:
• Allow all pages to use the same style rules (rather than repeating them in each page)
• Keeps the content separate from how the page looks
• Means you can change the styles used across all pages by altering just one file (rather than each
individual page)
INSTRUCTIONS
Exercises
Week 2:
This exercise consisted of a groupwork. We were tasked to find out what makes a website effective and what makes a website ineffective. In case, that the websites chosen are ineffective we also need to prove our points and use our critical thinking in order to understand what makes those particular websites not good enough. At this end of this exercise we are to be able to critically evaluate websites based on purpose, design and usability.
Figure 1.5 Group work 'Surveying the possibilities', 9th September 2022
Week 5:
Exercise 1: Web document
We are required to create a web document based on the content given to us. We are to use either Text Edit or Note Pad. After that, we also need to post the document onto Netlify.
Note:
1. Add an image for the article based on the topic.
2. Name file as index.html and save in folder called Exercise 1
3. Rename Netlify file name to exercise1_name.
.png) |
| Figure 1.6 Screenshot of Notepad, 30th October 2022 |
After following the tutorial provided to us on how to do HTML, I proceeded to use Notepad. After using it, I uploaded it onto Netlify.
Link to Netlify exercise 1: https://exercise1-emelynehowsokhing.netlify.app/
Week 6:
In this week's class we learned more about HTML. We learned how to put an HTML link, decrease the size of an image and the body text as well. Additionally, we learned about how to change the font on the website provided to us on the exercise 1. Finally, we were also taught on how to alternate the scrolling behaviour in our website.
.png) |
| Figure 1.7 HTML exercises using Visual Studio Code, 7th October 2022 |
Week 7:
Our task for the day was to learn about CSS. We mostly learned how to style our page. From learning how to put a background behind to reducing the spaces in between the sentences.
.png) |
| Figure 1.8 CSS exercises using Visual Studio Code, 14th October 2022 |
Week 8:
Exercise 2
Our new exercise consisted of creating our own single HTML page based on content provided to us. We are to improve the text layout and make necessary adjustments so that the page looks presentable.
.png) |
| Figure 1.9 Exercise 2 progress in Visual Studio Code, 19th October 2022 |
These are some of the colours that I have chosen to use for my HTML page.
.png) |
| Figure 2.0 Colour Palette, 19th October 2022 |
.png) |
| Figure 2.1 Colour Palette, 19th October 2022 |
Netlify Link (Before feedback) for Exercise 2: https://exercise2-emelynehowsokhing.netlify.app/
Week 9:
After receiving our lecturer's feedback on my site, I made the necessary changes.
Netlify Link (After feedback) for Exercise 2: https://exercise2aftfeedbck-emelynehowsokhing.netlify.app/
Exercise 3
For this exercise, we are to choose a landing page from any website provided to us and replicate the same layout but using different pictures. I chose to recreate a landing page from Jade Sheng's website.
Font used: Montagu Slab
Images used: From my own gallery
 |
| Figure 2.2 Exercise 3, 20th October 2022 |
Figure 2.3 PDF of Exercises 3, 20th October 2022
Week 10:
This week's class consisted of learning how to use CSS and create some layouts.
.png) |
| Figure 2.4 Exercise in class, 4th November 2022 |
.png) |
| Figure 2.5 Exercise in class, 4th November 2022 |
Exercise 4
We are required to design a layout based on what we learned in class during week 10 of the course. We are given some text and image content, and we are instructed to use our imagination to build something on our page. Rows, columns, and a simple navigation system are required.
I began by coding the fundamental details into my HTML file. I continued by adding <div> and <class> so that I could group things as we were taught the previous time. At first, it was a little difficult to understand where each element belonged, but after some time, I was able to adjust.
.png) |
| Figure 2.6 Coding the HTML using Visual Studio Code, 6th November 2022 |
Week 11:
After completing most of the HTMl, I started to do my CSS file and started to modify my layout. I added rows, columns and so on.
After completing most of the HTMl, I started to do my CSS file and started to modify my layout. I added rows, columns and so on.
.png) |
| Figure 2.7 Coding into the CSS file using Visual Studio Code, 9th November 2022 |
 |
| Figure 2.8 Colour Palette, 9th November 2022 |
Font Used: Roboto
Netlify Link for Exercise 4 - exercise4-emelynehowsokhing.netlify.app
Week 11:
This week exercise in class had for goal to show us how to use bootstrap in Visual Studio code. We learned how to do a carousel and include different columns and so on.
FEEDBACKS
Week 9:
Special feedback:
Make the background colour lighter so that the logo can be more obvious. Add colours for the navigation, change the size and remove the underline. Increase the size for the padding.
REFLECTIONS
It turned out to be much simpler than I anticipated to learn HTML. It was really simple to complete using Notepad, and the activity was enjoyable. Learning how code operates was a very intriguing experience. Given that I anticipated it would be more difficult, I'd say it was a good beginning. We learned more difficult material as the week went on, which wasn't a simple feat, in my opinion. Due to the time constraint, it was difficult for me to process all of the information at once, so I occasionally lost track of what I was doing. Additionally, things became a little worse when it came time to learn about CSS because, in my opinion, my main problem was that, although I knew how to code, I didn't fully understand the motivation behind this particular coding. One thing I've learned about coding is how crucial it is to practise consistently so that we can complete our tasks with confidence. Additionally, I believe that it is critical to have a positive attitude when coding because it can be simple to become frustrated or disoriented if we are not in the appropriate frame of mind. The most essential thing to remember in this course is to maintain your composure and conduct your own research because, given the limited time available to us, you cannot learn everything in class. Coding is challenging for me, but it's also rewarding when you finish a project.
Comments
Post a Comment