Design Principles

Page 1

SSUU SSUU SSUU SSUU SSUU




TABLE OF CONTENTS CLOSURE CHUNKING BLUE EFFECTS BLACK EFFECTS ATTRACTIVENESS BIAS AREA ALIGNMENT ALIGNMENT AFFORDANCE ACCESSIBILITY FIBONACCI SEQUENCE DUNNING-KRUGER EFFECTS EXPECTATION EFFECTS COLOPHON

6–9 10–13 14–17 18–21 22–25 26–29 30–33 34–37 38–41 42–45 46–49 50–53 54–55



C L OS UR E


Viewing incomplete shapes as part of a whole shape or image.

A principle from the Gestalt principles of perception. A pattern or image becomes more interesting or grabs attention better when it requires closure. Most likely derrived from a primitive form of threat detection from our hunter-gatherer ancestors needing to quickly identify hidden threats in the surrounding area possibly partially hidden from the environment.

Closure can be most strongly identified when elements or shapes are positioned near each other in space. This principle should be used when a designer wants to create a more interesting piece or when designs involve simple and predictable patterns to increase the interestingness of the piece.




CHU NKI NG


A piece of information that has been combined with other information or separated in such a way that it makes it easier to remember in short-term memory.

The most common example of chunking involves the way we write phone numbers. Generally, we would have a hard time remembering a ten-digit number, but when separated into sections, it becomes much more memorizable. Originally it was thought we could efficiently memorize seven, give or take two, chunks. Currently the estimate is at four, give or take one, chunk. A designer should chunk information when it is required for a viewer to remember or recall information quickly. When designing for a high-stress environment, it is advised to chunk important information for maximum cognitive performance.




B E F T

U F C

L E E S


Subconscious effects or behaviors triggered by the colour blue.

Blue is the world’s most popular colour. most people associate blue with water, purity, and reliability. It is also associated with spoilage in food. Blue can also signal inner security and confidence. Blue is a colour of honesty, opennes, and creativity while also promoting aspirational thinking.

It promotes alertness and well-being during the day, making it a common colour to paint offices. A designer should use blue when one needs a generally popular colour to appeal to a wider audience. It should be used to promote any of the feelings listed above but should be avoided when promoting food or sleep as it disrupts the sleep cycle.




BL A CKE F F E CT S


Subconscious effects or behaviors triggered by the colour black.

Black is a colour commonly associated with negative emotions. Many cultures see it as a colour for evil, darkness, dominance, aggression, and dirtiness.

On a brighter note, black products or products that are marketed using predominately black are seen as higher value, classy, and have a timeless appeal.

The stigma agianst black may have been a result of our ancestors fear of the dark and the nocturnal predators lurking in it.

A designer should use black when they want to convey authority or value in a product or service. they should also use it to signal dominance when marketing something in a highly competitive field.

When a sports team wears mainly black, they are seen as more aggressive and more likely to cheat. They are also seen as harder opponents and are therefore other teams may have more anxiety facing these teams.




ATTRACTI VENESS B I A S


The tendancy to view attractive people as always being smart, successful, and moral.

Stereotypical attractive people are automatically pervieved to have positive attributes such as being successful and have great social skills. People are perceived to be attractive if they have symmetrical facial features, golden ratio proportions in their body structure, such as waist-hip-shoulder ratios, perfectly clear skin, and signs of health and fertility. Women try to appear as more attractive by enhancing their appearence of fertility. They show this by wearing lipstick for redder lips or applying makeup to their faces for the appearence of clearer skin. Men try to appear as more attractive by enhancing their social status. They show this by buying expensive cars or wearing expensive accessories such as watches. A designer should use the attractiveness bias when a design involves interactions such as advertising or sales.




A R E A

A L I G N M E N T


Alignment based on the overall area of elements as opposed to the center or edges of elements

Asymmetrical elements often won’t align properly with other elements because of their shape using center- or edge-alignments due to the nature of their edges. In these cases, a designer should align these elements using the perceived area of all the elements. This may be the exact center, or just slightly off.

