# data[].attributes.attachment_link.readable_text
Negative space has long been a staple of good design. Leaving white space around elements of a design is the first thing that usually comes to mind. But then there are designs that use that white space to infer an element that isn't actually there (the arrow hidden between the E and X in the FedEx logo immediately comes to mind as an example).

The human brain is exceptionally good at filling in the blanks in an image and creating a whole that is greater than the sum of its parts. It's why we see faces in things like tree leaves or sidewalk cracks.

This principle is one of the most important underlying ideas behind the gestalt principles of perception. The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Köhler's 1920 discussion of Physical Gestalten also contains many influential ideas on the subject.

Regardless of who first proposed the ideas (there have been essays dating back as far as 1890), gestalt theory principles are an important set of ideas for any designer to learn, and their implementation can greatly improve not just the aesthetics of a design, but also its functionality and user-friendliness.

In the simplest terms, gestalt theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we're living in.

There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also called prägnanz). There are also some additional, newer principles sometimes associated with gestalt, such as common fate.

Similarity

It's human nature to group like things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design.

Of course, you can make things dissimilar if you want to make them stand out from the crowd. It's why buttons for calls to action are often designed in a different color than the rest of a page-so they stand out and draw the visitor's attention to the desired action.

In UX design, using similarity makes it clear to your visitors which items are alike. For example, in a features list using repetitive design elements (such as an icon accompanied by 3-4 lines of text), the similarity principle would make it easy to scan through them. In contrast, changing the design elements for features you want to highlight makes them stand out and gives them more importance in the visitor's perception.

Even things as simple as making sure that links throughout a design are formatted in the same way relies on the principle of similarity in the way your visitors will perceive the organization and structure of your site.

Continuation

The law of continuity posits that the human eye will follow the smoothest path when viewing lines, regardless of how the lines were actually drawn.

This continuation can be a valuable tool when the goal is to guide a visitor's eye in a certain direction. They will follow the simplest path on the page, so make sure the most vital parts they should see fall within that path.

Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites like Amazon.

Closure

Closure is one of the coolest gestalt design principles and one I already touched on at the beginning of this piece. It's the idea that your brain will fill in the missing parts of a design or image to create a whole.

In its simplest form, the principle of closure allows your eye to follow something like a dotted line to its end. But more complex applications are often seen in logos, like that for the World Wildlife Fund. Large chunks of the outline for the panda are missing, but your brain has no problem filling in the missing sections to see the whole animal.

Closure is quite often used in logo design, with other examples including those for the USA Network, NBC, Sun Microsystems, and even Adobe.

Another very important example of closure at work in UX and UI design is when you show a partial image fading off the user's screen in order to show them that there is more to be found if they swipe left or right. Without a partial image, i.e., if only full images are shown, the brain doesn't immediately interpret that there might be more to be seen, and therefore your user is less likely to scroll (since closure is already apparent).

Proximity

Proximity refers to how close elements are to one another. The strongest proximity relationships are those between overlapping subjects, but just grouping objects into a single area can also have a strong proximity effect.

The opposite is also true, of course. By putting space between elements, you can add separation even when their other characteristics are the same.

Take this group of circles, for example:

In UX design, proximity is most often used in order to get users to group certain things together without the use of things like hard borders. By utilizing gestalt grouping principles and putting like things closer together, with space in between each group, the viewer will immediately pick up on the organization and structure you want them to perceive.

Figure/Ground

The figure/ground principle is similar to the closure principle in that it takes advantage of the way the brain processes negative space. You've probably seen examples of this principle floating around in memes on social media, or as part of logos (like the FedEx logo already mentioned).

Your brain will distinguish between the objects it considers to be in the foreground of an image (the figure, or focal point) and the background (the area on which the figures rest). Where things get interesting is when the foreground and background actually contain two distinct images, like this:

A simpler example can be seen with this image, of two faces creating a candlestick or vase between them:

In general terms, your brain will interpret the larger area of an image as the ground and the smaller as the figure. As shown in the image above, though, you can see that lighter and darker colors can influence what is viewed as the figure and what is viewed as the ground.

The figure/ground principle can be very handy when product designers want to highlight a focal point, particularly when it is active or in use-for example, when a modal window pops up and the rest of the site fades into the background, or when a search bar is clicked on and the contrast is increased between it and the rest of the site.

Symmetry and Order

The law of symmetry and order is also known as , the German word for "good figure." What this principle says is that your brain will perceive ambiguous shapes in as simple a manner as possible. For example, a monochrome version of the Olympic logo is seen as a series of overlapping circles rather than a collection of curved lines.

Here's another good example of the gestalt design principle " prägnanz ":

Your brain will interpret the image on the left as a rectangle, circle, and triangle, even when the outlines of each are incomplete because those are simpler shapes than the overall image.

Common Fate

While common fate was not originally included in gestalt theory, it has since been added. In UX design, its usefulness can't be overlooked. This principle states that people will group together things that point to or are moving in the same direction.

In nature, we see this in things like flocks of birds or schools of fish. They are made up of a bunch of individual elements, but because they move seemingly as one, our brains group them together and consider them a single stimulus.

This is very useful in UX as animated effects become more prevalent in modern design. Note that elements don't actually have to be moving in order to benefit from this principle, but they do have to give the impression of motion.

Gestalt Principles in UX Design

As with any psychological principle, learning to incorporate the visual perception principles of gestalt into your design work can greatly improve the user experience. Understanding how the human brain works and then exploiting a person's natural tendencies creates a more seamless interaction that makes a user feel comfortable on a website, even if it's their first visit.

Gestalt laws are relatively easy to incorporate into just about any design and can quickly elevate a design that seems haphazard or like it's fighting for a user's attention to one that offers a seamless, natural interaction that guides users toward the action you want them to take.

# data[].attributes.attachment_link.title
Exploring the Gestalt Principles of Design | Toptal®

# data[].attributes.attachment_link.description
Gestalt principles of visual perception are an important set of concepts for any designer to learn, and their implementation can not only greatly improve the aesthetics of a design but also its functionality and user-friendliness.

# data[].attributes.body
Here you will find basic information on how the gestalt principles work

# data[].attributes.attachment_link.readable_text
Your constantly-updated definition of Gestalt Principles and collection of topical content and literature

What are Gestalt Principles?

Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand.

Gestalt Principles - a Background

"Gestalt" is German for "unified whole". The first Gestalt Principles were devised in the 1920s by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler-who aimed to understand how humans typically gain meaningful perceptions from the chaotic stimuli around them. They identified a set of laws which address the natural compulsion to find order in disorder. According to this, the mind "informs" what the eye sees by perceiving a series of individual elements as a whole. Professionals in the then-growing industry of graphic design quickly adopted these principles, and designers have since used Gestalt Principles extensively to craft designs with well-placed elements that catch the eye as larger, whole images.

The whole is other than the sum of the parts.

- Kurt Koffka

Gestalt Principles are principles / laws of human perception that describe how humans group similar

Gestalt Principles

Gestalt Principles are an essential part of visual design. There are more than ten overlapping principles; four of the most widely recognized ones are:

Closure (Reification): We prefer complete shapes, so we automatically fill in gaps between elements to perceive a complete image. That's how we can see the whole first. You can apply closure in all sorts of imaginative ways to win users' admiration and trust when they recognize pleasing "wholes" in cleverly placed elements, be they lines, dots or shapes (e.g., segments of a picture). Iconic logos such as IBM's and the World Wildlife Fund's are examples of applied closure-IBM's comprising blue horizontal lines arranged in three stacks; the WWF's consisting of a cluster of black shapes set against a white background to reveal the familiar form of a panda. .

