Total Followers 132,503
Many web designers today are moving away from the traditional layout of a website. One of the layouts that are in trend today is magazine or news style of website. Magazine-styled website offer good usability, clean typography, and professional interface.
Adding on to that is that even if you put many elements on a page, it will still look organized and not overcrowded. Usually, magazine style is used for online periodicals, lifestyle, and fashion websites.
Generally, these are the things you will see on a magazine-styled website.
It is common on any website to have a horizontal navigation, and that also goes with magazine-styled websites.
Horizontal navigation limits the space used because navigations always go from left to right. Also, you don’t have to scroll down to find the last navigation. Adding on to that is the easy to understand drop down sub menus.
As I am searching for magazine-styled websites, I have seen one website with vertical navigation.
The good thing about vertical navigation is you can group sub categories without using a drop down menu. But, seldom web designers use vertical navigations for users quickly notice the menus if they are put at the top, horizontally.
Since there are various menus and sub menus for a magazine-styled website, drop down menus make it easier for visitors to find what they are looking for.
Take a look at the website Slate. Instead of using sub menus under the main menus, you will see the articles listed on that menu.
Because magazine-styled websites have lots of contents, most of the articles are categorized to let visitors find what they are searching for based on categories.
The same goes with Search Bar. Websites with magazine style of layout have many contents to put on, and that is why most of them have search bars. In this case, visitors can find the specific topics they are searching for easily and quickly.
Articles listed on the Popular News or Stories section are the most read by visitors of a website. Listing these kinds of articles is a great way to inform your readers on which are the most clicked.
With many contents posted on websites, putting Latest News or Headlines section on a website is recommended. This informs visitors and users on what the newly published articles on the website are.
Look at this website, not only that headlines are listed, there is also a mark saying “Most Read” for the most clicked link in an article. This informs users which are the popular ones.
Putting images and videos on your website is one way to capture the attention of your visitors. Images are one way of letting your visitors understand the message you convey. And based on research, people like to view images rather than reading pure texts only.
Videos have become more common for online websites today, especially with online news sites. If viewers missed something on TV, they can watch it online. And instead of reading what seems boring to some viewers, they can just watch a video relating to that article.
Magazine-styled websites have light-colored background and the commonly used color is white. Light-colored background is better for it makes the content readable.
Like what we see on magazines, contents are grouped into columns or sometimes into grids. The same goes with magazine-styled websites, grids are effective to use for they keep the contents well-spaced and noticeable.
For magazine-styled websites, it is important to consider the typography for it puts a lot of content on a page.
Take a look at The New Yorker website. Even though it has a lot of content on its homepage, it still looks organized because of the neat-looking typography, grid-based contents and also the white background it has.
In this article, I collected different kinds of well-designed websites with magazine style. I hope you will be inspired like how I was with this compilation.
Before I finish, let me give you some advantages of a website with magazine style of layout.
A light-colored background with a clean typography where contents are put into columns or grids are some of the ingredients to make a website look professional.
With a magazine-styled website, you can put several contents on a page without cluttering them.
It is easier and quicker for users to search a certain topic for they are categorized. For instance, most read articles are found on the Most Popular section. While, newly posted articles are to be found on the Latest News or Headlines section.
To be fair, let me also give you the disadvantages of a magazine-styled layout.
Viewers might be confused on what to click because many things are posted on a page.
If magazine-styled website is not well designed, contents may look cluttered or disorganized. To help you with this, always stick on a light-colored background, columned or grid-based contents and clean looking typography.
A magazine-styled website entails more maintenance and updates on the part of the web administrator. But it still depends on how often the website is updated. The more articles published, the more work for the administrator.
What about you? What do you think about magazine-styled websites? Let us know your thoughts on the Comment section.
Get The Only Freelancer crash course you will ever need to read!
An Information Technology graduate who loves learning new things and chocolates, too. She spends the whole day sitting in front of the computer, making herself updated with the things going on around her.
Monday, October 3rd, 2011 09:22
Important, Eye catching , Beautiful originally all thing includes this.i think not only see this article also teach this and earn your own website which i do this.
thanks
Monday, August 1st, 2011 20:47
great Job !! It gives some inspirations to do own template !! Thanks
Wednesday, December 1st, 2010 04:59
nice post but your title is “Modern Element Trends in Magazine-Styled Webdeign of 2010″….webdeign?…;-)
Tuesday, November 30th, 2010 21:13
Great as usual !! thank you for this list
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
![3-Step Action Plan to Get the Best Work Environment [+VIDEO]](http://www.1stwebdesigner.com/wp-content/uploads/2012/12/preview-small-3stepactionplan.jpg "3-Step Action Plan to Get the Best Work Environment [+VIDEO]")
Dale Williamson
Tuesday, November 30th, 2010 21:15
Nice set of magazine styled web designs
Enursa
Wednesday, December 1st, 2010 04:28
great inspiration
Rahul
Tuesday, November 30th, 2010 21:13
Great as usual !! thank you for this list
Zoel
Wednesday, December 1st, 2010 04:59
nice post but your title is “Modern Element Trends in Magazine-Styled Webdeign of 2010″….webdeign?…;-)
Dainis Graveris
Saturday, June 16th, 2012 17:04
Fixed already, Zoel – sorry for misspelling!
Sesja
Monday, August 1st, 2011 20:47
great Job !! It gives some inspirations to do own template !! Thanks
Saikat
Monday, October 3rd, 2011 09:22
Important, Eye catching , Beautiful originally all thing includes this.i think not only see this article also teach this and earn your own website which i do this.
thanks