Adding a sense of depth to a design can make that design seem more realistic and increase visual interest. Building out the 3rd dimension pulls the viewer into the design and can help you set up entry points and control flow throughout your design.
We're 3-dimensional beings. Objects around us exist in 3 planes, but on screen we work in only 2 of them. The lack of the one dimension means our compositions appear less than lifelike. Adding back the illusion of the missing dimension will add back a sense of reality,ﾊa sense of the physical.
(Bradley, Steven, 11 Ways To Add Depth To A Design, 2012, http://www.vanseodesign.com/web-design/pictorial-depth-cues/)
What is depth?
* Depth is the creation of something more than what is required or minimal.
* Depth is something which seems arbitrary, but which you are sure has some reason.
* Depth is the hidden, the unclear, the difficult, the different.
* Depth is abundance and sometimes refinement.
* Depth is theatre and ritual.
* Depth is meaning.
Where does it fit in?
* Depth is often the frustration of need, the need to know, the need to understand, even the need to accomplish a task.
* Depth is an unknown force in our environment, or a smug feeling of knowing and comfort.
* Depth is the lack of information, the missing puzzle-piece, removed to move the user.
* Depth is an appeal to the senses, a riot of exploration, and sometimes a hint of sublime realisation.
* Depth is connection and shared experience, knowledge which binds those who experience it.
* Depth is the hidden pattern revealed, the idea found, the reality discovered.
Why are we attracted to depth?
* Depth confounds our needs, denies understanding, induces anxiety.
* Depth explored is a safety, we know, we belong, we are safe.
* Depth is the mark of the human, a mind frozen in play.
* Depth is the maze of minds, the labyrinth of meaning.
* Depth is sensuality of thought, of feeling, of hope and loss.
* Depth is the sublime, the delicate, the powerful, the raw.
Webster's Dictionary says: depth is the measure or distance downward, inward or backward. From this, we understand that most people discuss depth as measurable, "seeable", discernible. If we look up three-dimensional, the dictionary says it is something having, or seeming to have, the dimension of depth...That is the case in our study of Depth in Design.
Depth in Traditional Designs is achieved by set-patterning, placement of colors, tints, textures and forms, etc. Depth, not the most important characteristic of Traditional designs, is more easily achieved by the designer and noted by the judge. However, according to Amalie Ascher: "Pleasing outline and orderly arrangement of materials, placed to emphasize depth, are typical aspects of massed-line composition."
The Handbook implies that Depth is the most important characteristic of Creative Designs (HB pg 127, 130). It does NOT tell us, however, just how much depth is needed in a design to qualify/quantify it.
We are, here, more concerned with Depth in Creative Designs. Letﾕs go from ﾒflat to fluffyﾓ, so to speak...
(We will only work with flat and "not-so-flat" in this study (Collage, Plaque and frame-ofreference-limited designs; "regular designs" don't have a depth problem as a rule.)
All Creative Designs have general characteristics in common:
1. Eclectic in concept
2. Result of creative idea of designer
3. Use of "plastic organization"- molding areas of solids and spaces with other elements within design into a 3-D concept having great DEPTH:
a. suggests spatial separation; fore-,middle- and rear ground
b. "juxtaposition" of components (layering)
c. incorporating space, then piercing it with form or line (usually diagonal)
d. uses color contrasts for tension
e. uses texture for tension and interest
f. uses transparent forms
g. interest is equal throughout design
4. Structural clarity (no filler)
5. More than one center of interest/point of emergence possible
6. Degree of Abstraction varies (none to moderate)
(Jogan, Gina V. DEPTH IN DESIGN...JUST HOW DEEP IS IT?, The Deep South Region,
Visual activity across a surface is a texture when the structure forming the texture is based on irregular and random relationships over given areas. Textures are organic and natural. The size of the objects or lines forming th texture may vary. The distance between them may vary. The density of the structure may vary. This variety leads to a perception of organic, natural, or random structures in a texture.
Textures are physical. We can touch them. We can feel them. They can be smooth or rough, hard or soft. Naturally in web design we can't actually create this physical quality. We can only create the perception of this physical quality. When we work in a 2-dimensional format we create implied texture. Done well your audience will be able to imagine how your texture will feel.
This physical quality gives texture a sense of realism. Textures add depth, a 3rd dimension to the 2-dimensional format of the screen in an organic way. This connection to the physical world can give a greater sense of realism to your design.
Textures can be a nice way to add subtle details to your design. They help add another sense (touch) through which we can communicate with our audience.
The more constant the irregularity of a textureﾕs density, the less contrast across the surface, and the flatter or more 2-dimensional the texture appears. The more contrast in the textureﾕs density across the surface the greater the depth and the more 3-dimensional the texture appears.
As with patterns when the density from dark to light over the surface is an even and continuous transition we can mimic the play of light over a volume. Unlike patterns these volumes will seem more realistic and not come across as stylized.
What Do We Mean By "Texture"?
Good question. In design parlance, it is often defined as, "the sensations caused by the external surface of objects received through the sense of touch." Basically, how thing feel. Think about squishing soft carpet between your toes, running your hand along a rough wooden tabletop, or sinking down into leather couch cushions.
Honestly, we think that the "sense of touch" part of the definition should be revised to say ﾒperceivedﾓ sense of touch. Anyone whoﾕs ever watched an interior design TV program or flipped through the pages of a magazine can tell you that you donﾕt need to have physical contact with a room to feel the power of texture.
While texture may play a supporting role to the function of the space, it is no less vital to a designﾕs success. Instead of examples of texture above, picture trying to get comfortable on a seating set made of granite. Always consider how texture will elevate the overall experience of your design.
Texture Adds Visual Weight
Odds are, if you've been hanging around design websites like Freshome for a while, you've heard the term "visual weight" getting thrown around a lot. All that means is that an object – or space as a whole – has the ability to draw attention to itself. A healthy dose of texture will makes sure that is not a problem.
(Mastroeni, Tara., freshome, The Importance of Texture in Interior Design,
Reflection is one of the coolest elements in design. It automatically goes with everything, everywhere. Since its only colors are a reflection of whatﾕs already in the room, you never have to worry about finding a match! It gives back exactly what you what put in its view.
Reflection seems to multiply space. It adds visual interest. It magnifies all the design elements you've put in. It can bring additional light and depth to a room. It can showcase accent pieces placed in front of it. It can define spaces. It changes as you walk through a room, creating interesting new sight lines. It can even let you be in two places at once!
Transparency and Translucency
Neither Visible nor Invisible: Transparent
It is clear that the dichotomy of visibility and invisibility is inadequate. When we look at the nature of the word "invisible," it literally means that which cannot be seen. There is a strong connection to a humanﾕs perceptive abilities but this says nothing of intention: the invisible object might be so either by design or nature. Bacteria are invisible to the naked eye by nature, while a book purposefully hidden under a blanket is invisible by design.
A related but significantly different word is "transparent," which literally means ﾒthrough sightﾓ or "through appearance." So the transparent object is something the observer knows to be present even though he or she cannot see it. Active manipulation toward a goal is still possible with a transparent object in a way that it is not with an invisible object. Take the example of a mobile deviceﾕs physical screen. We can see through the glass to the colored pixels that represent different types of information that allow for different tasks. But we interactﾊthroughﾊthe glass; it is transparent but not necessarily invisible.
Today's designers are taking cues from psychology and exploring an emerging sensibility: transparency. Whether it be clear, translucent or the combination, the potential of glass for voyeuristic play is very intriguing.ﾊI have always been drawn to objects, interior spaces or architecture that exposes something, draws your eye through space or defines our relations to others. Transparency can shape the experience: to observeﾊor be observed is a provocative notion and design like this provokes emotion. That is what makes design successful. Letﾕs explore transparency within fashion, architecture and interior design and showcase the extraordinary range of rich materials and surfaces.
Transparent surfaces allow full visual connection while creating physical separation. Translucent surfaces create partial visual separation. Transparent objects allows light and some visual clues to communicate. Relationships between two spaces can be made complex when you begin to combine these qualities in a single space or single surface.
A shadow cast by one element on another gives cues about their relative distance. Drop shadows are perhaps the most common way one adds depth. Reflections work similarly in that a reflection appears on a different surface.
When the shadow is smaller, darker, crisper, and nearer the object casting it, the nearer the object is to the surface holding the shadow.
You can increase the depth by making the shadow larger and lighter and placing it further away from the object. Blurring the edges of shadows also increases the illusion of depth.
Look! It's alive!
Talk to anyone who has a Mac laptop and they can tell you all about how the little blue light in the corner is "breathing" and is a way that the machine lets you know itﾕs alive. During the design process, we collect examples of how products feel animated and come to life through similar behaviors. Things that sing, glow and pose themselves have the ability to enchant people while immersing them in the interaction needed at a given moment, enhancing an overall emotional connection between the person and the product. We've noticed that these kinds of electronic changes give products a sense of personality, so we have been developing methods for defining collections of these behaviors so that they work together. This allows us to essentially craft communicative personalities that are appropriate to the vision and brand of a given product and allow the product to seem animated and ﾒaliveﾓ.