design principle and application pt1
DESCRIPTION
Design Principle and Application Pt1. 26 February 2014. Presentation Schedule Design elements & principles Web design principles guidelines. Presentation. Design Elements & Principles. To understand elements and principles, person need to put in designer’s shoes . Design Elements . - PowerPoint PPT PresentationTRANSCRIPT
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