{
"componentChunkName": "component---src-pages-layout-tips-and-techniques-mdx",
"path": "/layout/tips-and-techniques/",
"result": {"pageContext":{"frontmatter":{"title":"Tips and techniques"},"relativePagePath":"/layout/tips-and-techniques.mdx","titleType":"append","MdxNode":{"id":"ff7a0b4f-227a-5f65-9945-69b6526f86d3","children":[],"parent":"0ef76570-8515-5153-89b1-06c4421330d8","internal":{"content":"---\ntitle: Tips and techniques\n---\n\nimport v292028388 from '../../videos/vimeo/292028388.mp4';\nimport p292028388 from '../../videos/vimeo/292028388.jpg';\n\n\n\nLayout creates a context for communication on a page. Using the right\ncomposition helps guide a user through content in meaningful, useful and\nbeautiful ways. The tips and techniques found here can help you organize and\nmanipulate content for a successful user experience.\n\n\n\n\n Make and break patterns\n Let it breathe\n Guide the eye\n Master asymmetry\n\n\n## Make and break patterns\n\nIn many ways, composition in design is very similar to musical composition.\nMelody, rhythm, harmony, timbre, and form—among others—are principles that can\nbe translated across both fields. Like music, design is also driven by a careful\nbalance of repetition and variation to create unity and interest.\n\nIs it too repetitive and predictable? Is it too chaotic and lacking in\nstructure? How do the elements relate to each other as well as the surrounding\nspace?\n\nLogical repetition of elements, measurements, shapes, ratios, and proportions\nwill drive consistency and quality. Expressive variation—where appropriate—can\nbreak expectations and create visual interest.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Structural rhythm\n\nWhen it comes to rhythm, what’s not on the page is just as important as what is.\nConsider a measure of music; repetition of notes without structure does not\nprovide good rhythm. However, once notes are placed at regular time intervals,\nrhythm emerges.\n\n#### 2x Grid\n\nThe [2x Grid](/2x-grid) is the scaffolding on which IBM designers\ncreate structural rhythm. It provides structural, proportional, and spatial\nguidance for design within any media. Skillful use of it will yield harmonious\nspatial relationships between canvas and content while expressing our distinct\npoint-of-view.\n\n\n\n#### Sizing scale\n\nIn lieu of concrete vertical divisions, such as on a web page, the\n[sizing scale](https://www.carbondesignsystem.com/elements/2x-grid/overview/#sizing-scale)\nis helpful in establishing vertical rhythm. Like a type scale, the sizing scale\nconstrains the range of sizes to improve consistency and rhythm, while still\nallowing a wide range of sizes.\n\n\n\n### Editorial rhythm\n\nCareful repetition and alternation of larger units of design drives editorial\nrhythm. This is most often done in multi-page editorial design or scrolling web\npages, where the viewer experiences one part of the whole at a time.\n\nThe concept is well established in music as form. Musical form describes the\nstructure of a piece of music as a combination of units. Letters are given to\nthe first occurrence of each unit, and the same letter is given to repeated\nunits. In the AABA form for example, A units have similar melodic content as\nrepeated A units, while the B unit offers an alternation to the A units to\nprovide interest.\n\nIn design, larger visual units are driven by the content. Similar types of\ncontent can be given similar structure, such as the the same spatial dimensions,\ntype sizes and hierarchy, and alignments. Consider how units can be repeated,\nand conversely, how structurally different units can break up the monotony of\nrepeated ones. Repetition of units across multiple designs drives continuity\nbetween them.\n\n\n\n## Let it breathe\n\nA classic offense that plagues many designers and non-designers alike is the\noverabundance of elements in a design. While utilizing all available space may\nreduce canvas size or scroll distance, it does more harm than good when it comes\nto a viewer's understanding of information. Overcrowding will render your design\nimpenetrable.\n\nWhite space creates a visual pause between elements where the eye can rest. It\nsets things apart or brings them together to distinguish an element’s importance\nor priority. White space makes a layout feel clean and approachable while\nmaintaining content-rich design.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n## Guide the eye\n\nDesign is successful when the viewer is guided through a composition via\nhierarchy. Proper hierarchy creates visual entry points to a design and guides\nthe eye from one element to another in order of significance. Without it, one is\nforced to discern importance among equally-weighted elements, which leads to a\nflat design and poor experience.\n\n### Hierarchy of information\n\nTypographic hierarchy is the navigational system that renders complex\ninformation accessible. Think of a book outline; the size, style, and position\nof type not only informs what order it should be read, but also describes the\nparent-child relationships of the content. Effective use of the\n[type scale](/typography/type-scale), along\nwith an understanding of\n[Gestalt principles](https://www.interaction-design.org/literature/topics/gestalt-principles),\nwill ensure your design can be easily navigated and understood.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Compositional flow\n\nFacilitating eye movement through the composition creates a more interesting\ndesign. A focal point instantly attracts the eye to one area of the canvas.\nSecondary and tertiary elements then draw the eye across the canvas, creating\nmore engagement between the viewer and the design. This is done best through\n[asymmetric layouts](/layout/tips-and-techniques/#master-asymmetry),\nwhere thoughtful relationships between elements make for a more visually\nstimulating design. It's important to plan the movement of the eye in order to\nguide the viewer to the intended outcome.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Master asymmetry\n\nWhile perfect symmetry can be beautiful and create a sense of stability, it is\nusually not the best way to create a dynamic composition. Balanced asymmetry is\noften more successful in creating movement, life, and interest through more\ncreative activation of space. It also requires more careful orchestration of\nelements to achieve.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"60d78d31f0d74ee76ad0aefb6d8dff66","owner":"gatsby-plugin-mdx","counter":1917},"frontmatter":{"title":"Tips and techniques"},"exports":{},"rawBody":"---\ntitle: Tips and techniques\n---\n\nimport v292028388 from '../../videos/vimeo/292028388.mp4';\nimport p292028388 from '../../videos/vimeo/292028388.jpg';\n\n\n\nLayout creates a context for communication on a page. Using the right\ncomposition helps guide a user through content in meaningful, useful and\nbeautiful ways. The tips and techniques found here can help you organize and\nmanipulate content for a successful user experience.\n\n\n\n\n Make and break patterns\n Let it breathe\n Guide the eye\n Master asymmetry\n\n\n## Make and break patterns\n\nIn many ways, composition in design is very similar to musical composition.\nMelody, rhythm, harmony, timbre, and form—among others—are principles that can\nbe translated across both fields. Like music, design is also driven by a careful\nbalance of repetition and variation to create unity and interest.\n\nIs it too repetitive and predictable? Is it too chaotic and lacking in\nstructure? How do the elements relate to each other as well as the surrounding\nspace?\n\nLogical repetition of elements, measurements, shapes, ratios, and proportions\nwill drive consistency and quality. Expressive variation—where appropriate—can\nbreak expectations and create visual interest.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Structural rhythm\n\nWhen it comes to rhythm, what’s not on the page is just as important as what is.\nConsider a measure of music; repetition of notes without structure does not\nprovide good rhythm. However, once notes are placed at regular time intervals,\nrhythm emerges.\n\n#### 2x Grid\n\nThe [2x Grid](/2x-grid) is the scaffolding on which IBM designers\ncreate structural rhythm. It provides structural, proportional, and spatial\nguidance for design within any media. Skillful use of it will yield harmonious\nspatial relationships between canvas and content while expressing our distinct\npoint-of-view.\n\n\n\n#### Sizing scale\n\nIn lieu of concrete vertical divisions, such as on a web page, the\n[sizing scale](https://www.carbondesignsystem.com/elements/2x-grid/overview/#sizing-scale)\nis helpful in establishing vertical rhythm. Like a type scale, the sizing scale\nconstrains the range of sizes to improve consistency and rhythm, while still\nallowing a wide range of sizes.\n\n\n\n### Editorial rhythm\n\nCareful repetition and alternation of larger units of design drives editorial\nrhythm. This is most often done in multi-page editorial design or scrolling web\npages, where the viewer experiences one part of the whole at a time.\n\nThe concept is well established in music as form. Musical form describes the\nstructure of a piece of music as a combination of units. Letters are given to\nthe first occurrence of each unit, and the same letter is given to repeated\nunits. In the AABA form for example, A units have similar melodic content as\nrepeated A units, while the B unit offers an alternation to the A units to\nprovide interest.\n\nIn design, larger visual units are driven by the content. Similar types of\ncontent can be given similar structure, such as the the same spatial dimensions,\ntype sizes and hierarchy, and alignments. Consider how units can be repeated,\nand conversely, how structurally different units can break up the monotony of\nrepeated ones. Repetition of units across multiple designs drives continuity\nbetween them.\n\n\n\n## Let it breathe\n\nA classic offense that plagues many designers and non-designers alike is the\noverabundance of elements in a design. While utilizing all available space may\nreduce canvas size or scroll distance, it does more harm than good when it comes\nto a viewer's understanding of information. Overcrowding will render your design\nimpenetrable.\n\nWhite space creates a visual pause between elements where the eye can rest. It\nsets things apart or brings them together to distinguish an element’s importance\nor priority. White space makes a layout feel clean and approachable while\nmaintaining content-rich design.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n## Guide the eye\n\nDesign is successful when the viewer is guided through a composition via\nhierarchy. Proper hierarchy creates visual entry points to a design and guides\nthe eye from one element to another in order of significance. Without it, one is\nforced to discern importance among equally-weighted elements, which leads to a\nflat design and poor experience.\n\n### Hierarchy of information\n\nTypographic hierarchy is the navigational system that renders complex\ninformation accessible. Think of a book outline; the size, style, and position\nof type not only informs what order it should be read, but also describes the\nparent-child relationships of the content. Effective use of the\n[type scale](/typography/type-scale), along\nwith an understanding of\n[Gestalt principles](https://www.interaction-design.org/literature/topics/gestalt-principles),\nwill ensure your design can be easily navigated and understood.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Compositional flow\n\nFacilitating eye movement through the composition creates a more interesting\ndesign. A focal point instantly attracts the eye to one area of the canvas.\nSecondary and tertiary elements then draw the eye across the canvas, creating\nmore engagement between the viewer and the design. This is done best through\n[asymmetric layouts](/layout/tips-and-techniques/#master-asymmetry),\nwhere thoughtful relationships between elements make for a more visually\nstimulating design. It's important to plan the movement of the eye in order to\nguide the viewer to the intended outcome.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Master asymmetry\n\nWhile perfect symmetry can be beautiful and create a sense of stability, it is\nusually not the best way to create a dynamic composition. Balanced asymmetry is\noften more successful in creating movement, life, and interest through more\ncreative activation of space. It also requires more careful orchestration of\nelements to achieve.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n
\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/layout/tips-and-techniques.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}