Web layout: Pre-dish--a good example of an exception

What does it mean to be exceptional?

The so-called "lattice" is standard Content design Model, referred to as SCDM, to say that we are accustomed to the two-column, three-column-style typesetting method. Today, in both English and Chinese pages, this typesetting method accounted for the vast majority, resulting in our illusion that the Web page can only see the content of these three kinds of typesetting method. SCDM will have today's status, in fact, because SCDM is also a variety of browsers preset content rendering.

SCDM not die, nor fade

When the 1996-year winter, the great invention of the cross-era CSS emerged, designers have the ability to simply and quickly tailored to the content of the layout design. In theory, this has long proclaimed the death of SCDM. But in fact, SCDM to 2012 today is still full of various web pages, even because of the rise of blogs, community sites and more common. It may be to save time, so simply use the same version to cover all the content; it takes time to design typography for content like a design magazine. This may be why there is still little to try outside of SCDM.

But today's print is better than the Web page, in fact, because content before typesetting, that is, for content to design the best read layout, rather than using the same kind of layout to see all the content. Take a look at the Esquire magazine example. The following are their page versions:

And the following are their magazine editions, from UX Booth:

Is it a lot worse? Their website version is the best example of SCDM: left, right and middle each have three fields, the middle is the article, the left side is the website button, the right side is the external link and the advertisement. The words in the article, the main content, are so crammed into the middle of a jumble of information that readers are less likely to concentrate on reading. Needless to say, this article is paginated, and studies have shown that this will significantly reduce legibility.

Get back to traditional typography: let the text breathe

The layout of the magazine is much better, at least it is willing to concentrate on reading. In the magazine layout, the traditional typography rule once again plays the main design function: The clear and distinct field arrangement separates the article and the decoration design, the contrast is obvious, does not confuse the view. Text has a breathing space, it looks comfortable; the two-column text box design allows the reader's eyes to be naturally scanned from top to bottom and left to right. In short, the magazine layout that follows the traditional typesetting rules is better read. Although the same content can be exactly the same side to the page, but you would like to read Which? (Fan's voice: Bad Web design, is to force consumers to buy magazines instead of looking at money-free ...)

That's all you have to say.

But fortunately, the network has always been a creative people's playground. As people pay more and more attention to the screen reading, the resolution of the device is also getting higher, the Web font services springing up, even the Chinese world has a justfont, the current screen content will become more and more good to read. Here are some examples that we can emulate:

I love typography

I love typography station, like its name, is a Web site that loves typography. In addition to the most recent information on typography, they are in a variety of feature articles will be presented with different version, rather than with the constant SCDM, and the preset font size is moderate, read very comfortable, background contrast also makes the text easier to identify, two-column design can also allow the eyes to scan quickly. This familiar reading texture, as if in the magazine Ah!

Jason Santa Maria

The most famous place for Jason Santa Maria is to redesign the article so that it renders its content rather than condescend to typesetting. The site's "other articles" are also specially designed, with three of fields, allowing readers to quickly scan the Lunar New Year and month to find what they really need. The customized version will also be accompanied by screenshots, allowing us to quickly discover these magical typography.

CRAIG MOD

The design of Craig mod is interesting. Although the font is small, but the field spacing is good, so the text breathing space enough. and the placement of the sub-label helps to split the field space, so the reader can quickly scan the content. Yes, Internet usage is still scanning, not reading, so it's important to have a pair of labels.

The Great Discontent

The great discontent's main issue is interviews with big shots, usually creative and thoughtful artists or hacker, such as Seth Godin on screenshots. Each interview starts with a super big picture that fills up the entire screen space, just like the Esquire magazine cover (yes, unlike previous page layouts).

The design of each interview is actually to take content in the middle of the layout of the field; the upper-left corner of the field is used in "about", which is a brief introduction of the interview object, while the right side of the field and about the following field will intercept the interview of the brilliant sentences, or related sponsorship nature ads. Quote another interception out, printed on the side, itself is the magazine design of the classic presentation method, the purpose is to let the reader can immediately see the content is particularly wonderful. This also helps the reader focus more: You may not be interested in the article, but flipping through the words that impress you will prevent them from turning upside down, back to the front, and looking back carefully.

Finally, each article's page each side has the button, the left button may go to the previous article, the right button may go to the next article. These indicators subtly instruct readers to read more, rather than rely on sidebar buttons that confuse the user, and this design allows users to see more articles without scrolling below.

Together to make the Chinese web page become better read!

Over the next few years, the development of HTML5 and CSS3 will make it easier for designers to design web layouts for different content. While there are still some hurdles to overcome, many tools are now available, and as such, the prophets are already moving. To catch this trend, very much hope to be able to promote this knowledge in the Chinese network environment, so that the Web page to read better, but also look forward to reading this article, whether it is a web designer or engineer, can pay attention to the problem of page typesetting, cooperation, so that the content can be read more convenient and more popular.

This article is just a front dish, in the next article, we will delve into how the technical details of web layout, especially how to introduce traditional typesetting knowledge to the new media.

Article: Inside