This weeks’s lecture was about the Gestalt principles of perception under the sub-headings;

• Similarity
• Continuation
• Closure
• Proximity
• Figure and Ground

Gestalt is a psychology term which means “Unified Whole”. It refers to theories of visual perception used by German psychologists in the 1920′s. The idea behind the principle is that “the sum of the whole is greater than it’s parts”.

Similarity

This occurs when a pattern of similar shapes is used. The shapes can be different sizes, colours and textures but once there is repetition of a shape then the Gestalt principle of similarity is present.

This image of the eagle in front of the sun has similarity and appears as one image because the same shape is repeated through the image.

Continuation

Continuation occurs when our eye is drawn along an image to lead us to a specific place. In the case of the picture to the right here, continuation is present as our eye is drawn along the index finger towards the larger red circle.

Closure

The Gestalt principle of closure occurs when our minds make up the missing parts of an image. In the case of the image to the right closure occurs in order for us to see the picture of the Dalmation. The fact is that it is just a series of black shapes on a white background but we don’t need a contour line drawn to outline the shape of it to tell us that it is a picture of a Dalmation.

Proximity

This principle occurs when we place a series of images or shapes in such a way as to form a group. The picture on the right shows a series of slightly curved lines. These lines have been placed in such a awy as to form a circle. So we see it as one single object. The Gestalt principle of closure also comes into pay in this example as it is not a perfect circle but we see it as a circle anyway.

Figure and Ground

This occurs when our eye differentiates an object from it’s surrounding area. When this occurs there is sometimes a confusion over what is background and what is figure in a given picture. Like the picture to the right here. Initally we see either white fish or black geese and then it changes vice versa as our eye moves up or down through the composition.

This weeks lecture was about design elements focusing on the grammer of visual language. The sub-headings are;

• Point
• Line
• Form/Shape

Point

We learned that a point is an element that has a position but has no extension. It has a precise but limited location. When a single point is placed alone with space surrounding it, it only really serves to demonstrate the relationship between positive and negative space. But when several points ar placed in a row our brain makes us see that line. This is part of the Gestalt principle of closure. So points can make us see images or shapes simply by the way in which they are arranged. The fact that astronomers use constellations is an example of this.

Line

A line is characterized by it’s length and direction. Lines create contours and form and are often used to convey a specific type of feeling or point to an important feature in a design. Curved lines give an organic feel while straight lines give a rigid feel. Thick straight lines convey a feeling of weight. Lines can be arranged in such a way that they carry a certain meaning. we know that Calligraphy is a representation of words even when we do not know the language. 

As an exercise in the class we had to show our representation of faces in various moods by using lines. The angry face would use rigid lines while the happy and in love faces would ues the curved lines.  We also had to contour draw our hand and an apple using a line for the outline and a series of points to represent the contours of the inner parts of the objects. This is a blind drawing of my hand which is when you draw a picture of something without looking at the page.

Shape/Form

The simplest definition of shape is a closed contour, an element defined by it’s perimter. The three most basic shapes are the circle, the rectangle (Square) and the triangle. Form is the shape and structure of a dimensional element within a given composition. Form can be described as either organic or geometric. An organic form would contain curved, naturally occuring lines and a geometric form would have straight lines and regular shapes that we could name. Forms and shapes can be thought of as positive and negative. We were asked to do drawings some weeks back and only shade in the negative space. Click on the link to see my drawings.

We also had to draw a cone and a sphere with light shining on it from the east. We could only do this by shading the shapes in the correct manner.

The colour theory lecture was broken down into the following sub-headings.

• Newton and the Colour Spectrum
• The Colour Wheel (Primary, Secondary and Teritary Colours)
• Colour Components (Hue, Value and Saturation)
• Colour Schemes (Warm and Col, Monochromatic, Complimentary, Split Complimentary, Triad, Analogous)
• Colour Psychology
• Colour and Meaning