Common Region: We group elements that are in the same closed region. You include related objects in the same closed area to show they stand apart from other groups. You can see this principle applied in Facebook, for example, where likes, comments and other interactions appear within the boundaries of one post and so stand apart from others.

Figure/Ground (Multi-stability): We dislike uncertainty, so we look for solid, stable items. Unless an image is ambiguous-like Rubin's Vase, below-we see its foreground first. You can apply figure/ground in many ways, but chiefly to contrast elements: for example, light text (i.e., figure) from a dark background (i.e., ground). When you use figure/ground well, alongside other considerations such as a careful application of color theory, you'll help guide users in their tasks and lessen their cognitive load.

Proximity (Emergence): We group closer-together elements, separating them from those farther apart. So, when you cluster individual elements into one area or group on your design, users will recognize it as one entity standing distinct from anything else on-screen. An example of proximity in design is the Girl Scouts logo, with its three faces clustered in profile (two green, one white).

You can also apply other Gestalt Principles in design work-e.g., continuation, unified connectedness -whichever work/s best to access your users and help them achieve their (and your brand's) desired goals.

Gestalt Principles are in the Mind, Not the Eye

The Gestalt Principles are vital in user experience (UX) design. When you design interfaces, users must be able to understand what they see-and find what they want-at a glance. The principles of proximity and common region are a good example, as the IDF landing page shows below. Colors and graphics divide the page into separate regions. Without this, users would struggle to make associations between unrelated clustered-together items-and leave. In your designs, you should never confuse or delay users. Instead, guide them to their options and so they can identify with organizations/brands rapidly.

The Gestalt Principles are vital in user experience (UX) design. When you design interfaces, users must be able to understand what they see-and find what they want-at a glance. The principles of proximity and common region are a good example, as the IDF landing page shows below. Colors and graphics divide the page into separate regions. Without this, users would struggle to make associations between unrelated clustered-together items-and leave. In your designs, you should never confuse or delay users. Instead, guide them to their options and so they can identify with organizations/brands rapidly.

Learn More about the Gestalt Principles

Learn more about how designers employ Gestalt psychology, by enrolling in the IDF's online course: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

For more on building relationships via Gestalt Principles, see Smashing Magazine's article: https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-closure-and-figure-ground-part-2/

Usertesting.com's blog features many tips and examples: https://www.usertesting.com/blog/2016/02/24/gestalt-principles/

Content strategist Jerry Cao's piece on Gestalt Principles for Designers offers many helpful insights: http://blog.teamtreehouse.com/gestalt-principles-designers-applying-visual-psychology-modern-day-design

Literature on Gestalt Principles

Here's the entire UX literature on Gestalt Principles by the Interaction Design Foundation, collated in one place:

Featured article

Gestalt is a German word that carries much importance, especially for us as designers. Let's have a close look at its principles so that we can see how much information this little word encompasses!

The central principle to the Gestalt theory was neatly summarized by the Gestalt psychologist Kurt Koffka: "The whole is other than the sum of the parts." The human eye and brain perceive a unified shape in a different way to the way they perceive the individual parts of those shapes. This global whole is a separate entity that is not necessarily formed by the sum of its parts.

When we fully understand Gestalt design principles, we can utilize them to create more interesting and engaging visual experiences for website and app users. You can take advantage of these laws to design more thoughtfully and effectively, knowing exactly how your work can impact your users.

What Are Gestalt Principles?

Author/Copyright holder: Impronta. Copyright terms and licence: CC BY-SA 3.0

Gestalt principles or laws are rules that describe how the human eye perceives visual elements. These principles aim to show how complex scenes can be reduced to more simple shapes. They also aim to explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

"Gestalt" refers to "shape" or "form" in German; the principles - originally developed by Max Wertheimer (1880-1943), an Austro-Hungarian-born psychologist. - were improved later by Wolfgang Köhler (1929), Kurt Koffka (1935), and Wolfgang Metzger (1936).

Researchers have integrated all of these theories to show how people unconsciously connect and link design elements.

This article covers one of the Gestalt Principles (the Law of Similarity). The rest of the principles will be covered in upcoming articles:

Similarity (also known as Invariance): The human eye tends to build a relationship between similar elements within a design. Similarity can be achieved using basic elements such as shapes, colors, and size.

Continuation: The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects.

Closure (also known as Reification): The human eye prefers to see complete shapes. If the visual elements are not complete, the user can perceive a complete shape by filling in missing visual information.

Proximity (also known as Emergence): Simple shapes arranged together can create a more complex image.

Figure/Ground (also known as Multi-stability): The human eye isolates shapes from backgrounds.

Symmetry and order: The design should be balanced and complete; otherwise, the user will spend time and effort trying to perceive an overall picture.

The Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. The brain seems to craft a link between elements of a similar nature. Then, we perceive them in a relationship with each other, separating them from other elements in a design. Human eyes are good at filling in "gaps" or connecting "dots". It happens naturally.

Similarity is influenced by the shape, size and color of the elements. When you mix objects with high degrees of similarity to each other with a group of dissimilar objects, the brain then devotes time and energy to creating a link between them so that it can try to understand their relationship with each other.

Let's try a quick experiment to check this out. If you've got a pencil and paper handy, draw about ten, rough circles on a page (spreading them across the page), leaving enough space between them to fit shapes of a similar size. Now, anywhere in those gaps, draw five or six triangles. Don't worry about geometric perfection: it doesn't matter in this simple illustration. Then, put about three dots anywhere between these shapes. Look away and stand back for a moment. Now, return to your sketch.

Do you notice anything? Your eye takes you right to the dots, doesn't it? This is because the dots are points, while the shapes are made up of lines.

Designing with Similarity in Mind

In web and interactive design, the similarity law can be used to contribute to building connections between linked elements. This relationship may be either physical or conceptual. You can make the most of this natural human inclination by helping your user's eye to discern parts of your design you want to accentuate.

Using this linkage might improve the user experience as follows:

Links

Links and navigation systems are essential to allow users to view website content and navigate between different pages.

While links are embedded inside the content, they must certainly be presented uniformly to allow users to identify linked text.

Thus, text links should be differentiated by color and usually shape as well. No matter how you do it, the important thing is that links should be clearly identifiable as such. Make them stand out. Many users will typically consider a link to be any text that is blue and underlined.

The use of the principle of similarity in menus and navigation helps users see the relationship between each group of navigation links. They will then perceive similar navigation items as being related or having a similar place in the site's data hierarchy.

Content

We can also use color, font size and type, highlighting, etc. to distinguish between and mark the types of content before a user reads them.

For example, quotes that appear in boxes, in a slightly bigger font, with an italic emphasis, are easily recognizable as such. The law of similarity carries our recognition of this standard from one website to another. Each site may use a variant on this theme, but, overall, the pattern is incredibly similar.

Breaking the law of similarity can also help draw a user's attention to a specific piece of content - such as a call to action. That's right; we can make use of both sides of the line or border the law makes. The user's eye is a remarkably easy tool to manipulate; you just need to figure out what parts of your design you want to bring out or tie together.

Headers

Website headers play another essential role in organizing and building well-structured content for search engine crawling and for the reader.

We normally place headers above content in a different font, color, size, etc. from the body of the content. They assist the reader in finding the relevant points in content and help control the overall flow of the work. They're great milestones and using them wisely (which isn't hard) will keep your users on your page.

Remember that a user's eye will activate the brain to work to interpret your design in a certain way. Nothing is more tiring than a solid block of text on a page, with no discernable features to draw the reader's eye. If you're near an old literary classic, why not open it and look at a spread of pages?

For example, let's try Victor Hugo's immortal Les Misérables on for size. Flicking forward six pages finally brought me to a new chapter heading, which my eye instantly noticed and read. None of the other text had stood out for me before I saw that.

The Take Away

