Part ThreeDesign Principles: Connecting And Separating Elements Through Contrast And Similarity
- By Steven Bradley
- September 22nd, 2014
- 0 Comments
Similarity and contrast, tie and separation, grouped and ungrouped are all ways to report a varying oneness and disproportion between elements. Based on a information they carry, we’ll wish some elements to demeanour similar, to prove that they are associated in some way. We’ll also wish to uncover that some elements are conflicting and go to conflicting groups.
Key to display both is a manifest characteristics of elements and their relationships. If dual elements are associated in some way, afterwards they should uncover identical manifest characteristics. If a elements are different, afterwards they should demeanour different.
Note: This is a third post in a array on settlement principles. You’ll find a initial dual posts here:
- “Design Principles: Visual Perception and a Principles of Gestalt1”
- “Design Principles: Space and a Figure-Ground Relationship2”
Primitive Features
How do we uncover contrariety and likeness between elements? The answer lies in a obsolete facilities of a elements.
Primitive features3 are a unique characteristics or attributes that an component competence have. For example, what tone is a element? How vast is it? What figure is it?
These elements have conflicting obsolete facilities — in this case, of shape, tone and texture.
Each of these things communicates something about a element. If one streamer is bigger than another, afterwards we assume a bigger streamer is some-more important. We competence perspective an component with a figure that’s angled and pointy as being dangerous.
Sometimes, an element’s attributes need to be compared to a same attributes of another component in sequence to have meaning. The headings from a prior divide are a good example. A streamer should usually be bigger than another streamer or another square of text. The comparison is required for bigger to meant anything. It’s by comparisons like these that we promulgate likeness and contrast.
By giving visually identical characteristics to mixed elements, we promulgate that something is identical about a elements. If dual elements on a web page are both red circles, it’s healthy for a spectator to ask why. Why are both red? Why are both circles? The expected finish is that a elements are associated in some approach over how they look. The elements’ likeness implies that they lift a identical message.
Likewise, by requesting visually conflicting characteristics to mixed elements, we promulgate that something is conflicting about a elements and a messages they carry.
Any evil of an element4 that can be sundry can be used to make elements demeanour a same or different. A few characteristics, however, are many mostly used to uncover likeness and contrast. In no sold order, these are:
- size,
- shape,
- color,
- value,
- texture,
- position,
- orientation.
A rectangle and a round contrariety in shape. Two red equipment are identical in color. A red rectangle and a red round contrariety in figure and uncover likeness in color. How we change a likeness and contrariety of elements by their manifest characteristics will establish many about what those elements promulgate to a viewer.
Note: While obsolete facilities are a primary approach to visually uncover contrariety and similarity, we have other ways to uncover both — for example, a tangible calm that a elements carry. The disproportion “stop” and “go” contrast. The disproportion “stop” and “cease” are similar. Images contrariety with text; prolonged paragraphs contrariety with brief paragraphs; and so on.
Contrast
Human beings are connected to notice difference. It’s a presence resource to fast compute a crony from something that wants to eat us. Being means to fast establish that was vicious to returning safely home to a cavern during night.
Our ability to fast notice differences is what creates contrariety so powerful. Contrast attracts attention. It draws a eye. It gets noticed. By giving an component characteristics that are visually conflicting from a elements that immediately approximate it, we can emanate points of seductiveness and emphasis. In fact, given a contrariety of an component with a vicinity is so good during sketch courtesy to a element, it’s maybe a many effective approach to supplement seductiveness and fad to a design.
Contrast does some-more than attract attention. It establishes bounds between elements, too. For example, resisting a credentials tone of a categorical calm and that of a sidebar is one approach to uncover where one ends and a other begins.
Differences that mount out can yield emphasis5, highlighting vicious elements and information. The larger a difference, a larger a contrariety will be. The larger a contrast, a some-more vicious a component will appear.
For example, dual ways to set off calm are bolding and italicizing. Boldness typically shows some-more contrariety and, thus, stands out more. Spotting confidant calm during a peek or from a stretch is easier than spotting italicized text.
If dual elements are meant to be different, go vast with a contrast. You don’t wish viewers to consternation possibly a disproportion is intentional. Make certain a contrariety is apparent and clearly intentional. Leave no room for misunderstanding. Don’t contrariety calm that’s 16 pixels with calm that’s 15 pixels. People won’t notice a disproportion immediately and, once they do, it will seem to be some-more of a mistake than a unwavering decision.
Be clever not to overdo it. Use contrariety sparingly.6 If all contrasts and tries to pull courtesy to itself, afterwards zero will mount out. You’ll finish adult with manifest sound that causes confusion.
Too many contrariety can mangle a peace and togetherness in a design, streamer to disharmony and confusion. This competence be what you’re after in a certain design, yet some-more mostly than not it isn’t. Decide that few elements need to mount out, and make them demeanour unequivocally conflicting from all else.
Contrast and Gestalt
While any gestalt component is about display likeness and contrariety in some way, we wish to prove out dual of them. Contrast is vicious to final a figure-ground attribute and display prevalence and focal points7.
- Figure-ground
One of a initial things we do when observation a multiple is to establish what’s a figure and what’s a background8. This attribute helps to set context for all else in a composition. Figure and belligerent need to contrariety with any other or else a spectator will have problem final that is which. - Focal points
These are elements of captivate and interest. They’re designed to demeanour conflicting from their evident surroundings. The contrariety is what helps them mount out and pull attention. The component that stands out a many in a multiple is a widespread element. Elements that mount out in a multiple yet to a obtuse grade are focal points.
Contrast and likeness during work: The immature circles and orange bars are identical to other immature circles and orange bars, yet they contrariety with any other.
Similarity
The same presence resource that enables us to fast see disproportion also helps us to see when things are a same. It points us to who or what we can trust and to what competence be dangerous. Being means to commend likeness is given tellurian beings are glorious during anticipating patterns9. Patterns assistance us know a universe around us, yield context and make training quicker, to a prove of something apropos premonition or instinct.
When we settlement dual or some-more elements to demeanour similar, we are indicating that what’s loyal about one is loyal about a other. If one of a elements is important, afterwards a other one is expected important, too. If one component is clickable, afterwards other elements that are visually identical will substantially be clickable, too. It’s how we can fast commend links in a retard of text. Visual contrariety shows that links are conflicting from a rest of a text, while a manifest likeness among links tells us, once we’ve detected what one does, that all of a links are clickable.
Similarity is about display tie and display that mixed equipment are associated in some way. It brings laxity and coherence to a design.
Similarity complements a healthy strategies for estimate information10. When we take in a manifest vicinity and try to make clarity of it all, we naturally organisation objects into chunks in sequence to reason some-more information in a operative memory. We serve group, classify and structure all before it becomes partial of a long-term memory.
Designing identical information to be visually identical helps a user to routine and sense a information, that are dual vicious goals of design.
The some-more that obsolete facilities of elements demeanour a same, a some-more identical they’ll demeanour and a some-more viewers will cruise they’re a same. They’ll seem grouped and related11 in some way, even if usually one evil is shared; and a some-more they demeanour a same visually, a some-more they’ll be viewed as being a same.
We use likeness to build structure12 and pattern. Any likeness between dual elements in a multiple implies a structure. Additional likeness fills out a structure and leads to pattern, hardness and rhythm.
Not all signals that uncover likeness are equal. In a pattern below, would we organisation a objects by figure or color? Do we see a organisation of circles and one of squares, or do we see one red organisation and one blue group?
You substantially beheld tone first, organisation a elements as red and blue. This suggests that tone is a stronger communicator of likeness than shape. This is not absolute, however. For example, someone with red-green tone blindness wouldn’t expected notice a disproportion between red and immature objects before seeing a shapes of those objects.
Similarity and Gestalt
Again, any gestalt principle13 is about how we know a likeness or disproportion between objects. Many of them can be review as tips to uncover similarity.
- closure
different elements that competence be partial of a identical whole - symmetry and order
mirrored elements that seem to go together - uniform connectedness
similarity by visually joining elements - common regions
similar equipment enclosed together - proximity
similarity by enclosures in space - continuation
similarity by rhythms in space - common fate
similarity by movement - parallelism
similarity by orientation
The Relationship Between Similarity And Contrast
Contrast and likeness uncover a relations between elements. Nothing has definition in isolation.14 An component needs to be shown in context with other elements.
What does one vast component cornering a smaller component in a settlement imply? What does one retard of calm being indented some-more than others with light gray suggest?
A vast round cornering a tiny circle
Contrast and likeness are unequivocally usually conflicting ends of a scale. On one finish of a scale, objects demeanour wholly different; on a other end, they demeanour accurately a same.
Most of a time, we’re somewhere in between a extremes, and a things we settlement will share some yet not all characteristics. Similarity and contrariety are expressions of where along a scale objects distortion relations to any other.
Even yet we haven’t been pithy about it, all I’ve pronounced about possibly likeness or contrariety relates to a other. Having one is unfit though also carrying a other. Contrast is a miss of similarity, and likeness is a miss of contrast. It’s all about where it lies on a scale.
Thinking about them together creates them some-more impactful. You can use a singular feature, such as color, to uncover that several elements are related, and afterwards use a conflicting tone to uncover that several other elements are associated yet conflicting from a initial group. With usually dual colors, we can emanate dual graphic groups of connected elements.
Color coding15 in this approach is an effective approach to specify information so that a spectator can learn and know during a glance.
When all is a same, we get tedium. When all is different, we get noise. The best designs have a healthy brew of likeness and contrariety and uncover a transparent bargain of what they’re perplexing to communicate.
Examples Of Contrast And Similarity
Contrast and likeness can be found on any website. Both need to be present. Imagine a website carrying no contrast. We’d all have a tough time reading calm if it and a credentials were a same color. Just as formidable would be any word or word carrying a conflicting style.
I’ll prove out some of a contrariety and likeness on a websites below. There’s some-more of any than what I’ll mention. we wish to offer adequate examples to get we meditative and afterwards let we take over. Look during and investigate conflicting designs, and work during truly improving your ability in balancing contrariety and similarity.
David Simon
One of a initial things you’ll notice on David Simon’s website16 is a contrariety between credentials colors, that creates it easy to heed one partial of a page from another. The trademark stands out as a dim intent opposite a light credentials of space.
17
The pattern contrasts with all to pull a eye. The credentials of a posts’ dates, a full uppercase used for a meta information for comments, and a credentials tone of a menu object for a stream page are also examples of contrariety sketch a eye and communicating something meaningful.
Links in a menu are all styled a same, as are a links to new posts. Both are distant with plane lines. Each menu contrasts with a other to vigilance difference. Fonts are unchanging throughout. The headings and physique calm contrariety in typeface, yet their disproportion is unchanging opposite a website.
Links in a physique could mount out some-more to make transparent they’re links, nonetheless a engineer competence have deliberately done them reduction apparent in sequence not to miscarry a upsurge of reading. Headings could also have been done to mount out better, nonetheless it is flattering transparent that they are not a partial of a categorical text.
Mike Kus
The home page of Mike Kus’ website18 focuses on conflicting projects that Mike’s worked on. Most of a page is empty, yet notice how that creates any component mount out. The calm contrasts with a background, as do a paintings opposite a credentials wall texture.
Note: Mike has altered his home page given we wrote this. What we see in a screenshot subsequent is a prior version.
19
The paintings also enclose a usually tone accumulation on a page. All other information is in a same dim gray.
Also, notice how a paintings are framed, indicating that they have something in common. In this case, they paint projects. Note, too, that a credentials shows likeness by a settlement of bricks. It’s transparent what is figure and what is ground.
On Mike’s “About” page, below, a sole pattern of Mike contrasts with all else. The blue symbol to “Get in touch” is a usually component with color. You competence not hit Mike, yet it won’t be given we don’t know how. Buttons opposite a website have a same blue.
20
Mike’s name as a trademark is steady as a categorical streamer on a page. The header contrasts with a background, as do a backgrounds of a several sections of a page below. Links in a menu share a same uppercase styling. Social icons during a tip are steady along a bottom.
Fonts are also used consistently, with headings in a sans-serif and physique calm in a serif, resisting with any other.
Electric Pulp
The trademark on Electric Pulp’s website21 is a red round of assuage size. It contrasts good with all else that is immediately visible. Notice how a tone is steady in a categorical navigation to prove a stream page.
22
Headings opposite a website are big, confidant and set in all caps. Headings and physique calm also contrariety consistently opposite a website, with a former in a sans-serif and a latter in a serif.
Click into a “Notes” territory and you’ll see prior and subsequent links with credentials colors that contrariety with a categorical background. Background tone is also used to heed conflicting sections of a page.
Most buttons on a website are a resisting red (a tone mostly used to set off elements) and change to blue on hover. However, on a “Work” page, a initial symbol reverses this (it’s blue and changes to red on hover). Whether this is counsel or random is tough to tell. Nevertheless, a component of contrariety is maintained.
Lowdi
One final website to cruise is Lowdi’s23. The screenshot subsequent is of a home page. Notice how tone is used for both contrariety and consistency.
24
Color clearly delineates a start and finish of sections. And a exercise of tone creates a stroke via a page. Notice how a yellow credentials of a cost stands out, while also sketch a visitor’s eye down to a pattern of a product.
Summary
Contrast and likeness have conflicting functions. They are used in varying grade and in combination. You’ll always see some of both given conjunction exists though a other. Changing one means also changing a other.
Showing that some things are a same and some are conflicting is a initial step in manifest communication25. It’s a primary approach that viewers get meaning.
Contrast and likeness are clues to settlement elements. Differences pull a attention, and likeness transfers what we know about one component to another.
Ultimately, a idea is to contrariety identical layers: creation a elements in one organisation demeanour identical to any other, yet conflicting from another like organisation of elements. The approach we structure resisting and identical elements creates hierarchy, upsurge and compositional balance, topics we’ll get to after in this series.
(al, il)
Footnotes
- 1 http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
- 2 http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
- 3 http://www.vanseodesign.com/web-design/organize-information-visual-perception/
- 4 http://www.scholarpedia.org/article/Visual_search#Factors_that_modulate_search_performance
- 5 http://daphne.palomar.edu/design/emphasis.html
- 6 http://www.designingforinteraction.com/wroblewski.html
- 7 http://www.vanseodesign.com/web-design/dominance/
- 8 http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
- 9 http://www.scientificamerican.com/article/patternicity-finding-meaningful-patterns/
- 10 http://books.google.com/books?id=yUalr7fhZMECpg=PA34lpg=PA34dq=working+memory+schema+mental+modelssource=blots=Nip6RBZGfMsig=a7rLq7wM-EotwoNReIx6k16U2tEhl=ensa=Xei=-A11U_r3HM2Jqga8iYDwCAved=0CHoQ6AEwDQ#v=onepageq=working%20memory%20schema%20mental%20modelsf=false
- 11 http://guymanningphotography.wordpress.com/2012/02/05/group/
- 12 http://www.andyrutledge.com/gestalt-principles-2-similarity.php
- 13 http://www.vanseodesign.com/web-design/gestalt-principles-of-perception/
- 14 http://alistapart.com/article/contrastandmeaning
- 15 http://www.fastcompany.com/3009605/work-smart/how-color-coded-notes-make-you-a-more-efficient-thinker
- 16 http://davidsimon.com/
- 17 http://davidsimon.com/
- 18 http://mikekus.com/
- 19 http://mikekus.com/
- 20 http://mikekus.com/
- 21 http://electricpulp.com/
- 22 http://electricpulp.com/
- 23 http://lowdi.com/
- 24 http://lowdi.com/
- 25 http://webstyleguide.com/wsg3/7-page-design/3-visual-design.html
↑ Back to topShare on Twitter
Design Principles: Connecting And Separating Elements Through Contrast And Similarity
Nenhum comentário:
Postar um comentário