Our Strategy for Building Visually-Interesting Pages

by Jason Forrest

Insights / Website Design / Our Strategy for Building Visually-Interesting Pages

For a non-designer, building visually-interesting pages can feel like an insurmountable challenge. Determining what layout, font-size, images, and colors are just some of the many design-elements that are involved in creating a page.

However, there are strategies that are easy to understand, and can be utilized by anyone to create a beautiful and user-friendly page.

This is our approach to building visually-interesting pages:

Layout

Layout is where it all starts.

When we build a new page, we typically start with a grid system known as Bootstrap. When we talk about grids, we are talking about columns and rows separated by regular spacing intervals, or margins. Bootstrap isn’t the only grid system out there, and when you start to get into print design, the options become more varied.

But even the simplest grid system ensures a degree of balance and symmetry, which makes it easier for the eye to scan the page.

Studies have shown that when people read a page, they don’t read it linearly like they would a book. Rather, their eyes scan in an F-shaped pattern. Best practices dictate placing the most visually-interesting and important design elements within that pattern.

Of course, you can always just rely on the golden ratio, like basically every great artist throughout history.

Typography

Once you have an established grid system, you can start to experiment with the actual elements that make up the look and feel of your page.

We always begin this step by establishing a typographic hierarchy. Our go-to method for this step is a site called Modular Scale. By plugging in the measurements of our grid system into modular scale, we can generate a typographic hierarchy that reinforces our grid.

For example, Bootstrap templates use a grid of 12 columns of 60 pixels each, with a gutter between each column of 30 pixels each. Given that the lowest common denominator, we typically build a typography based on numbers divisible by 3, e.g. 12, 15, or 18 pixels, with a line-height ratio of 1.5. That means each font size is 1.5 times larger than the previous font. After developing a typographic hierarchy, we apply it to our chosen fonts, which we typically source from Adobe Fonts or Google Fonts.

Image Size

The method we use for choosing image sizes goes back to the grid system, and our established typographic hierarchy.

For example, we can apply our type ratio to our image size. If each column in a 12-column grid is 60 pixels wide, and the space between each column is 30 pixels wide, then a half page image is 510 pixels. Applying our type ratio of 1.5 gives us a height of 765 pixels.

There are other options as well, such as ensuring that both the height and width are divisible by the lowest common denominator of our grid and type systems, which in this case is 3. In short, it all comes back to the grid system and basic math.

Of course, image size isn’t the only criteria we use. It’s also important to choose the right imagery as well.

Colors

With colors, there isn’t exactly a system of numbers or basic math that you can rely on to build a visually-interesting page. However, you can rely on human psychology to give a deeper meaning to the colors that you choose.

For example, brighter colors like reds and oranges are visually exciting, connoting energy and movement. They typically make good choices for things you want someone’s eye to go to quickly. Blues and greens connote trust, which make them good choices for buttons and links.

Typically, once we have a few basic color directions picked out, we’ll use Adobe Color to flesh out and experiment with more options within those color families. This gives us a higher degree of control over our palette. It’s important to note that when we choose the color palette for our page, we apply those colors to the images we choose as well. That way everything is visually cohesive and not chaotic.

By utilizing these helpful tools, even non-designers will be able to create visually-interesting, cohesive, and user-friendly pages.