{"id":18442,"date":"2014-10-23T06:00:25","date_gmt":"2014-10-23T13:00:25","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=18442"},"modified":"2024-03-29T02:27:02","modified_gmt":"2024-03-29T09:27:02","slug":"learn-web-design-how-repetition-leads-to-rhythm","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm","title":{"rendered":"Learn Web Design: How Repetition Leads to Rhythm"},"content":{"rendered":"<p>Repetition is a basic design principle that every designer knows intuitively, but you&#8217;ll find that intentionally considering it when creating layouts will greatly increase your effectiveness. Throughout a design or series of designs, repetition in colors, textures, patterns, UI elements, and typography creates a sense of harmony and familiarity. This article will discuss different types of repetition and how you can use them to strengthen your work.<h2><span class=\"ez-toc-section\" id=\"Learn_Web_Design_Series\"><\/span>Learn Web Design Series<span class=\"ez-toc-section-end\"><\/span><\/h2><p>\nWelcome back to our series on learning to be a web designer. Remember from last time that we&#8217;re not talking about code, like HTML and CSS, but the foundational principles of design. Simple lessons that will improve your ability to create an aesthetically pleasing end product for your clients. Here are a couple of other posts in this series:\n<\/p><ul>\n  <li><a href=\"http:\/\/crtv.mk\/ebNN\">Learn Web Design: 3 Common Misconceptions<\/a><\/li>\n  <li><a href=\"http:\/\/crtv.mk\/qe5r\">Learn Web Design: Simpler is Better<\/a><\/li>\n<\/ul><h2><span class=\"ez-toc-section\" id=\"Types_of_Repetition\"><\/span>Types of Repetition<span class=\"ez-toc-section-end\"><\/span><\/h2><p>Repetition is a basic design principle with both simple and complex uses. Repetition can be easily found in fonts (the use of bold, italics, and the words the fonts comprise), in bullet points and lines, and in colors. Thematically, repetition is vital to consistency by emphasizing space and to unification by bringing seemingly disconnected elements together.<\/p><p>Repetition has many functions: It organizes information coherently, guides the audience, brings together the elements of a design, and emphasizes space. Repeating visual elements throughout ties together seemingly separate elements, although it can become both obvious and annoying when repetition is overused.<\/p><br><em>Notice the repetition of the curved stripe concept across the theme.<\/em><h2><span class=\"ez-toc-section\" id=\"What_Is_Rhythm\"><\/span>What Is Rhythm?<span class=\"ez-toc-section-end\"><\/span><\/h2><p>Objects in a design (otherwise referred to as the &acirc;&euro;&oelig;positive element&acirc;&euro;) alternate with negative space to produce patterns that repeat and impart rhythm. Rhythm is created through the use of repetition to make patterns and produce an alternation of contrast (think bold versus light, white versus black) and a gradation through pattern progression.<\/p><p>The three primary types of rhythm are regular rhythm, flowing rhythm, and progressive rhythm. Regular rhythm is the interaction between elements of similar proportions. The elements are repeated predictably with little variation. Flowing rhythm is more natural than regular rhythm. The use of patterns primarily creates a sense of movement. Nature is a good example of this type of rhythm, as you can look at a zebra&acirc;&euro;&trade;s stripes to see the variation in proportion of one stripe to the next. Progressive rhythm repeats elements with variation over an interval. The variation is typically found in the size, shape, or color of design elements. What makes it progressive is the gradations in size to impart direction to the viewer.<\/p><br><em>This designer uses circles as a foundational shape for several UI elements, which creates a nice sense of consistency throughout the design.<\/em><h2><span class=\"ez-toc-section\" id=\"Creating_Rhythm_Through_Repetition\"><\/span>Creating Rhythm Through Repetition<span class=\"ez-toc-section-end\"><\/span><\/h2><p>The interaction of different elements relies heavily on space. Space is necessary when using rhythm because it is in the intervals between objects that pattern and rhythm are found. Time is also a factor, as our eye is guided along the design from one object to another. This creates rhythm within space. Emphasis and contrast contribute to the overall sense of rhythm in design as well. By using contrast, the designer grabs the eye of the audience and pulls it along a set path of elements. The contrast creates emphasis by holding the audience&acirc;&euro;&trade;s attention longer on certain elements (often bolder) than others (often lighter).<\/p><p>The purpose of repetition and rhythm in design is consistency. In particular, consistency is vital to designers in the marketing world since brands rely on consistency to make consumers feel comfortable, whether it&acirc;&euro;&trade;s a web page or a logo.<\/p><br><em>Notice the repetition of the outlined text treatment from the header, scattered throughout the rest of the theme. It&#8217;s not overdone, but instead tactfully applied in all the right places.<\/em><h2><span class=\"ez-toc-section\" id=\"Consistency_is_Key\"><\/span>Consistency is Key<span class=\"ez-toc-section-end\"><\/span><\/h2><p>The importance of consistency in design can be seen in the real world. Take city design: the rules of the road are of utmost importance. Without these rules, drivers would fear for their lives every time they got in their car. We know the rhythm of traffic lights, what each color means, and have a sense of how long each color may last (except red, which always takes forever). Repetition leads to rhythm through unification of design elements, such as color and space. Through the skillful use of variation, rhythm is made. Rhythm keeps your audience engaged and always looking at the right beats.<\/p><hr><em>Header image created using <a href=\"http:\/\/crtv.mk\/eiSn\">Metallic stairs background<\/a>.<\/em><hr><\/p>    <figure id=\"card-51379-1404333733\" class=\"product-card full no-pinit\" data-product-id=\"51379\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1404333733\"><\/figure>\n        <figure id=\"card-18363-77619703\" class=\"product-card full no-pinit\" data-product-id=\"18363\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"77619703\"><\/figure>\n        <figure id=\"card-83406-684800353\" class=\"product-card full no-pinit\" data-product-id=\"83406\" data-index=\"0\" data-width=\"full\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"684800353\"><\/figure>\n    \n","protected":false},"excerpt":{"rendered":"<p>Repetition is a basic design principle that every designer knows intuitively, but you&#8217;ll find that intentionally considering it when creating layouts will greatly increase your effectiveness. Throughout a design or series of designs, repetition in colors, textures, patterns, UI elements, and typography creates a sense of harmony and familiarity. This article will discuss different types [&hellip;]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[61,102],"topics":[],"class_list":["post-18442","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-design","tag-templates"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Learn Web Design: How Repetition Leads to Rhythm - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn Web Design: How Repetition Leads to Rhythm\" \/>\n<meta property=\"og:description\" content=\"Repetition is a basic design principle that every designer knows intuitively, but you&#039;ll find that intentionally considering it when creating layouts will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2014-10-23T13:00:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-29T09:27:02+00:00\" \/>\n<meta name=\"author\" content=\"Creative Market\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Creative Market\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/learn-web-design-how-repetition-leads-to-rhythm\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/learn-web-design-how-repetition-leads-to-rhythm\",\"name\":\"Learn Web Design: How Repetition Leads to Rhythm - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-10-23T13:00:25+00:00\",\"dateModified\":\"2024-03-29T09:27:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d6927fab89f28e3dd8f6bb7b36219d66\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/learn-web-design-how-repetition-leads-to-rhythm#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/learn-web-design-how-repetition-leads-to-rhythm\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/learn-web-design-how-repetition-leads-to-rhythm#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Learn Web Design: How Repetition Leads to Rhythm\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Learn Web Design: How Repetition Leads to Rhythm - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm","og_locale":"en_US","og_type":"article","og_title":"Learn Web Design: How Repetition Leads to Rhythm","og_description":"Repetition is a basic design principle that every designer knows intuitively, but you'll find that intentionally considering it when creating layouts will","og_url":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2014-10-23T13:00:25+00:00","article_modified_time":"2024-03-29T09:27:02+00:00","author":"Creative Market","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Creative Market","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm","url":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm","name":"Learn Web Design: How Repetition Leads to Rhythm - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"datePublished":"2014-10-23T13:00:25+00:00","dateModified":"2024-03-29T09:27:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d6927fab89f28e3dd8f6bb7b36219d66"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/learn-web-design-how-repetition-leads-to-rhythm#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Learn Web Design: How Repetition Leads to Rhythm"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/18442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/57"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=18442"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/18442\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=18442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=18442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=18442"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=18442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}