Korea website Detail Experience Phase I: Grid layout

NAVER (네이버) is the NHN company under the famous South Korea portal/Search engine website, its logo for a straw hat, in June 1999 officially put into use.

http://shopping.naver.com/in front of the page as a whole has been revised, after the revision of the page than before the more tidy, increased the level of sense, edging have degrees, the overall quality of the page is also greatly enhanced, starting from this period, We will be some of the details of Korean Web site research and learning, but also as a discussion with you, hope to be able to work together from the site's own visual details to do more research, in the design, can make the page more rhythmic

First phase grid

Let's take a look at Shopping.naver's first page.

As can be seen from the above, the Naver is extended according to a fixed grid, so how big is his block?

To measure each block:

Judging from the size of the blocks measured above, he is using a 210x290 as a standard grid block to distinguish between the various plates

After being divided into block structure, not only makes the whole page of the block more obvious, content more organized and clear, while also balancing the proportion of each piece of content, regardless of which screen, have a strong consistency, at the same time, there is a very obvious advantage, that is ...

Let's take a look at the small resolution of the layout of the page

is not, feel very flexible and natural, regardless of which screen resolution, he has a natural reorganization and sorting, and for the content of the slightest impact, do not have to consider too much for the response to achieve too much preparation, performance is very good!!

After reading the shopping.naver grid, presumably everyone is now the first reaction is to think of our site, the current one Amoy site, especially the first page, is indeed not in any grid, only to do some datum alignment and a small range of grids. Through the grid analysis of Shopping.naver, I have done the same standard grid experiment on the website grid of Amoy Shopping.naver.

According to the current width of 990, by calculation, it will be found that 190 is also a magic number, in 990, we use the Naver width ratio to assume a Amoy site grid ratio

To 190x270 as a basic grid cell

Let's start with the Shopping.naver layout, and etao.com the grid by 990 width.

As you can see, our site can be perfectly grid-partitioned like Naver.

So......

is not the same, we can also like Naver to the section of the smooth movement, processing different screen resolution of the site's display structure

OK, this article is just a grid from the Naver structure of the translation, source files stored in etaouxetaoued j_ June mo Personal share of Korean website details Experience Grid article, if there is any idea, we can discuss together

Next, the font details, then issued ...

Article source: A Amoy Experience Center