Balancing a composition involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum. An unbalanced composition can lead to tension. In some projects, unbalanced might be right for the message you’re trying to communicate, but generally you want balanced compositions. However, design principles aren’t hard and fast rules. They’re guidelines. There’s no one right way to communicate that two elements are similar or different, for example. You don’t need to follow any of these principles, although you should understand them and have a reason for breaking them.
Read more…
Compositional flow determines how the eye is led through a design: where it looks first, where it looks next, where the eye pauses, and how long it stays. You have a lot of control over where people look when they’re viewing a webpage you’ve designed. On a text-heavy and graphic-light page, a visitor’s eye likely follows something like a Z-pattern or F-pattern across and down the page. However, as soon as you design page elements and add graphics, those patterns no longer apply. Your visitor’s eye will follow the flow, movement and rhythm you create.
Read more…
Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate others in order for your design to display any sort of visual hierarchy. By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three levels is ideal; they’re all that most people can discern. Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information being more visually prominent. It will help you communicate with visitors quickly and efficiently.
Read more…
Visual direction is the perceived direction of forces acting on and exerted by elements. A visually heavy element will attract the eye to it. The direction is a cue to the viewer’s eye to move elsewhere. We refer to this force as visual weight and to the perceived direction of visual forces as visual direction. Both are important concepts to understand if you want to create hierarchy, flow, rhythm and balance in your composition. Many intrinsic characteristics can be modified to make an element visually weightier or lighter.
Read more…
Showing that some things are the same and some are different is the first step in visual communication. It’s the primary way that viewers derive meaning. Contrast and similarity have different functions. They are used in varying degree and in combination. You’ll always see some of both because neither exists without the other. Changing one means also changing the other. They are clues to design elements. The goal is to contrast similar layers. The way we structure contrasting and similar elements creates hierarchy, flow and compositional balance.
Read more…
Design is an arrangement of both shapes and space. Learn to see the shapes that space forms and how space communicates. This is second part of a series on design principles for beginners. The first part covered an introduction to gestalt; today Steven Bradley will build on those gestalt principles and show you how many of the fundamental principles you work with as designers have their origin there. Make an effort to spend time observing how space is used in design!
Read more…
Gestalt principles are important to understand. They sit at the foundation of everything we do visually as designers. They describe how everyone visually perceives objects. This article is part of a new series about design principles that can serve both as a refresher for seasoned designers and reference for newcomers to the industry. Hopefully, the content covered here isn’t too obvious and self-explanatory, but it’s always great to have a nice quick refresher every now and again, isn’t it?
Read more…
How can we maintain hierarchy as elements on the screen are resized and reflowed? Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another. You need to think about how you’ll want to rearrange blocks of content as your design moves from single to multiple columns.
Read more…
In this post, Steven Bradley guides us through five websites to explore navigation options. Generate ideas for alternate ways to navigate content!
Read more…
Based on Maslow’s hierarchy of needs, the idea of a design hierarchy of needs rests on the assumption that in order to be successful, a design must meet basic needs before it can satisfy higher-level needs. Before a design can “Wow” us, it must work as intended. It must meet some minimal need or nothing else will really matter.
Read more…
You’ve likely heard the phrase “form follows function,” but have you really thought about what it means or what it implies about Web design? On the surface, “form follows function” seems to make a lot of sense. The way something looks should be determined by its purpose. Is this really true? Does the phrase hold up upon deeper inspection? requirements](https://www.smashingmagazine.com/2008/08/05/7-essential-guidelines-for-functional-design/).
Read more…
