As web creators, investing in visual hierarchy is a natural step in our design workflow. Last year, the Shutterstock blog published an article naming “6 Rules of Visual Hierarchy That Will Help You Design Better”. These rules, they explain, are based on the overarching goal of arranging design components based on importance, which “guides the viewer through the design and ensures the message is clear and concise.”
Of their six rules, Shutterstock’s first and foremost rule pertains to a website’s color scheme, and they state this rule as: “Make a Focal Point with Color.” What we can understand from this is that when you’re addressing your website’s visual hierarchy, your color palette is one of the most fundamental design choices to take into consideration. This is true for the colors you choose for your text, your button colors, your backgrounds, and so on.
According to this mindset, when you have a hero text, and then a description beneath it, your choice of font colors is crucial, as is your choice of background color. In the image above, for example, it’s much easier to distinguish between the heading and the subheading when they are given two different colors. This way, the more “important” text is in a dark color, and the “less important” text is in a contrasting, lighter color. The eye addresses the h1 before the subheading, simply because it’s much prominent, and it’s easy to see each in its own light. In the second visual, both text elements are in the same color, so the eye instinctively sees them as one unit, and is slower to separate them into two different entities.
The principle of color palettes as a determinant of visual hierarchy pertains to almost every visual component in a website. This is true for text colors, as we described, but also for background colors and button colors. Emphasizing the importance of a specific button can often be achieved by choosing a button color that is most likely to draw user attention, and ultimately result in a higher clickthrough rate.
Generate the CSS style for border-radius, fonts, transforms, backgrounds, box and text shadows with the online CSS code generators.