The visual direction of content 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 — whether they do it consciously or not.
Aesthetics do play a role, but it’s more about the overall feel of the design. This feeling can be affected by whitespace, typography, symmetry, but mostly relationships between page elements.
Designers want visitors to stay on the page and keep scrolling by capturing their attention and keeping them interested in the site. Design principles should always focus on function before form. This means the design should complement the content, not shove it in as an afterthought.
In this post, I’d like to show you some tips on how you can improve your layouts and visual content flows on your site.
Focus on the Composition
Every single piece of a website builds upon the overall layout. This overall layout creates a composition that follows the rules of Gestalt theory which states that the whole is always greater than the sum of the parts.
Individual areas of a page come together to form a whole. Design elements need to build a gravitational pull on the content; everything on the page should naturally guide visitors down further until they reach the bottom of the page.
This is why relationships between different parts of the content (visuals, text, buttons, etc.) matter so much to design.
Your goal should be encouraging people to browse the site from their own inclination. It’s easier said than done, but you can learn a lot by studying real examples.
The home page for Monkop is a great example of visual hierarchy with both text and visuals. Plenty of space is used between elements, and the typography complements the branded vector illustrations.
As you scroll, you’ll notice straight horizontal page blocks divided by colors, borders and graphics. These are built with design patterns in mind to offer consistency throughout the page.
Towards the bottom, you’ll find a two-column split with images on one side, text on the other. The images also swap sides in a pattern of right-left-right-left. This draws attention, and breaks up the monotony of the typical page while still keeping a natural flow in the content.
A similar design aesthetic can be found on the website of Picjumbo, a landing page for a photo addon for Photoshop and Sketch users.
The home page places focus on the logo and the preview video. As you scroll, you’ll notice custom animations that move throughout the page. This animation really captures attention, and gets the viewer interested to keep scrolling.
Overall, the page feels open and easy to browse. The content is divided into horizontal blocks with crisp typography and clean icons.
Consider the way different page elements balance together, the space between elements, contrast between colors, and differing shapes. All of these things play a role in the overall composition. Every site naturally draws a certain weight onto the content.
There’s no absolute answer because it’s different for every site. For example, some navigation links look better when they’re big and oversized. Others fit better when they’re small with uppercase letters.
I suggest you study other websites in your niche. Really analyze how they’re put together. Even try rebuilding layouts to see which elements finally make the design “come together”.
Type Design Matters
The way you design your typography will affect content direction on your site. This has to do with type hierarchy and the design styles of different page elements like paragraphs, headers, bulleted lists, quotes, and special layout elements like columns or tables.
Visuals can affect the layout too, so it’s a good idea to design content with a natural progression. Write content in a manner that flows down the page, and keeps people reading through each paragraph.
The greatest tool you have at your disposal is your eye for design. 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.
Some things you might consider:
- Text size
- Font family
- Color contrast
- Page section relationships
- Line height and paragraph margins
- Letter spacing and upper/lowercase
For example, look at the homepage of Campaign Monitor. The top navigation links use all caps with small lettering. Other headers on the page follow this same all caps design which creates a sense of uniformity.
Other larger headers on the site are much more prominent, and they really jump off the page. Just by looking at a typical header design, it should be easy to tell the difference between a header and its paired body copy.
The typographic design styles on Campaign Monitor are exquisite, and they blend naturally into the layout. It takes practice to achieve a result like this, but the more you try, the easier it’ll be.
To learn a bit more, I highly recommend the following links:
- Design Principles: Visual Weight And Direction
- Working with Visual Weight in Your Designs
- 19 Factors That Impact Compositional Balance
Understand that different types of websites have different methods for guiding visitors through the site. For example landing pages want to guide visitors with tidbits of information, small icons, screenshots, and testimonials.
Other sites like blogs don’t usually bring in people to the home page at once. Most people land on an article page, so blog post layouts are meant to highlight the headline, and draw people further into the content. This is where quality copywriting comes into play because you want readers hanging off every word.
Social networks and web apps need quality user experience, so that’s a slightly different topic, but consider how the Facebook feed is designed to encourage scrolling and user interaction.
The design methods you employ to keep people browsing the site will change over time. But generally, your goal is to guide visitors with a visual content direction.
Let’s take a look at a landing page and a blog design to spot the differences.
Cactus is a static site generator for OS X. Their home page follows closely Apple’s design style — plenty of whitespace and thin sans-serif fonts.
Content is organized into columns, blocks, and chunks of text with simple graphics. These same aesthetics are common with Apple products, so Mac users will enjoy this design style.
Information about the product — including features and setup — are listed right on the home page. The page itself encourages scrolling through unique content, basic icons, and an alternating column pattern of left/right content blocks.
The goal here is to provide information to existing users, and to sell new users the idea of Cactus.
Now compare that design to the home page for The Next Web. The content is much more sporadic on a blog home page, because there’s a lot of different post topics.
Rectangles create a grid system that encapsulates multiple posts into a single layout. The goal here is to get users reading content on the site. It doesn’t matter if visitors download anything, but it does matter if they stick around to read something.
The way to get people reading is with great photos and catchy headlines. TNW does a great job of this, and their layout is built to keep people browsing with related post thumbnails in the sidebar and after-content area.
Guiding visitors to a particular action is different on every site. But you can learn a lot by studying what other successful sites do, and learning how to copy.
Trust Your Eyes
Individual design properties can be explained analytically, but the implementation changes for each site. A hero image with a “Scroll further” link doesn’t perform the same on all websites.
Learning to design is very much a visual process. Your eye for design is the most important aspect. You need to see things properly to identify this visual hierarchy. If you can see it on other websites then you’ll be able to replicate it on your own sites.
The best advice I have is to just trust your eyes. Create a list of your favorite websites, and spend 5 minutes browsing each one. Write down your favorite elements on the page, and how they affect the design. This will help you internalize these concepts from a UI/UX perspective, rather than a user’s perspective.
Also don’t be afraid to try stuff! Nobody got good at design just by reading articles about design. Yes, they help — they can actually help a lot. But you need to create stuff from scratch to learn what works and what doesn’t.
Train your eye by studying website layouts you like, and recreating them. Over time, you’ll build up a pattern library in your mind which makes designing new sites much easier.
Hopefully, these tips will get you started and give you a basic roadmap to follow. It’s not easy becoming a web designer, but the world does need talent, and it’s never been easier to teach yourself these fundamental concepts.
Study the best examples of websites with page elements you enjoy. Train your eye to recognize relationships, and you’ll quickly develop the skills necessary to replicate those relationships in your own work.