Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The next principle of design we will explore is rhythm and repetition, which has to do with how objects are placed within a web layout and the overall flow of your design. Rhythm and repetition occurs when one or more elements in a design are repeated often enough to create a visual rhythm. When considering this principle, it might be helpful to think of it in terms of music. For instance, you might have a base line and a melody, each having its own distinct beat and flow.
Similarly in design, there can be an underlying structure paired with free flowing design elements. At its core, rhythm and repetition helps to establish visual interest in a design. And it often happens naturally when you repeat similar elements, either regularly or irregularly within your layout. Rhythm can be regular with even intervals flowing like a series of geometric or organic shapes. Or it can be progressive, where the elements grow or shrink in some way, such as size, position, or color.
In fact, some degree of variation of repetition often works best as repetition without variety can become really monotonous. You can introduce variation to a design in several ways. For instance, think of navigation buttons on a menu bar. The button size might be the same even though the text on top of it is different, or the buttons might be different widths but the design of them is consistent. Similarly, you could make all of the thumbnails images in a gallery the same size and shape.
Or with CSS3, you could vary the shapes a little to add variety. Likewise, when working with your web layouts, you can build rhythm and repetition into the design by alternating the number of columns appearing in each row. Another simple way to add a sense of rhythm and repetition is by applying border styles in your design. Border styles can be any size and color and can be applied to any one, two, three, or four sides of an element with CSS. They can also be solid, double, dotted, dashed, groove, ridge, inset, or outset.
Border styles are great for helping to create structure and define areas, such as vertical dividers between sections in the footer, or even divisions between items in a navigation list. Border styles create a simple rhythm when applied to tables. You can also use border styles to anchor a heading or subsections within an article. In addition, you can use borders to anchor floating block quotes within a relatively blank space within a design, as shown here in this center region. Whether you add rhythm and repetition to your web layouts using a set of repeating elements or playing with border styles, remember to think of music when composing the flow of your visual designs.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 42139 Viewers
119 Video lessons · 53635 Viewers
65 Video lessons · 14049 Viewers
113 Video lessons · 82708 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.