The style design principle of the News class website

Editor's note: Although this article is aimed at the News class web site style design, but the article mentioned in the 12 principles, applicable to each blog and a station, to want to enlarge the site of the designer webmaster, especially practical. For novice designers, these design principles must be mastered.

Body:

This article we want to come to the depth of the crowd and learn some style of web design, yes! is the newspaper style website! In the back of the text, you will understand some of the basic characteristics of this style, if you can absorb some design inspiration or learn something, and apply to the future design, it is wonderful!

Style this thing, plainly is how you design the site. The website is also a channel to communicate with readers. Behind each style there is a certain set of components. In the web design, there are probably the following types of styles:

Clean and tidy;

Ugly and beautiful;

Retro style;

Illustration style;

Newspaper style.

The style of newspapers and periodicals is mainly used in the websites of newspapers and magazines, usually with some similar structure with paper print. In fact, this style is suitable for all kinds of websites, especially those with lots of content. The characteristics of the newspaper style website are very distinct: rich layout, multiple columns structure, concise pages and contrasting colors.

　　The basic features of newspaper style website

1. Black words on white background

The traditional print media is this, white or slightly gray paper printed on the black text. For our eyes such a combination is very comfortable, very readable, which is why traditional media use such a color scheme, because the main body of such a site is text, such a display way will make the text more vivid and readable. I encourage designers to innovate on the basis of tradition, but never forget the contrast! For example, the traditional pattern of the reverse, black and white. However, the following combinations are strongly deprecated: black background, blue background, green lettering, and blue-and-pink characters. If you are not superstitious, can try to see whether or not to use back to the first draft! After the design is done, see for yourself, if you feel comfortable, then apply it to your project.

Black and white These two colors are the basic color, and sometimes need some auxiliary color to make the design more tick people. A Li Zilai said: Blue is good for use in the title, red is more suitable as a button, navigation menu sometimes need to use shadow or luminous effects to decorate, but the color of the decoration and the main color contrast is not too high. This allows navigation to be clearer and gives the user a better visual experience.

2. Graphic element minimization

The layout of the press is simple and clean, the content is prominent and detailed, the structure is clear, graphic elements appear in the same way as other designs, usually appear in the following ways: lines, shapes, colors, typography and textures.

As I said just now, in such a website, color matching is usually very simple. Texture is rarely seen, imagine a newspaper or magazine site with a brick wall, or a plank, or a complex texture, how would it feel? Influence reading is sure drop! Textures distract readers, which goes against our original design: highlighting the text. But this kind of website, can adopt paper texture. Textures can appear in the background, on a button, or in a header or footer.

Standard grid design or column layout can reduce the use of lines and shapes, because the screen has been divided into many parts, no need to add more. If you add too many lines and shapes to your design, they are not simple and beautiful.

3. Grid based layout and column structure

The layout of the newspaper web site is basically a perfect structure, the content of the site is usually a similar layout, so the site structure is the first important. grids and columns effectively distribute content across the reading media, as Mark Boulton said: "An excellent grid system will not only make your design look neat and tidy, but also enhance readability and ease of use." "The layout design based on grid system can classify the content so that users can selectively read the part that they are interested in."

Similar but different column layouts can have different widths, but attention should be paid to the height of the content, and wider columns can accommodate more text. The two-column structure can make the page more engaging, although more than three or three columns can make the classification more clear, but the role of the column and grid is similar, just let the content of the classification more clearly, so that users can quickly and easily find the content of their interest, do not forget this original intention. Consider the width of the column, also can not forget two paragraphs in the column between the spacing between the contents, if the spacing is too small can cause reading inconvenience, the experience of the website will not be good.

4. Title and summary

Open a website or blog, I believe that no one wants to get lost in an article filled with text, the title makes it easier to find the article. Whether it is a small piece of grid system or a whole column, need a title to tell you, this piece of text is talking about something, or who has the patience to look down and then summed up the central idea Ah! The title is larger than the text size, you can choose to bold or other colors to indicate, make it more eye-catching.

Abstract is a short summary of an article, it is through a few words to let people understand that this article is mainly about what things, but also enough to attract people, people interested in reading the whole article. These words are necessary, especially for blogs, online journals, and news-type websites.

5. Primary and secondary content

