Week 1 - Elements & Principles of Design, Gestalt Theory and Contrast

-

 27.8.2021 / Week 1
Hansel Ribowo / 0350008
Bachelor of Design in Creative Media
Design Principles
Task 1 : Elements & Principles of design, Gestalt Theory and Contrast


Lectures

We began with an introduction of the module of our upcoming activities and how to prepare our 
E-porofolio for our task, lecture, and excercises. Our first lecture is learning about contrast and 
gestalt theory,  we learn from watching video that DR Charles give from teams.

First video :
We learn about what kind of the elements of design and design prinsiples and what the function

Fig 1.1 Elements of Design and Principles of Design

The Element of Design :
1. Point
  • A point or dot is the simplest element of design.
  • A point used as repetitive mark form a line
  • As the point moves in space, other two and three dimensional figures and forms are created.
2. Line
  • Can be active or static, aggresive or passive, sensual or mechanical.
  • Can indicate direction, space, imply volumes or solid masses, and suggest motion or emotion.
  • Can also be grouped to depict qualities of light and shadow and to form patterns and textures.
3, Shape
  • Two general category of shapes - geometric and organic.
  • Geometric - circles, squaress, triangles.
  • Organic - irregular often curving or rounded.
  • Shape becomes visible when a line or lines enclose an area or when an apparent change in value (lightness/darkness), colour or texture sets an area apart from its surroundings.
4. Form
  • When form encloses space, the space is called volume.
  • Form is often a major element in sculpture and architecture.
5. Textture
  • In visual communication design, texture refers to the tactile qualities of surfaces or to the visual representation of those qualities.
  • Two categories of texture 
  • Actual (experienced by touch
  • Simulated or implied (created to look like the real texture).
6. Space
  • Space is the indefinable, general receptacle of all things.
  • The actual space of each picture's surface is defined by its edges.
  • From the outside, we expirience mass.
  • From the inside, we expirience volume.
  • The illusion of a 3D space can be suggested through depth.
7. Colour
  • Colour is the visual byproduct of the spectrum of light as it is either transmitted through a transparent medium, or as it is absorbed and reflected off a surface.
  • Colour is the light wavelengths that the human eye revieves and processes from a reflected source.
  • Hue : Colours of the spectrum (yellow and green).
  • Value : This refers to the lightness or darkness from white through greys to black.
  • Tint : pure hue + white.
  • Tone : pure hue + grey.
  • Shade : pure hue + black.
8. Colour grupings 
  • Provide distinct colour harmonies are called colour schemes.
  • Monochromatic colour schemes are based on variations in the value and intensity of a single hue.
  • Analogus colour schemes are based on colours adjacent to one another on the colour wheel, each containing the same pure hue.
  • Complementary colour schemes emphasise two hues directly opposite each other on the colour wheel.
Fig 1.2 Colour Wheel

Second Video :
We learn about what is contrast and gestalt theory and an example of an image that has the correct contrast and an image that uses gestalt theory

Contrast
  • Contrast is the juxtaposition of strongly dissimilar elements.
  • Contrast can provide visual interest, emphasise a point and express content.

Fig 1.3 Contrast Example
Gestalt Principles
Gestalt Principles or laws are rules that describe how the human eye perceives visual elements. These principles aim to show how complex scenes can be reduced to more simple shapes, and also aim to explain how the eyes preceive the shapes as a single, united form rather than the seperate simpler elements involved.

1. Principles of Similarity
  • The human eye tends to preceive similar elements in a design as a complete picture, shape, or group, even if those elements are seperated.
  • The brain seems to craft a link between elements of a similar nature.
2. Principles of Continuation
  • The human eye follows the paths, lines, and curves of a design, and prefers to see a continous flow of visual elements rather than seperated objects.
3. Principles of Closure
  • The human eye prefers to see complete shapes. If the visual elements are not complete, the user can preceive a complete shape by filling in missing visual information.
4. Principle of Proximity
  • The process of ensuring related design elements are placed togather.
5. Principles of Figure/Ground
  • Objects are instinctively perceived as being either in the foreground or the background.
6. Law of Symmetry & Order
  • The law states that elements that are symetrical to each other tend to be preceived as a unified group.
After the lecture, We were given an assigment that related to contrast and gestalt theory. Our task is to
make 1 contrast design and 1 design that use gestalt theory, we were free to choose what we want to make.

Exercises 

Contrast Study

To make a good contrast design i need to choose the right color. I started to learn by seeing the color wheel from the video that i watch and learning what color can match with each other to make a good contrast.

Before i make my contrast design i did a visual research from the other design, i search the example design that have a good color contrast in it. I found the design that have a good contrast with the color elements and use the contrast color to focus the two circle at the middle.

Contrast visual reaserch:

Fig 2.1 Example of Contrast Design


Contrast Design that i make:

Fig 2.2 Contrast Sketch

Fig 2.3 Contrast final outcome

I decided to make drawing that respresents contrast by using color element. I get this idea from my frontyard, i see a lot of plant so i decided to fruit and i think apple is more simple than the others, i make this drawing by using pencil 2B and colored pencil to make the color red and green.


Gestalt Study

In gestalt theory i interested with the principles of figure/ground because we can see what the design want us to see with out show us the compleate shape of the object, like the design below.

Fig 2.4 Example of Gestalt Theory Design

I really like this design because its really showing the cat and i can see the mouse at the middle of the cat even tho its not in compleate shape.


After i did my study research i make my own gestalt theory design using the principle of figure/ground.


Fig 2.5 Gestalt Sketch



Fig 2.5 My Gestalt Design

I make this design because i want to make 2 animal looking at each other and i want to make dragon and wolf like fighting each other because i like dragon and wolf because its looks cool and for the dragon i get the idea from chinese dragon.



Feedback
General Feedback: 
its ok to make a simple design but better to make it more than just fullfill the the rule for the task.
Reflection

Experience:
The first class is so fun and enjoy it because the lecture is easy to understand and the class is not bored at all.

Observations:
I observed for the first time i learn about framing and composition it looks like so complicated and it took me a long time to make the contrast and gestalt design.

Findings:
I find that listening to the lecture feedback for other stundents really help to make my design better and i find that searching a lot of design in internet or pinterest is really helpful to increase my creativity.


Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more

APPLICATION DESIGN II - LECTURE

-
Image
03/05/2023 Hansel Ribowo/BDCM App Design II Lecture Lecture In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website, Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation First we need to add id to the logo. and then add the Gsap at the java script section. This one is for adding ease in/out for the animation After that, we added some animation delay to make it come one by one. This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel. now we making the main lo...
Read more