Thursday 23 August 2012

18 Common Design Elements I have Noticed in the Top IM/Marketing/Business Blogs...

I was obsessing over the layout of my blog's design and I kept changing things. My designer went almost to the point of frustration. I was not satisfied even after several changes. I kept moving things around. 

THEN IT STRUCK ME!

Why re-invent the wheel? 

I took 25 top IM and business blogs in the industry and opened several tabs in the browser.

These top bloggers would have done split testing of the elements in their blog and the position and presence of is not a thing of chance as long as the commonalities exist between the several top blogs. Also users would be used to these position of elements and would find easier to navigate through our site. We definitely don't want our users to hunt for the social sharing button or the subscription box, do we?

I started noticing the common features in more than 70% of these blogs. Rest 30% have exceptions in each element of design.

The 18 Common Design Elements...
  1. They have notification bars like the hello bar.
  2. The logo is contained in a bar which has fluid width.
  3. The navigation bar is either to the side of the logo or below the logo (never above it like in thesis default theme)
  4. Everyone has search bar somewhere in the top tight.
  5. Facebook / twitter / RSS Links are in the top right. Either on the row of the logo or nav bar or the sidebar.
  6. Email subscription box with freebie and social proof is the first element in the right side bar. They collect both name and email.
  7. Title is mostly in Arial Font. Bold Arial font in Black is used in 50%+ blogs.
  8. Content font is arial in most of the blogs. Font size varies from 13 - 16px.
  9. Author name, comments and date are below the title of the post.
  10. Social sharing buttons on the left side of the post which moves as the user scrolls down. Also below the post.
  11. Sidebar has these elements: Subscription box, Ad / author bio, [content links: most read ; recent published], facebook like box - fan page.
  12. A box above the footer: Author bio, Links to main pages, products
  13. Footer: Privacy Policy, Disclaimer, Copyright.
  14. All blogs have some form of gradient effects in at least some of their design elements.
  15. Every blog has containers for the post content. It is not open without borders as in thesis default theme.
  16. Page backgrounds are mostly light in color.
  17. Author bio box is below the post content.
  18. Some blogs have email subscription box below the post as well.

Commenting system is varied. Some use facebook comments only, some wp comments only, some both.

The above list was born as a result of nearly 48 hours of "design frustration". 

No comments:

Post a Comment