Area alignment is a technique that can only be applied using the designers eye. One must balance the elements and gently shift the elements until they appear aligned. Area alignment can also apply to oddly shaped text boxes or text boxes with ragged edges.




ALIGNMENT


Alignment based on the edges of elements along a common center or edge.

Aligning elements to create a sense of unity in a design.

consider using justified type to provide more alignment cues.

Left- and right-aligned text boxes will always provide better readability in a design versus center-aligned text.

To improve the overall design aesthetic, a designer should consider aligning some elements with others. This will create better cohesion in a design.

When a design contains many complex elements and lots of text, a designer should




A F F O R D A N


C E

How a thing is designed will influence how it is used.

How a thing is designed will make it better suited for some uses than others. A door with a horizontal bar will afford being pushed but negatively afford being pulled, and vice versa. A door with a verticle bar will afford being pulled, but negatively afford being pushed. Norman doors are doors that will do the opposite of what is first thought of as the

right way to use a door. A Norman door will require signage or multiple tries to figure out the proper use and therefore negatively afford being used. Design for proper usage so a design will be inconceivable to use any other way.


PUSH


PULL


A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y

A C C E S S I B I L I T Y


Things should be designed so as many people as possible can use the thing without having to alter the design (add or take away) to allow others to use it.

Accessibility design is focused on accommodating people with disabilities and should be designed to benefit everyone. To design for accessibility, one should position information so that seated people or people with poor eyesight would be able to perceive them. People with limited mobility should be able to use a thing without having to move much or use repetitive actions and sustained physical activity for a thing to have been designed with accessibility in mind. A design or signage should be learnable by everyone, even people who don’t speak the language. For example, signage at an airport should be so iconic that one would not need to know the language or symbol being used to know what it means.




FIBONACCI SEQUENCE


A numerical sequence that’s created by adding the two previous numbers in a sequence together to create the next number in the sequence

The Fibonacci sequence is a sequence most commonly found in nature. (i.e. flowers, galaxies, bones in the human hand, pinecones, and more.)

The Fibonacci sequence should be used when designing composition, chosing heading, subheading, body copy, and caption text sized.

The fibonacci sequence in an approximation of the golden ratio. In the beginning of the sequence the ratio is more of a rough approximation, but as the sequence goes on the ratio gets increasingly accurate.

It should also be used when chosing the size of line breaks between words, paragraphs, and headings in relation to the previous section and the section under the heading itself.




D I K E E C

U N R R F T

NN G– UG F E


The tendancy for unskilled people to overestimate their own ability or underestimate the ability of others.

Unskilled people lack the knowledge or experience to understand their own ability or understand the ability of others. An unskilled person can’t understand their lack of ability because they’re too incompetent, and in order to overcome their lack of ability they have to be competent enough to understand their lack of ability, but they can’t do that because they’re too incompetent.

A highly skilled person, however, lacks the ability to understand their own skill and therefore overestimates others’ skills and underestimates their own. To combat this effect, one should conduct regular critiques to promote good feedback and allow for people to better understand their own skill level.




EX E C A T ONE F E CT

P T I F S


Changing one’s behavior or perception based on previous personal experience or experience of others.

When one expects a certain thing to act one way, that will change how one reacts to a certain thing. When going to the opera, one would primp and prepare because that’s one’s perception of an opera—a high-class, put-together scene. This effect could also prove to be a problem in focus groups, surveys, and interviews because the individuals in these situations could think they have to perform in a certain way and therefore skew the results. A designer should consider expectation effects when conducting research, interviews, and focus testing. One should always choose blind testing and observational research over guided research and testing. One should always use neutral questions when testing.



SQUARE SQUARE SQUARE SQUARE SQUARE


COLOPHON CARDO (HEADER)

(BODY)

ARCHIVO BLACK (HEADER)

100pt 72pt 71pt 30pt 21pt 13pt/15.6pt 8.5pt/10.2pt 7.5pt/14pt 141pt 116pt 74pt 40pt 27pt 24pt 19pt





ISS ISS ISS ISS ISS


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.