Align Design Elements on Your Blog Site - dummies

Align Design Elements on Your Blog Site

By Melissa Culbertson

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. 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. The 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 has been added for you as a dashed line.


Create 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, the dashed line enables you to see how the blog name, tagline, blog post title, and post content all align to the left.


Use 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).