Modern Element Trends In Magazine-Styled Webdesign Of 2010

Posted in Inspiration4 years ago • Written by 7 Comments

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.

Common Features of a Magazine-styled Website

Generally, these are the things you will see on a magazine-styled website.

1. Horizontal Navigation

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.

2. Drop Down for Sub Menus

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.

3. Categories

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.

4. Search Bar

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.

5. Popular News/Stories Section

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.

6. Latest News/Headlines

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.

7. Images and Videos

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.

8. Light-colored Background

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.

9. Columned or Grid-based Contents

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.

10. Clean Typography

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.

1. Azure

2. InStyle

Instyle

3. InStyle UK

InstyleUK

4. Giant Magazine

5. People

People

6. UGS Magazine

Ugsmag

7. Clutch Magazine

Clutch

8. Typographica

Typographica

9. Vogue

Vogue

10. Dazed Digital

11. WWD

Wwd

12. Justine Timberlake Website

Justin

13. GQ Magazine

Gqmag

14. Macalicious

15. Vanity Fair

Vanityfair

16. Spin

Spin

17. WMagazine

Wmagazine

18. Rua De Baixo

19. Black Book

Blackbook

20. NFL UK

Nfluk

21. Wired News

Wired

22. Zaum & Brown Website

Zaumandbrown

23. Details

Details

24. More

More

25. UX Magazine

Uxmag

26. New York Magazine

Newyorkmag

27. One Nation Magazine

OneNation

28. Frieze

Frieze

29. INC

Inc

30. San Francisco

Sanfrancisco

31. Creative & Live

Creativeandlive

32. IndiePit

Indiepit

33. Portfolio

Portfolio

34. BMI Voyager

Voyager

35. TIME

Time

36. The Christian Science Monitor

Christiansciencemonitor

37. CNN

Cnn

38. BBC

Bbc

39. Economist

Economist

40. FILE Magazine

Filemagazine

Before I finish, let me give you some advantages of a website with magazine style of layout.

Advantages of Magazine-styled Layout

1. It gives a professional look of a website.

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.

2. Good choice of style for websites with a lot of contents to put on.

With a magazine-styled website, you can put several contents on a page without cluttering them.

3. It is easier and quicker to search for topics.

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.

Disadvantages of Magazine-styled Layout

1. Confusion on what to click.

Viewers might be confused on what to click because many things are posted on a page.

2. Contents may look cluttered or disorganized.

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.

3. More maintenance and updates.

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.

Share your Thoughts

What about you? What do you think about magazine-styled websites? Let us know your thoughts on the Comment section.

33 Written Articles

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.

7 Comments Best Comments First
  • Dale Williamson

    Tuesday, November 30th, 2010 21:15

    1

    Nice set of magazine styled web designs

    0
  • Zoel

    Wednesday, December 1st, 2010 04:59

    3

    nice post but your title is “Modern Element Trends in Magazine-Styled Webdeign of 2010″….webdeign?…;-)

    0
    • Dainis Graveris

      Saturday, June 16th, 2012 17:04

      7

      Fixed already, Zoel – sorry for misspelling!

      0
  • Rahul

    Tuesday, November 30th, 2010 21:13

    2

    Great as usual !! thank you for this list

    0
  • Enursa

    Wednesday, December 1st, 2010 04:28

    4

    great inspiration

    0
  • Sesja

    Monday, August 1st, 2011 20:47

    5

    great Job !! It gives some inspirations to do own template !! Thanks

    0
  • Saikat

    Monday, October 3rd, 2011 09:22

    6

    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

    0
  • Saikat

    Monday, October 3rd, 2011 09:22

    6

    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

    0
  • Sesja

    Monday, August 1st, 2011 20:47

    5

    great Job !! It gives some inspirations to do own template !! Thanks

    0
  • Enursa

    Wednesday, December 1st, 2010 04:28

    4

    great inspiration

    0
  • Zoel

    Wednesday, December 1st, 2010 04:59

    3

    nice post but your title is “Modern Element Trends in Magazine-Styled Webdeign of 2010″….webdeign?…;-)

    0
    • Dainis Graveris

      Saturday, June 16th, 2012 17:04

      7

      Fixed already, Zoel – sorry for misspelling!

      0
  • Rahul

    Tuesday, November 30th, 2010 21:13

    2

    Great as usual !! thank you for this list

    0
  • Dale Williamson

    Tuesday, November 30th, 2010 21:15

    1

    Nice set of magazine styled web designs

    0

Comments are closed.

23.22.248.240 - unknown - unknown - US