Analyzing the case of Web site design based on grid

Today, the grid-based (raster-based) Web page design is quite common, which means that the days of messy page layouts will end. Although it is still impossible to discern with the naked eye, we have indeed entered an orderly and structured era. The overall symmetry of the grid layout, usually makes the page more neat and beautiful. At the same time, the grid framework has become the basis for the implementation of modern all Web site functions, thanks to it for the end user to provide a perfect and not distorted design experience.

In general, a grid is just a specific space separated by horizontal and vertical lines, it seems difficult to host any design elements, so most designers will be based on the path to describe the geometric characteristics. We've seen the neat grids in galleries, blogs, and news-related sites, but in fact we just have to deal with them subtly, and we can draw the user's gaze to the content itself, adding to the stickiness of the visitor. Yes, it's not a myth! It's not surprising, because grids have the following characteristics:

Create the path that can guide people's vision;

Display the orderly information content;

The combination of various elements at the same time, so that they appear free and independent, the module can breathe

Next, you'll see how cleverly you can use the grid to make glamorous web design in our presentation.

　　grid-based Website Design Example

　　

　　Spazio DiPaolo

The home page is split into equal, square, and darkening cells, presenting a variety of combinations of image art.

　　Bernd Kammerer

The home page is divided into three columns, each with a picture waterfall designed to showcase all kinds of photographic work beautifully. Interestingly, as you scroll the page, there will be alternating (scrolling parallax) some red circles with links, and each link points to a set of photographic series.

　　Enhanced reading: Does wireless scrolling load apply to your work?

　　Adam Hayes

The color and pictures are regularly covered with the entire Web page, thus creating a display of gorgeous art works. (The sobs of the Lord)

　　Necto

Use different sizes but well-proportioned grids to highlight the previous work and control the dimensions of the cell to illustrate the importance of the content. The larger the size, the more important and complex.

　　Salon

Another example of cleverly using a grid of different sizes, in this design, the position of the row depends on the column.

　　Christmas Gifs

Full use of equal size grid to load various Christmas theme GIF.

　　Activation Group

The dark hue is well applied and a shadow is cast over each cell block. This free and binding color use, to the entire homepage has slightly added is the chessboard illusion. (Translator Note: This website is produced for the people of Taiwan.) )

　　Portal Portinari

A vibrant web site that showcases the artist's outstanding works throughout the entire page, grid-based galleries, and archives them in a timeline.

　　Candy Buffet

With a modern clean and clear graphic style, and bright colors for concise geometry adds a bit of fun.

　　Betel Bar and Kitchen

The combination of the image and the text block is processed, and the strong visual feeling is reproduced in a neat and orderly page.

　　Rvlt

The navigation link block and the merchandise picture are placed in the rectangular grid, thus rendering its homepage.

　　Stefan Froescher

A traditional left-side menu bar site that greets users with an image of an ordinary photographic gallery site.

　　Jean-georges

Through the grid, an exciting large photo navigation effect is achieved.

　　Silktricky

Separate each cell in half and fill it with the same picture and text as the theme. In addition, the designer also boldly added some large square slider, so that the entire grid with a bit of confusion.

　　Bastian Preussger

It looks rather mysterious and bizarre, thanks to its black background, and the grid that it uses to put thumbnails of its work in a slightly confusing place.

　　Daniel Vane

To make the site look neat and tidy, highlight the black-and-white tones and grids.

　　Rosas and Co Films AG

Use a very common way to arrange and filter video thumbnails, and then display them in a grid system.

　　Far from the tree

The entire home page is covered with thumbnails, creating a finely crafted Raster page, even though it makes it look cumbersome and messy.

　　Boomerang 2013

Creates a real explosion atmosphere. The entire design is focused on the user experience and is used by grid users to participate in its unique and unparalleled animation.

　　Bobby Digital Studios

The use of all the elements of the gallery, it can quickly let users familiar with the site is how the work of the orderly and correct placement. Of course, this is also done through the grid.

　　Hommard

Have a very modern and exquisite appearance. The site is based mainly on grids and a large pile of high-definition photos.

　　National traveller

A traditional, structured blog with a large number of rectangular functional blocks.

　　My Poor Brain

Nicely uses a narrow column grid to deliver as much information as possible.

　　Nowy Teatr

Take advantage of the rows and columns of different sizes to add a bit of confusion to the page.

　　Woodwork Amsterdam

Put the visual content in the vertical column and remove the line appropriately to better show the big picture.

　　Karl Anders

Create a fresh atmosphere by making a lot of white leaves. The designer properly divides the page into four columns, inserting the headline or photo into it respectively.

　　Reflection

Grids are an indispensable design tool because they simplify the process of chaos to order, and the ability to do so in web design is very important. Most ordinary users want to get information in a convenient and quick way, so it is necessary to order and structure the information in order to satisfy this requirement. Of course, this does not mean that the site's appearance should become plain and plain. Even if the simple geometry can be color, image and graphics to eliminate the original shape, such a distraction but make it more attractive. In addition, both online magazines and creative collections, for any type of site, the dominant grid-based design can be perfectly integrated into it.

So, what do you think about the design of the grid-based Web site? Is this obviously an intentional component of the split design attractive? Is this a decent idea? Or is this kind of design more suitable for blogs, online magazines, and news-themed websites?