Core Design Priniples

Just like art, blog design is subjective. My taste may not be your taste and vice versa. And that’s okay. The world would be quite boring if everyone had the same tastes. Despite our own personal tastes, good design applies overarching design principles to make someone’s blog pleasing to the eye and easy to navigate.

As part of human nature, your readers make split-second judgements based on looks alone. That means your blog design speaks before your words ever do. Then when someone goes deeper and actually starts navigating your blog, truer opinions start forming around your overall blog design.

In this post, I cover four foundational design principles that leave a lasting impression:

1. proximity, 
2. repetition, 
3. contrast, and 
4. alignment. 

These design principles originally related to print design, but as the digital world has evolved, they work just the same for web design.

Regardless of whether you design your blog yourself or hire someone to design it for you, recognizing the key design principles will make you realize why you like certain blog designs and not others. The designs you like probably follow these principles.

Providing Structure with Proximity

The principle of proximity in design refers to the way you place design elements in relation to one another. You can apply this principle to your blog design to emphasize relationships between certain elements and thus affect the overall user experience by providing structure.

When considering how to use proximity, think of your entire blog design as well as specific parts of your design.

Thinking of your blog design as a whole, placing certain elements in close proximity to your header suggests that they want attention. When you visit a blog, you notice the header first because it’s at the top of the page and usually the largest visual element on the page. With that in mind, if you have your social media buttons at the top of a sidebar or within your header, you’re subtly telling the reader, “Hey! These social media buttons are important!” When buttons are placed near or within your header, they become one of first things a new blog visitor sees on your blog, like these social media icons in following image at the top of the blog Tidy Mom. Newspapers use proximity in this same way, placing major headlines and teasers leading to other important content above the fold.

When it comes to various blog elements, applying the principle of proximity means placing similar or related elements near one another while ensuring that unrelated elements live somewhere else on a page. You can best implement this by grouping related content and by effectively using white space.

Grouping related content

For your blog layout to feel comfortable for your reader, using proximity can save the day. Plus, placing related content or design elements near one another allows your blog visitor to get to the important sections of your site quickly and efficiently. Think about the inside of your car. Sure would be harder to use your stereo if the controls weren’t all together. And the same thing goes with blog design. When items are grouped logically, your overall blog design just makes more sense.

For example, by organizing your navigation design with proximity in mind, you create associations in the visitor’s mind that make it easier to explore your blog.

Some parts of your navigation logically fit together, such as

•  Social media buttons (Facebook, Twitter, LinkedIn, Pinterest)
• Subscription methods (RSS, e-mail)
• Ways to find content (search box, categories, popular posts)

On Dear Crissy’s blog, Crissy groups her search box, recent blog posts, categories, and archives together on her sidebar, as shown in image.

In addition, creating proximity in navigation can be something as simple as placing similar blog pages together in your navigation menu. If you have a food blog, for example, having a Recipes tab and Favorite Cooking Tools tab placed beside each other makes more sense than if you put a Contact page between them.

Applying the principle of proximity also suggests relationships between items grouped together. As an example, grouping a blog name and tagline together emphasizes the relationship between the two. This especially comes in handy if your tagline doesn’t make as much sense without the context of your blog name. As an example, if your blog name was A Slice of Life and the tagline was “Taking bites of the good stuff”, then the tagline becomes more effective placed close to the blog name.

However, you can’t adequately create groups of design elements or content without a designer’s best friend: white space.

White Space

White space refers to absence of text or graphics within a design. Contrary to how it sounds, white space isn’t necessarily white, though. White space not only provides balance to your blog design, but it also becomes critical to implementing the principle of proximity.

The proper use of white space can also shape your blog design in other different ways. For example, white space makes text on your blog more legible. Design elements surrounded by white space reinforce those elements’ proximity to one another, attracting attention to that part of your blog. And white space can also guide the readers’ eyes in a certain direction, like to focus on an area you want to highlight. Large areas of white space can even communicate an air of sophistication and openness.

In Image, the white space on the right side of Lee La La’s header allows you to notice the dandelion seeds floating down. Their path leads your eyes to the social media buttons. If that white space were filled with graphics, your eyes wouldn’t have been led down to the buttons as smoothly because other graphics would interrupt that flow.

