Graphics and text collocation, Web page is not tired

Source: Internet
Author: User

From the past to the present, designers are always sensitive to the problem of orientation, and may have some minor obsessive-compulsive disorder. For example, some web designers especially prefer the use of the gold ratio, thus ignoring the user's visual sensory experience.

In fact, all laws or laws need the flexibility of the designers to use, mechanically, may only be counterproductive. The following is anyforweb for you to learn from the picture and text mixed row case for everyone to comment on.

1. The first case is a new form of graphic interleaving designed by Anyforweb for Nature House. Case picture of each letter or small picture will be with the mouse hover effect, from the figure to the word, this design not only makes the collocation between the text and graphics become more vivid, but also increased the user browsing fun.

2.The Tech Beach's website background uses Metro's design style and is worried about regularity? So the designer will be more transparent ink shape color block placed in the middle of the page position, text focus and logo floating above the color block. This kind of graphics and text collocation mode can let the user very naturally comprehend the order of the browsing.

The ingenious thing about 3.Anyi Lu is to keep the white part. The place in the middle of the white space in the case page, looks like words and pictures were split in two, but psychologically speaking, this is more to stimulate the user links between the image and the link between the curiosity, in a monochrome background, the design of the Phantom button has become eye-catching, more conducive to user clicks.

4.Moon Camp completely mixes words with pictures. The success of this approach depends not only on the overall layout of the page, color matching is also a key factor. Page shades belong to dim system, so the designer chose the star color as the color of the font, and the site style, the text of the irregular arrangement also let the site more a mystery.

5.Zizzi Ristorante's website may feel a bit messy at first glance, but the user's view will eventually converge to the contents of a red box. In terms of layout alone, this site has nothing extraordinary, but look carefully, we are not difficult to find that in fact, the image of the site is rarely accounted for, according to the usual practice, the page will become very monotonous, so the designer finally used some color block or graphic cleverly resolved the problem, virtually complete the picture and the perfect cooperation between the text.

6.LUKE Beard's web site has almost no layout to say, the left side of the text to the right picture, but some small design to make the whole page become exquisite. The image of the characters in the line of sight, along the visual flow to arrange information is a lot of foreign sites used to layout techniques. The picture will guide the user to see the text content, between the two forms a tacit understanding logical relation.

The 7.ZULU & Zephyr Web site uses a contrasting layout approach. The sea and the sky in color form a contrast, played a mutual contrast and enhance the effect. The contrast between them makes the text in the center of the page attract the attention of the user. Use the picture to foil the text, so that the picture is full of a different kind of rhyme.

8.Tomas Jasovsky Web site graphics and text appear to be placed in two layers, perhaps looming content is the focus of the designer to express.

9.m-power Yoga's website image provides users with a vertical and horizontal sense of bi-directional balance, such pictures can make users more calmly read the text of the page.

10.Segno Web sites are full of mystery, both in terms of picture content and color. Symmetrical design also appears to be more flattering, text in the center of the page position, giving users the best browsing experience.

In web design, text content and the proportion of pictures accounted for a large part, but the amount of information, presented on the Web page effect will be very different. Perhaps the main reason for this is how to place the content and elements in the most appropriate place.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.