Picture Representation in Web Design

I think everyone knows that images are one of the basic elements of web pages. Pictures can not only increase the attractiveness of web pages and deliver more abundant information to users, but also greatly improve the user's experience of reading web pages. In web page design, the picture display is rich and varied, and the picture display in different situations also makes the fun of reading the web page more diversified.

Follow our separation to experience the current display of various pictures and let our eyes travel.

　　 Multi screen display

Pictures are limited to the maximum height or width, and are displayed in matrix tiles, which is the most common multi picture display situation. Different margins and distances can lead to different styles, and users can get more information in a short time through fast reading. At the same time, when the mouse hovers, more information or function buttons are displayed, which not only avoids too many repeated elements interfering with the user's reading, but also makes the interaction more interesting. The traditional matrix display layout is slightly restrained, and the reading experience is slightly boring.

In the traditional matrix tile layout, 500px.com basically gets rid of the size consistency constraint of the image, and the image is displayed at 1, 2, and 4 times the size of the basic area unit. Images of different sizes break the sense of density brought by repetition, but they are still arranged according to the basic area unit, increasing the dynamic sense of flowing information. Irregular pictures bring fun to reading, but because of the irregular flow of vision, this display is not conducive to information search.

Pinterest's waterfalls are well arranged, with fixed width and variable height Website Design Let the page break through the traditional matrix picture display layout, the wonderful use of visual hierarchy, and the arbitrary flow of sight alleviates visual fatigue. Users can quickly browse many pictures and then select the part they are interested in. But this also makes it easy for users to miss some content when reading.

While maximizing the picture display, users can see other contents in the album. The next partial preview is more attractive for users to click and read continuously. The next thumbnail display, the next fuzzy display, or the next part display. Different preview modes are arousing users' curiosity.

In Photodom, the user does not provide a preview of the next picture when reading a specific picture. The thumbnail of the next picture will appear only when the user hovers over the Next button. Although the animated consequences of thumbnails can't make users realize the preview fantastically, the short stimulus urges users to click "Next".