Using white space in blog design often intimidates beginning designers, so they make the mistake of covering an entire image with design elements or spreading design elements out just to fill up the space. Instead, give graphics and words room to breathe and resist the urge to fill up every virtual nook and cranny.

When designing elements of your blog, be careful not to trap white space. Trapped white space refers to the space awkwardly boxed in between two or more design elements.Image illustrates how white space can get trapped within a blog header design. Trapped white space hinders the flow of design. The best fix is to adjust the other design elements in a way that eliminates bounded white space.

Repetition

Humans expect repetition. You see repetition in nature, such as a giraffe’s spots or a flower’s petals. You also see repetition in the man-made pieces of the world: Think of street sign shapes or windows on a high-rise building.

In design, repetition means using the same or similar elements throughout your design. If you were to spread out all the elements of your blog design onto a (virtual) table, you want all those pieces to look like they’re parts of a greater whole.

Repetition enhances flow of your blog design by connecting different design elements to one another. In image, you can see how the blog Running with Penguins uses repetition. The penguins and clouds are repeated within the header. Also using the penguin in the sidebar keeps the reader moving through the blog design.

These are elements of your blog design where you can apply repetition:

• FontsColor schemes
• Images or icons
• Font size, colors, or images
• Blog post and sidebar headings
• Blog page layout structure

Consistency

Just like consistency is important in branding, consistency also plays an important role in blog design. Could you imagine if every single blog post looked like they were from different blogs? Or if your blog sidebar looked like it came from a completely different site than your header?

Repeating some of your design elements consistently through your blog not only eliminates confusion, but the repetition also creates continuity and rhythm in your blog design.

As shown in image, Money Saving Mom illustrates consistency by repeating the script font from the header throughout the graphical elements in the sidebar on the right. 

Using repetition without being boring

Although repetition contributes to a strong blog design, using too much repetition can lead to a boring and stale look. Thinking back to a giraffe’s spots, each spot on a giraffe isn’t exactly the same. They vary in size and shape, making the animal even more beautiful.

One of my favorite blog designs is from Simply Vintagegirl. In image, you can see three distinct parts of Simply Vintagegirl’s overall design unified by repetition. Emily Rose uses the bird image from her blog header in the sidebar and to the left of each blog post title. However, she varies the bird in each instance by applying color, changing the size and adjusting the orientation.

Repetition can also suggest that items are related to one another.

When you vary repeated elements in your blog design, make the variation subtle. That way, your design still looks unified. The birds from Simply Vintagegirl’s blog wouldn’t connect her blog together the same way if all the birds were completely different.

Creating Contrast

Contrast in blog design occurs when two or more elements are different from one another. The more difference between the elements, the greater the contrast. Your blog design can benefit from contrast in a few ways:

• Contrast can provide visual interest. Our eyes are drawn to contrasting things, such as a pale moon against a black sky or a tall building surrounded by others a fraction of its size. In blog design, contrast can keep a blog pleasing to look at instead of being bland and uninteresting.
• Contrast can make an element jump off the page and encourage the reader to take action. If you want to highlight a button that links to your new e-book, you can use contrast so the button stands out while still fitting into your overall design.
•  Contrast makes text easy to read. Have you ever been to a blog where you couldn’t read an actual blog post because the background color and text color were too similar? Yeah, me too. Contrast needs to exist for blog post readability to entice your visitors to actually stay and read your posts. A white background with black or dark gray text is always a safe choice for main areas of content like a blog post. 
 

Pat Flynn’s blog Smart Passive Income uses light green boxes with a dark green border to make important areas of his blog design stand out. In image, the “Don’t know where to start?” and eBook Guide boxes contrast with the black video and e-book image to make those elements pop off the page and drive interest in his blog.

Methods to create contrast

You can apply contrast to your blog design in a few ways. Here are some common ones, which you can see in Figure.

