Design Principles: Visual Weight And Direction
- By Steven Bradley
- December 12th, 2014
- 1 Comment
Every component on a web page exerts a manifest force that attracts a eye of a viewer. The incomparable a force, a some-more a eye is attracted. These army also seem to act on other elements, imparting a manifest instruction to their intensity transformation and suggesting where we should demeanour next.
We impute to this force as manifest weight1 and to a noticed instruction of manifest army as manifest direction. Both are critical concepts to know if we wish to emanate hierarchy, flow, stroke and change in your composition.
Note: This is a fourth post in a array on pattern principles. You can find a initial 3 posts in a array here:
- “Design Principles: Visual Perception and a Principles of Gestalt2”
- “Design Principles: Space and a Figure-Ground Relationship3”
- “Design Principles: Connecting and Separating Elements Through Contrast and Similarity4”
Visual Weight
Physical weight is a magnitude of a force that sobriety exerts on an object, yet two-dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t have any earthy weight. Visual weight is a magnitude of a force that an component exerts to attract a eye. Two-dimensional objects can attract attention. The some-more an component attracts a eye, a incomparable a manifest weight.
In a prior post in this series5 we talked about obsolete features, or a unique characteristics of an element, such as size, tone and shape. In that post we mentioned how, by these features, we can uncover contrariety and likeness between elements.
For example, resisting elements by creation one really vast and a other really tiny creates it transparent that a elements are different.
Controlling a multiple of these facilities is how we control manifest weight. Red tends to attract a eye some-more than blue, and incomparable elements attract a eye some-more than smaller ones. A vast red intent carries some-more manifest weight than a tiny blue object.
The sum of these characteristics or obsolete facilities is what determines an element’s manifest weight. It’s not any one feature, yet rather their multiple that determines a manifest weight of an element. Some combinations of facilities will attract a eye some-more than others. To emanate elements of conflicting manifest weight, we would use conflicting combinations of obsolete features.
How Do You Measure Visual Weight?
There’s no approach we know of to precisely magnitude a manifest weight of a pattern element. You use your knowledge and visualisation to settle that elements have incomparable or obtuse weight. Develop an eye and afterwards trust it. The areas of a multiple that attract your eye are those that have incomparable manifest weight. Learn to trust your eye.
This doesn’t meant that we have to incidentally try things and see what attracts your eye a many and a least. You can besiege any evil to know that something bigger weighs some-more than something smaller, for example. It’s in a multiple of facilities that your eye will help.
Fortunately, others have private and tested these characteristics. Below are some of a characteristics we can change on any component and a outline of how changing them will possibly boost or diminution a element’s manifest weight.
Let’s start with a obsolete facilities that we mentioned in a final post: size, color, value, position, texture, figure and orientation.
- Size
Large elements have some-more manifest weight than tiny elements. - Color
Warm colors allege into a forehead and tend to import some-more than cold colors, that incline into a background. Red is deliberate a heaviest color6 and yellow a lightest. - Value
Dark elements have some-more manifest weight7 than light elements. - Position
Elements located aloft in a multiple are noticed to import some-more than elements located reduce in a composition. The serve from a core or widespread area of a composition, a incomparable a manifest weight an component will carry. Elements in a forehead lift some-more weight than elements in a background. - Texture
Textured elements seem heavier than non-textured objects. Texture creates an component seem three-dimensional, that gives a coming of mass and earthy weight. - Shape
Objects with a unchanging figure seem heavier than objects with an strange shape. The anomaly gives a clarity that mass has been private from a unchanging shape. - Orientation
Vertical objects seem heavier than craft objects. Diagonal elements lift a many weight.
You don’t have to extent yourself to a obsolete facilities above. You can use additional characteristics to control manifest weight.
- Density
Packing some-more elements into a given space increases a manifest weight of a space. The spectator will understand a incomparable or darker sum component as opposite to several smaller and lighter elements. - Local white space
White space appears to have no manifest weight since it’s seen as empty. Any intent placed within that space will seem heavier since of a space around it. - Intrinsic interest
Some things are some-more engaging than others. The some-more formidable or perplexing an element, a some-more seductiveness it will lift and a some-more it will attract a eye. Your possess interests also play a role. If you’re some-more meddlesome in cars than in planes, afterwards an picture of a automobile will squeeze your courtesy some-more than an picture of a plane. - Depth
A incomparable abyss of field8 gives an component in concentration augmenting manifest weight, approaching due to a contrariety between a concentration and unfocused areas. - Saturation
Saturated colors seem heavier than desaturated colors. - Perceived earthy weight
We know that a residence weighs some-more than a shoe. An picture of a residence will import some-more visually than an picture of a shoe, since we pattern a residence to import more.
In a prior post in this array about contrariety and similarity, we mentioned that contrariety draws courtesy to an element. In other words, an component that contrasts with a vicinity will seem visually heavier than a surroundings. For example, circles customarily seem heavier than rectangles on a web page since many website elements are rectangular.
Not all characteristics minister equally to manifest weight. Most people will notice a tone of an component before a shape, that suggests that tone contributes some-more to manifest weight. You also have to cruise a aberration of a given composition, since resisting elements seem weightier than a elements they contrariety with. The specifics of your multiple will settle what contrasts and what doesn’t.
Remember that manifest weight is a multiple of a above attributes. While vast carries some-more manifest weight than small, a tiny dim round surrounded by a inexhaustible volume of white space and located during a tip of a page will approaching seem to import some-more than a incomparable nonetheless irregularly made intent of a cold light tone during a bottom of a page.
Visual Weight and Gestalt
One of a ideas behind this array is to indicate out how many gestalt beliefs minister to pattern principles.
- Figure-ground
Visual weights can be used to apart a dual by giving a figure some-more weight than a background. - Proximity
The space between elements leads to conflicting amounts of inner white space and conflicting densities of a objects within a space. - Similarity and contrast
You can use manifest weight to vigilance either. Contrast will lead to incomparable manifest weight in a resisting element. Elements with identical manifest weight will naturally vaunt similarity. - Focal point (the subsequent subject in a series)
Points of captivate in a multiple are focal points, and they lift some-more manifest weight than other elements. - Past experience
The viewer’s knowledge will minister to how many unique seductiveness they cruise an component holds.
Visual Direction
If manifest weight is about attracting a eye to a sold location, afterwards manifest instruction is about streamer a eye to a subsequent location. Visual instruction is a noticed instruction of manifest forces. Think of it as a instruction we would pattern an component to pierce if it were in motion.
Visual instruction serves a identical duty to manifest weight in that it’s perplexing to get we to notice certain tools of a composition. Whereas manifest weight is cheering “Look during me!,” manifest instruction is observant “Look over there!”
As with manifest weight, we can cgange a characteristics of an component to advise conflicting directions, nonetheless fewer characteristics are during your ordering than with weight.
- Shape of element
An element’s figure competence emanate an pivot by it and this pivot can advise a direction. The primary pivot is typically seen as using together to an element’s manifest direction. - Location of elements
Visual weight is a force that can seem to attract or repel a adjacent element. This force will pierce in a instruction that connects both elements. - Subject matter of element
An arrow, a indicating finger, or a gawk of a eye all advise looking in a certain direction. - Movement
An component could literally pierce by your design, and a transformation will have a direction. - Structural skeleton
Every multiple has a constructional skeleton, with army that naturally run along and by conflicting axes. This substantially needs a tiny some-more explanation.
Structural Skeletons
In his book Art and Visual Perception: A Psychology of a Creative Eye9, Rudolf Arnheim10 due a thought of a constructional skeleton behind any canvas.
The thought is that any board has a constructional network of army using by it. Even if no elements are inside a canvas, a eye will be drawn to certain tools of a board since of this network of army seen in a picture below.
11The core and a 4 corners of a rectilinear board act like magnets to a eye. The strongest magnet is in a center, yet not a geometric core of a canvas. Rather, a core that attracts a eye is a manifest center, and it sits usually above a loyal geometric center.
The axes run from dilemma to corner, and a points along these axes that are mid between core and dilemma also attract attention. These mid points can, then, be connected with straight and craft lines, that emanate additional axes of manifest force.
We’ll come behind to this thought when we get to a post in a array about compositional flow. For now, cruise that, in a deficiency of design, a viewer’s eye will be captivated to certain points in Arnheim’s constructional skeleton, and a eye will pierce from indicate to indicate by following a directions of a conflicting axes.
You can make use of a constructional net by fixation elements where they would naturally attract a eye, thereby augmenting their appealing force.
Visual Direction and Gestalt
You can cruise of instruction as genuine or hypothetical lines that indicate from one component to another or that bond conflicting elements. The lines don’t need to be visible.
- Uniform connectedness
The lines joining elements have direction. An eye gawk creates an hypothetical line between a eye and whatever a eye is gazing at. - Continuation
This component relates to elements organised along a line or curve, as yet they are relocating in a instruction of a line or curve. - Common fate
Elements seen as carrying a common predestine are those that pierce or seem to pierce in a same direction. - Parallelism
In sequence for elements to be seen as parallel, their inner axes (the same ones that explain direction) contingency be established.
The Overall Direction Of A Composition
One some-more judgment of manifest instruction is that any multiple will be seen to have a widespread direction, either horizontal, straight or diagonal.
- A craft instruction creates a multiple seem ease and stable.
- A straight instruction adds a clarity of formality, application and balance.
- A erratic instruction suggests transformation and action.
The widespread instruction of a multiple will be determined by a instruction of a infancy of elements or maybe a few pivotal elements. The instruction will assistance set a ubiquitous mood according to a ubiquitous definition ascribed to conflicting forms of lines12.
It is probable for a multiple to have no widespread direction. The array of craft and array of straight elements competence be equal, for example. In this case, a spectator could confirm that instruction is dominant.
Examples
For a following examples, I’ve grabbed some screenshots of pages and will share some thoughts on how we see manifest weight distributed in each. You competence see it differently, and that’s OK.
Different eyes are captivated to conflicting things. Again, I’m wakeful of no approach to magnitude how many manifest weight an component carries. Besides, dual people could simply demeanour to conflicting areas of a multiple since of their conflicting interests. A bit of subjectivity is to be expected.
An easy approach to tell that elements have a many weight is to use a flicker test. Close your eyes a tiny until some elements blur away. Those that sojourn have some-more manifest weight than those that disappear.
Bureau
Note: The screenshot for Bureau was prisoner with my browser set wider than 1280 pixels. Anything reduction and a pattern would fall to a singular column, instead of a dual seen here.
13The essay from Bureau shown above14 is scarcely all text. The categorical streamer carries a many manifest weight. It’s a largest square of text, and it has some inner white space around it as well. It’s arguably a many critical information that someone who lands on a page should see, so it creates clarity for it to be visually weighty.
Links benefit some weight by their contrariety with a surrounding text, nonetheless a cold tone lessens a benefit in my opinion.
The component with a slightest manifest weight is a content in a right column. This creates clarity since concentration is many approaching meant to be given to a essay and not what’s in a sidebar.
Notice a tiny bit of red content during a tip of a right column. It’s a couple to a home page of a website. As tiny as it is, a red gives a content some additional weight, assisting it to mount out from a other content in a column. Everything in a picture appears incomparable when you’re observation a website directly, so a tiny red content isn’t utterly as tiny as it is here.
When we request a flicker test, a whole right mainstay disappears, and you’re left with a categorical streamer above a essay and a vast retard of content subsequent it.
The categorical instruction of a multiple is straight since it’s dual prolonged columns down a page. The disproportion in credentials tone between a columns creates a straight line streamer we down a page and adding to a straight instruction of a composition.
Create Digital Media
When a home page for Create Digital Media15 loads, a colorful elements spur into place, job a lot of courtesy to themselves. Even if we skip a animation, we approaching see these elements as carrying a many weight, due to a jam-packed pink, yellow and blue. These elements also occupy a same space, formulating a unenlightened area in a core of dull space.
Note: Between a essay and announcement of this post, Create Digital Media has sealed a doors. Visit a home page if you’d like to know why.
16The graphics during a bottom are a subsequent weightiest for me. They’re dark, vast and formidable in shape. They lift we to any of a 3 sections, that enclose a subsequent many visually distinguished elements, a territory headings.
The categorical title on a page is vast and dark; review it to a content directly subsequent it. Other equipment that mount out for me, due to their aloft manifest weight, are a company’s name during a tip and a trademark during a bottom.
With a flicker test, a colored shapes and content and a graphics during a bottom sojourn after many of a elements have faded away. The categorical title fades for me, nonetheless we can still tell it’s there. we also rather notice a trademark in a lower-left corner, nonetheless it fades many some-more fast than a striking nearby it.
Here, we cruise a categorical instruction is horizontal. The lines run horizontally, as does a categorical streamer and a navigation. Another of a some-more visually distinguished elements, a highlighted text, is also horizontal.
The 3 gears could be regarded as a singular triangular, despite curvy, shape, so substantiating erratic directions. They don’t run long, though, and they’re a usually diagonals on a page.
Javier Marta
Three elements contest to be a visually weightiest on Javier Marta’s home page17. The graphics, a immature separators between sections, and a menu equipment during a tip all call for attention.
18- Graphics
These are large, dim and surrounded by white space. Each striking alone reason a possess interest. - Green separators
These have color, are incomparable and, like a graphics, are surrounded by white space - Menu items
These are dark, vast and, once again, surrounded by white space.
Javier’s trademark carries a tiny reduction manifest weight for me than a menu equipment around it, nonetheless it’s still really distinguished among them. It does lift some-more weight than a text, yet not as many as a menu equipment in my mind. You competence disagree.
The flicker exam causes a menu equipment and trademark to mix into a singular unit. The graphics and separators are still visually prominent, and a content stays manifest as vast blocks. You can still see all while squinting, even if we can’t make out what any of it says.
On my screen, usually a header and a “El evento” territory are visible, giving a page a craft direction. However, 4 sections in sum are on a page. When a sections are noticed all during once, a fixing of a immature separators gives a multiple a straight direction. And, of course, saying a whole page during once changes a board from craft to vertical.
I consternation if a dual graphics shown in a screenshot above would have been improved on conflicting sides. In a tip graphic, a camera points right, that is where my eye follows. Better would be to beam a eye to a text.
In a bottom graphic, a woman’s powerful does indicate right, yet she’s walking left, that is where we afterwards tend to look. Both graphics competence work improved if their instruction led behind into a content instead of divided from it.
Stanford Arts
The picture during a tip of Stanford Arts19’ home page carries a many manifest weight. It’s a largest component on a page and, being an image, has a lot of unique interest. It’s also located during a tip of a composition. In truth, it takes adult many of my screen.
20Note: This website rotates images during a tip of a page, and a images that stagger change over time. You substantially won’t see this sold picture if we revisit a website and, since of that, we competence consider a manifest weights in a pattern differently than we do here.
I cruise a triangular images opposite a bony containers are a subsequent weightiest elements. After that are a vast red blocks that make adult a header and footer.
When we perform a flicker test, all of a elements are manifest longer than I’d expect. The elements have a good understanding of both light and dim contrast, that helps them mount out.
Eventually, a usually things that sojourn are a images, nonetheless in reduction than full detail. we can make out a vast picture during a tip yet usually a shapes of a triangular images below.
The pattern is also engaging for a manifest direction. Diagonals dominate, and since many web pages are not dominated by erratic directions, they constraint some-more courtesy here. They mishandle your expectation.
The sold sketch that we prisoner in a screenshot above also offers something of a diagonal, despite a bit winding in tools and combined by a relocating line of people in others.
Both a lady (in a rightmost triangular image) and a photographer (in a core triangle) have a instruction streamer to a right. Better competence have been to retreat a lady to face central and pierce a camera to a left retard to points inward, too.
Granted, a images change when we float over any of a links in a blocks. Still, a images tend to lead external instead of inward.
Summary
The manifest weight of an component is a magnitude of how many a component attracts a eye of a viewer. A visually complicated component will attract a eye to it.
Visual instruction is a noticed instruction of army behaving on and exerted by elements. The instruction is a evidence to a viewer’s eye to pierce elsewhere.
Many unique characteristics can be mutated to make an component visually weightier or lighter. A few can be used to settle an element’s manifest direction, as can a board itself.
Over a remaining posts in this series, we’ll see how manifest weight and manifest instruction lead to beliefs like prevalence and hierarchy, upsurge and stroke and, ultimately, compositional balance.
(il, al)
Front page picture credit: Opensource21.
Footnotes
- 1 http://www.vanseodesign.com/web-design/visual-balance/
- 2 http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
- 3 http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
- 4 http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
- 5 http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
- 6 http://unifiedspace.wordpress.com/2012/03/20/why-do-colours-have-a-visual-weight/
- 7 http://www.pelletierrug.com/blog/tag/color-weight/
- 8 http://www.cambridgeincolour.com/tutorials/depth-of-field.htm
- 9 http://www.amazon.com/Art-Visual-Perception-Psychology-Creative/dp/0520243838/
- 10 http://en.wikipedia.org/wiki/Rudolf_Arnheim
- 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/structural-net-large-opt.png
- 12 http://www.vanseodesign.com/web-design/visual-grammar-lines/
- 13 http://www.smashingmagazine.com/wp-content/uploads/2014/10/bureau-large-opt.jpg
- 14 http://bureau.tsailly.net/2010/11/wow-adobe-is-really-cool.html
- 15 http://createdm.com/
- 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/create-digital-media-large-opt.jpg
- 17 http://ladisparatadaboda.com/
- 18 http://www.smashingmagazine.com/wp-content/uploads/2014/10/javier-y-marta-large-opt.jpg
- 19 http://arts.stanford.edu/
- 20 http://www.smashingmagazine.com/wp-content/uploads/2014/10/stanford-arts-large-opt.jpg
- 21 https://www.flickr.com/photos/opensourceway/4371001192/in/photostream/
↑ Back to topShare on Twitter
Design Principles: Visual Weight And Direction
Nenhum comentário:
Postar um comentário