{
    "componentChunkName": "component---src-pages-layout-overview-mdx",
    "path": "/layout/overview/",
    "result": {"pageContext":{"frontmatter":{"title":"Overview"},"relativePagePath":"/layout/overview.mdx","titleType":"append","MdxNode":{"id":"78222cc2-8482-582a-a92e-aa77fb559e73","children":[],"parent":"a2e6bf3b-9daf-50a5-b8bf-12bd4d182c48","internal":{"content":"---\ntitle: Overview\n---\n\nimport { exampleSection, exampleAside } from '../../styles/Grid.module.scss';\n\n<PageDescription>\n\nThe layout is where all the elements of communication come together. A good layout requires careful planning and use of composition, which relies on principles such as hierarchy, scale, proportion, contrast, harmony, rhythm, repetition, and many more.\n\n</PageDescription>\n\n## Point-of-view\n\nWhen it comes to expressing our brand character, perhaps what's more important than our elements is how they all come together. Layout is the way that each element is arranged in a given space, and careful consideration of it is essential to achieving the IBM look.\n\nWhile our look has evolved and will continue to evolve, what defines it is our approach to design—our philosophy, principles, and quality of craft. And it is the responsibility of every designer at IBM to uphold. \n\nWhen practicing layout and composition, certain criteria should be considered to express our distinct point-of-view. While the aggregate of IBM communications should employ the following design characteristics, individual designs need not feature all equally.\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Essential\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nOur purpose is to be essential to our clients and to the world, and that should be expressed in every experience we create. Achieving a successful layout starts with essential content strategy. That then informs how to best create an essential layout or composition. Providing a user with both the most vital and digestible content in an organized fashion helps establish hierarchy and creates a meaningful experience. Being essential in layout and composition helps ensure our content can be understood and useful to our audience.\n\n- Form follows function. Nothing is gratuitous or there for decoration.\n- Ample negative space opens up the design.\n- The message or goal of the design is clear.\n- Structure is as simple as possible until additional complexity is needed.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n<p>**IBM field guides**<br/>\nThese field guide covers are expressive, yet minimal. Artwork is left aligned with the typography, and ample negative space makes the design feel light and open.</p>\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM field guides](/images/Systems_v6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM business card**<br/>\nStraightforward and essential, the IBM business card employs a simple grid structure and minimal typography. The eye is brought first to the logo and the name, then guided toward the employee information through alignment.\n\n</Aside>\n</Column>\n\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM business card](/images/Business.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Security Connect**<br/>\nEssential design is especially crucial in software products. This open and utilitarian layout guides the user through clear hierarchy, simple structure, and purposeful use of color.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Security Connect screen](/images/Config-input.png)\n\n</Column>\n</Row>\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Dynamic\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nAt IBM, we continuously adapt to the evolving needs of our clients to solve the world's toughest problems. This dynamic quality is expressed in layout through asymmetry, contrast, and the suggestion of movement and energy. Thoughtful, creative relationships among elements create unique visual experiences that provoke thought and engagement.\n\n- Positive and negative space work together in asymmetric balance.\n- Asymmetric layouts help create qualities of space and depth.\n- Compositions elicit a sense of movement and vitality.\n- Expectations are broken with surprise and delight.\n- Experimentation and playfulness are apparent.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**Everyday Ethics for AI**<br/>\nThe variation of layout throughout this field guide keeps the reader engaged with the content. Note how positive and negative space give the layouts a visual flow.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n<GifPlayer color=\"dark\">\n\n![Everyday Ethics for AI field guide](/images/AI-Ethics-GIF_v3.gif)\n![Everyday Ethics for AI field guide](/images/AI-Ethics-GIF_v3.jpg)\n\n</GifPlayer>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Project Debater homepage**<br/>\nExperimentation and playfulness are apparent through use of type, shape, and image. Everything contributes to the creative concept.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Project Debater website](/images/AI_Site.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**Blueprint poster**<br/>\nThe blueprint event poster shows dynamic movement through the sizing and placement of typography as well as the directionality of the diagram arrows.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![Blueprint event poster](/images/BluePoster.png)\n\n</Column>\n</Row>\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Engineered\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nEngineering has always been a part of our DNA. Whether it's industry-leading technology or a layout for a magazine, everything we create is crafted with expertise. An engineered quality in layout is achieved primarily through systematic logic. This means that nothing is placed, sized, or styled without reason, and there is consideration of the relationships among the parts and their contexts to the bigger picture.\n\n- Nothing is arbitrary; all decisions are made according to systematic logic.\n- Elements are aligned to each other as well as the underlying grid.\n- Aesthetic is delicate, precise, and based on geometry.\n- Measurements, shapes, ratios, and proportions are repeated for consistency and quality.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Design philosophy cards**<br/>\nConsistent alignments and type sizes, along with a precise, geometric illustration style, contribute to an engineered aesthetic. Nothing is placed, sized, or styled in any way without reason.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Design philosophy cards](/images/Design.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Design Town Hall poster**<br/>\nAll elements in the composition are thoughtfully aligned to each other. The canvas is also logically divided into a simple 2-column, 2-row grid.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Design Town Hall poster](/images/DesignTownHall_v2.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Garage posters**<br/>\nThe visual system for IBM Garage exposes the underlying grid structure, making the layout logic apparent. The delicate scaffolding shows how elements are sized and placed according to the grid.\n</Aside>\n</Column>\n\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Garage posters](/images/Garage.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"f6f7e419416cdaebc37c361a5239f428","owner":"gatsby-plugin-mdx","counter":1916},"frontmatter":{"title":"Overview"},"exports":{},"rawBody":"---\ntitle: Overview\n---\n\nimport { exampleSection, exampleAside } from '../../styles/Grid.module.scss';\n\n<PageDescription>\n\nThe layout is where all the elements of communication come together. A good layout requires careful planning and use of composition, which relies on principles such as hierarchy, scale, proportion, contrast, harmony, rhythm, repetition, and many more.\n\n</PageDescription>\n\n## Point-of-view\n\nWhen it comes to expressing our brand character, perhaps what's more important than our elements is how they all come together. Layout is the way that each element is arranged in a given space, and careful consideration of it is essential to achieving the IBM look.\n\nWhile our look has evolved and will continue to evolve, what defines it is our approach to design—our philosophy, principles, and quality of craft. And it is the responsibility of every designer at IBM to uphold. \n\nWhen practicing layout and composition, certain criteria should be considered to express our distinct point-of-view. While the aggregate of IBM communications should employ the following design characteristics, individual designs need not feature all equally.\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Essential\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nOur purpose is to be essential to our clients and to the world, and that should be expressed in every experience we create. Achieving a successful layout starts with essential content strategy. That then informs how to best create an essential layout or composition. Providing a user with both the most vital and digestible content in an organized fashion helps establish hierarchy and creates a meaningful experience. Being essential in layout and composition helps ensure our content can be understood and useful to our audience.\n\n- Form follows function. Nothing is gratuitous or there for decoration.\n- Ample negative space opens up the design.\n- The message or goal of the design is clear.\n- Structure is as simple as possible until additional complexity is needed.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n<p>**IBM field guides**<br/>\nThese field guide covers are expressive, yet minimal. Artwork is left aligned with the typography, and ample negative space makes the design feel light and open.</p>\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM field guides](/images/Systems_v6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM business card**<br/>\nStraightforward and essential, the IBM business card employs a simple grid structure and minimal typography. The eye is brought first to the logo and the name, then guided toward the employee information through alignment.\n\n</Aside>\n</Column>\n\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM business card](/images/Business.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Security Connect**<br/>\nEssential design is especially crucial in software products. This open and utilitarian layout guides the user through clear hierarchy, simple structure, and purposeful use of color.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Security Connect screen](/images/Config-input.png)\n\n</Column>\n</Row>\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Dynamic\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nAt IBM, we continuously adapt to the evolving needs of our clients to solve the world's toughest problems. This dynamic quality is expressed in layout through asymmetry, contrast, and the suggestion of movement and energy. Thoughtful, creative relationships among elements create unique visual experiences that provoke thought and engagement.\n\n- Positive and negative space work together in asymmetric balance.\n- Asymmetric layouts help create qualities of space and depth.\n- Compositions elicit a sense of movement and vitality.\n- Expectations are broken with surprise and delight.\n- Experimentation and playfulness are apparent.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**Everyday Ethics for AI**<br/>\nThe variation of layout throughout this field guide keeps the reader engaged with the content. Note how positive and negative space give the layouts a visual flow.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n<GifPlayer color=\"dark\">\n\n![Everyday Ethics for AI field guide](/images/AI-Ethics-GIF_v3.gif)\n![Everyday Ethics for AI field guide](/images/AI-Ethics-GIF_v3.jpg)\n\n</GifPlayer>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Project Debater homepage**<br/>\nExperimentation and playfulness are apparent through use of type, shape, and image. Everything contributes to the creative concept.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Project Debater website](/images/AI_Site.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**Blueprint poster**<br/>\nThe blueprint event poster shows dynamic movement through the sizing and placement of typography as well as the directionality of the diagram arrows.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![Blueprint event poster](/images/BluePoster.png)\n\n</Column>\n</Row>\n\n<Row className={exampleSection}>\n<Column colMd={2} colLg={4}>\n\n### Engineered\n\n</Column>\n<Column colMd={6} colLg={8}>\n\nEngineering has always been a part of our DNA. Whether it's industry-leading technology or a layout for a magazine, everything we create is crafted with expertise. An engineered quality in layout is achieved primarily through systematic logic. This means that nothing is placed, sized, or styled without reason, and there is consideration of the relationships among the parts and their contexts to the bigger picture.\n\n- Nothing is arbitrary; all decisions are made according to systematic logic.\n- Elements are aligned to each other as well as the underlying grid.\n- Aesthetic is delicate, precise, and based on geometry.\n- Measurements, shapes, ratios, and proportions are repeated for consistency and quality.\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Design philosophy cards**<br/>\nConsistent alignments and type sizes, along with a precise, geometric illustration style, contribute to an engineered aesthetic. Nothing is placed, sized, or styled in any way without reason.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Design philosophy cards](/images/Design.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Design Town Hall poster**<br/>\nAll elements in the composition are thoughtfully aligned to each other. The canvas is also logically divided into a simple 2-column, 2-row grid.\n\n</Aside>\n</Column>\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Design Town Hall poster](/images/DesignTownHall_v2.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={2} colLg={3} className=\"hide-mobile\">\n<Aside className={exampleAside}>\n\n**IBM Garage posters**<br/>\nThe visual system for IBM Garage exposes the underlying grid structure, making the layout logic apparent. The delicate scaffolding shows how elements are sized and placed according to the grid.\n</Aside>\n</Column>\n\n<Column colMd={6} colLg={8} offsetLg={1}>\n\n![IBM Garage posters](/images/Garage.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/layout/overview.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}