In your design you should have such a primary and secondary idea: to distinguish which is most important, to read the first time, to be able to put it first, and then to see or even be overwhelmed by what is called content. Specifically, the homepage of the site generally has a huge header, here is usually some important news, may be one, or maybe two. This area is usually accompanied by a large picture of the story. Other content must be smaller than this part, and is based on grid distribution in other parts of the Web page. This gives people a lot of focus on important news, which is the largest number of people to share with other SNS.

6. Easy to use and consistent style of navigation

The newspaper website layout is for the content design, it is simple and easy to use, therefore, the newspaper website Navigation also must have the simple clear characteristic, the navigation position also must be obvious.

In general, navigation is best placed at the top of the page, because it is usually the first thing that people notice here, and even if the page is rolling, navigation can still be placed at the top of the screen. If you prefer vertical navigation, then the navigation should be on the left side of the page. The majority of the world's reading habits are from left to right, on the left more consistent with the visual law.

7. Classification

The classification of newspapers and periodicals is the most specific, so the classification of blogs and other sites also apply. Simply arranging the text does not increase the readability of the site, we also need to classify the content. Like the News class website, we also need to separate the different topics.

I think it's a good solution to classify the content and show it in the navigation.

8. Advertising position

How to make money before the site is popular? Advertising is a good source of revenue for every website. Advertising can not be casually placed on the Web page, it should have a fixed position. In general you can put it on the left or right, and the headers and footers are good choices. There are also some banner in the middle of the article, but this is a double-edged sword: it can make the site to make money, but also may make some readers disgusted.

9. Side Sidebar

Sidebar can not only hang ads, but also as another navigation, it can include: article categories, the latest content, search box, navigation, SNS share button, discount and so on. The layout of the newspaper web site is suitable for setting the sidebar, as it can exist directly as a compartment.

The successful sidebar should note the following: Long and wide, color, font, and position.

The sidebar should be smaller or equivalent than the other columns, not the larger part of the layout. It should use some neutral colors, but it's still not dimmed in the layout to let people ignore it. The position on the left side is OK, but we said before that people will be the first to see the left.

10. Maximize the white leaves

The article is written here, are in writing how to build an impressive at the same time with a certain functionality of the site, in addition to the function, we can not forget to give the page to leave a bit of breathable space, yes! is to leave White. This is an essential part of the newspaper style website. Between the columns and columns, both sides and the bottom need to be white, so that readers will feel the space for thinking of their own, rather than an entire look at the end of the text.

In general, people think that there is no content of the place will be a blank, in fact, the newspaper style design mentioned in the "white" there is a more narrow definition: lines of text and lines, word and word between the blank and the content around the blank, is to leave white. Proper white leave can make the site look more concise, comfortable, and content easier to read. Even a page with super multiple text is no exception.

11. Frequent Content Updates

Newspaper websites need to add new content frequently. Imagine how embarrassing this site looks if some of the columns are empty! So this has to follow a certain frequency to constantly update the content of the site.

Regularly updated content in addition to the appearance of the site, will also affect the site in the search engine rankings. If the content of the site is obsolete, people will not visit the site, which will be reflected in the search results.

12. Encourage SNS to share

Blogs and news sites are the most common newspaper-style sites, and the content of these sites is shared with other people, without the big platform of social media. Now it's a highly informative society where people spend a lot of time on social networks, so you should set up a sharing button for every popular social media: Weibo, everyone, Pinterest, LinkedIn, and so on. There is still a piece of advice: Share buttons to highlight! Make sure that people are able to poke around and share it with their friends and family.

I'd also like to say a little bit about mobile terminals. Newspaper website design on the mobile terminal has no way to maintain its basic layout on the Web page, the mobile site should not have so many columns, and this is the newspaper website style of one of the hallmarks of the characteristics. Mobile Terminal Web pages should not have sidebar, navigation should also be done for mobile terminals, because the slide operation is more suitable for mobile terminals than click.

The case of newspaper website layout design

　　Mijlo Blog

　　International Civil Defence organization

　　Advertising Health

　　Proven Quality

　　The Boston Globe

　　Motonews

　　The Brief

　　New York Magazine

　　Deadspin

　　Mindbodygreen

　　I am a Food Blog

　　Long Island Business News

　　Express

　　Tribune