20 simple and exquisite two-column excellent web design

With the help of the structure provided by the grid system, the Web page can organize the content in a good order, while also taking into account the changes of the beautiful layout and response style. This is not uncommon in a variety of news, blogs and online magazine sites.

However, these boxy blocks appear in front of the user, usually with cool content to catch the eye, layout design mostly hidden behind the scenes to play a role. Of course, there are also some designers to enhance the layout design to attract users, grid system of freedom and compatibility can be seen here. In this kind of page design, there is a kind of not the mainstream but it is not uncommon, unique and also has a lot of space to expand the layout design, which is today we want to talk about the two-column evenly divided page layout.

The usual two-column layout is common, but most of them don't divide the two columns evenly. The design of the dividing type requires that the designer and stationmaster have enough guts and courage. This web page can be designed to be refreshing, but to have a good contrast, to fix the visual center of gravity and to avoid the user's "choice of obsessive-compulsive disorder", requires designers to skillfully use a variety of design techniques. Today, we take a look at the successful cases in this kind of web design work, learn from experience and summarize skills.

Masi Tupungato

Magnificent and beautiful scenery pictures occupy the entire page, tonal similar picture lets the entire page style to maintain the consistency, the left and right layout difference lets the page vision have the weight point, chic and interesting.

Studio Meta

Meta Studio website design is quite atmospheric, beautiful studio location directly occupy the page half became the visual center of gravity of the page, the copy on the right is also well-organized, without the use of overweight design naturally will not be distracting.

Portfolio of Cihat Turhan

Cihat Turhan's Works Show page is divided into two columns ... Background, one side is the side of the page is the code, centered text introduction is just implied the identity of the designer. The website's idea is quite exquisite, the flaw is for the mobile side browsing support is insufficient.

Wreck ' s Valentines

There is no doubt that Valentine's Day is bound to involve two people, and the page division is exactly the same as the setting of the holiday site for people. The left side of the page does not move, the right side is the same as our common single page scrolling design, showing the relevant details.

Formlets

Formless home by the illustration on the left to create a relaxed and pleasant atmosphere, and the function of the button layout on the left, a clear division of labor.

Stolen Girlfriends Club

This is a very interesting page design for the Electronic business platform called the Stolen Girlfriend club. The two sides of the page show different pictures, they not only act as a display, when you move the mouse to the picture will see the corresponding classification, that is, they also act as the role of navigation, Bie oh.

World of warships

The Web page of the battleship World uses a two-column layout to balance vision and copywriting, and this is a very effective solution. Although the page contains a lot of content, but the heavy contrast users can more easily find what they want, avoid in a lot of information lost.

Nicolas Tarier

Clean page design reflects the unique character of Nicolas Tarier, the slightly unbalanced layout of the page is clearly designed by the designer to create an interesting and playful atmosphere.

Spotify Valentines

Even the internet giants, many technology companies are unable to resist the appeal of Valentine's Day. Spotify has created an interesting experimental page that creates a different mood with the corresponding colors, and then it's your turn to make your choice in two songs.

Sparked

Sparked web site will be a series of neat high-quality pictures packaged into a well-organized grid system, so that a simple layout has a wealth of content.

Project 360

The page shows the two different possibilities of a picture in two equal chunks, as a project focused on creating spectacular landscapes, which is very fitting with the properties of the project itself.

Elite Model Agency

The official website of the elite modeling agency has a very simple landing page, intuitive navigation. Seemingly original layout design actually also has the gorgeous side, the designer uses the specialized photographic work to carry on the webpage stunning part, hits the user's eye directly.

Taphome

Taphome Service page is divided into two parts, the data block and picture complementary side by side to fill the page, but also imply that their services are divided into two parts.

Brandts

Brandts's page design is dynamic and static, the left part will be a group of beautiful and stunning pictures, the left side of the remaining static, carrying important text content. Footer design is also worth learning, only the fixed content, simple and beautiful.

Pauw

As a clothing brand, Pauw landing page used in the two-column layout is just carrying men's and women's, simple page design with strong contrast of the content, male and female models bearing the visual center of gravity, while the black-and-white contrast of the text content is very good to assist the picture is clear, primary and secondary clearly balanced. At the same time, such a design can be well compatible with small screens.

NightCal

The layout of the page is divided so that the Web surfers do not have to be affected by too much information, such a non-invasive design gives designers more space to play.

Nicolas Bussiere

As in many previous cases, equal space, although the physical size of the same, but the content of the visual imbalance to create a sense of the weight of the page, the content of the organization more powerful, information transmission is more natural.

Blondy

Even if the presentation is not the same, but the two-column layout can create a "balance" concept, such a layout also makes Blondy a variety of content in a more organized way to present. Clean and tidy, users do not have to choose from many options at once.

Eurovision

Although only landing pages in this site use a split-column layout, this implied "competitive" layout instead presents an interesting contrast effect.

So Creative

Many designers will make their own work display page into two columns, you can display two pieces at a time, and can be as much as possible to present details without wasting the page space, easy to distinguish. As for the user will first see which, it is necessary to see user preferences.

Conclusion

The two-column page design focuses on visual design. Complex grid layout free and flexible, single page design directly has impact, but they are also more likely to make people aesthetic fatigue, this time may wish to try to divide the two columns of design, open the brain hole to try new layout, may have unexpected joy.