Grid / Architecture

I picked an article “Sovereign-debt markets following a new script” in the Economist January 18th -24 th 2014 and then tried to analyze the distinct layout of this article in printed media and the website.  I first gave a table that showed their general differences and then probed each specifically.

original image2                 Sovereign2

final - printed media                 grid - website2

Printed media (mm) Website (mm)
Margins 7.3 52
Column widths 92 160
Alleys between columns 5.283 5
Caption Below the big picture Above the big picture
Line spacing less more
General space more less

Printed media:

The body of the articles consists of three narrow columns with the same width and alleys. The right column is much higher than the other two, which is balanced by the striking picture on the left top. Also, there is a small size of picture in the middle column below words, which reflects the colorful picture on the top. Actually, as the body of the articles is all below that big picture with some irrelevant information beside it, that image’s bottom line functions as a boundary between the real texts and other uncorrelated information. Noticeably, there is much more white space in the printed media than websites, and the wide space between the title and the article makes the caption more and conspicuous and attractive.

Online media:

The layout of the same article on the web appears more condense. The body of the article takes 60% space on the left with wide columns. The line spacing of the article on the website is approximately two times than that in the printed media. Moreover, there is a space between each paragraph online. The caption of the article is above the big picture, which makes the picture works as illustrations, compared to the introductory function of the same big image at the top of the printed Economists. Also, the margin on the website is eight times larger than the one in the printed media.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s