Design Principle and Application Pt1

26 February 2014

Presentation Schedule Design elements & principles Web design principles guidelines

PresentationTopic Group Members PresentationM-learning – murtala,badawi 12 March 2014Game based learning- ting , avind, roslizaContent Management System (CMS)

malik, matthew, shirley

Virtual Community of Practice Aisyah, Fatima, sarah

Virtual Classroom dennis,alan, leroy 19 March 2014Web 2.0 and education- muhamaddin,nitesh

, hafizPersonal Learning Environment (PLE)

azura, azim, asyraf

Future Education thulfiqar, wael, gharawi

Social Media for learning Subatra, mohamed talle,rami

Design Elements & Principles

To understand elements and principles, person need to put in designer’s shoes

Design Elements are the building blocks of all designs, chosen to convey

the message — beyond the actual words or photos used.

utilize the five elements of design :

Other concepts sometimes listed as elements of design are form, space

line shape texture

colorvalue or tone

A line is a form with width and length, but no depth. Artists use lines to create edges, the outlines of objects. A line is created by the movement of the artist's pen.

The direction of a line can convey mood. Horizontal lines are calm and quiet, vertical lines suggest more of a potential for movement, while diagonal lines strongly suggest movement and give more of a feeling of vitality to a picture

line

Shape is an area that is contained within implied line, or is seen and identified because of color or value changes. Shapes have two dimensions, length and width, and can be geometric or free-form.

Design in painting is basically the planned arrangement of shapes in a work of art. In a picture, the shapes that the artist has placed are considered the positive shapes.

The spaces around the shapes are the negative spaces. It is just as important to consider the negative space in a picture as the positive shapes

shape

Texture refers to the surface quality, both simulated and actual, of artwork.

Techniques used in painting serve to show texture, i.e. the dry brush technique produces a rough simulated quality and heavy application of pigment with brush or other implement produces a rough actual quality

texture

Color has three properties. The first is hue, which is the name of the colors. The primary hues are yellow, red, and blue. Secondary colors are made by mixing two primaries. Intermediate colors are mixtures of a primary and adjacent secondary color.

The second property of color is value, which refers to the lightness or darkness of hue.

The third property of color is intensity, which refers to the purity of the hue (also called

"chroma").

color

12

• -Black-color of authority and power. • -It is popular in fashion because it makes

people appear thinner. • -It is also stylish and timeless. • -Black also implies submission. Priests wear

black to signify submission to God. Some fashion experts say a woman wearing black implies submission to men.

• -Black outfits can also be overpowering, or make the wearer seem evil. Villains, such as Dracula, often wear black.

http://www.precisionintermedia.com/color.html

http://www.infoplease.com/spot/colors1.html

Black

13

White Brides wear white to symbolize innocence and

purity. White reflects light and is considered a summer

color. White is popular in decorating and in fashion

because it is light, neutral, and goes with everything. However, white shows dirt and is therefore more difficult to keep clean than other colors.

Doctors and nurses wear white to imply sterility.

Red

14

The most emotionally intense color, red stimulates a faster heartbeat and

breathing. color of love. Red clothing gets noticed and makes the

wearer appear heavier. Since it is an extreme color, red clothing

might not help people in negotiations or confrontations.

Red cars are popular targets for thieves.

15

This color does not usually work well with greens or purples of the same intensity, causing a vibrating effect on the eyes.

It is a perfect color for 'Buy Now' or 'Click Here' buttons on Internet banners and websites as it attracts the eye.

In decorating, red is usually used as an accent. Decorators say that red furniture should be perfect since it will attract attention

Blue

16

-The color of the sky and the ocean, blue is one of the most popular colors.

peace, harmony, tranquillity, health, coolness, confidence, loyalty, conservatism, dependability

and technology

-It causes the brain to send off 11 chemical tranquilizers and is a wonderful calming color.

Blue

17