Gestalt psychology is a theory of the mind which has been applied to a number of different aspects of human thought, action and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way the underlying processes are organized to help us make sense of the world.

The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes into a cohesive, meaningful and usable representation of the world. Over the last twenty years, interaction designers and other professionals involved in the development of products for human users have adopted the work of Gestalt psychologists.

Realizing the potential for applying Gestalt thinking helps us create (literally!) eye-catching works. Suddenly, we have new insights and ways of approaching problems and challenges. This is a gift - we can tailor our work according to the "engineering" of the human eye and brain.

Starting with the Law of Similarity, we find that we can make use of the following to draw a user's attention and let his or her brain do the rest:

These three short articles will provide you with a first approach to these laws. However, if you want to cement in your own mind the many ways you can organize visual information and improve your designs for all users, we suggest that you take the course explained below!

Where to Learn More

Interested in delving into the Gestalt principles? Check our "Gestalt Psychology and Web Design: The Ultimate Guide" course: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

References:

Hero Image: Author/Copyright holder: Eumedemito. Copyright terms and licence: Public Domain.

Gestalt is a German word that carries much importance, especially for us as designers. Let's have a close look at its principles so that we can see how much information this little word encompasses!

The central principle to the Gestalt theory was neatly summarized by the Gestalt psychologist Kurt Koffka: "The whole is other than the sum of the parts." The human eye and brain perceive a unified shape in a different way to the way they perceive the individual parts of those shapes. This global whole is a separate entity that is not necessarily formed by the sum of its parts.

When we fully understand Gestalt design principles, we can utilize them to create more interesting and engaging visual experiences for website and app users. You can take advantage of these laws to design more thoughtfully and effectively, knowing exactly how your work can impact your users.

What Are Gestalt Principles?

Author/Copyright holder: Impronta. Copyright terms and licence: CC BY-SA 3.0

Gestalt principles or laws are rules that describe how the human eye perceives visual elements. These principles aim to show how complex scenes can be reduced to more simple shapes. They also aim to explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

"Gestalt" refers to "shape" or "form" in German; the principles - originally developed by Max Wertheimer (1880-1943), an Austro-Hungarian-born psychologist. - were improved later by Wolfgang Köhler (1929), Kurt Koffka (1935), and Wolfgang Metzger (1936).

Researchers have integrated all of these theories to show how people unconsciously connect and link design elements.

This article covers one of the Gestalt Principles (the Law of Similarity). The rest of the principles will be covered in upcoming articles:

Similarity (also known as Invariance): The human eye tends to build a relationship between similar elements within a design. Similarity can be achieved using basic elements such as shapes, colors, and size.

Continuation: The human eye follows the paths, lines, and curves of a design, and prefers to see a continuous flow of visual elements rather than separated objects.

Closure (also known as Reification): The human eye prefers to see complete shapes. If the visual elements are not complete, the user can perceive a complete shape by filling in missing visual information.

Proximity (also known as Emergence): Simple shapes arranged together can create a more complex image.

Figure/Ground (also known as Multi-stability): The human eye isolates shapes from backgrounds.

Symmetry and order: The design should be balanced and complete; otherwise, the user will spend time and effort trying to perceive an overall picture.

The Law of Similarity

The human eye tends to perceive similar elements in a design as a complete picture, shape, or group, even if those elements are separated. The brain seems to craft a link between elements of a similar nature. Then, we perceive them in a relationship with each other, separating them from other elements in a design. Human eyes are good at filling in "gaps" or connecting "dots". It happens naturally.

Similarity is influenced by the shape, size and color of the elements. When you mix objects with high degrees of similarity to each other with a group of dissimilar objects, the brain then devotes time and energy to creating a link between them so that it can try to understand their relationship with each other.

Let's try a quick experiment to check this out. If you've got a pencil and paper handy, draw about ten, rough circles on a page (spreading them across the page), leaving enough space between them to fit shapes of a similar size. Now, anywhere in those gaps, draw five or six triangles. Don't worry about geometric perfection: it doesn't matter in this simple illustration. Then, put about three dots anywhere between these shapes. Look away and stand back for a moment. Now, return to your sketch.

Do you notice anything? Your eye takes you right to the dots, doesn't it? This is because the dots are points, while the shapes are made up of lines.

Designing with Similarity in Mind

In web and interactive design, the similarity law can be used to contribute to building connections between linked elements. This relationship may be either physical or conceptual. You can make the most of this natural human inclination by helping your user's eye to discern parts of your design you want to accentuate.

Using this linkage might improve the user experience as follows:

Links

Links and navigation systems are essential to allow users to view website content and navigate between different pages.

While links are embedded inside the content, they must certainly be presented uniformly to allow users to identify linked text.

Thus, text links should be differentiated by color and usually shape as well. No matter how you do it, the important thing is that links should be clearly identifiable as such. Make them stand out. Many users will typically consider a link to be any text that is blue and underlined.

The use of the principle of similarity in menus and navigation helps users see the relationship between each group of navigation links. They will then perceive similar navigation items as being related or having a similar place in the site's data hierarchy.

Content

We can also use color, font size and type, highlighting, etc. to distinguish between and mark the types of content before a user reads them.

For example, quotes that appear in boxes, in a slightly bigger font, with an italic emphasis, are easily recognizable as such. The law of similarity carries our recognition of this standard from one website to another. Each site may use a variant on this theme, but, overall, the pattern is incredibly similar.

Breaking the law of similarity can also help draw a user's attention to a specific piece of content - such as a call to action. That's right; we can make use of both sides of the line or border the law makes. The user's eye is a remarkably easy tool to manipulate; you just need to figure out what parts of your design you want to bring out or tie together.

Headers

Website headers play another essential role in organizing and building well-structured content for search engine crawling and for the reader.

We normally place headers above content in a different font, color, size, etc. from the body of the content. They assist the reader in finding the relevant points in content and help control the overall flow of the work. They're great milestones and using them wisely (which isn't hard) will keep your users on your page.

Remember that a user's eye will activate the brain to work to interpret your design in a certain way. Nothing is more tiring than a solid block of text on a page, with no discernable features to draw the reader's eye. If you're near an old literary classic, why not open it and look at a spread of pages?

For example, let's try Victor Hugo's immortal Les Misérables on for size. Flicking forward six pages finally brought me to a new chapter heading, which my eye instantly noticed and read. None of the other text had stood out for me before I saw that.

The Take Away

Gestalt psychology is a theory of the mind which has been applied to a number of different aspects of human thought, action and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way the underlying processes are organized to help us make sense of the world.

The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes into a cohesive, meaningful and usable representation of the world. Over the last twenty years, interaction designers and other professionals involved in the development of products for human users have adopted the work of Gestalt psychologists.

Realizing the potential for applying Gestalt thinking helps us create (literally!) eye-catching works. Suddenly, we have new insights and ways of approaching problems and challenges. This is a gift - we can tailor our work according to the "engineering" of the human eye and brain.

Starting with the Law of Similarity, we find that we can make use of the following to draw a user's attention and let his or her brain do the rest:

These three short articles will provide you with a first approach to these laws. However, if you want to cement in your own mind the many ways you can organize visual information and improve your designs for all users, we suggest that you take the course explained below!

Where to Learn More

Interested in delving into the Gestalt principles? Check our "Gestalt Psychology and Web Design: The Ultimate Guide" course: https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide

References:

Hero Image: Author/Copyright holder: Eumedemito. Copyright terms and licence: Public Domain.

Show full article Hide full article

Learn more about Gestalt Principles

Take a deep dive into Gestalt Principles with our course Gestalt Psychology and Web Design: The Ultimate Guide .

