Blog Structure, Design & Usability

Most blog authors used to use the blog as a place to vent, now its function has changed, stout people use it as a publication medium for the general public (Citizen Journalism). In this post we will discuss some visual elements that have created a blog to an optimal design.

The synergy of designs and contents

The essence of the blog exists on the content itself, but like on our previous discussion, good contents will not succeed without effective design. Some may be able to survive just because of seniority or unique content. But what about the junior blogger who despite having good content but less or not pay attention to their own blog design?

After all, what harm in indulging the reader with a presentation of the design that will spoil their eyes? In addition to making the reader feel more at home to linger on our blog would also create a message that we want to convey be easily accepted.

Here are some tips that can be used to optimize the design of the blog

Column Layout

From my observations, there are 5 different types of column layout often used. Each layout has its advantages and disadvantages, but we can determine the best choice for our own blog.

1. Vertical single column



This type is a standard layout and almost all blogs use this method. Because the blog's documentation and dating based on the day, the newest posts will appear at the top.

Advantages:

* The readers already familiar with this layout
* Easily find the latest posts
* The space is wide enough on content

Disadvantages:

* In terms of visuals would look ordinary
* Readers will experience some difficulties if they want to see previous posts

2. Vertical Paralell Column



Similar to the first type, the difference is only in the content column, it's divided into two parts so it would load more content on homepage.

Advantages:

* Readers can easily see some recent posts
* Provide the choices to readers
* Will make it look richer in content

Disadvantages:

* It will look crowded
* If you don't adjust each column height perfectly, that would just result in
messy impressed
* Some readers will be puzzled to determine which articles will be read first

3. Grid (4-6 column)



As the name implies, this layout using a grid system to adjust the layout of column content. Designers are free to determine how many columns will be used, depending on the needs and types of content.

Advantages:

* Looks interesting on the visual
* All posts can appear on one page

Disadvantages:

* It will confuse the reader
* From the layout is likely to look messy

4. Full Width



This type isn't using the column, but the whole width of the existing pages. Even the right or left sidebar are not in use, but there are also some who still using the sidebar with a very minimal portion.

Advantages:

* The content will be a major focus
* Looks unique because it has not been widely used
* More comfortable in reading
* Readers will focus on the post without any interference from the banner or widget

Disadvantages:

* Looks empty
* Kinda hard to show the previous post
* Need a special strategy to place banner ads or other widgets

5. Custom Posting



You can use this type only if you are good in coding, this is more like "breaking-the-rules" type because it doesn't use the same template on each post but adjust the design to the content in the strict sense.

Advantages:

* It definitely looks unique
* The synergy of content and design increasingly be felt
* Readers will read the whole post out of curiosity on the overall look

Disadvantages:

* It took a fair amount of time to make a post
* Not everyone is good at coding

Font settings

Content is the soul of a blog so we must consider how we use and display the text properly. The goal is to be comfortable in reading. Here are some things that need to be noticed,

1. Font Type



In a blog there are 2 types of fonts that must be used, one as a heading, and the other as the body text. For heading section we can use a font that is rarely used by other designers or adjust the basic needs of the headline itself, which is to be the center of attention.

You can use bold fonts or find an unique one (readable). Use of unusual fonts in heading can also be a formation of the character design of a blog. Use of unusual fonts in heading can also be a formation of the character design of a blog.

You also need the font for body text. In this section we should use the standard font so that it can be displayed properly on all reader's monitor.

2. Fonts Size



We're talking about font size for the body text. Because the development of the current monitor resolution, size 12 .pts is the standard. But if you want to improve comfort in reading could use a 14-16 point, this measure depends on the type of font you use.

3. Line Spacing



This section is very small but important, it serves to maintain comfort when we read the article. The formula usually used in determining a line spacing:

font size in use + 4 points

For example, you use 14 point font, then the ideal line space size is 18 points. However, in managing a line spacing you should try it directly, because the shape font does affect.

Header Design & Logo

Header and logo design should be attractive. Proverbial, header and logo are the person's face. Because of this design for the blog, then a logo may not be a necessity, but it would be better if you have it even if only in the form of typography (logotype). Unique logo design will become the identity of the blog.

Header design can be customized with a "feel" you want to get of the whole blog . You can explore with illustrations, textures, or even playing with white space.

Blog Header Designs For Inspiration

Styling Images

Actually, this is a simple trick, all you need is just add a border around each image or photo that you use as a post. By doing so, the image will appear more attractive, although it doesnt give a big impact but you will see the difference.

Sidebar Optimization

most blogs are using the sidebar, but sometimes we are confused what to put. Before you put widgets at random, you better think first thing what you want to convey to the reader (other than content).
There is no standard for this optimization tips, everything depends on you. From my observation, the sidebar on the blog usually used for,

Recent Comments
Recent Posts (featured Posts)
Popular Posts
Ads banner
Twitter/Facebook Page stream
Social Media Icon
Category
Archives
Voting widget
Top Commentators

Blog Header Designs For Inspiration

Comment Section

This is the default for all the existing blog engines and has the same purpose which is to create 2-way communication between writer and reader.

There are many ways to make the comment to be interesting, apart from the visual aspect, the use of unique words also become an additional factor that encourages readers to comment on. In order for readers to feel comfortable in writing comments the comment field should be made wider and a bit high, it will be useful for readers who want to write a rather long comment.

Comment Form Design

Footer Optimization

Big Footer trend seems to still take place because of its function as a second termination area after the content.

There are two basic objectives to design the Big Footer on the blog,
1. To put additional features not suitable placed in the sidebar above.
2. Encourage readers to better explore the blog content (for example, by placing the widget "Most discussed Articles")

To be sure the footer is no longer be the 'worthless' space, it can actually support the full content of the blog.

Footer Design Inspirations

Conclusion

Blog with good content would be great if the design is effective and beautiful. Content and design is no longer a separate thing but in synergy to produce a fascinating blog and useful for people.

Are you ready to design (or redesign)? Or something you want to add? Let's comment!