4 visual design principles for web designers

Every design seeks to create a feeling of unity among disparate components, or creatively break that unity to promote a specific action. The principles covered here will allow you to do both.

When you fire up an editing package or put pen to paper, every visual layout you use generates unity among disparate elements or creatively upends that unity to promote an action.

While visual design is an art form, it is also governed by the laws of math. You don’t begin with a metaphorical blank canvas for a designer: there are a couple of simple but effective tips for creating — and interrupting — merged designs. Web designers must give credit where credit is due: you have the Gestalt psychologists to thank you for the regulating visual design principles that you use daily.

What are the principles of design?

You likely learned the fundamentals of design in grade school art class.

When viewing a painting, sculpture, pamphlet, or email, you probably have a direct, emotional reaction to it. You know, instinctively, whether you like it or not. But, those not trained in layout might not have the ability to verbalize why. Visual design principles help us make sense of visual compositions. Fundamental principles of design include:

  • Space: In web design, this can be known as”white space,” or the area between components.
  • Hierarchy: The value of some components in respect to other people.
  • Contrast: How different components can produce a more cohesive composition.
  • Scale/Proportion: The connection between the size of components.

While these principles were developed alongside visual art, web designers apply design principles which build from these core ideas.

What does Gestalt mean?

The Cambridge Dictionary defines gestalt as:

A structure, configuration, or pattern of physical, biological, or psychological phenomena so integrated as to constitute a functional unit with properties not derivable by summation of its parts

If you are thinking,”Hey, well-designed site would be’gestalt,”’ you are right about the money.

The Gestalt psychologists did not have the last name”Gestalt.” German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler studied how the human mind processes complicated imagery and patterns in a disorderly world. They wondered,”How do people arrive at meaningful perceptions out of all of the mess their brains perceive? During that effort, these scientists identified four core theories describing how people interpret visual information.

Understanding how users on mobile devices and on desktops translate each pixel on your site makes you a sharper, more intuitive designer. Generally speaking, Gestalt principles hinge on the notion that the brain processes information as a complete before moving on to smaller portions.

The four basic principles of design extend into 13 specific rules of thumb about visual experiences to consider when designing your next cutting edge site. Before you dive into the world of every Gestalt principle, master these visual design principles.

Principle of emergence

Building in the core idea of this Gestalt circle of thought, the principle of development states that audiences try to make sense of an whole picture before identifying its components.

So, as soon as your mind is digesting a picture and attempting to make sense of it, first, it is going to take stock of this outline. Then, it compares the outline to other forms from your own memory and attempts to discover a match. After a match is located, your mind moves on to every component. When your brain can not find a match, it attempts to analyze the elements to make sense of the entire image.

If you find a fuzzy silhouette of somebody walking far away at night, your mind knows immediately it is a person from the form of the body and the person limbs. You do not need to find the palms or the eyes or the toes to understand it is a individual, but these visual details help you decide who the individual is.

What does development mean for design?

You’ve probably heard the cringey but accurate expression”Keep it simple, stupid!” In many contexts; regrettably, that’s true for your site. When designing, the principle of development suggests you ought to stick to comfortable, readily recognizable patterns.

We know you are itching to leave your signature stamp on the next form layout, and impress your supervisor with a really out-of-the-box presentation. But, for your customers, it is better to stay with the styles they have seen before.

Clearly outlined and labeled boxes using a”send” button will be considered a type more rapidly than a more”creative” take that makes website visitors do mental gymnastics to understand what they are taking a look at.

Wait! Do not click away. The rule of development does not mean you should stop designing creatively. Emergence suggests a hierarchy of visual interpretation: audiences start with the whole and focus on the parts.

Use your visual flair and remarkable knowledge of current design trends to get creative with individual form elements, so long as the entire picture is recognizable as a form. Emergence delivers a compelling argument for minimalism: a simpler form is much easier to recognize than a complicated one. So, as some annoying instructor once said, “Keep it simple!” We will not call you stupid.

Principle of reification

The principle of reification states your brain fills in gaps in visual information to recognize objects. You don’t need to see the entirety of something to know what it is — if a style just comprises a nose, one eye, and the outline of a chin, you can deduce that you are taking a look at a face.

Due to the principle of reification and how it plays out in your head, you have no trouble recognizing a stop sign even if it is sliced in half:

Even with half of the picture gone, you get that, right?

What does reification mean for design?

Reification means that you don’t need to include all of an item for audiences to recognize it. You may use this principle to conserve space in a design, indicate the content of the following slide in a carousel, or create your”coming soon” page both clearer and more enticing.

Reification is the thing that makes minimal logo layouts so aesthetically pleasing. Humans are always trying to bring order and meaning to meaningless chaos, and our eyes do this through reification: the filling in of missing information to make sense of something we see.

Let’s look at a concrete way to place reification in action on a web site. The picture on the left is the”before” picture — look to the right to find adjustments which take advantage of the principle of reification to produce a memorable (and less cluttered) design.

SourcePrinciple of multistability

Reading about the principle of multistability can make you feel like you’re stuck in a dorm room with a professional philosophy major, so we’ll make this short: Multistability explains why you can see only the faces, or just the vases in that famous optical illusion, but not both at exactly the exact same time.

Faces or vase? Multistability means you can only see one at a time.

The mind is not onboard with the unknown. Evolutionarily, the brain requires a response, and now. This need comes from seeking security, but it’s fascinating implications for visual layout. The mind fixates on one way of seeing something and excludes possible choices. Fascinating, right? You see Brutalism as an architectural invention or a scourge, a blight on an otherwise immaculate cityscape. But let us move on.

What does multistability mean for design?

If your Spidey senses are tingling, that is fine — multistability necessarily contributes to confusion, so it is hard to execute successfully in web design. We seek unity and cohesion, not chaos!

However, as tons of memorable logos have demonstrated through the years, you may use multistability to produce striking and surprising layouts, such as the FedEx logo. As soon as you see that arrow (between the E and the X), and the other arrows which reification suggests, it is pretty tough to unsee it.

Multistability means you will see the arrow… after you notice it. Invariance principle

The principle of invariance states your brain is proficient at differentiating similarities and differences. That is why it’s quite simple to make something stick out in a bunch of similar objects.

Remember the woman in the red dress in The Matrix? How about the little girl in the red jacket in Schindler’s List? Those two stand out so much — and stay so memorable — as their vivid color practically screams from the homogenous black-and-white backgrounds we see them moving against. It marks them as significant and worthy of your attention.

What does invariance mean for design?

In the domain of design, the invariance principle is a powerful tool. Introduce another component in an otherwise homogenous set of components to draw the eye and invite clicks.

Products’ pricing pages are excellent locations for reification. Web designers can make 1 column stick out from the rest of the pricing table through colour or dimensions. On a”cancel subscription” page, the”cancel” button might be small and gray to blend into the background, while the”keep subscription” button is lively and colorful.

This pricing table from Envato’s Modern Bootstrap 4 website motif obviously executes invariance by making the”Corporate” pricing alternative stick out against the other options.

By looking at MileIQ’s billing page, you can tell what actions they want the user to take. The”Edit Payment Information” button is brightly colored to inspire a click, while the”Cancel Subscription” button is barely noticeable.

These 4 visual design principles differ in UI design hints

Visual design principles, taken alongside Gestalt principles of thumb, apply to the whole picture and how your brain makes sense of an whole design. Our best UI design hints , on the other hand, deliver actionable advice for designers working on each individual component. Read our breakdown to find out UI design tips that cover scale, balance, hierarchy, and contrast, among other theories.