16 {{ upvoteCount | shortNum }}
16 {{ upvoteCount | shortNum }}

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

by Deepak Media
13 replies
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".

Regards,
Deepak Raj
#blogs #common #design #elements #noticed #top
  • Profile picture of the author bigballin6161
    Good share!
    {{ DiscussionBoard.errors[6846475].message }}
  • Profile picture of the author Dan Curtis
    Originally Posted by Deepak Media View Post


    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.
    Sorry, but I don't agree with your premise. Do you have any evidence that these bloggers did any split testing on any of these 18 items?

    I suspect that the majority did not test more than an item or two from your list. Or perhaps they did no testing at all.

    In all likelihood they copied what they saw on other blogs.

    I think that some of the things in your list may actually distract from your most wanted response. And some may have no effect at all.

    The most thorough testing that I am aware of has been done by Jakob Nielsen at useit.com.
    {{ DiscussionBoard.errors[6846511].message }}
    • Profile picture of the author Deepak Media
      Originally Posted by Dan Curtis View Post

      Sorry, but I don't agree with your premise. Do you have any evidence that these bloggers did any split testing on any of these 18 items?

      I suspect that the majority did not test more than an item or two from your list. Or perhaps they did no testing at all.

      In all likelihood they copied what they saw on other blogs.

      I think that some of the things in your list may actually distract from your most wanted response. And some may have no effect at all.

      The most thorough testing that I am aware of has been done by Jakob Nielsen at useit.com.
      I have been following Jakob for a long time. He hasn't changed his blog design for the past 10+ years. But he has himself told in an interview that he doesn't recommend anyone to use his website's design. He does just to stand out.
      Signature
      Digital Marketing Author | Speaker | Consultant

      Read my Blog: DigitalDeepak.com

      @ Bangalore, India.
      {{ DiscussionBoard.errors[6855866].message }}
  • Profile picture of the author fin
    What does number 2 mean?

    I tend to agree with your post. Another thing I would add is a sense of minimalism.
    {{ DiscussionBoard.errors[6846604].message }}
    • Profile picture of the author JohnMcCabe
      Originally Posted by fin View Post

      What does number 2 mean?

      I tend to agree with your post. Another thing I would add is a sense of minimalism.
      Jamie, fluid width means that the bar will expand horizontally to fit the width of the browser window. Whether you are viewing the page on a 15" laptop or a 50" TV, the bar will extend to the limits of the browser window.
      {{ DiscussionBoard.errors[6850462].message }}
  • Profile picture of the author MatthewWoodward
    This sounds like my blog =D
    Signature
    {{ DiscussionBoard.errors[6851012].message }}
  • Profile picture of the author Don Grace
    One thing you must consider is monkey see, monkey do effect. A LOT of people tend to see and assume that since so n so is doing it, it must be good.

    Now, as a conversion expert I will say blogs are not my thing, so there is a variable. But when it come to design in direct response sales letters (online), never listen to a designer (what the hell do they know about conversion... NOTHING), and do not assume the crowd knows what they are doing.

    Case and point...

    We split test a sales letter I wrote for the IM market. I placed mine in a plain template with bare minimum graphics, and we hired a designer to to make a pimped out version full of hyped up pizzazz... as expected, my control beat the flashy one by a full point.
    {{ DiscussionBoard.errors[6851067].message }}
    • Profile picture of the author Daniel Evans
      It often pays devidens to break the mould.

      If you look different from the usual it will garner peoples interests if it's done in a presentable way.

      Daniel
      {{ DiscussionBoard.errors[6851127].message }}
    • Profile picture of the author Steve Wells
      Originally Posted by Don Grace View Post

      But when it come to design in direct response sales letters (online), never listen to a designer (what the hell do they know about conversion... NOTHING)

      Case and point...

      We split test a sales letter I wrote for the IM market. I placed mine in a plain template with bare minimum graphics, and we hired a designer to to make a pimped out version full of hyped up pizzazz... as expected, my control beat the flashy one by a full point.
      Do you know what a professional graphic designer is taught?

      They are taught advertising and marketing.

      Of course they are not copy writers, but they know a heck of a lot more than the average marketer including but not limited to marketing psychology with color and words, etc....

      Also, maybe the designer you hired in the split test was not that good of a designer?

      Pimping out a salespage is not required to make conversions, but graphics that ENHANCE the sales copy ATTRACT, INFLUENCE and ENGAGE the viewer is what your after.
      Signature
      Need Custom Graphics Work? - Message Me For A Design Quote!
      {{ DiscussionBoard.errors[6854308].message }}
      • Profile picture of the author JohnMcCabe
        Originally Posted by Steve Wells View Post

        Do you know what a professional graphic designer is taught?

        They are taught advertising and marketing.
        Many "professional graphic designers" are taught how to make pretty pictures. Read discussions among professional designers and you'll run across endless complaints about how a client wants to 'ruin' their design in order to make more sales.

        Designers who actually understand that their job, in this case, is to make a page do its job more effectively are not the norm.

        Originally Posted by Steve Wells View Post

        Of course they are not copy writers, but they know a heck of a lot more than the average marketer including but not limited to marketing psychology with color and words, etc....

        Also, maybe the designer you hired in the split test was not that good of a designer?
        Again, you are painting all designers with your own brush. Just because you may understand these things doesn't make it common or even average.

        Of course, there are a lot of people who call themselves graphic designers who should be called "people who know how to use Photoshop and can get paid for it."

        Originally Posted by Steve Wells View Post

        Pimping out a salespage is not required to make conversions, but graphics that ENHANCE the sales copy ATTRACT, INFLUENCE and ENGAGE the viewer is what your after.
        Couldn't agree with this more strongly.
        {{ DiscussionBoard.errors[6855535].message }}
  • Profile picture of the author Frank Donovan
    Originally Posted by Deepak Media View Post

    I was obsessing over the layout of my blog's design...
    I think that's the problem here, Deepak. That obsession may be clouding your judgement.

    Just because the top 25 blogs have several design elements in common, it doesn't follow that those elements are the cause of their success. It's just as likely that the bottom 25 blogs feature a fair number of those same elements.

    There are, to be sure, one or two design points that make sense, mainly to do with ease of navigation and focus. But we've all seen our share of boring blogs that incorporate many of the design elements in your list.

    If I wanted to examine the real reasons behind the success of the top blogs - what separates them from the pack - I wouldn't look much further than their content and marketing.

    Frank
    Signature


    {{ DiscussionBoard.errors[6851169].message }}
    • Profile picture of the author robg1
      Originally Posted by Frank Donovan View Post

      I think that's the problem here, Deepak. That obsession may be clouding your judgement.

      Just because the top 25 blogs have several design elements in common, it doesn't follow that those elements are the cause of their success. It's just as likely that the bottom 25 blogs feature a fair number of those same elements.

      There are, to be sure, one or two design points that make sense, mainly to do with ease of navigation and focus. But we've all seen our share of boring blogs that incorporate many of the design elements in your list.

      If I wanted to examine the real reasons behind the success of the top blogs - what separates them from the pack - I wouldn't look much further than their content and marketing.

      Frank
      I would agree with this because if you look at small niches' some of the top ranking sites use a free wordpress theme.
      {{ DiscussionBoard.errors[6851228].message }}
      • Profile picture of the author David James
        It's an interesting way to think about blog design. I like the way you've broken the design elements down.

        I agree with the others that your thinking is flawed that the blogs are in someway successful because of these design elements rather than content.

        Saying that, I suppose there it is possible that a visitor to your site will subconsciously recognise the commonality in design with the top blogs and associate it with them.
        {{ DiscussionBoard.errors[6853305].message }}

Trending Topics