What are the ways to play the site layout creatively?

The layout is, in a way, a spokesperson for the overall temperament of the website, the excellent layout lets the person front a bright, the top layout lets the human Curiosity Dafa, does not stop to explore, if you also used to look accustomed to the common no bright spot website, today recommended this group of websites absolutely need to feel, will have the surprise yo.

@ Network Qin UEC: The layout is the cornerstone of the website. Its role is to guide users to browse the various components of the site, indicating key content. Layout is also the key to the appearance of the site. Therefore, the layout of the content needs careful and careful thinking.

A set of original and novel layouts can significantly enhance the user experience of the site, but do not let creativity affect the usability of the site. As always, we have to put ourselves in the user's shoes and think: What do we want them to see first? What should be the most effective way to convey the message? Before the design begins, the above issues must be presented, because the layout will be responsible for creating the rest of the design.

The layout of the following sites is not unusual, although not perfect, but browsing these sites may bring you creative spark.

Beurre & Sel

This site is really beautiful. Background for automatically played slides, the main navigation bar is located at the top of the page. As the mouse scrolls down, the navigation bar shrinks but remains anchored to the top of the page. Underneath it is a colorful list of company-produced cookies, as well as buttons on submenus. Click on a cookie that tastes like, and there will be information covering the submenu so that users can click on a variety of flavors. The top navigation bar and submenu are fixed in the middle of the three-column grid of the page to ensure that the user's attention is always centered.

　Hackery Maths & Design

As the page loads, there will be an interesting 3D linear animated fill screen. The arrows represent movement and fluency, and encourage users to scroll to the bottom of the contents of the mouse. The bottom section is distributed in three-column grids, where two columns are the main content and a smaller sidebar. But this layout does not give rise to a sense of limitation, but rather a more open feeling, due to the use of spacious space and rounded corners. The layout of this site makes users feel very comfortable.

　　We Love Noise

Luke Finch's portfolio has an interesting and friendly layout. The site seems to be messy and scattered, but it has broken too concise and no new situation. The transition effect allows you to have a simple idea of your project, and you can also use arrows to navigate. The heart of the upper-left corner is the navigation center of the entire Web site, which rotates into an "I" on the homepage. When browsing the site, you can hover your mouse over the heart.

Ende

This layout has a very dynamic effect. When loading, the first thing that comes to the eye is an odd picture, and the page prompts you to scroll down. After scrolling, the navigation bar is displayed and then fixed at the top of the page.

The individual is very fond of its transparent navigation bar, can further open the page, showing its rear content. The content of the Web site is scattered all over the page, although the site has a certain structure, but each part of it uses a different background color. The site uses the three-column grid very prominently, but the team members have broken through the grid, using the screen space in an unusually interesting way.

　Edward Carvalho Monaghan

How about some color? This collection site has a serious personality, and in the course of browsing you will find it really unexpected and interesting. The most noteworthy place is the consistency of style. The site is actually condensed into a complete set of works, on the one hand, it shows the style of the designer, on the other hand, it also carries the works of the work--which is exactly what this kind of website should play. The logo of the website shows all the color scheme completely, at the same time, the flashing animation also brings the dynamic to the website.

　Huys

This site in the layout has a unique charm, the page on the right side is like a letter letterhead, which describes the site identity and functions of the necessary information, and the left side of the page can be vertical scrolling, and a similar apartment building window-style layout, is fitting the company's business. After clicking the mouse, the user will jump to a more blog style and more convenient navigation layout page.

Kathart

Kathart uses a very good video layout. This simple but effective design shows its team members and permeates its personality. In the introduction process, the team members are displayed as working status, as if you and they are in the same office. Its navigation cleverly uses the timeline way so that you can easily track video progress.

Wacom

Wacom has a wide range of target audiences, including professionals as well as non-professional creative personnel. As an integral part of the site, its layout creates a user-friendly experience. The navigation bar on the left is minimized when the mouse hovers, and can be used to show different kinds of available content. Users can manipulate control, choose the products they want to see, and will not be forced to watch any sales rhetoric. The home page layout is simple, and can guide users to see the most suitable products for their needs. I personally like the ingenious hand-painted elements that accompany the product on the site.

Amsterdam Dance Event

