Interactive design

19 September 2022  (Week 1 - 4)

Mabuchi ARATA / 0351579 
Typograohy / Bachelor of Design (Hons) in Creative Media

1, Introduction

In this lecture, We're going to have a lecture to learn about the way to design website. The technology of internat has been developed very quickly and the importance of visibility has been also increasing rapidly. In this lesson, we're going to learn about the way to design good website design.

(For some reason, I can't apply the PDF file. Please wait a while)

2, Lectures

Because of my mistake taht I miss to assign all of my lectures, I can't collectly explains about these 3 weeks so far I've got from the lectures so far, however, thanksfully from another student works, I can talk the topics what we've learnt so far.

Week 1

First of all, We had a brief session about the structure of the modle. We had a simple discussion about the class and the course details from beginning to an end. Afterhaving a discussion, we have been told to create a E portfolio.

Week 2 & 3

You may feel weird to combine two cotinuous week, this is because these two weeks, we have talk about how to design a good website, during these two weeks, we have worked as a group to find out ideas about good and bad website design. We also had a Mr.Shamsul's lecture about colours. Basically, we have learnt about the way to create good websites. 

Mr Shamsul's Lesson

Mr Shamsul's lecture was about colour for website. The reason of why the colour and its usage is important is because good website is the website that can provides understandable informations and comfortable to read. These aren't only features  that well comined colour combination can provide, the well branded colour combination can provide information depends on the colour itself. 

In the end, the effect of colour comnbination can help website better to understand and provide a better experience for users.

・Colour Psychology

This is basically connection between emotion and colours, even thought there are cultual differences, the group of colours itself can provide meanings. The reason for this is because the colours itself has an effect on the brain. As I repeated above already, the colours itself may have a different meanings, for example, in Ireland, the colour of orange is important colour, but in Buddhist, the colour of orange is peace and humanity, but there is still fundamental ideas (meanings) for each different colours, for example, because of that the fire tends to have red colours, the red tends to have warm and energetic impression, on the other hand, the cold water or ice tend to be blue colours, as the result, people tends to image blue colours as cold impression. The western countries fundamental colurs image are shown below.

・Red      : Excitement

                 Strength

                 Love

                 Energy

・Orange : Confidence

                 Success

                 Bravery

                 Sociability

・Yellow  :  Creativity

                 Happiness

                 Warmth

                 Cheer

・Green   : Nature

                 Healing

                 Freshness

                 Quality

・Blue     : Trust

                 Peace

                 Loyality

                 Competence

・Pink      : Compassion

                 Sincerty

                 Sophstication

                 Sweet

・Purple   : Royality 

                 Luxury

                 Spirituality

                  Ambition

・Brown   : Dependence

                  Rugged

                  Trustworthy

                  Simple

・Black     : Formality

                  Dramatic

                  Sophistication

                  Security

・White    : Clean

                  Simplicity

                  Innocence

                  Honest

These are just sample of basic colour meaning, you can use colours to express the message that you want to tell to the audience. The meaning of colour itself can ba also changed depends on your thought or message you want to tell.

・Colour expression

Even though we have already understand the basic meaning of each colour, we can't express any visual impression without using colours wisely. How we should use colours much wisely to make our website much interesting? The answer is able to be solved by using colour expression features formed by two different main ideas, colour systems and combination.

・Colour systems

Basically, colour systems are the features to creates different colours. It's not just about different colours, but it's brightness and the rate of vivid that creates different types of colours. That's called "Hue, Saturation and Lightness"

・Hue is basically difference of colours we normally see. To state about this with more details, It's difference is depends on the different wavelength from light reflection that creates different colours.

・Saturation is able to explain as the clearness of the colour itself, as the rate of saturation decreases, the colour gets dull and black, on the other hand, if the rate of saturation increases, the colour gets clear and sharp. Vivid colours can be created when the rate of saturation for the given particular colour is 100%.

・Lightness is ,as most of peoplebalready notise, the degree of whitness and darkness, if therate of lightness is high, the colour itself become white, but on the other hand, if lightness reduces its rate, the colour become black.

・Colour combination

These main colour level creates tons of different colours for us, but the combination is also the key to consider in the website creation. One of the idea to think about this is called "Contrast", This is the idea to have colour different in two different element. This can be usesful to emphases text or image in the website.

There is another different terms to think about colour combinations, it is called "Colour relationship" There are four ideas to combine colours in the design as shown below.

・Monochrome : Combination of different tins, shades, and saturation of the same colour.

・Complementary : Combination of two different colour that exists on opposite side of the colour wheel.

・Analogous : Featuring three colours that are next to each other on the colour wheel.

・Triadic : It's like combined form of Analogous and Complementary relationship. It's combination of three different colours at the point of triangle drawn within the colour wheel.

You have to consider to use these colour relationship ideas to create your own webpages.

During the lesson in week 3, I have joined the group to have a discussion about the good website design adn bad website design. Unfortunatelly, I can't mention everything we have discussed in here because of the time issues, but I can still type the bullet point about good website design and Bad website design.

・Good Website Design

    ・Customizable visual referenceHigh usabilitiess

    ・Dependent Font size on screen size 

    ・Format itself is straightforward, easy to use

    ・Having a contacts to the related website

    ・Nicely Interactive design for users

    ・Providing Dark and Light mode

    ・Welll organized colours and text

・Bad Wesite Design

    ・Bad colour combination

    ・Bad layer design

    ・Bad spacing

    ・Low image resolutions

    ・Too much contrast between colours of background and some items

    ・Too strong colour contrast

    ・Unreadable font size

    ・Using informal laguage/slang

    ・Using old style

    ・Wrong font size

Week 4

From this week, We're going to start to design about Landing Page design which is a distinct page on your website, to alter to say, it's "standalone web page, created specifically for a marketing or advertising campaign.", so basicallt it's the first webpage that visitor firstly see when they click the link.

More information about my progress is shown below.

https://aratamabuchi.blogspot.com/2022/09/blog-post.html

However, tmy progress is quite slow and I need to complete designing randing page.

References

https://akineryu0206.blogspot.com/2022/08/interactive-design.html

https://elementor.com/blog/color-theory-web-design/

https://londonimageinstitute.com/how-to-empower-yourself-with-color-psychology/

https://vanseodesign.com/web-design/hue-saturation-and-lightness/

https://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437

https://webflow.com/blog/color-theory

https://www.colorpsychology.org/

https://www.google.com/search?q=Color+Psychology&rlz=1C1CHWL_enMY900MY900&sourceid=chrome&ie=UTF-8

https://www.verywellmind.com/color-psychology-2795824#toc-the-psychological-effects-of-color

https://www.verywellmind.com/the-color-psychology-of-black-2795814