In this lecture we learned how colour is more than just decoration. Colours might have a symbolic meaning to a person.

Newton and the Colour Spectrum

The colour spectrum was discovered by Isaac Newton after setting up a prism near his window. It projected a spectrum 22 feet onto his wall containing all the colours we see in a rainbow ie. red, orange, yellow, green, blue, indigo and violet.

The Colour Wheel

The colour wheel is used to help us understand colour theory. Initially the colours we use are the primary colours of Red, yellow and blue. To get secondary colours, orange, green and purple we mix two of the primary colours. Finally to get teritary colours we mix primary colours with secondary colours.

Colour Components

We learned about hue, value and saturation as colour components. Value being the most important because it allows us to look at black and white pictures. RGB sliders are used to create colours by adding more or less red, green or blue light to make a desired colour. Each of these channels have 256 possible colour values. Value or Brightness is how light or dark a colour is. Hue is which direction on the colour wheel the colour is orientated to. Saturation means the intensity of the colour.

Colour Schemes

A colour scheme is a choice of colours used in design for a range of media. There are several different types of colour schemes that can be used in colour theory.

Warm and Cool colour scheme

The directory picture is using a warm colour scheme using colours ranging from browns to light orange colours.

The picture of the diver and the wreck is using a cool colour scheme with blue to green colours used.

Monochromatic Colour Scheme

Monochromatic colour schemes are created when One colour is picked and the colour is only altered by using different shades of white and black.

Complimentary Colour Schemes

These are created when colours on opposite sides of the colour wheel are used. In the example below you can see that the girl’s hair is an orange colour and when you look at the colour wheel you can see that the colour closest to her hair is directly opposite the blue colours you see in her clothes and the background.

Split Complimentary uses the colours in the fashion shown below

A Triad colour scheme is achieved by using colours that are evenly spaced out in the colour wheel.

Analogous colours are the colours in the colour wheel that are alongside each other as shown.

Colour Psychology

This is to do with how certain colours can make someone feel. Certain colours are associated with certain moods or feelings. Colours that are associated with good tasting are used for fast food restaurant logos and by the same token, coours that are good smelling would be used for perfume packaging or bathroom products.

This weeks lecture was about interactive web design basics and incorporates the following sub-headings.

• User-Centric Design
• Simplicity
• Typography
• White Space
• Layout Colour
• Conventions
• Assessment

When creating a web page, designers are trying to engage with people and to do this they empathize with them. It is important that they put themselves in the place of the user and understand how they think when approaching a problem.In doing this the designers follow the principles to;

• Organize (provide the user with a clear and consistent conceptual structure).
• Economize (do the most with the least amount of cues and visual elements).
• Communicate (match the presentation to the capabilities of the user).

User-Centric Design

This is an idea or philosophy used by designers. It is the consideration of the needs, wants and limitations of the target audience of the web site in question. Attention is given to this at each stage of the design process.

Simplicity

At the moment design trends are favouring focused, clean and simple designs. In any two possible solutions to a problem, the simpler one is the prefered choice.

Typography

This is the type face or font used in a web page. We learned that it is not good to have too many type faces. Normally one or two is enough and it is important not to get carried away with variations in sizes and weighting. We also learned how fonts are usually divided into two types known as Serif and Sans-Serif. In THIS blog, the main article title reading “Creative Digital Media Week 4″ is sans-serif and here is an exaple of serif.

White Space

This is an important feature of good design. It improves legibility, gives a sense of simplicity and gives a sense of openness and style.

Layout

This is about the structure of a composition outlined using a combination of columns and rowes to give the user a sense of hierarchy when reading the piece.

Colour

This is percieved in slightly different ways by everyone. Colours can be used to create a feeling or the theme of the compositions by using warm colours, cool colours or neutral colours.

Conventions

Conventions reduce the learning curve for site users by negating the need to figure things out. In this way it is better for all websites to have a similar visual presentation.

