Today, people’s lives are filled with elements of digital information everywhere, and browsing the web has become one of the essential behavioral habits in daily life. In a sense, web layout design is no longer just about visual sharing and conveying information, but also a visual design that integrates people’s lifestyles, behavioral habits, and psychological changes.
1、 User experience web page layout design
User experience is a subjective concept that arises from the genuine feelings people experience while using a product. It generates different feelings about the product through the interaction between people and the product, thus obtaining different experiences. When browsing a certain shopping webpage, the vast majority of users will choose to search for the products they need to purchase independently. However, due to the unreasonable layout and design of some webpages, when users encounter problems during the purchasing process, they rarely choose to solve them themselves and always seek help from the webpage customer service as soon as possible, often resulting in a very unpleasant experience. When designing web pages, the hierarchy between information should be clear, focusing on overall layout design, creating personalized visual effects, and providing users with a more comfortable service experience.
2、 Characteristics of User Experience based Web Page Layout Design
Web page layout design is no longer just about visual enjoyment, it is an art design that fully integrates visual enjoyment with people’s living habits, lifestyles, psychological experiences, etc. In web page layout design, it is also necessary to pay attention to the following characteristics:
（1） Pay attention to the blank space in the layout design
Blank space in the layout refers to leaving a certain proportion of blank space in the webpage interface space. Moderate white space in web page layout design can evoke infinite associations in users’ minds, creating resonance between graphics and text on the web interface, and providing users with a comfortable visual experience. Adding white space in webpage layout can make the webpage interface more breathable, full of rhythm and tempo, and enable users to quickly search for information and effectively browse webpage content. At the same time, it also enhances the readability and recognizability of effective information in web pages, ultimately achieving coordination and unity between text, graphics, and layout.
（2） Pay attention to the effectiveness of interaction design
As an aspect of user experience, interactivity is not just about the simple appearance of FLASH animations, jumping text, dynamic images, etc. on web page design. More importantly, it is about the interaction between users, attempting to vividly and interestingly transition their needs through methods such as deformation and shifting, and using mouse clicks and scrolling effects to add lively and interesting elements to the interactive process.
3、 Visual Representation in User Experience based Web Page Layout Design
Reasonably arranging text and related visual elements can make viewers feel a sense of balance and stability; At the same time, using multiple text shapes according to unique layout rules creates an active and dynamic interface with rhythm and melody, which is also conducive to the coordination and unity of webpage content.
（1） Balanced structure on both sides
The balanced structure on both sides of visual design in web page layout generally divides web pages into left and right parts, commonly including left large and right small structures, and symmetrical structures. Psychologists have shown that the visual process of browsing text is a habit of moving from left to right and from top to bottom. The design of this structure enables users to quickly and effectively obtain the information they need while browsing web pages. When designing the layout structure of a webpage, designers try to connect the text information in the left half with the content information in the right half through connection technology, and convert and display the navigation and content information as soon as possible. This type of webpage layout design is flexible and concise, but due to its low data content, it is only suitable for designing small-scale webpage layouts.
（2） Upper surround structure
The upper surround structure mainly designs the upper half as a navigation menu, with comprehensive information data content and secondary navigation menus distributed on the left and right sides of the webpage, such as various links, search bars, account login windows, user registration ports, etc. At present, the design of web page layout with an upper surround structure is the most common and highly applicable in the use of web interfaces. Its balanced and intuitive characteristics enable users to quickly obtain the required information, and the obtained data information is highly organized. At the same time, this structural arrangement design is too procedural and has a single style. Therefore, designers should emphasize the use of color combinations when designing web page layouts using this structure, and make reasonable use of the visual effects of colors to enhance the artistic quality of the web interface.
（3） Fully enclosed structure
The fully enclosed structure is an improvement on the basis of the upper enclosing structure, which is the basic structure. A corresponding horizontal operation menu has been added to the lower half of the webpage. It is possible to fully utilize page space within a limited range of web pages. Enhance the capacity of effective data information on the webpage, reduce unnecessary text data, and improve the efficiency of users in obtaining effective data information when previewing the webpage interface. Due to the strong closure of information, this is also a shortcoming in the design of this structured webpage layout. Often leading to slow refresh of webpage information content for users, which is an important reason for congestion.
（4） Left enclosed structure
The left enclosing structure is a new structural form formed by the designer making corresponding modifications to the upper enclosing structure based on the upper enclosing structure. A enclosing structure obtained by rotating a webpage clockwise 270 degrees in an upper enclosing structure is also a layout structure formed by deleting the information bar on the right side of a fully enclosed webpage layout. This structure makes up for the disadvantage of the fully enclosed structure being too closed.
（5） Structures with diverse styles
The various structures of webpage layout styles mainly involve the arrangement and design of elements such as the main body logo, images displayed on the webpage, artistic fonts, hyperlinks, etc. On the page navigation menu, there is no emphasis on design, only decoration, embellishment, and optimization effects are added to the webpage based on the needs of data information, in order to coordinate and balance the spatial layout of the page. This web page layout structure is often favored by fashion industry websites, providing users with a relaxed, free, and modern visual experience while browsing the web, thereby reducing aesthetic fatigue caused by prolonged browsing.
English 
简体中文 
Website Builder Online
