DESIGN PRINCIPLES AND ELEMENTS By Mark Gillan
ELEMENTS OF DESIGN Components or part of which can be defined in any visual design or art work. The carry the work the structure PRINCIPLES OF DESIGN Concepts affecting content and message DESIGN
RULES OF DESIGN Principles of Design Movement Balance Emphasis Unity Elements of Design Line Shape Texture Value & Colour Space
PRINCIPLES OF DESIGN by Mark Gillan
Balance Movement / Rhythm Proportion and size Order Emphasis / contrast and dominance / subordination Unity PRINCIPLES OF DESIGN
Anticipated Movement Blurred outlines Multiple images Optical Movement Other forms of optical movement MOVEMENT
A LOOK AT MOVEMENT Anticipated Movement We are constantly waiting for the leaning tower of Pisa to fall. Why? Because of the anticipated movement we have within our minds. We have all experienced an object tipping to the point of topple Blurred outlines An image with blurred outlines is perceived to be moving Multiple images A process of movement whereby stages of are captured. The start, middle and end Optical Movement The eye is forced to move from one element to another by using placement of objects, colours, strategic emphasis and curves Other forms of optical movement The eye can move from one object to another, tricking the brain into believing it is moving. Have you ever sat on a train and thought the platform is moving? Optical illusions can send incorrect signals to the brain Design can provide the eye with movement throughout a publication Studying how the eye moves around objects, focussing on one thing after another and the reasons as to why we see one object before another can assist design strategy for movement around the publication. A flow from one element to another
OPTICAL MOVEMENT Where is the black dot? How many legs does the elephant have?
SERIOUS THOUGHT How does the eye move through a web page? Are the images assisting movement? Does each section of the page encourage movement? Do we move too fast or too slow? Does the visitor get bored working through each part of the page / image or does the visitor follow through the start, middle and end? What kind of movement is used? How does the designer ensure the viewer moves through the web page?
Symmetrical (formal balance) Asymmetrical (informal) Radial BALANCE
BALANCE EXPLAINED Symmetrical (formal balance) Using a vertical line will highlight a mirror image. It is pleasant to the eye. Think about how beautiful people tend to have a more symmetrical face than others. Our brains find an immediate order and is content with looking at all other parts within the order of appearance Asymmetrical (informal) Although not mirrored, our brain can find comfort with other parts performing the function of a level order. A balance can be found in many other ways such as lots of small objects being offset by one large object, as well as: Colour balance we tend to look for vibrant colours first and as long as we have a balance across the display then our brains find comfort Value balance between light and dark Shape across the whole display, offering the viewer a balance of shapes on one side as opposed to the other Positioning A sharp object in the foreground and less distinctive objects in the background but balancing Texture using a balance of texture can provide movement of the eye across two very different objects but providing Radial All parts of a display radiate from the centre, providing balance outward in all directions
EXAMPLE OF BALANCE Symmetrical Asymmetrical Radial
Attracting attention by use of focal point within a page or image: Emphasis by Contrast Emphasis by Isolation Emphasis by Location EMPHASIS
EMPHASIS IN MORE DETAIL Emphasis by Contrast Larger subjects in the foreground become a focal point Colour, for example a solitary red poppy within a field of green grass becomes an immediate focal point Lines, with various horizontal objects, one solitary vertical object automatically grabs the eye Irregular shapes through the eye to any standard geometric shape as the brain looks for order within chaos Emphasis by Isolation An item on its own within white space will draw the eye Objects grouped together with individualised object positioned in isolation to the side will become the natural focal point as our brain questions why something has been isolated from the community. Our natural social integration questioning comes into play Emphasis by Location Placing objects centrally will often be perceived as the focal point Objects placed in between lines of perspective will typically be observed first
EMPHASIS - EXAMPLES Emphasis by Isolation Emphasis by Contrast
o Proximity o Repetition / Consistency o Continuation UNITY
UNITY AND BRINING IT ALL TOGETHER The ability to tie all the parts of a design together as the one piece of work (also known as the design s Gestalt). A design, first and foremost is a whole piece, followed by each section therein. It is important to bring everything together, tie it all as one, allowing the other disciplines of design to work with you.
UNITY POSSIBILITIES Proximity Bringing all objects within an area close together and providing the viewer with a pattern. Remember the brain likes to achieve some sort of order Repetition / Consistency Each object having something in common, such as a colour, shape, texture or pattern. As soon as we see a group of people wearing the same hat but different clothing we continue identify them as a grouping, a unification because of one common article Continuation Objects can be linked with a continuation of line, edge or direction. Lines and colour can be used to separate but can also be used for unity. A continuous line or colour can link objects together, whereas broken lines or colours can separate
SERIOUS THOUGHT Has the designer used balance? How is the page balanced or how is it not balanced? Has the designer used a sense of proportion and size? How is the page using or how should it be using size and proportion? Is there any emphasis placed upon any content? Describe how something is emphasized or how it should be emphasized. Is there a sense of unity and belonging throughout? Describe how everything has been brought together or how unity should have been used with an explanation of what impact it has upon you the reader.
ELEMENTS OF DESIGN by Mark Gillan
Lines Shapes Texture Value Colours Space ELEMENTS OF DESIGN
ELEMENTS OF DESIGN IN MORE DETAIL Lines direction of lines can convey mood, for example, horizontal lines are calming and vertical lines are more dynamically active Shapes can be colour arrangement or lines enclosed to create shapes. Curves are friendly and inviting Texture allows objects to have depth, to provide the viewer with a surface quality impression and can be used as a background image or to show emphasis to area sections Value relative lightness or darkness of an area. Increasing or decreasing the value of a section can provide emphasis through focal points as well as creating depth Colours warm colours such as red, orange and yellow tend to have a forward advancing quality as opposed to cooler colours such as blue and green that tend to recede. We will look at colours later in greater detail Space sometimes referred to as white space and is good to have. A cluttered area suggests lack of importance, no priority, just a mess. Place the same information spaced correctly and with white space, everything seems more important and brings attention to the important parts. Space will allow the eyes to have a breather, we all need space at times to gather thoughts and to continue forward
GOOD OVERALL DESIGN Unity and Variety Support the message, do not overpower Appropriate design for the message being conveyed
GOOD OVERALL DESIGN UNITY AND VARIETY Unity and Variety The design must fit together but have plenty of variety to ensure the viewer does not become uninterested too quickly There should be consistency from one page to the next. The visitor should always know where they are at any given point Logos are important for branding. It is important a logo fits into a design and pages work with the branding Unity across the branded website with colours, fonts and layout. Consider all the design principles and elements
GOOD OVERALL DESIGN THE MESSAGE Support the message, do not overpower Everything within a design should support the conveyance of a message, the design should not overpower and distract away from the message Bizarre punctuation, weird fonts, strange images can all bring attention to the actual elements themselves and the visitor is too busy trying to have their brain cope with such strange happenings it totally misses the message itself
GOOD OVERALL DESIGN APPROPRIATE DESIGN Appropriate design for the message being conveyed Contemplate the target audience The fonts, style, colours and layout must match the message. Design must be relevant to the audience and assist the information being placed in front of the viewer. It might look good upon a website for a large corporation but not appropriate for a nightclub or a young audience Fancy scripts, elaborate fonts and excessively indulgent chat rooms might allow the designer to showcase skills but it might not be appropriate for the job in hand
SERIOUS THOUGHT Is there a path of movement using line, shape or form? How is it used or how could line, shape or form be used? What colours have been used? Are they colours that work together or against each other in contrast or use of hue, value or intensity? Is texture present or should it be and where? Do you have a feeling of space and perspective or is everything cramped or too loose for comfort? Describe your thoughts relating to the elements of design.
QUESTIONS Who is the audience? Who is everything aimed at? Spelling mistakes, poor presentation, strange wording, grammatical errors, out of place, distracting, confusing message? Has the designer done a good job overall? Why do you think this? Could the designer have improved upon the overall appearance, presentation and principals of design? Why do you think this? As a reader / user, would you return to view or read or would you just scan through very quickly? How effective as a user do you think the design has been?