Labels

Interactive Design - Exercises

2/9/2022 - 14/10/2022 (Week 1 - Week 7)

Anna Chin Siaw Fong / 0354370 
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Exercises

LECTURES

Colour Theory

Why colour matters in Web Design?
  • The most apparent advantage of using the right color combinations in web design is that they help users understand and navigate the site
  • Can improve visitors' online experiences
  • Enabling them to find the information they need and respond to your Call to Action (CTA)
  • It plays a significant role in branding and product messaging
  • Research has found that colour plays a huge role in customers' decisions about purchasing a product
  • Colours can increase overall brand recognition
Fig 1.0 Colour Wheel

Color 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.
Fig 1.1 Colour Relationship

Colour Warmth

Fig 1.2 Colour Warmth


  • Hues that contain higher amounts of yellow and red are considered warm colors -
    • evoke a sense of passion, happiness, and heat,
    • 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.
    • Can also carry connotations of formality and sadness.
Colour System (RGB, CYMK, and HEX)

Fig 1.3 Colour System
  • 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

Fig 1.4 Tint and Shades
  • 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

Fig 1.5 Hue, Saturation and Lightness
  • 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 graphicediting 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
Colour 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 colors.
    • 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.
Introduction to CSS

CSS - Cascading Style Sheet
  • CSS allows you to create rules that specify how the content of an element should appear
CSS Style Rules with HTML Elements
  • CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed.
  • A CSS rule contains two parts: a selector and a declaration
Fig 2.0 Selector and declaration
  • This rule indicates that all <p> elements should be shown in the Arial typeface
  • Selectors 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
  • 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
CSS Properties affect how elements are displayedS
  • CSS declaration sit inside curly brackets and each is made up of two parts; a property and a value, separated by a colon
  • You can specify several properties in one declarations each separated by a semi-colon
Fig 2.1 Property and value
  • This rule indicates that all <h1>, <h2> and <h3> elements should be shown in the Arial typeface, in a yellow color
  • Property indicate the aspects of the element you want to change. For example, color, font, width, height and border
  • Values specify the settings you want to use for the chosen properties. For example, if you want to specify a color propert 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
  • An HTML page can use more than one CSS style sheet.
  • To do this it could have a <link> element for every CSS file it uses
  • For example, one authors use one CSS to control the presentation (fonts and colors) and a second to control the layout
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

<iframe src="https://drive.google.com/file/d/1dnGXD7LLgJc6rPdothtAfZVSbIth7_PS/preview" width="640" height="480" allow="autoplay"></iframe>

Exercises
Exercise 1

For this exercise, we need to create a web document based on the content given. We need to add a related image on top of the document. 

Fig 3.0 Coding exercise 1

Final Exercise 1 Submission


Exercise 2

For this exercise, we need to create a single HTML page that contains the document and images from the link provided. In each main section, we need to include an id attribute that will be later used as an anchor to be linked from the navigation. We are also required to change the font accordingly and format the text and link as shown in class. 

Fig 4.0 Coding exercise 2

Final Exercise 2 Submission


Exercise 3

For this exercise, we need to choose one of the websites and replicate the entire main page/landing page design. We may use any images from any stock image website to replace the original image. 

Fig 4.0 Editing exercise 3

Final Exercise 3 Submission

Fig 4.1 Final Exercise 3 Submission (JPEG)

Exercise 4

For this exercise, we need to create an interesting and clear layout based on our previous class. We need to use the content given to complete the task. Our layout must have rows, columns, and a clear navigation system. We also need to use all the given images to suit the layout.

Fig 5.0 Coding exercise 4

Fig 5.1 Styling exercise 4

Final Exercise 4 Submission


FEEDBACK

Exercise 2
  • Width is a bit too wide. Can reduce it.
REFLECTION

The exercises provided were really helpful in learning how to code. It also allows us to practice more on our coding for our future projects. It was quite fun to code the pages. Mr. Shamsul was really helpful with teaching us and guiding us how to code our exercises as well.
Labels:

Comments

Post a Comment