Content Creation
Have you ever walked into a bustling theme park and had a difficult time knowing where to look? The lights, the smells, the bright colors -- it can all be a bit overwhelming to our brain's cognitive ability. As educators, we often see our students struggle with this same challenge when it comes to knowing where to look on a page. A wall of text can be as ominous to a fourth grader as it is to us grown-ups! This is where the art of visual hierarchy comes in.
Words convey information. Visual hierarchy conveys how we experience that information.
Put in the simplest terms, visual hierarchy refers to the order in which elements are arranged in design and communications. Structure conveys importance. Think of a school enrollment webpage where the enrollment button is the most prominent element on the page. It might be the biggest, highlighted in a bold color, and clickable when hovered over as opposed to the rest of the static pieces on the page. This saves the website's key demographic (parents) plenty of search time and prevents users from getting weighed down by distractions.
Visual hierarchy is proof that our brains never stop learning. Each new experience is processed uniquely. In order to be effective in visual communications and content, presenters need to think beyond the text box and ensure that our communication is not only informative but engaging. Follow our team through the basics of visual hierarchy as you develop your brand.
The visual economy cannot be underrated. Our brains process images far more efficiently than text and retain what we learn through visual media. That's why websites are growing more and more competitive when it comes to building image content.
When scanning a webpage, book, or brochure, images and content at the top of the page tend to grab our attention first as we work our way down. This is the natural placement for banners and aesthetic imagery.
Details are also important and play a key role in SEO. A well-designed website has a cohesive structure throughout. Fonts should be consistent. Your color palette should match throughout, utilizing hex codes within the same color family, and the overall layout should be consistent. Uniformity makes important information stand out when visually diversified from the norm.
Recognition above recall is the goal of modern visual communications. The pros at Adobe succinctly summarize, "sizing is a very basic but crucial principle that can give elements more importance than others and help draw the viewer's eye towards a certain area. By increasing the scale of an element, you can immediately attract the viewer's attention. "
Scalable SEO content is key when it comes to both engagement and driving focus. Be aware of the number of headings, bolded text and large font you're using throughout your content. A good rule of thumb is to use large-scale headings for every 300-500 words in blogs. For short-form web content, large elements should be scaled even lower to really draw attention to the information you want visitors to see.
A few good examples of effective scalable content include media giants like Disney. When browsing for a trip to Disneyland, the user is immediately confronted with the iconic logo, a simple set of text welcoming them to the magic, and readily available subheaders for reservations, card member perks, and ticket information. By contrast, a poor example of scalable content might be a Disney blogger who lists full synopsis in the same font and size as the headers of each article.
Lastly, consider the order of content. Subpoints should fall under main categories and be arranged in a way that makes sense cognitively. Our brains tend to group information into easy-to-digest categories such as geographic location, information type, calendar date and chronological order. We follow predictable reading paths, much like students reading a book. Working within a logical format allows users to follow the story your content is telling.
As content designers, we love a good aesthetic as much as anyone. However, it's equally important to pair functionality with form when it comes to mastering the art of visual hierarchy. A website can have stunning visuals. However, if the interface has poor functionality, users will likely click off before appreciating the quality visuals. Recalling our school example, no one wants to search for minutes on end to find the enrollment button. In fact, by the third click, most users have formed an opinion on a website and are disengaged. It takes the average user less than a second to determine if a website has what they're looking for.
Consider the most efficient way to draw users to your CTA (Call To Action), then align that with the most visually dynamic way to boost your click-to-conversion rate. Identify what your CTA is early on in the design mapping process. As a result, this directive does not get lost in the flow of artistic inspiration. Is your CTA purchasing a product, subscribing to a blog, or booking an appointment? For our education clients, a CTA may be a bit more fluid, such as engaging with the information section on the website or reading the "about us" blurb. This kind of CTA might be vague, but it's important to ensure your website navigation is crystal clear.
A few key elements to consider when finalizing your visual content and design include:
Visual hierarchy is an art that can be both challenging and exciting to master. If we had one final takeaway to give our education community when it comes to communication strategy, it would be that visual hierarchy is used to help place importance on certain elements of your design. However, the more elements you deem the "most important," the harder it is going to be to perfect your design. Start simple and focus on that one dynamic element of the highest value to drive your design toward success.
Looking for more great SEO tips? Check out Improving SEO Through Content-Rich Pages on Your Website.
Join our List
Sign-up for our email list to get exclusive access to content, sneak previews, updates and more!
Zero spam. Unsubscribe at any time.