-but avoid using blue when promoting food and cooking because blue suppresses appetite.

-Blue can also be cold and depressing. Fashion consultants recommend wearing blue to job interviews because it symbolizes loyalty.

Blue

18

-People are more productive in blue rooms. -Studies show weightlifters are able to handle

heavier weights in blue gyms.

Green

19

symbolizes nature easiest color on the eye and can improve

vision. calming, refreshing color.

Green

20

People waiting to appear on TV sit in "green rooms" to relax.

Hospitals often use green because it relaxes patients.

Brides in the Middle Ages wore green to symbolize fertility.

Dark green is masculine, conservative, and implies wealth.

Yellow

21

Cheerful sunny yellow is an attention getter.

considered an optimistic color people lose their tempers more often in

yellow rooms, and babies will cry more. most difficult color for the eye to take in,

so it can be overpowering if overused. enhances concentration, hence its use for

legal pads. It also speeds metabolism.

Yellow

22

Yellow can convey sunlight, joy, happiness, optimism, idealism, wealth (gold), summer and hope.

It is the brightest color and intellectuals love yellow. It takes more chemicals in the eye to see the color

yellow. Websites targeting older people should look at other

colors as yellow can make them feel anxious or angry.

Negatives: Cowardice, illness, hazards, dishonesty Refer : http://www.bigoakinc.com/limb/color-website-

design.php

Orange

23

Orange conveys creativity, confidence, balance, heat, enthusiasm, flamboyance and playfulness. Orange increases oxygen supply to the brain, producing an invigorating effect, and stimulates mental activity. It is highly accepted among young people. Orange is very effective for promoting food products and children's products such as toys. Negatives: Warning, danger and cheapness

24

Beige and Grey• As neutrals, they can be used in

combination with almost all colors and still work well visually.

• Grey works well in office environments and promotes productivity and stimulates creativity.

• Negatives: dull, monotonous, somber and smoky

Purple and Brown

25

Purple- The color of royalty, purple connotes luxury, wealth, and sophistication. It is also feminine and romantic. However, because it is rare in nature, purple can appear artificial.

Brown- the color of earth and is abundant in nature. Light brown implies genuineness while dark brown is similar to wood or leather. Brown can also be sad and wistful. Men are more apt to say brown is one of their favorite colors

26

If you are not good at mixing colors …google for “web color template”

Principles of Design as ways to work with and arrange the

elementsHarmonyVarietyBalance

Movement

ProportionDominance

Economy

Color harmony may be achieved using analogous or complementary colors

Brings together a composition with similar units

1.Harmony - Deals with repetition

Repeating a similar shape but changing the size can give variety and unity at the same time. Keeping the same size, but changing the color can also give variety and unity at the same time.

elementsprinciples

2.Variety- The use of dissimilar elements, which creates interest and uniqueness

Balance

symmetrical asymmetrical radial

3.Balance- is arranging elements so that no one part of a work overpowers, or seems heavier than any other part.

Symmetrical Balance(formal balance)

Both sides are similar in visual weight and almost mirrored.

Often looks more stiff and formal.

Asymmetrical Balance (informal balance)

both sides are similar in visual weight but not mirrored. It is more casual, dynamic, and relaxed

feeling.

Radial Balance

is equal in length from the middle

Repeating a similar shape but changing the size can give variety and unity at the same time. Keeping the same size, but changing the color can also give variety and unity at the same time.

elementsprinciples

4.Proportion- involves the relationship of size between objectsWhen all parts of the artwork - size, amount and location fit well together

Foregroundthe trees act as the dominant element,

Middle-groundthe house and hills as the secondary element,

Backgroundthe mountains as the tertiary element.

5.Dominance- Hierarchy / Focal point - attention to a point in the artwork

Without Dominant:Direction design isconfusing

Dominance of Size adds interest

Monotonouswithout one shape dominating

Cover album

PhotographPainting

