Visual Content Direction: What You Need to Know

The visual instruction of content is a reduction widely discussed, though essential aspect of high-converting web design. Every caller “soaks up” a new site on a initial page bucket — either they do it consciously or not.

Aesthetics do play a role, though it’s some-more about a overall feel of a design. This feeling can be influenced by whitespace, typography, symmetry, though mostly relationships between page elements.

Designers wish visitors to stay on a page and keep scrolling by capturing their courtesy and gripping them meddlesome in a site. Design beliefs should always concentration on duty before form. This means a settlement should complement a content, not force it in as an afterthought.

In this post, I’d like to uncover we some tips on how we can improve your layouts and visible calm flows on your site.

Focus on a Composition

Every singular square of a website builds upon a altogether layout. This altogether blueprint creates a combination that follows a manners of Gestalt theory that states that the whole is always incomparable than a sum of a parts.

Individual areas of a page come together to form a whole. Design elements need to build a gravitational pull on a content; all on a page should naturally beam visitors down serve until they strech a bottom of a page.

This is since relations between opposite tools of a calm (visuals, text, buttons, etc.) matter so many to design.

Your thought should be encouraging people to crop a site from their possess inclination. It’s easier pronounced than done, though we can learn a lot by studying genuine examples.

The home page for Monkop is a good instance of visible hierarchy with both calm and visuals. Plenty of space is used between elements, and a typography complements a branded matrix illustrations.

monkop alighting page visible design

As we scroll, you’ll notice straight plane page blocks divided by colors, borders and graphics. These are built with design patterns in mind to offer consistency via a page.

Towards a bottom, you’ll find a two-column split with images on one side, calm on a other. The images also swap sides in a settlement of right-left-right-left. This draws attention, and breaks adult a monotony of a standard page while still keeping a healthy flow in a content.

monkop swapping settlement matrix designs

A similar settlement aesthetic can be found on a website of Picjumbo, a alighting page for a print addon for Photoshop and Sketch users.

The home page places concentration on a trademark and a preview video. As we scroll, you’ll notice tradition animations that pierce via a page. This animation unequivocally captures attention, and gets a spectator interested to keep scrolling.

picjumbo page settlement homepage

Overall, a page feels open and easy to browse. The calm is divided into plane blocks with frail typography and purify icons.

Consider a approach opposite page elements balance together, a space between elements, contrariety between colors, and incompatible shapes. All of these things play a purpose in a overall composition. Every site naturally draws a certain weight onto a content.

There’s no comprehensive answer since it’s opposite for any site. For example, some navigation links demeanour improved when they’re large and oversized. Others fit improved when they’re small with uppercase letters.

I advise we investigate other websites in your niche. Really investigate how they’re put together. Even try rebuilding layouts to see that elements finally make a settlement “come together”.

Type Design Matters

The approach we settlement your typography will affect calm direction on your site. This has to do with type hierarchy and a design styles of opposite page elements like paragraphs, headers, bulleted lists, quotes, and special blueprint elements like columns or tables.

Visuals can impact a blueprint too, so it’s a good thought to settlement calm with a healthy progression. Write calm in a demeanour that flows down a page, and keeps people reading by any paragraph.

The biggest apparatus we have during your ordering is your eye for design. Learn to commend a differences in typographic elements, and how they describe to other page elements. Create relations between page sections to heed areas of content.

Some things we competence consider:

  • Text size
  • Font family
  • Color contrast
  • Page territory relationships
  • Line tallness and divide margins
  • Letter spacing and upper/lowercase

For example, demeanour during a homepage of Campaign Monitor. The tip navigation links use all caps with tiny lettering. Other headers on a page follow this same all caps design that creates a clarity of uniformity.

campaign guard website homepage

Other incomparable headers on a site are much some-more prominent, and they unequivocally burst off a page. Just by looking during a standard header design, it should be easy to tell a difference between a header and a interconnected physique copy.

The typographic settlement styles on Campaign Monitor are exquisite, and they blend naturally into a layout. It takes use to grasp a outcome like this, though a some-more we try, a easier it’ll be.

To learn a bit more, we rarely suggest a following links:

Guiding Content

Understand that different forms of websites have different methods for running visitors by a site. For instance landing pages wish to beam visitors with tidbits of information, small icons, screenshots, and testimonials.

Other sites like blogs don’t customarily move in people to a home page during once. Most people land on an essay page, so blog post layouts are meant to highlight a headline, and pull people further into a content. This is where quality copywriting comes into play since we wish readers unresolved off any word.

Social networks and web apps need quality user experience, so that’s a somewhat opposite topic, though cruise how a Facebook feed is designed to encourage scrolling and user interaction.

The settlement methods we occupy to keep people browsing a site will change over time. But generally, your thought is to guide visitors with a visible calm direction.

Let’s take a demeanour during a landing page and a blog design to mark a differences.

cactus for mac website app

Cactus is a static site generator for OS X. Their home page follows closely Apple’s settlement style — copiousness of whitespace and skinny sans-serif fonts.

Content is orderly into columns, blocks, and chunks of calm with elementary graphics. These same aesthetics are common with Apple products, so Mac users will suffer this settlement style.

Information about a product — including facilities and setup — are listed right on a home page. The page itself encourages scrolling by singular content, simple icons, and an swapping mainstay settlement of left/right calm blocks.

The thought here is to yield information to existing users, and to sell new users a thought of Cactus.

Now review that settlement to a home page for The Next Web. The calm is much some-more sporadic on a blog home page, since there’s a lot of opposite post topics.

the subsequent web homepage design

Rectangles emanate a grid complement that encapsulates multiple posts into a singular layout. The thought here is to get users reading content on a site. It doesn’t matter if visitors download anything, though it does matter if they stick around to review something.

The approach to get people reading is with great photos and catchy headlines. TNW does a good pursuit of this, and their blueprint is built to keep people browsing with associated post thumbnails in a sidebar and after-content area.

Guiding visitors to a sold movement is opposite on any site. But we can learn a lot by study what other successful sites do, and training how to copy.

Trust Your Eyes

Individual settlement properties can be explained analytically, though a doing changes for any site. A favourite picture with a “Scroll further” couple doesn’t perform a same on all websites.

Learning to settlement is really many a visual process. Your eye for settlement is a many critical aspect. You need to see things properly to brand this visual hierarchy. If we can see it on other websites afterwards you’ll be means to replicate it on your possess sites.

The best recommendation we have is to just trust your eyes. Create a list of your favorite websites, and spend 5 mins browsing any one. Write down your favorite elements on a page, and how they impact a design. This will assistance we internalize these concepts from a UI/UX perspective, rather than a user’s perspective.

Also don’t be fearful to try stuff! Nobody got good during settlement just by reading articles about design. Yes, they assistance — they can indeed assistance a lot. But we need to create things from blemish to learn what works and what doesn’t.

Train your eye by study website layouts we like, and recreating them. Over time, you’ll build adult a settlement library in your mind that creates conceptualizing new sites many easier.

Wrapping Up

Hopefully, these tips will get we started and give we a simple roadmap to follow. It’s not easy apropos a web designer, though a universe does need talent, and it’s never been easier to learn yourself these elemental concepts.

Study a best examples of websites with page elements we enjoy. Train your eye to commend relationships, and you’ll fast develop a skills required to replicate those relations in your possess work.

Add Comment