One of the key ingredients to a successful product is the creation of effective, efficient and visually pleasing displays. In order to produce such high-quality displays, whether they are graphical (e.g., websites) or tangible (e.g., remote controls), an understanding of human vision is required, along with the knowledge of visual perception. By observing, researching, and identifying examples of our perceptual abilities, we can design products according to these unifying qualities. In order to spread such skills within the world of interaction design, we have developed "Gestalt Psychology and Web Design: The Ultimate Guide."

Gestalt psychology is a theory of mind which has been applied to a number of different aspects of human thought, action, and perception. In particular, Gestalt theorists and researchers attempt to understand visual perception in terms of the way in which underlying processes are organized and how they help us make sense of the world. The organization of these cognitive processes is important to our understanding of how we interpret the constant stream of visual information entering our eyes and how it becomes a cohesive, meaningful and usable representation of the world. Over the last twenty years, the work of Gestalt psychologists has been adopted by interaction designers and other professionals involved in the development of products for human users.

Within this course, we have compiled and consolidated some of the best resources currently available on the subject of Gestalt psychology and visual perception. To help you appreciate how you can apply Gestalt psychology to web design, we have provided many different examples from existing designs. These draw attention to the exact qualities, quirks, and features of visual perception. Moreover, they discuss how these have been accommodated and, on a number of occasions, exploited so as to support either the user's intentions or those of the designer or client.

The application of Gestalt thinking to design provides us with insights and new ways of approaching problems and challenges. By cementing in our own minds the many ways we organize visual information, we can improve our designs for all users.

All Literature

# data[].attributes.attachment_link.description
Your constantly-updated definition of Gestalt Principles and collection of topical content and literature Gestalt Principles are principles/laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces so it is aesthetically pleasing and easy to understand.

# data[].attributes.body
This construction has been going for over 100 years!

# data[].attributes.attachment_link.title
How Nature Inspired Gaudí In Creating La Sagrada Familia | TIME

# data[].attributes.body
One of the best designers nowadays!

# data[].attributes.attachment_link.title
Karim Rashid Interview: Embrace the Present

# data[].attributes.attachment_link.title
Water Droplets Create Amazing Human-Like Animations In This Gatorade​ Ad

# data[].attributes.attachment_link.title
Theo Jansen’s Wind-Powered Sculptures | The New Yorker

# data[].attributes.body
A fun game to learn about color properties and color types. Hope you like it!

# data[].attributes.attachment_link.readable_text
Color is the aspect of things that is caused by differing qualities of light being reflected or emitted by them.

To see color, you have to have light. When light shines on an object some colors bounce off the object and others are absorbed by it. Our eyes only see the colors that are bounced off or reflected.

The sun's rays contain all the colors of the rainbow mixed together. This mixture is known as white light. When white light strikes a white crayon or marker barrel, it appears white to us because it absorbs no color and reflects all color equally. A black crayon or marker cap absorbs all colors equally and reflects none, so it looks black to us. While artists consider black a color, scientists do not because black is the absence of all color.

All light rays contain color. Light is made of electromagnetic waves. These waves spread out from any light source, such as the sun. Light waves travel at tremendous speed (186,000 miles or 300,000 kilometers per second). Different colors have different wavelengths, which is the distance between corresponding parts of two of the waves. The longest wavelength of light that humans can see is red. The shortest is violet. Ultraviolet has an even shorter wavelength, but humans cannot see it. Some birds and bees can see ultraviolet light. Infrared has a longer wavelength than red light, and humans can not see this light but can feel the heat infrared generates.

https://www.crayola.com/for-educators/resources-landing/articles/color-what-is-color.aspx

# data[].attributes.attachment_link.description
Color is the aspect of things that is caused by differing qualities of light being reflected or emitted by them. To see color, you have to have light. When light shines on an object some colors bounce off the object and others are absorbed by it.

# data[].attributes.attachment_link.description
Direction, Design, Animation, Writing: Erica Gorochow
EP, Writing: Karl Sluis
Sound, Music: Michael Coffman

# data[].attributes.body
Good compilation of design principles information

# data[].attributes.body
Easy Tips into enhancing creativity

# data[].attributes.attachment_link.readable_text
The Oxford English Dictionary defines creativity as "the use of imagination or original ideas to create something; inventiveness." How will you exercise your creativity this year? To keep your creative resolutions, try these 5 process-oriented tips:

1. Choose a goal that matters to you - and write down the reasons why. Why do you want to keep this creative resolution? Why is this meaningful for you? It's easier to achieve a goal when you're clear about your motivation, notes psychologist Kelly McGonigal. To learn more from McGonigal about the science of goal-setting, read this article.

2. Block 10 minutes every day to work toward your creative goal. What's the smallest action you can take today that moves you closer to your creative goal? Does it take less than 10 minutes? Do it. It may sound obvious, but it's easy to forget: progress toward any goal requires an investment of time and energy. Here's how some creative pros schedule their time.

3. Try this schedule for 100 days. The idea is simple: Work on your creative project, every day, for 100 days. Document your progress. (After 100 days, you can pivot as needed.) Read more about the 100 Day Project here.

4. If you get stuck, create something - anything. "If you have a creative mind, it's a little bit like owning a border collie," notes author Elizabeth Gilbert. "You have to give it something to do or it will find something to do, and you will not like the thing it finds to do." For more ideas from Gilbert, read this article. To exercise your creative mind right now, try one of these fun writing prompts.

5. Enjoy the creative process. "Necessity isn't always the mother of invention," says Steven Johnson in this TED Talk. "You'll find the future wherever people are having the most fun." Whether that means finding a creative buddy to swap ideas with, or learning how to express your ideas through stop-motion animation, know that creative discovery and play go hand-in-hand - and while you can't control the outcome, you can control the process. So follow your curiosity - and remember to have fun!
Art credit: iStock For more ideas in creativity, subscribe to the weekly TED-Ed Newsletter here >>

# data[].attributes.attachment_link.title
5 practical ways to keep your creative resolutions

# data[].attributes.attachment_link.description
The Oxford English Dictionary defines creativity as "the use of imagination or original ideas to create something; inventiveness." How will you exercise your creativity this year? To keep your creative resolutions, try these 5 process-oriented tips: 1. Choose a goal that matters to you - and write down the reasons why.

# data[].attributes.body
How do we see color

# data[].attributes.attachment_link.description
Have you ever wondered what color is? In this first installment of a series on light, Colm Kelleher describes the physics behind colors-- why the colors we see are related to the period of motion and the frequency of waves.

# data[].attributes.body
The science of Symmetry

# data[].attributes.attachment_link.readable_text
The world turns on symmetry -- from the spin of subatomic particles to the dizzying beauty of an arabesque. But there's more to it than meets the eye. Here, Oxford mathematician Marcus du Sautoy offers a glimpse of the invisible numbers that marry all symmetrical objects. Oxford's newest science ambassador Marcus du Sautoy is also author of The Times' Sexy Maths column. He'll take you footballing with prime numbers, whopping symmetry groups, higher dimensions and other brow-furrowers.
Nature shows some incredibly intricate and surprising design elements in it's vast and breathtaking ecosystems. One of those design elements is indeed symmetry. But what do those elements have to do with our daily lives as human beings? In this inspiring talk about recent developments in biomimicry, Janine Benyus provides heartening examples of ways in which nature is already influencing the products and systems we build.
It is said that symmetry is beautiful. But is that always the case? What else is beautiful? How do we (and how should we) respond to beauty? A story, a work of art, a face, a designed object - how do we tell that something is beautiful? And why does it matter so much to us? Designer Richard Seymour explores our response to beauty and the surprising power of objects that exhibit it.
The images and text below are from this Wikipedia article on symmetry in biology.
As in the ones below, many viruses have radial symmetries, their coats being composed of a relatively small number of protein molecules arranged in a regular pattern to form polyhedrons, spheres, or ovoids. Gastroenteritis viruses: A rotavirus, B adenovirus, C norovirus, D astrovirus.