Hyperlinks available on some of the sub heading titles.

This week’s lecture was about Design Principles. It was broken down into the following sub-headings.

• Simplicity
• Unity
• Emphasis
• Contrast
• Balance
• Space
• Movement
• Proportion
• The Golden Mean
• The Rule of Thirds

Simplicity

Visual economy or minimal design, leaving out all the non essential elements in a picture to get the message accross in the clearest way possible. By doing this, it puts the emphasis on what is really important in the picture.

Unity

This describes the relationship between all the individual parts of a composition. It is achieved when all the elements of the composition are working together to achieve a sense of harmony. It can be achieve through the use of form and colour and also by using space. Unitycan also be achieved by using a pattern or repetition in the composition.

Emphasis

Emphasis or Dominance in design provides the focal point for the piece. It is a wt of making the most important part of the composition stand out from the rest of the piece. It can be created using scale, colour and light, placement and isolaton.

Contrast

This is another form of creating emphasis in a composition. It can be achieved using contrasts in compoition, size, value and shape.

Balance

This is the way of comparing the right ad left of a composition by considering visual weight and importance. The two types of balance are Symmetrical balance and Asymmetrical balance. Symmetrical balance is when the composition is given it’s balace trough a mirror like image on both sides of the centre line of the piece. Asymmetrical balance is achieved when there is balance but in a more casual, less formal way.

Space

This is the distance or area between, around, above, below or within shapes and forms found in a composition. There is positive space (the area that is occupied) and negative space (the unoccupied space around the subject matter). Space harmony is achieved when there are equally shared amounts of positive and negative space.

Movment

This can be shown through the use of a line, anticipated movement, optical illusions, rhythm, stroboscopic photography and 3D rendering.

Proportion

This refers to the relative size and scale of the various elements in a design. The issue is the relationship between objects or parts of a whole. Architects often design buildig in public places to dwarf the viewer. This is most evident in churches and government buildings.

The Golden Mean

The origins of this are unknown. It is when a building has a ratio of 1.6 to 1. This ratio is also the proportions of the human body.

The Rule of Thirds

This is a series of lines through any photo through which the intersecting points of the lines the object in the frame should be. The image is divided into nine segments by two equally spaced horizontal lines and two equally spaced vertical lines. People who utilise this technique claim that placing the object in one of the intersecting points creates more tension, energy and interest in the photo which would be diminished if the objebt was merely centeredin the frame.

The lecture this week was about semiotics. This was broken down into the following categories.

• Signs
• Dyadic Model
• Tryadic Model
• Advertising
• Positive an Negative

Semiotics is to do with how humans recognize patterns of information and organize them to generate meaning. Humans can express the concepts in our minds in three ways. Using our voices, gesturing with our bodies and writing or drawing images. The definition of semiotics is the study of the relationships among patterns of perception and meaning. In a nutshell it is the study of signs.

A sign is a pattern of data which when somebody looks at it, it will tell that person what the sign is for without being a direct picture of what it signifies. For example a toilet door usually has a picture of a man or a woman to tell people that the toilets are behind that door. These pictures could be substituted for a gender specific image that we would associate with a particular sex and we would still get the message that one door is for the men to use and the other is for the women.

Dyadic Model