• Color: Probably the mostcommon way to apply contrast is through color. You can use contrasting colors of the same shade (such as black with a light gray) or two colors on opposite ends of the color wheel (orange and blue). You can even use a single color to make a certain blog element stand out, such as how the red Free Instant Access button stands out against a pale green background in above image. 
• Fonts: Using two different fonts that complement each other can also create contrast in your text. For example, pairing a script font with a sans-serif font provides visual interest.You can also apply contrast with the same font by applying bold and italics. Just use either in moderation. Also, avoid underlining text because most online visitors would assume that an underlined word is a hyperlink.
• Size: Having two or more design elements of different sizes also creates contrast. For example, most all blog designs use a blog post title that’s larger than the subheadings within the post’s content.
• Images within your blog content: Adding images to your blog content provides contrast by breaking up large passages of text and drawing the reader further down into your blog.

After you understand these ways to apply contrast, you can start combining them to add even greater contrast, such as using two different fonts with two different colors.

Applying the right amount of contrast

Contrast in blog design can be tricky. More contrast doesn’t always equal better contrast. And sometimes you might not want to apply enough contrast for fear of taking it too far.

Too much contrast can be jarring to the reader or hinder your blog’s readability. For example, using white text on a black background is a frequently cited example of too much contrast. Although it may work in small doses, reading paragraph after paragraph becomes tiring because your eyes have to work harder to read the text. It also produces halation, the tendency of white characters or text to “glow” when on a black background.

Although not necessarily jarring, too little contrast can also make your blog hard to read. For example, creating subheadings in your blog post by just bolding text may not make the subheadings stand out enough for someone skimming your blog post. (Most people skim.) In this example, using a different font and a different color (as shown in Figure) adds enough contrast for the way people will likely interact with your blog’s content.

When you’re deciding how elements should contrast, keep in mind the following questions:

• What are the most important and second most important actions you want blog visitors to take? Add contrast to highlight the areas of your blog where readers will take those actions (such as the Free Instant Access button example mentioned earlier). 
• How can contrast make this content easily accessible to blog visitors? Sometimes, breaking up text with photos is ideal. For example, a how-to post full of photos that show the steps is the most efficient and easy to-skim way to present that information and break up the text. If your content is more conceptual than visual, breaking text into subheadings as shown in Figure may be a better choice.

Aligning Design Elements

Alignment refers to lining up elements or text within a design. Even if you’ve never designed anything before, you’ve used alignment in a word processing program when selecting left, center, right, or justified alignment for your paragraphs.

Proper alignment makes various design elements or text appear as if they were connected through a visible line. I’d say that alignment is the most subtle of the core design principles, mainly because unless you’re aware of this design principle, you may not be able to pinpoint why a design looks “off.” Despite the subtlety, alignment is a key principle of blog design, because alignment gives a blog design a clean and polished look.

You can align design elements both on a vertical or horizontal axis. 

• On a vertical axis, you could align left, center, or right. Aligning a blog post’s text is an example of vertical alignment.
• On a horizontal axis, you align design elements to the top, center or baseline. Figure illustrates ways to align differently shaped rectangles. Despite the type  of alignment, the rectangles look as if they were connected by a visible line, which I’ve added for you as a dashed line.

Creating order through alignment

Aligning various elements on your blog or within a design element gives your design order and improves readability.

When talking about alignment as it relates to blog design, here are some common elements where you can apply alignment:

• Components of the blog header
• Sidebar buttons or badges
• Text within your post or sidebar
• Images within your post or sidebar

You can also take a more bird’s-eye

view of your blog design and look at how separate blog elements align to one another. For example, in

Figure, I added a dashed line so that you can see how the blog name, tagline, blog post title, and

post content all align to the left.

Using grids or lines to aid in placement

If you’re designing your own blog, you’re most likely using a theme or framework that already takes alignment into consideration. However, if

you’re designing your blog header or other components that make up your overall blog design, grids or lines can help ensure that parts of your design line up.

Using a grid system provides you with a guide so your design elements don’t look like they were haphazardly placed here and there. Some design programs like Adobe Illustrator or Photoshop have settings to show grids and the capability to add guiding lines. In Adobe Photoshop, design with a grid by choosing View➪Show➪Grid. In Photoshop Elements 11, you choose View➪Grid.

When it comes to aligning text within your actual blog posts, you don’t have to worry too much. Blogging platforms such as WordPress default to aligning your text to the left, but you can change this by simply clicking the icons that adjust your alignment to the right, center, or full (justified).