Apple cut horizontally, showing pentamerism.

Below is a microscopic green freshwater alga with spherical symmetry. Young colonies can be seen inside the larger ones.

Below, the flower of bee orchid, Ophrys apifera is bilaterally symmetrical ( zygomorphic). The lip of the flower resembles the (bilaterally symmetric) abdomen of a female bee; pollination occurs when a male bee attempts to mate with it.

# data[].attributes.attachment_link.description
When you hear the word symmetry, you might think generally of triangles, butterflies, or even ballerinas. But defined scientifically, symmetry is "a transformation that leaves an object unchanged." Huh? Colm Kelleher unpacks this abstract term and explains how animals' distinct symmetries can tell us more about them -- and ourselves.

# data[].attributes.body
Good comilation of Design talks

# data[].attributes.attachment_link.readable_text
Two breakthrough Finnish designers from Beauty-Cooper Hewitt Design Triennial discuss their explorations of design, memory, and making with Triennial curator Andrea Lipps. Tuomas Markunpoika made his piece Engineering Temporality to honor his grandmother, who suffered from Alzheimer's disease. He welded steel rings over a traditional wooden cabinet and then burned away the wood, leaving behind a lacy shell of blackened metal. Kustaa Saksi creates sinuous textiles inspired by his memories of growing up in Kouvola, Finland. His Jacquard tapestry Reveille employs images of moths, bats, and celestial constellations to visualize the sleeping mind at the edge of waking up. Event sponsored by the Finnish Cultural Institute's Mobius Fellowship Program. Learn more about Tuomas Markunpoika's Cabinet from the Engineering Temporality series, 2012: https://collection.cooperhewitt.org/objects/69155333/ Learn more about Kustaa Saksi's Tapestry, Nightless Night from the Reveille series, 2015: https://collection.cooperhewitt.org/objects/69155355/

# data[].attributes.attachment_link.title
Search | Everything | Smithsonian Learning Lab

# data[].attributes.attachment_link.description
Two breakthrough Finnish designers from Beauty-Cooper Hewitt Design Triennial discuss their explorations of design, memory, and making with Triennial curator Andrea Lipps. Tuomas Markunpoika made his piece Engineering Temporality to honor his grandmother, who suffered from Alzheimer's disease. He welded steel rings over a traditional wooden cabinet and then burned away the wood, leaving behind a lacy shell of blackened metal.

# data[].attributes.body
General view to art and design principles

# data[].attributes.attachment_link.readable_text
Conceptual Art

Discover how Conceptual artists used language, performance, and instructions to fuel creativity, and sought alternatives to institutional settings.

Language and Art
Outside the Museum

# data[].attributes.body
Discover the central role of Design

# data[].attributes.attachment_link.readable_text
Graphic design is telling a story by using both images and text. With that definition in mind, this course will focus on the textual elements of graphic design. From the history of typography, the difference between type, fonts and text as well as exposure to typography spacing, students will learn the value of selecting the best kind of type and combinations of fonts to get their message across in a visually pleasing manner.

# data[].attributes.attachment_link.title
Textual Elements of Design: Fonts, Typography, and Spacing | Coursera

# data[].attributes.attachment_link.description
Learn Textual Elements of Design: Fonts, Typography, and Spacing from University of Colorado Boulder. Graphic design is telling a story by using both images and text. With that definition in mind, this course will focus on the textual elements of ...

# data[].attributes.attachment_link.readable_text
In this project-centered course*, you will create a content-rich infographic on a topic of your choice using Adobe Illustrator (which you can download for a free, 30-day trial). You might choose to create a visual representation of data from the world of sports, entertainment, politics, or science, to explain a business trend or environmental issue, or even to present a theme or development from your personal life. Your finished infographic will engage your target audience and convey information clearly through effective use of design elements such as typography, color, and structure. Whether you're a graphic designer, a writer or the intern in the department, you'll learn: * what an infographic is and what makes a good one * how to work within your limits * how to work with a team (if you have one) * why infographics are effective * techniques for spotting data in stories * six valuable steps for planning an effective infographic * how to use and make some of the building blocks of infographics: maps, charts and flow charts * ways data can be visualized to clarify it and give it meaning * how to effectively design a good infographic by effectively using elements like type, color and an underlying grid structure * some free or cheap, online tools for making various kinds of infographics As you work on your project, you'll learn more about why infographics are effective, what makes a good infographic, and how to plan and design an infographic for maximum impact. You'll explore various approaches to data visualization, and you'll practice creating visualizations like maps, charts, flow charts, and simple drawings in your free version of Adobe Illustrator. Please note that if you are new to learning graphics software, making these graphics could take much longer than estimated as you learn and grow. What you'll need to get started: This project-based course is aimed at anyone interested in understanding, designing, and using infographics - from students and hobbyists to professional graphic designers. We'll use Adobe Illustrator for some components of the project. If you don't have access to the full version of Illustrator,you can download a free version at www.Adobe.com/Illustrator. If the free 30-day trial runs out, you can "purchase" it for a month for about $20. *About Project-Centered Courses: Project centered courses are designed specifically to help you complete a personally meaningful real-world project, with your instructor and a community of like-minded learners providing guidance and suggestions along the way. By actively applying new concepts as you learn, you'll master the course content more efficiently; you'll also get a head start on using the skills you gain to make positive changes in your life and career. When you complete the course, you'll have a finished project that you'll be proud to use and share. When you enroll in certain courses, you'll be asked to pay a small fee to share your work with others for peer review.

# data[].attributes.attachment_link.title
Design and Make Infographics (Project-Centered Course) | Coursera

# data[].attributes.attachment_link.description
In this project-centered course*, you will create a content-rich infographic on a topic of your choice using Adobe Illustrator (which you can download for a free, 30-day trial). You might choose to create a visual representation of data from the world of sports, entertainment, politics, or science, to explain a business trend or environmental issue, or even to present a theme or development from your personal life.

# data[].attributes.attachment_link.readable_text
Examining and exploring the various types of images and graphic elements will be the focus of this course. We will start with color theory to distinguish between CMYK, Pantone and RGB color options and their usages. Then we will review the various types of images used in both print and digital design projects. Finally we will look at logo designs to determine what makes for the best images and graphic elements for corporate branding and imaging.

# data[].attributes.attachment_link.title
Graphic Elements of Design: Color Theory and Image Formats | Coursera

# data[].attributes.attachment_link.description
Learn Graphic Elements of Design: Color Theory and Image Formats from University of Colorado Boulder. Examining and exploring the various types of images and graphic elements will be the focus of this course. We will start with color theory to ...

# data[].attributes.attachment_link.readable_text
What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work with users. You'll learn fundamental principles of visual design so that you can effectively organize and present information with your interfaces. You'll learn principles of perception and cognition that inform effective interaction design. And you'll learn how to perform and analyze controlled experiments online. In many cases, we'll use Web design as the anchoring domain. A lot of the examples will come from the Web, and we'll talk just a bit about Web technologies in particular. When we do so, it will be to support the main goal of this course, which is helping you build human-centered design skills, so that you have the principles and methods to create excellent interfaces with any technology.

# data[].attributes.attachment_link.title
Design Principles: an Introduction | Coursera

# data[].attributes.attachment_link.description
What makes an interface intuitive? How can I tell whether one design works better than another? This course will teach you fundamental principles of design and how to effectively evaluate your work with users. You'll learn fundamental principles of visual design so that you can effectively organize and present information with your interfaces.

# data[].attributes.body
Most interesting part under Design Principles section

