A balanced composition feels right. 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.
Read more…
When someone lands on a page of your site what do you want that person to do? Where do you want them to look? What information do you want your visitors to notice and in what order? Ideally, you want people to see your most important information first and your next most important information second.
You want potential customers to see the copy that will convince them to buy before they see the “Buy Now” button. You want people to be presented with the right information at the right time, and one way to do that is to control the flow of your composition. 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.
Read more…
Has a client ever asked you to make the logo bigger? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn’t getting noticed. The clients wants to make the logo bigger.
Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again.
Read more…
Every element on a web page exerts a visual force that attracts the eye of the viewer. The greater the force, the more the eye is attracted. These forces also appear to act on other elements, imparting a visual direction to their potential movement and suggesting where you should look next.
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.
Read more…
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.
Read more…
If you see graphic design as a process of arranging shapes on a canvas, then you’re only seeing half of what you work with. The negative space of the canvas is just as important as the positive elements that we place on the canvas.
Read more…
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? — Ed.
In 1910, psychologist Max Wertheimer had an insight when he observed a series of lights flashing on and off at a railroad crossing. It was similar to how the lights encircling a movie theater marquee flash on and off.
Read more…
One of the issues we need to be concerned with in responsive design is how to 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.
Read more…
We tend to think of navigating a website as clicking from page-to-page via some kind of global navigation that’s always visible. When it comes to a single page, we often think scrolling is the one and only way to move from one end to the next. Sometimes global navigation and scrolling are the best, most appropriate ways to move about, (however, they aren’t the only ways).
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…