6.Movement - the path your eye takes through the art your eye can be asked to look at lines, edges, shapes and color.

is omitting all non-essential or un-important elements and details which don't really contribute to the essence of the overall composition

PhotographTunnel in the Woods – Susan Kimball

7.Visual Economy- keeping your artwork simple is the key to good composition

Good combination of “ingredients” will produce a droolicious cake

Web Design Principles

Principles of Web Design Design is more than just slapping HTML tags up onto

a page, and by using these principles will help you build more pleasing and useful designs.

suggest how a designer can best arrange the various elements of a page layout in connection to the overall design and to each other.

how many colors are used, the sizes of fonts, how many columns of text there are, or whether pictures appear next to each other or spread across the page — creating effective and pleasing arrangements of text and graphics.

Principles of Web Design

how many colors are used, the sizes of fonts, how many columns of text there are, or whether pictures appear next to each other

or spread across the page

create effective and pleasing arrangements of text and graphics

Principles of Web Design

Alignment

Balance

Consistency/

Repetition

Contrast

Proximity

White Space

1.Alignment brings order to chaos. How you align type and

graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design.

there is a common alignment -- top, bottom, left, right, or centered -- between blocks of text and graphics on the page.

Your text alignment aid should not hinder readability. If certain elements are out of alignment, was it done purposefully with a specific design goal in mind?

http://www.arngren.net/

2.Balance Balance is the distribution of heavy and light

elements on the page. Larger, darker elements appear heavier in the

design than smaller, lighter elements. http://www.elithecomputerguy.com/

The principle of balance shows you how to lay out your pages so that they work.

3.Repetition / consistency Repeating design elements and consistent use of

type and graphics styles within a document shows a reader where to go and helps them navigate your designs and layouts safely. Insure that your document utilizes the principles of repetition, consistency, and unity in page design.

http://www.howstuffworks.com/hsw-podcast.htm

Patterns are easy for humans to comprehend, and repetition provides patterns that make your site easier to comprehend.

4.Contrast When most people think of contrast, they

typically think of colors or black and white. But there is more to contrast than color.

In design, big and small elements, black and white text, squares and circles, can all create contrast in design.

Contrast helps different design elements stand out.

5. Proximity How close together or far apart elements are

placed suggests a relationship (or lack of) between otherwise disparate parts. Unity is also achieved by using a third element to connect distant parts.

Are title elements together? Is contact information all in one place? Do frames and boxes tie together or separate related elements in your document?

6. White Space Designs that try to cram too much text and

graphics onto the page are uncomfortable and may be impossible to read.

White space gives your design breathing room.

In a group of 2, present 1example of bad design and 1 example of good

design website

15 minutes

Group Good Design Web Url Bad Design Web UrlMohamedin/Subatra

www.maybank2u.com www.theworldsworstwebsiteever.com

Rosliza/ Aisyah

www.instructables.com www.lingscars.com

Thulfiqar / rami

http://www.apple.com/ http://110.4.40.102/~candycom/wp/

Fatimasarah

www.lynda.com www.mamascheeis.com

Alan OngHwei Teeng

http://my.burberry.com/ http://mamascheesies.com/

Matthew,malik & cherley

www.2advanced.com Historianofthefuture.com

Norazim & Hafiz

www.envato.com www.mrbottles.com

Murtala & Badawi

Vr-zone.com www.sixtiespress.co.uk

Dennis & Leroy

Jimvarney.org/index.html Motionographer.com

Mohd Talle/ Adika

www.bestwebgallery.com www.wrdaonline.org

SummaryPrinciples of design

Principles of Multimedia learning

Principles of Web design

HarmonyVarietyBalanceProportionDominanceMovementeconomy

CoherenceSignalingRedundancySpatial ContiguityTemporal ContiguitySegmentingPre-trainingMultimediaModalityPersonalization Voice Image

AlignmentBalanceConsistency /RepetitionContrast ProximityWhite Space