The founder of semiotics was Ferdinand de Saussure who was a Swiss linguist. He argued that there was no necessary relationship between the signifier (the word or symbol) and the signified (the actual meaning that the sign represents. He used the Dyadic Model which said that te copmposition of the sign was a signifier and a sign.

C.S. Pierce was an American Philosopher and he said there were three types of signs.

• Icons (signs that stand for an object by resembling it.)
• Index (using a casual link to signify it’s meaning.)
• Symbol (words, propositions or text.)

Triadic Model

The Triadic Model uses the sign (what is in the picture), the object (what the sign means to us) and the concept (the message it conveys).

Positivity and negativity can be portrayed using sigs also. It is posible to make the same image look positive in one sign and negative in another. This can be achieved by darkenning or brightenning the image it’s self, altering the backgrounds and placement of the text.

This blog is part of the coursework for the Creative Digital Media class for the startover program in the Institute of Technology Blanchardstown. The course ran from the week beginning 9th March to the week ending 17th May 2009.

Initially we were given the course overview and given instruction on how to use macs.  This was followed by information on the college’s moodle application. We were informed that all the notes we would use during lectures and tutorials were available online through moodle at the ITB web site. This was welcome news as it allowed us access to the course material in the form it was presented to us in class. Also it allowed us to make up for any notes we may have missed out on during the class.

Visual Language Exercise

The first exercise we were given was a drawing exercise in which we had to portray various moods or feelings using only four black squares. The headings we were given were;

• Order
• Increase
• Bold
• Congested
• Tension
• Playful

Here are some examples of what I drew.

The first two were suppopsed to represent order. The second pair portrayed increase and the final two drawings were to show bold. This was difficult to achieve using only squares.

congested, tension, playfulThe next set of drawing were to represent congested in the first two boxes. Tension in the next pair of boxes. And then finally playful was the theme for the last pair of boxes.male female

We then had to come up with ideas for male and female images to use on a door for toilets for example. You can see what I came up with here on the right.

Scanning

Next we were shown how to use the scanner in the lab to copy our drwings for use in our blog entries.

male and female symbols

Blog

The rest of the first lesson was used up telling us how to go about setting up our blog accounts on the blog web site.

www.play.com

USER CENTRIC DESGN:

This website is an online shopping service where people can buy a range of entertainment media products such as DVD’s, CD’s, books, video games, software, gadgets and even men and women’s clothing items. It is quite similar to the products available in retil outlets such as HMV or example. The site is aimed at both male and female shoppers with a target age group ranging from teenagers to mid life adults. The user can find what they are looking for easily using the top browser bar which shows all the different categories of product available through the website.

SIMPLICITY:

The website is well laid out with all the available services eaily seen in the top menu bar. The designers have avoided clutter on the page by installing a programme which allows the user to see a drop down menu automatically by hovering the cursor over any of the selections in the menu bar. The main menu bar is coloured orange to attract the user’s attention which is effective given the predominantly white background colour of the web page. The products offered initially can be viewed by scrolling down through the page and they are spaced well to avoid a congested look that might occur if all the products were packed closer together.

WHITE SPACE:

There is deliberate and good use of white space on the web page. All the products are easily browsed over without feeling like there is an overload of information. They have used white space to give each product it’s own section with room for an image of the product and labes to describe the name of the product and it’s price. There is no confusion over what any product is called or priced. The customer has to scroll down the page to see everything rather than jepardising the clarity of the page by squeezing more information into a smaller area.

COLOUR:

The web page uses three main colours. White, blue and orange. These three colours are all used in the play.com logo in the top left corner and then re-used throughout the central column of the web page. The background is white and they have used the colour blue to show the name of the product and orange is used to highlight the price the product is available for. The colours are used cosistently throught the site always using blue to indicate product names and orange when money is mentioned. There are other colours used in the columns on either sde where advertsements are placed. Colours used in the side columns are mostly yellow and purple which are quite close to the orange and blue of the central column which makes it stand out, but it also fits along with the origional colour scheme.

CONVENTIONS:

The sie makes use of the western left to right format. The logo is in the very top left corner which is the most common place for lgos to be as it is wher our eyes are naturally used to aiming when we set out to read something. There is a main taskbar across the top and also a menu down the left hand side of the page. There is a search box at the top of the screen because it is the type of website where the costumer would in many cases already know what they are looking for and would want to search for it almost immediately. Links wihin the website are indicated using arrows after the word to show that if you click on the word it will bring you somewhere else away from the homepage. This style is consistantly used throughout the website.