# data[].attributes.attachment_link.description
This course is designed to teach students the elements of design. Students learn to create an impact through the use of color, fabrics and textures. Instruction includes the history of interior design, furniture styles, design theory, and project presentation. Students will learn to determine the scope of a project, develop and present a proposal, and implement a project.

# data[].attributes.headline
Digital Foundations: Introduction to Media Design with the Adobe Creative Cloud

# data[].attributes.subject
Digital Foundations: Introduction to Media Design with the Adobe Creative Cloud

# data[].attributes.body
Downloadable Book

# data[].attributes.attachment_link.title
Digital Foundations: Introduction to Media Design with the Adobe Creative Cloud, Revised Edition

# data[].attributes.attachment_link.description
Digital Foundations uses formal exercises of the Bauhaus to teach the Adobe Creative Suite. All students of digital design and production-whether learning in a classroom or on their own-need to understand the basic principles of design in order to implement them using current software.

# data[].attributes.attachment_link.readable_text
"What is design? A plan for arranging elements in such a way as to best accomplish a particular purpose." - Charles Eames

The purpose of visual design is communication.

Design is both a noun and a verb - it describes the thing created as well as the process of creating it.

A design is created with elements - line, shape, color, value and texture - that are put together using principles - unity, variety, emphasis, balance and space.

Although design can be divided into elements and principles for the sake of discussion, it is only when these elements and principles work together to form a whole that a design is considered successful.

The credit for analyzing forms and structuring design theory goes to the Bauhaus, a school founded in Germany in 1919. The Bauhaus developed a fundamental grammar of the visual, of which the central elements - the ABCs, so to speak - were the trio of primary colored shapes .

The metaphor the Bauhaus used is fitting; the elements of design can be compared to the elements of writing - words and punctuation - and the principles of design can be compared to the rules of grammar.

Design, like writing, involves problem solving, planning and organizing. In verbal communication, we choose which words to use and how to put them together to best communicate our thoughts and ideas. In visual communication we choose which elements to use and how to put them together to best communicate our thoughts and ideas.

We would not randomly throw words and punctuation on a page and expect them to communicate.

Should we do the same with images?

Most people do not think writing a sentence is anything extraordinary, yet they feel designing is something that only artists and designers can do. What they overlook is the fact that we have been taught verbal communication in school (year after year), but most people have had little, if any, training in visual communication.

We all learned to write sentences, to put together the elements of writing using the principles of grammar, to communicate verbally. We can learn to design in the same way, by putting together the elements of design using the principles of design, to communicate visually. If we can learn to write a sentence, we can also learn to design. It's as simple as .

# data[].attributes.attachment_link.description
"What is design? A plan for arranging elements in such a way as to best accomplish a particular purpose." - Charles Eames The purpose of visual design is communication. Design is both a noun and a verb - it describes the thing created as well as the process of creating it.

# data[].attributes.body
Basic info in Design.

# data[].attributes.attachment_link.readable_text
"What is design? A plan for arranging elements in such a way as to best accomplish a particular purpose." - Charles Eames

The purpose of visual design is communication.

Design is both a noun and a verb - it describes the thing created as well as the process of creating it.

A design is created with elements - line, shape, color, value and texture - that are put together using principles - unity, variety, emphasis, balance and space.

Although design can be divided into elements and principles for the sake of discussion, it is only when these elements and principles work together to form a whole that a design is considered successful.

The credit for analyzing forms and structuring design theory goes to the Bauhaus, a school founded in Germany in 1919. The Bauhaus developed a fundamental grammar of the visual, of which the central elements - the ABCs, so to speak - were the trio of primary colored shapes .

The metaphor the Bauhaus used is fitting; the elements of design can be compared to the elements of writing - words and punctuation - and the principles of design can be compared to the rules of grammar.

Design, like writing, involves problem solving, planning and organizing. In verbal communication, we choose which words to use and how to put them together to best communicate our thoughts and ideas. In visual communication we choose which elements to use and how to put them together to best communicate our thoughts and ideas.

We would not randomly throw words and punctuation on a page and expect them to communicate.

Should we do the same with images?

Most people do not think writing a sentence is anything extraordinary, yet they feel designing is something that only artists and designers can do. What they overlook is the fact that we have been taught verbal communication in school (year after year), but most people have had little, if any, training in visual communication.

We all learned to write sentences, to put together the elements of writing using the principles of grammar, to communicate verbally. We can learn to design in the same way, by putting together the elements of design using the principles of design, to communicate visually. If we can learn to write a sentence, we can also learn to design. It's as simple as .

# data[].attributes.attachment_link.description
"What is design? A plan for arranging elements in such a way as to best accomplish a particular purpose." - Charles Eames The purpose of visual design is communication. Design is both a noun and a verb - it describes the thing created as well as the process of creating it.

# data[].attributes.body
Design in theory and practice

# data[].attributes.attachment_link.readable_text
"Design in Theory and Practice" is all about visual communication design for the web. This column will explore topics ranging from the fundamentals of design, to typography and motion, to some of the more advanced theoretical concepts surrounding the practice. Joshua David McClurg-Genevese will guide you through the core tenets of the profession using examples from a wide variety of sources including classical art and architecture, business, media and movies, the environment and, of course, the web. "Design in Theory and Practice" will provide a solid foundation for any web design endeavors, with insight and resources to enhance your daily design activities.

# data[].attributes.attachment_link.title
Design in Theory and Practice - Digital Web

# data[].attributes.attachment_link.description
"Design in Theory and Practice" is all about visual communication design for the web. This column will explore topics ranging from the fundamentals of design, to typography and motion, to some of the more advanced theoretical concepts surrounding the practice.

# data[].attributes.body
Huge database of articles and information relevant to design

# data[].attributes.attachment_link.readable_text
Contributed by Tacy Trowbridge, education programs lead at Adobe. Students looking to start a creative career today have many advanced tools available at their fingertips, but this does not mean... read more →

# data[].attributes.attachment_link.description
Contributed by Tacy Trowbridge, education programs lead at Adobe. Students looking to start a creative career today have many advanced tools available at their fingertips, but this does not mean... read more →

# data[].attributes.body
Good color reference blog

# data[].attributes.attachment_link.description
COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love

# data[].attributes.body
interactive color wheel

# data[].attributes.attachment_link.title
Color wheel - color theory and calculator | Canva Colors

# data[].attributes.attachment_link.description
The color wheel shows the relationship between colors. Create the perfect color scheme for your next project. It’s easy and free!

# data[].attributes.body
Nice color scheme tool

# data[].attributes.attachment_link.readable_text
4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel

Hover over the wheel to view colors.
Click to choose a web-smart color.
Reload to clear.

about | en français | links

show full list | hide full list

Hover over the square to change saturation (left to right) and value (bottom to top) of the last hue.

Use the keyboard to rotate hue:
j rotates slowly counterclockwise,
k rotates quickly clockwise, and
l rotates slowly clockwise.

Jump to a primary or secondary color: red, green, blue, cyan, magenta, or yellow. The enter key will also add the current color to the pick list.

# data[].attributes.attachment_link.description
4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel · 4096 Color Wheel Hover over the wheel to view colors.

# data[].attributes.body
Short video that explores the concept of illusion of space.

# data[].attributes.attachment_link.authors[].name
Drawing & Painting - The Virtual Instructor

# data[].attributes.attachment_link.title
Six ways to create the illusion of space

# data[].attributes.attachment_link.description
Short tutorial on how to draw the illusion of space in six different ways www.arteascuola.com

# data[].attributes.body
This is a short and simple video that shows you how can a pattern be done using Google Slides.

# data[].attributes.attachment_link.title
Iceland's trying to slow traffic with a "floating" crosswalk

# data[].attributes.attachment_link.title
Furniture Optical Illusions - Zach King Magic

# data[].attributes.attachment_link.title
Ceramic Artist Makes Pottery That Looks Like Coral

