Internet, Networking, & Security Web Development Flow in Design: Layout and Artwork that Conveys Motion By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated March 14, 2019 Gunter Flegar / Getty Images Web Development Web Design CSS & HTML SQL Tweet Share Email Visual flow carries the viewer's eye through the document in a way that all the important elements receive prominence, and nothing snags the vision or causes the viewer to lose the sense of the piece. Using obvious flow elements like arrows or numbers is the most common way Web designers use flow, but there are other types of elements that can be used and misused to direct your readers to move along a specific path. The steps in this tutorial will show you examples of good and bad flow and help you learn the vocabulary of visual flow in design. 01 of 07 What is Visual Flow? ICHAUVEL / Getty Images Visual flow can be achieved in many ways: ArrowsSequential images or text elementsPerspectiveGradientsSize changesCurvesMotion in imagesFaces - especially the eyes The following images will show you some common mistakes in flow on web pages and how to correct them. 02 of 07 Western Text Flows from Left to Right Lifewire If you grew up reading a Western language, you're used to thinking that text should move from left to right. So, as the eye moves across a line of text, it is moving from left to right. In the above picture, the waterfall is flowing in a right to left direction, and the text is flowing up the waterfall. Since we all know that waterfalls fall down, there is a disconnect in the direction of the flow of water with the flow of the text. The viewer's eye moves in the wrong direction to read the text. 03 of 07 Your Text Should Flow with the Images Lifewire In this case, the image has been reversed so that the text is flowing in the same direction as the water. All elements lead the viewer's eye down with the flow of the water and the flow of text. 04 of 07 Left to Right Equals Fast Incorrect Flow. Lifewire The horse in this photo is running from right to left, but the text is English and so left to right. The visual impact of the horse racing one direction slows down the pace of the entire document because it is going a different direction than the text. In Western cultures, because our languages move from left to right, we have come to associate a visual direction of left to right as being forward and fast, while right to left is more backward and slow. When you are creating a layout with a connotation of speed, you should remember this - and keep your images moving in the same direction as the text. 05 of 07 Don't Force the Viewer's Eye to Slow Down Correct Flow. Lifewire When the horse and the text are both going the same direction, the implied speed is increased. 06 of 07 Watch the Eyes in Web Photos Incorrect Flow. Lifewire Many web sites with photos make this mistake - they put a photo of a person on the page, and the person is looking away from the content. This can even be seen on the Lifewire Web Design site in the old design. As you can see, the photo is placed next to some text. But I am looking away from that text, I almost have my back turned to it. If you saw that body language between two people in a group, it would be easy to assume that I don't like the person I'm next to (in this case the block of text). Many eye tracking studies have shown that people see faces on Web pages. And related studies have shown that when looking at pictures, people will then unconsciously follow the eyes to see what the picture is looking at. If a photo on your site is looking off the edge of the browser, that's where your customers will look, and then hit the back button. 07 of 07 The Eyes in Any Photo Should Face the Content Correct Flow. Lifewire In the new design for Lifewire, the photo is a little better. Now my eyes are looking more forward, and there is a slight hint that I'm looking to my left - where the text is. An even better photo for that position would be one where my shoulders were also angled towards the text. But this is a much better solution than the first photo. And, for situations where the image will be on the right of content as well as the left, this could be a good compromise. Remember, too, that while images of people's faces draw the most attention, the same is true of animal photos.