The layout of this website is very helpful to show the attitude and spirit of the activities involved in the website. The navigation bar extends to the left side of the page, forming a reference node across the entire site. A slide with a strong and visually stimulating image is used to rotate the effect, while presenting a guide to festivals, venues and conferences about the activities of the site. From the point of view of motivating the user, this method is effective.

As you scroll down, the bottom section slides across the slide and takes the submenu from the bottom to the top. Each part of the site has a banner across the screen as a visually appealing introduction to the current segment. The rest of the article is rendered in the grid. The rows in the grid are not in perfect order; Each column is slightly shorter than the previous column, and is yet another subtle but effective visual setting.

　Cropp

Cropp has a bold and insolent personality, just as its layout shows. When the mouse hovers over any picture, the picture is drawn in pixels and becomes difficult to recognize, thus gripping the attention of the person. The top navigation bar is consistent across all pages, and the home page is essentially a high-profile visual presentation of the various options in the navigation bar. The layout of the site captures the idea of pixel, with all of its photos and videos placed in squares, much like a pixel-after image.

Neue Yorke

Davy Rudolph Works set of the grid layout simple, concise, so that users feel very direct and natural. Each of its pages has only two colors and is unique to the current page. After clicking on any project, the display will become the protagonist of the page, while the main navigation surface will disappear. For a portfolio site using this method, I personally most appreciate that it has a personality, while personality and not to occupy the limelight of the designer works.

　Juliana Bicycles

As a shop that sells bicycles, Juliana's design is quite unusual. When loading, the screen will be filled with a beautiful, full and warm feeling of the picture. Site layout is divided into four parts, are hidden in the rear of the navigation icon. Its design compared with female style, but the text style bold, strong, free and easy. The 3D hover effect on the bike is also a good point.

Esquire

The layout of this website is simple, refreshing and easy to understand. Esquire's big headline is the monotony of black and white. The article guides the use of color, can attract readers eyeball. Hover effect is also very simple, under the guidance of the title has a description of the content. Navigation bar is located in the middle of the site, the function is very similar to the newspaper through the fold position above the content aroused the interest of the reader. Its images, colors, and introductory headings are also attractive to users.

　Institut Choiseul

Intitut Choiseul uses a very interesting block layout that fits into each other like a jigsaw puzzle. cascading appearance and color blocks can effectively establish style. Continue scrolling underneath the page, its layout transformed into a more traditional grid form, but in fact each story is in a block of different sizes, creating an interesting and dynamic beauty. Different color blocks mark the different content of the website, so it is more convenient to navigate and read. The site is qualitatively superior in quality and consistent with its own purpose.

　Award

Award advocates creativity, in which the design aesthetics of sex builds an effective platform for designer's works. The grid layout doesn't have any side corners that distract or conflict, and it all takes the designer for a lead. But its interesting hover effect uses a nice pixel projection shadow. The navigation bar is docked to the left of the page, and the search and filter functions are fixed at the top. This navigation layout is ideal for displaying site content.

Harry ' s

This site has a very enjoyable experience. Its designers make full use of the grid, very suitable for its target market. Open, clean, structured design brings a pleasant user experience. As a man's razor-selling site, Harry's images are exquisite, masculine and not rude.

World Baking Day

The world Baking Day layout requires users to interact from the beginning of the site. When the page loads, there will be a hand-drawn animated arrow that prompts you to choose your own baking level. If you choose to view all of the recipes at all levels instead of one at a time, you will see a wide variety of food recipes that make your index fingers move in full screen.

Site layout The food is created like artwork, and most of its pages have pictures of baked goods and will guide you to the next page to see the recipe information. Recipe information is neatly distributed in three columns: food on the left, practice in the middle, information about the provider on the right.

Paper & Paint

The layout and interaction of Paper & paint is very innovative. In the navigation, the site of the various parts of the switch is very abrupt, layout and structure and its products complement each other. The navigation bar is displayed only when a color scheme is selected. When you scroll the mouse, all the pictures are highlighted, and the top of the subsequent pictures will tease the user to continue to view the browsing.

I personally like the way the picture moves inward when the mouse scrolls down, and the visual dynamic effect is very interesting. Another good interactive feature is the use of the mouse to the wall "brush" into different colors, this feature to the site brought an extra hint of spice.