# data[].attributes.body
Short and fun videos of creative inventions

# data[].attributes.attachment_link.readable_text
Have you ever wondered where the idea for a rubber glove came from? What about super glue? Or lipstick? From blue jeans to Band-Aids, watch these 10 TED-Ed Animations to find out the history behind some of your favorite everyday items.

Today, it is estimated that 50% of Americans eat at least one sandwich every day. And while it's all but impossible to imagine a world without them, sandwiches have only been around since 1762.

Lingerie has existed for hundreds of years, but it wasn't until the 1920s that a standardized cup sizing system was invented that changed underwear forever.

Today, 96% of American consumers own at least one pair of jeans. But where did these durable duds come from? And how did they get so popular?

Today, lip cosmetics are a billion dollar industry, with 1 out of every 3 women claiming that they won't leave home without applying lipstick. But how did it come to be so common?

Today, super glue is a nearly indispensable household item - but its incredibly sticky nature almost caused it to be abandoned in the development phase... twice.

It is estimated that Johnson & Johnson have made an astounding 100 billion Band-Aids since they were invented in 1920. But where did the idea come from?

Today, Americans use an estimated 500 million drinking straws every day. But where did the idea for this beloved utensil come from?

It's hard to imagine a modern hospital being able to function without rubber gloves - but they weren't actually invented until 1890.

The stethoscope is the single most widely used medical instrument in the world. But where did the idea come from?

Each year, approximately 2 billion popsicles are sold worldwide. But where did the idea for this tasty treat come from?

Want to learn more? Check out our Design, Engineering & Echnology series.
To get brand new TED-Ed Lessons delivered to your inbox each week, sign up for the free TED-Ed Newsletter here >>
Art Credit: Elise Haadsma

# data[].attributes.attachment_link.description
Have you ever wondered where the idea for a rubber glove came from? What about super glue? Or lipstick? From blue jeans to Band-Aids, watch these 10 TED-Ed Animations to find out the history behind some of your favorite everyday items. Today, it is estimated that 50% of Americans eat at least one sandwich every day.

# data[].attributes.attachment_link.title
CYMATICS: Science Vs. Music - Nigel Stanford

# data[].attributes.attachment_link.title
Wintergatan - Marble Machine (music instrument using 2000 marbles)

# data[].attributes.attachment_link.title
Kanye, deconstructed: The human voice as the ultimate instrument

# data[].attributes.body
A good video about color schemes

# data[].attributes.body
Excellent video about how to give critique to your classmates

# data[].attributes.attachment_link.title
How to Critique  | The Art Assignment | PBS Digital Studios

# data[].attributes.attachment_link.title
Symmetry vs. Asymmetry in Graphic Design

# data[].attributes.attachment_link.title
TrendWatching | Consumer Trends & Insights for 2022 and beyond

# data[].attributes.attachment_link.description
By Vicki Loomes Senior Trend Analyst Busy prepping real-world corporate events? You're not the only one! If you're keen to kick off your Leadership Summit or Town Hall with a trend keynote or workshop, here's a gentle yet fomo-ish nudge: please get in touch soon as we're currently experiencing a rise in speaking enquiries.

# data[].attributes.attachment_link.title
Color Palettes From Famous Movies Show How Colors Set The Mood Of A Film

# data[].attributes.attachment_link.description
Color sets the tone and mood of a film before any of the actors have even uttered a word. Directors Lilly and Lana Wachowski used a green tint in The

# data[].attributes.attachment_link.description
-MUSIC-
Antonio Vivaldi - The Four Seasons "Summer" III.Presto

-LIST OF FILMS-
Maleficent (2014), Robert Stromberg
My Girl (1991), Howard Zieff
Boyhood (2014), Richard Linklater
Marie Antoinette (2006), Sofia Coppola
Grease (1978), Randal Kleiser
The Grand Budapest Hotel (2014), Wes Anderson
Chicago (2002), Rob Marshall
Mean Girls (2004), Mark Waters
Scouts Guide to the Zombie Apocalypse (2015), Christopher Landon
The Wolf of Wall Street (2011), Martin Scorsese
Harry Potter and the Order of the Phoenix (2007), David Yates
Jennifer’s body (2009), Karyn Kusama
Harry Potter and the Half-Blood Prince (2009), David Yates
Moulin Rouge! (2001), Baz Luhrmann
Belly (1998), Hype Williams
Spring breakers (2012), Harmony Korine
Legally Blonde (2001), Robert Luketic
Whiplash (2014), Damien Chazelle
Big Eyes (2014), Tim Burton
Mad Max: Fury Road (2015), George Miller
Only God forgives (2013), Nicolas Winding Refn
Hard Candy (2005), David Slade
The shining (1980), Stanley Kubrick
The Aviator (2004), Martin Scorsese
2001: A Space Odyssey (1968), Stanley Kubrick
Alice in Wonderland (2010), Tim Burton
Fifty shades of Grey (2014), Sam Taylor-Johnson
Inglourious Basterds (2009), Quentin Tarantino/Eli Roth
American Beauty (1999), Sam Mendes
Upstream color (2013), Shane Carruth
Dawn of the Planet of the Apes (2014), Matt Reeves
The Royal Tenenbaums (2001), Wes Anderson
The Darjeeling Limited (2007), Wes Anderson
Born to be wild (2011), David Lickley
Fantastic Mr. Fox (2009), Wes Anderson
Skyfall (2012), Sam Mendes
Apocalypse Now (1979), Francis Ford Coppola
The Martian (2015), Ridley Scott
Pan (2015), Joe Wright
The Virgin Suicides (1999), Sofia Coppola
Ruby Sparks (2012), Jonathan Dayton/Valerie Faris
Birdman or (The Unexpected Virtue of Ignorance) (2014), Alejandro G. Iñárritu
Big Fish (2003), Tim Burton
Her (2013), Spike Jonze
Top Five (2014), Chris Rock
Elizabeth: The Golden Age (2007), Shekhar Kapur
Moonrise Kingdom (2012), Wes Anderson
Into the wild (2007), Sean Penn
Life of Pi (2012), Ang Lee
The tree of life (2011), Terrence Malick
Lost River (2014), Ryan Gosling
Melancholia (2011), Lars von Trier
Harry Potter and the Goblet of Fire (2005), Mike Newell
Fight Club (1999), David Fincher
The Truman show (1998), Peter Weir
The Revenant (2015), Alejandro G. Iñárritu
Hugo (2011), Martin Scorsese
Harry Potter and the Sorcerer's Stone (2001), Chris Columbus
The Matrix Revolutions (2013), Andy Wachowski/Lana Wachowski
Avatar (2009), James Cameron
X-Men: Days of Future Past (2014), Bryan Singer

# data[].attributes.attachment_link.readable_text
In filmmaking, color is used to set the tone of a scene before any of the actors have even uttered a word. Red is used to denote passion, danger or power. Pink signifies innocence, femininity and beauty. Yellow is associated with joy, naivety and insanity. Blue symbolizes isolation, passivity and calmness.

StudioBinder has come up with an interesting infographic that showcases the different color schemes used by filmmakers and the range of emotions they evoke. Check it out below.

Color Psychology In Films: A Supercut

Here's a brilliant montage by audiovisual media student Lidia Seara that shows how filmmakers use color psychology to portray the desired emotion in certain scenes.

00:03 - Innocence
00:09 - Sweetness
00:16 - Feminity
00:48 - Violence
00:57 - Passion
01:23 - Sociability
01:32 - Warm
01:42 - Youthfulness
01:56 - Madness
02:03 - Insecurity
02:14 - Nature
02:23 - Immaturity
02:31 - Destruction
02:49 - Calm
02:57 - Remoteness
03:15 - Fantasy
03:29 - Erotism

