Interactive Design - Project 1
NAME: SARAH CHEONG YINSHI
I.D: 0354962
COURSE: BDCM
WEEK 1 - WEEK 7
30/08/2022 - 11/10/2022
Exercise 1 - HTML & CSS Development
- CSS Layout
Project 1 - Landing Page Design
| WEEK 1 | LECTURE | 30/08/2022
Introduction to the module
Subject outline & Expectations
| WEEK 2 | LECTURE |06/09/2022
Surveying the Possibility
| WEEK 2 | PRACTICAL | 06/09/2022
Group activity
Browse through MWA Wars website to identify the good and bad websites
| WEEK 3 | LECTURE |13/09/2022
Colours of Web
Why colour matters for Web design?
- The most apparent advantage of using the right colour combinations in web design is that they help users understand and navigate the site.
- Can improve visitors' online experience.
- Enabling them to find the information they need and to your CTA (Call to action).
- It plays significant role in branding and product messaging.
- Research found that colours play a huge role in customers' decision about purchasing a product.
Colour Wheel
Colour Relationship
• Monochrome: Consisting of various tints, shades, and saturation of the same colour.
• Complementary: Based on two colours from opposite sides of the colour wheel.
• Analogous: Featuring three colours that are next to each other on the colour wheel.
• Triadic: Using three colours that are at the points of a triangle drawn within the colour wheel.
Complementary and analogous colour schemes are the easiest to work with for many designers.
Colour Warmth
- Hues that contain higher amounts of yellow and red are considered warm colours
- 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 Colour
- 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, CMYK, HEX
CMYK - Used in print design, these are also the standard cartridge for most colour printers.
HEX - HEX colour system uses a six-digit, three-byte, hexadecimal description of each colour, such as #000000 (black) or #ffffff (white). Every two characters represent a colour value.
Tint and Shades
- Tints are created by adding white to a colour.
- 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
- Hue describes the degree of similarity between colours.
- Point of reference is usually a colour such as red, green, blue, or yellow.
- When describe a colour as yellow-green, you’re thinking of it as having two hues
- Saturation refers to color intensity.
- Increasing it will make the colour more vibrant and darker
- Decreasing it will make the colour appear faded and pale.
- Lightness defines how bright a colour is compared to pure white.
- Changing only the lightness parameter in graphic editing software will produce different tints and shades.
- Contrast is a crucial element of any website, especially when it comes to background colour 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 colour.
- It can symbolise 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 colour scheme can result in a highly memorable site that leaves visitors with positive first impressions.
- Yellow is another warm colour that symbolises 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 colour widely associated with nature, ecology, and renewing
energy.
- This colour 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 symbolises trust and reliability.
- It’s a calm, soothing colour 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 colour.
- Purple is associated with royalty, luxury, and wealth.
- It’s also sometimes can associated as mysterious and magical colour.
- Can be relaxing as it reminds many people of the dream sphere.
- High concentration of this colour may also distract users.
- Pink is a youthful and romantic colour, reminding users of everlasting love.
- Widely associated with sensitivity and femininity, and it can also be a bold statement colour.
- 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 symbolises strength and wisdom.
- White is a popular choice for modern, minimalist websites as it increases readability and pairs well with any colour.
- The use of white space creates a feeling of cleanliness and light.
Colour website - Kuler, Paletton
| WEEK 3 | PRACTICAL | 13/09/2022
• What are the three basic colours that monitors transmit?
RGB
• How many colours could be referenced by name (e.g., "red") in HTML 4.01?
16 colours. 465 colours in html 5
• How many different colours are there in the "web-safe" palette?
216 colour palette
• Are the majority of people we refer to as color blind unable to see any color at all? Explain.
Most colour blind people are unable to fully see red, green, or blue light. There are different levels of colour blindness. ex: Red > Brownish.
• According to the WebAIM page on colour blindness, what is the key to designing sites that are accessible to people who are colour blind?
Using different styles or contrasts or by supplementing the image with text on the web pages that conveys the same information.
Text readability, text overlaid on background images, link recognition.
Select a topic for Project 1
Landing Page Design : Create landing page for website (will continue until final project)
Research - Include mood board, sketches, wireframe (20 sketches), visual reference, concept, fonts (from google font only)
research the essential to include in a website (navigation/ logo etc)
App - Photoshop/ Illustrator
Prototype - Output JPG
topic choice - Fansite (merchandise, promote)
| WEEK 4 | LECTURE | 20/09/2022
BOOTSTRAP
| WEEK 4 | TUTORIAL | 20/09/2022
FEEDBACK
What's the call to action ?
What do you expect to see when you visit a fanzine ?
Ideas : Clickable link to his Spotify , show videos
| WEEK 5 | TUTORIAL | 27/09/2022
EXERCISE 1 : CREATE A WEB DOCUMENT BASED ON THE CONTENT GIVEN.
| WEEK 6 | TUTORIAL | 04/10/2022
no class
| WEEK 7 | TUTORIAL | 11/10/2022
EXERCISE 2 : CREATE A SINGLE HTML PAGE CONTAINS DOCUMENT $ IMAGES FROM LINK.
| WEEK 8 | TUTORIAL | 18/10/2022
Study Week
EXERCISE 3 : REPLICATE ENTIRE MAIN PAGE
| WEEK 9 | LECTURE | 25/10/2022
Comments
Post a Comment