Blogs, magazine and news websites present the web designers a unique kind of challenge. It is the challenge of making an impressive content-driver website.

We, as designers, want to develop the distinct styles, and gravitate towards several sorts of projects while having several choices in this respect. In my opinion, it’s the content-driven websites provide the biggest challenge in this regard… and there’s nothing more content-driven than a good old fashioned blog.

Something that feels right about putting the significant, likable text, images, and/or video together in an aesthetically pleasing manner is what ideas does the blog content comprise, as the idea is supposed to be discussed and appreciated. Facilitating this process is not a walk in the park usually.

As a designer, we have to take care of the following issues:

Control: Blogs in general, are really easy to create, operate and experiment, all thanks to CMS services such as WordPress, Ghost, Blogger, Joomla, Drupal, and so on. So the control factor has already been taken care of, sweet.

Flexibility of the matter: They have a vast range of topics to discuss in their blogs, even if a blog has a central theme, they can infrequently break away from it and explore other ideas. So we our design must not contain a monotonous approach.

Content size: Posts of the blog can be short or long according to their priority. So we need a design that looks good on brief articles, such as dailies and the lengthy ones as well.

Versatility: The posts are not supposed to be text only. There are so many examples of the blogs based on videos and photos and being charming and pretty popular. So we need a the website that can handle text and rich media appropriately.

Business enhancement: some blogs are used to establish expertise in a particular field. That enables them to increase business opportunities for good. For instance focuses on web design and freebies.

The Basic Structure of Blogs and Magazine Websites

Whenever you visit a blog or an internet magazine, you’ll notice the following variations:

Homepage contains a list of articles, most recent first. Usually, an excerpt or snippet is visible on the homepage and you have to click the link to view full article.

Homepage contains a mixture of Magazine and Blog layouts.

In some new styles of blogs, such as ghost based blogs sometimes give you the whole article on the homepage. This is a new trend and more experimentation is being done in this method.

John's Blog

John’s blog contains a layout that displays the whole article on the homepage.

Apart from homepage, there are sorting order pages. They include category homepages, tag homepages and archives. They all can have their independent layout. Commonly, they contain the list of articles with only excerpts visible.

You can also play with permanent pages, such as about, contact etc.
Each page can have its own layout.

Whether you are designing huge news portal that contains hundreds of pages and it’s updated in realtime… or you are designing a blog that will only be updated once or twice a week, the basics stay the same.

This is the structure that has been working since ever, and that’s the good thing about it. Everybody is already familiar with it. And your client expects you to work on this procedure and the ready-made CMS services also need you to work according. You should not try to alter the structure. You have to limit yourself within this structure.

This structure of a personal blog does work and it’s familiar as well, but it doesn’t mean that it’s the most accurate choice for your content.  Most importantly, you have to make sure that it’s easy for your users to find quickly what they’re looking for. You have mere seconds to engage your readers on our site, so you have to get creative.

The Sidebar


The Good Side

Sidebars are amazingly efficient when it comes to showcasing something. For instance we, at Designzzz have placed our newsletter signup box on the top and rest of the side bar contains only ads.

We figured that only one action is most important for us which is users subscribing to our newsletter, so we placed that on the top. Rest of the bar contain only ads so that user knows what’s coming and what’s not.

Besides, minimalism is important for speed as well. Adding archives, tag clouds and stuff is only gonna make the website heavier and perhaps shabby as well. There’s no point in doing that.

The Bad Side

Sidebars are distracting. That’s the biggest problem. The adverts are usually very colorful and catchy, so they distract from the content. And sometimes, some ads contain sounds with no mute button. That’s just torture!

In the new CMS Ghost, they have removed sidebar permanently. And observing from the success Ghost is receiving, we can declare that sidebar-free websites will become popular more easily now. Conclusion is that you need to fill up sidebars cohesively, and you can also think about designing sidebar free websites.

Modern Trend

Just a couple of years back, designers were putting everything in sidebars, from category list to archives. Then they started to put everything on menus. Now minimalism is the key. Simple, easy to spot and easy to understand things work now.


Homepage Complete

This is the heart of the homepage. This is the most important area of the whole website and this is where you have to do your best work.

Although search engines and social media, like Stumbleupon, Facebook, Pinterest and all others will send traffic directly to your post/article page, not the homepage but you still need to focus on your homepage. That’s because it is the homepage that creates the impression. The homepage is undoubtedly the face of your website.

Full Post vs. Post Excerpt

Whether to display the whole post on the homepage or just a thumbnail with excerpt depends on the length of the post. If you create brief posts, such as seen on Tumblr, then the whole posts could be alright. If you share full-fledged articles, only an excerpt is necessary.

Design and Presentation

How you present your posts, depends on how many posts do you want to display? If you have lots of posts, you might consider using slider. You’ll also have to use a magazine or news layout so that lots of stories can be presented at once.

If you have a traditional personal blog, you don’t need to do a lot. One thing that I will suggest you is to add a bit of jQuery here and there for dynamism, but don’t use gradients and web 2.0 styles. They are absolutely outdated now. Use of flat colors is the key now.

Post Page

Post Page

Once we have set the homepage, we come to post pages. This is the page that most of your visitors will see first, that is because search engines and social media will send visitors directly to these pages, not your home page.

For this reason, you have to take care of these pages with great care.

These pages don’t need to be “designed” brilliantly but coherently. Here are a few elements that you must put in your post pages.


Doesn’t matter how brilliant content you might create, if it’s not readable, it’s worthless. Make sure your fonts looks good, it has an appropriate size and color. Keep in mind that many people will visit your website from mobile phones and tablets, so your font size and color should be reader friendly on small screens as well.

Color Scheming

Use flat colors. They are reader friendly, they are rendered easily and they are lightweight.

For your content, try to put black text on white background. That’s the tried and tested combination of colors for content.

That’s it. That’s all their is to the basics of designing a magazine layout. If you have any questions or suggestions about this post, please do comment. We love your comments.

Pin It