Also See:

Share this post with an artist, designer or a movie buff and voice your views in the comments below.

# data[].attributes.attachment_link.title
How Filmmakers Use Colors To Set The Mood Of A Film

# data[].attributes.attachment_link.description
In filmmaking, color is used to set the tone of a scene before any of the actors have even uttered a word. Red is used to denote passion, danger or power.

# data[].attributes.attachment_link.title
How filmmakers manipulate our emotions using color

# data[].attributes.body
Look at this video and see the contrast between achromatic and color composition.

# data[].attributes.body
An easy explanation between color systems

# data[].attributes.attachment_link.description
A brief look at two methods of combing colors - additive color, which uses red, green and blue as primaries, and so-called 'subtractive' color, which uses cyan, magenta and yellow. Additive color describes the way colored light combines. 'Subtractive' color describes the way colored filters stack up, or the way certain pigments mix.

# data[].attributes.attachment_link.title
Principles of Design - Balance (CtrlPaint.com)

# data[].attributes.attachment_link.title
Logo Design Tutorial | The Golden Ratio ✏️

# data[].attributes.attachment_link.title
The History of Typography - Animated Short

# data[].attributes.attachment_link.readable_text
86,484 fonts of which:
34,084 with accents
44,397 with the Euro symbol

How to install a font (details in the Help section)
Extract the files you have downloaded, then:

Windows 10/8/7/Vista: Right-click on the font files > "Install"

Mac OS X: Double-click the font file > "Install font" button. Other OS...

All the new fonts
The fonts presented on this website are their authors' property, and are either freeware, shareware, demo versions or public domain. The licence mentioned above the download button is just an indication. Please look at the readme-files in the archives or check the indicated author's website for details, and contact him/her if in doubt.
If no author/licence is indicated that's because we don't have information, that doesn't mean it's free.

# data[].attributes.attachment_link.description
Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.

# data[].attributes.body
Excellent example of typography transformed to convey a message.

# data[].attributes.attachment_link.title
Word as Image - from www.wordasimage.com

# data[].attributes.attachment_link.title
Golden Ratio Theory | Basics for Beginners

# data[].attributes.attachment_link.title
Intro to Shape Theory | Basics for Beginners

# data[].attributes.body
Good example of unifying concept

# data[].attributes.body
Take a look at this one. Is not magic, only a strobe light and golden ration proportion.

# data[].attributes.attachment_link.title
BLOOMS 2: Strobe Animated Sculptures Invented by John Edmark

# data[].attributes.attachment_link.description
Blooms are 3D printed sculptures designed to animate when spun under a strobe light. Unlike a 3D zoetrope, which animates a sequence of small changes to objects, a bloom animates as a single self-contained sculpture. The bloom’s animation effect is achieved by progressive rotations of the golden ratio, phi (ϕ), the same ratio that nature employs to generate the spiral patterns we see in pinecones and sunflowers. The rotational speed and strobe rate of the bloom are synchronized so that one flash occurs every time the bloom turns 137.5º (the angular version of phi).* Each bloom’s particular form and behavior is determined by a unique parametric seed I call a phi-nome (/fī nōm/). -John Edmark

John Edmark is an artist, designer, and inventor. He teaches at Stanford University.

Website: www.JohnEdmark.com 
Instagram: @John.Edmark
A talk about blooms and related work: https://www.exploratorium.edu/blogs/tangents/phyllotactic-spirals-art-john-edmark
Purchase blooms: shapeways.com/shops/edmark

Video by John Edmark ©2017
Creative Consultant: Terrence Tessaro McArdle
Filming: Charlie Nordstrom
Music: Bryan Barcinas

Pier 9 Artist in Residence program: autodesk.com/air

*For this video, rather than using a strobe, the camera was set to a very short shutter speed in order to freeze individual frames of the spinning sculpture.

# data[].attributes.body
With golden ration proportion things look nicer!

# data[].attributes.attachment_link.title
Formula for Beauty -- anyone can look hot with the golden ratio

# data[].attributes.body
This sort video will give excellent tips!

# data[].attributes.body
Excellent basic theory explanation

# data[].attributes.attachment_link.title
Sculpture Changes Picture at Different Angles

# data[].attributes.body
Amazing single line compositions. Remeber Picasso!

# data[].attributes.body
Take a look at the line variations from horizontal, vertical and diagonal!

# data[].attributes.body
Excellent source of competitions and inspirations

# data[].attributes.attachment_link.provider_name
designboom | architecture & design magazine

# data[].attributes.attachment_link.title
designboom | architecture & design magazine

# data[].attributes.attachment_link.description
est. 1999 designboom is the first and most popular digital magazine for architecture & design culture. daily news for a professional and creative audience.

# data[].attributes.body
I recommend this design blog to be up to date!

# data[].attributes.attachment_link.title
Core77 / Industrial Design Magazine + Resource

# data[].attributes.attachment_link.description
Magazine and resource offering calendar of events, firm listings, jobs section, forums, articles and competitions.

# data[].attributes.body
Follow this tutorial to learn hoy to use Augmented Reality to enhance your presentations

# data[].attributes.attachment_link.title
Steve Jobs' Vision of The World (Typography)

# data[].attributes.attachment_link.title
How To Be Creative | Off Book | PBS Digital Studios

# data[].attributes.body
Dieter Rams talking about the 10 comandments of design

# data[].attributes.body
Very brief Description of the Design Process

# data[].attributes.attachment_link.readable_text
The Design Process is a modern approach to the teaching of practical skills in schools, colleges and universities. It is sometimes called Product Design.

By the end of the lesson, learners will be able to:

1. define the Design Process.

2. explain the framework of design.

3. discuss the advantages and disadvantages of the design process in schools.

4. illustrate the design process diagrammatically

The process has various stages through which the design and construction of an object is taken through. The Design Process is illustrated diagrammatically in figure 1.

Lesson Content

Definition of design

Designing is an activity which involves the use of a wide range of experiences, knowledge and skills to find the best solution to a problem within certain constraints. Designing entails identifying and clarifying problems, making thoughtful responses and then creating and testing your solution.

There are many types of design. Some of these include:

1. Graphic design involves arranging shapes, images and/or type so they convey a visual message

2. Engineering design involves using mathematics, physics, and/or chemistry to solve a problem with a product or a process

3. Landscape design involves the arrangement of natural elements: Earth, Stone, Flora, and Water so that they blend into a visually appealing and functional outdoor space
Framework of design

One may wonder why manufacturers have to go through the process of designing instead of manufacturing right away in the workshop. In a way, we are likely to ask the question 'should it be 'process' before 'product' or vice versa'? There are many different methods of solving a problem. A framework is a series of linked stages which will help solve a problem. It is needed to support the design work. The framework makes the design easier.

Advantages of the Design Process

The process has many advantages compared with the traditional method of teaching practical skills. Some of these are:

it brings out (unearths) the creative potential of the learner.

It suppresses the spirit of copying in class.

It is student-centred as learners play active role in planning the practical lesson and skills.

It relates learners' learning outcomes to real life situations.

It imbibes the spirit of researching in students.

It encourages learners to become aware of the problems around them.

Now let's look at some of the disadvantages of the Design Process.

Disadvantages of the design process

It is time consuming to go through the lengthy process before the realisation.

It is less economical since one requires stationery and quite a lot of materials to present the various stages.

Without artistic skill, one may get downcast with the inability to sketch or draw effectively hence discouraging further attempt.

# data[].attributes.attachment_link.description
The Design Process is a modern approach to the teaching of practical skills in schools, colleges and universities. It is sometimes called Product Design. By the end of the lesson, learners will be able to: define the Design Process. explain the framework of design. discuss the advantages and disadvantages of the design process in schools.