{"id":26739,"date":"2016-07-05T23:01:31","date_gmt":"2016-07-05T15:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26739"},"modified":"2023-03-10T17:51:53","modified_gmt":"2023-03-10T09:51:53","slug":"visual-content-direction","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/visual-content-direction\/","title":{"rendered":"What You Need to Know About Visual Content Direction"},"content":{"rendered":"

The visual direction of content<\/strong> is a less widely discussed, but crucial aspect of high-converting web design. Every visitor \"soaks up\" a new site on the first-page load \u2014 whether they do it consciously or not.<\/p>\n

Aesthetics do play a role, but it\u2019s more about the overall feel of the design<\/strong>. This feeling can be affected by whitespace, typography<\/a>, symmetry, but mostly relationships<\/strong> between page elements.<\/p>\n

Designers want visitors to stay on the page<\/strong> and keep scrolling<\/strong> by capturing their attention and keeping them interested in the site. Design principles should always focus on function before form<\/strong>. This means the design should complement the content<\/strong>, not shove it in as an afterthought.<\/p>\n

In this post, I\u2019d like to show you some tips on how you can improve your layouts and visual content flows<\/strong> on your site.<\/p>\n

Focus on the Composition<\/h2>\n

Every single piece of a website builds upon the overall layout<\/strong>. This overall layout creates a composition that follows the rules of Gestalt theory<\/a> which states that the whole is always greater than the sum of the parts<\/em>.<\/p>\n

Individual areas of a page come together to form a whole<\/strong>. Design elements need to build a gravitational pull<\/em> on the content; everything on the page should naturally guide visitors down further until they reach the bottom of the page<\/strong>.<\/p>\n

This is why relationships between different parts of the content (visuals, text, buttons, etc.) matter so much to design.<\/p>\n

Your goal should be encouraging people<\/strong> to browse the site from their own inclination. It\u2019s easier said than done, but you can learn a lot by studying real examples<\/strong>.<\/p>\n

The home page for Monkop<\/strong> is a great example of visual hierarchy with both text and visuals<\/strong>. Plenty of space is used between elements, and the typography complements the branded vector illustrations.<\/p>\n

\"mockup<\/figure>\n

As you scroll, you\u2019ll notice straight horizontal page blocks<\/strong> divided by colors, borders and graphics. These are built with design patterns<\/strong> in mind to offer consistency<\/strong> throughout the page.<\/p>\n

Towards the bottom, you\u2019ll find a two-column split<\/strong> with images on one side, text on the other. The images also swap sides<\/strong> in a pattern of right-left-right-left. This draws attention, and breaks up the monotony<\/strong> of the typical page while still keeping a natural flow<\/strong> in the content.<\/p>\n

\"monkop<\/figure>\n

Overall, the page feels open<\/strong> and easy to browse<\/strong>. The content is divided into horizontal blocks<\/strong> with crisp typography and clean icons.<\/p>\n

Consider the way different page elements balance together<\/strong>, the space between elements, contrast between colors, and differing shapes. All of these things play a role in the overall composition<\/a>. Every site naturally draws a certain weight onto the content.<\/p>\n

There\u2019s no absolute answer because it\u2019s different for every site. For example, some navigation links look better when they\u2019re big and oversized<\/strong>. Others fit better when they\u2019re small with uppercase letters<\/strong>.<\/p>\n

I suggest you study other websites in your niche. Really analyze how they\u2019re put together. Even try rebuilding layouts to see which elements finally make the design \"come together\".<\/p>\n

Type Design Matters<\/h2>\n

The way you design your typography will affect content direction<\/strong> on your site. This has to do with type hierarchy<\/a> and the design styles of different page elements<\/strong> like paragraphs, headers, bulleted lists, quotes, and special layout elements like columns or tables.<\/p>\n

Visuals<\/strong> can affect the layout too, so it\u2019s a good idea to design content with a natural progression<\/strong>. Write content in a manner that flows down the page<\/strong>, and keeps people reading<\/strong> through each paragraph.<\/p>\n

The greatest tool you have at your disposal is your eye for design<\/strong>. Learn to recognize the differences in typographic elements and how they relate to other page elements. Create relationships between page sections to distinguish areas of content.<\/p>\n

Some things you might consider:<\/p>\n