{"id":242,"date":"2023-06-19T16:37:08","date_gmt":"2023-06-19T07:37:08","guid":{"rendered":"https:\/\/barbegenerativediary.com\/en\/?p=242"},"modified":"2023-06-19T16:37:08","modified_gmt":"2023-06-19T07:37:08","slug":"grid-systems-in-graphic-design","status":"publish","type":"post","link":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/","title":{"rendered":"Grid systems in graphic design"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">What are Grid systems?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Grid systems are layout technique that arranges text and images based on consecutive rows and columns to improve design consistency and visibility. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Originally conceived for the layout of printed materials, it is now used in all kinds of design, including web design, and there is much that can be learned from this Grid systems when creating graphics in 2D, such as in Processing and P5js.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/amzn.to\/3ry0xAb\" target=\"_blank\" rel=\"noopener\" title=\"\">Grid systems in graphic design<\/a> &#8211; Josef M\u00fcller-Brockmann<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Grid systems are methods for accurately conveying messages, information, and other necessary values to people. This book introduces the grid system and its purpose, Brockmann&#8217;s philosophy, grid layout from practical paper sizes, typography, margins, and line spacing, with illustrative examples.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While the content of this book is the basics of the system, simply following the system does not always result in a good layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Just as there are many different messages associated with production, the method of layout requires sense and knowledge in addition to the system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;&#8211;<br>\u25ba <a href=\"https:\/\/amzn.to\/3ry0xAb\" target=\"_blank\" rel=\"noopener\" title=\"\">Grid systems in graphic design<\/a> &#8211; Josef M\u00fcller-Brockmann<br>Publication date: 1996. October 1<br>Length: 176 pages<br>Publisher: Niggli Verlag<br>Language: English<br>&#8212;&#8211;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Josef M\u00fcller-Brockmannn<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">He was a Swiss graphic designer, typographer and educator.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After studying architecture, design, and art history at the Zurich University of the Arts, he founded a studio in Zurich in 1936 specializing in graphic design, exhibition design, and photography.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">He worked extensively in concert poster design, magazine editing, and design consultancy. He advocated and popularized the grid system to probabilize universal graphic expression and media systems.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the late 1950s, he taught at the School of Design and Fine Arts in Zurich and at the Gestalt University in Germany, and had a profound influence on European graphic designers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Brockmann&#8217;s work is influenced by the modernist design of the time, best known for his geometric concert posters.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Seeking a visual connection between the structure of the design and the harmony of the music, he expresses it freely within a grid system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Zurich Tonhalle. musica viva. Concert poster, 1957, 1958, 1959<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme-01.webp\" alt=\"\" class=\"wp-image-243 lazyload\" data-srcset=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme-01.webp 1024w, https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme-01-300x169.webp 300w, https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme-01-768x432.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recommended Book \/ Generative art<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"576\" data-src=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/09\/GenerativeArtProcessing.webp\" alt=\"\" class=\"wp-image-327 lazyload\" data-srcset=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/09\/GenerativeArtProcessing.webp 1024w, https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/09\/GenerativeArtProcessing-300x169.webp 300w, https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/09\/GenerativeArtProcessing-768x432.webp 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/576;\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"https:\/\/amzn.to\/3rBeaOZ\" target=\"_blank\" rel=\"noopener\" title=\"\">Generative Art: A Practical Guide Using Processing<\/a> &#8211; Matt Pearson<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Generative Art presents both the techniques and the beauty of algorithmic art. In it, you&#8217;ll find dozens of high-quality examples of generative art, along with the specific steps the author followed to create each unique piece using the Processing programming language. The book includes concise tutorials for each of the technical components required to create the book&#8217;s images, and it offers countless suggestions for how you can combine and reuse the various techniques to create your own works.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Purchase of the print book comes with an offer of a free PDF, ePub, and Kindle eBook from Manning. Also available is all code from the book.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;&#8211;<br>\u25ba <a href=\"https:\/\/amzn.to\/3rBeaOZ\" target=\"_blank\" rel=\"noopener\" title=\"\">Generative Art: A Practical Guide Using Processing<\/a> &#8211; Matt Pearson<br>Publication date: 2011. July 10<br>Length: 240 Pages<br>Publisher: Manning<br>Language: English<br>&#8212;&#8211;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">barbe_generative_diary SOUNDS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">barbe_generative_diary SOUNDS publishes sound materials recorded through field recordings for sound visualization expressions on <a href=\"https:\/\/barbegenerativediary.bandcamp.com\/follow_me\" target=\"_blank\" rel=\"noopener\" title=\"\">&#8220;bandcamp&#8221;<\/a> royalty-free.<\/p>\n\n\n\n<iframe style=\"border: 0; width: 100%; height: 120px;\" data-src=\"https:\/\/bandcamp.com\/EmbeddedPlayer\/album=2891164204\/size=large\/bgcol=ffffff\/linkcol=0687f5\/tracklist=false\/artwork=small\/transparent=true\/\" seamless src=\"about:blank\" class=\"lazyload\" data-load-mode=\"0\"><a href=\"https:\/\/barbegenerativediary.bandcamp.com\/album\/original-heidelberg-printing-machine-sounds\">Original Heidelberg Printing Machine Sounds by barbe_generative_dairy<\/a><\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.<\/p>\n","protected":false},"author":1,"featured_media":244,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,12],"tags":[],"class_list":["post-242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-books","category-gear-and-tools"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"barbe peco\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" \/>\n\t\t<meta property=\"og:site_name\" content=\"barbe_generative_diary - generative art &amp; sound\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Grid systems in graphic design - barbe_generative_diary\" \/>\n\t\t<meta property=\"og:description\" content=\"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2023-06-19T07:37:08+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2023-06-19T07:37:08+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@b_generative_d\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Grid systems in graphic design - barbe_generative_diary\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@b_generative_d\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#blogposting\",\"name\":\"Grid systems in graphic design - barbe_generative_diary\",\"headline\":\"Grid systems in graphic design\",\"author\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/author\\\/barbe-peco\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Grid-Systems-Raster-Systeme.webp\",\"width\":1024,\"height\":576,\"caption\":\"Grid-Systems-Raster-Systeme\"},\"datePublished\":\"2023-06-19T16:37:08+09:00\",\"dateModified\":\"2023-06-19T16:37:08+09:00\",\"inLanguage\":\"ja\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#webpage\"},\"articleSection\":\"Books, Gear and Tools\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/#listItem\",\"name\":\"Gear and Tools\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/#listItem\",\"position\":2,\"name\":\"Gear and Tools\",\"item\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/books\\\/#listItem\",\"name\":\"Books\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/books\\\/#listItem\",\"position\":3,\"name\":\"Books\",\"item\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/books\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#listItem\",\"name\":\"Grid systems in graphic design\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/#listItem\",\"name\":\"Gear and Tools\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#listItem\",\"position\":4,\"name\":\"Grid systems in graphic design\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/category\\\/gear-and-tools\\\/books\\\/#listItem\",\"name\":\"Books\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/#organization\",\"name\":\"barbe_generative_diary\",\"description\":\"generative art & sound\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/screenshot.jpg\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#organizationLogo\",\"width\":1200,\"height\":900,\"caption\":\"barbe_generateive_diary-logo\"},\"image\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/b_generative_d\",\"https:\\\/\\\/www.instagram.com\\\/barbe_generative_diary\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/author\\\/barbe-peco\\\/#author\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/author\\\/barbe-peco\\\/\",\"name\":\"barbe peco\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/213a0c67aba1bb615b635311878df42a0da5d76a357ba813fbec694be60b1f72?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"barbe peco\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#webpage\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/\",\"name\":\"Grid systems in graphic design - barbe_generative_diary\",\"description\":\"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/author\\\/barbe-peco\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/author\\\/barbe-peco\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/Grid-Systems-Raster-Systeme.webp\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#mainImage\",\"width\":1024,\"height\":576,\"caption\":\"Grid-Systems-Raster-Systeme\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/gear-and-tools\\\/grid-systems-in-graphic-design\\\/#mainImage\"},\"datePublished\":\"2023-06-19T16:37:08+09:00\",\"dateModified\":\"2023-06-19T16:37:08+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/\",\"name\":\"barbe_generative_diary\",\"description\":\"generative art & sound\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\\/\\\/barbegenerativediary.com\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Grid systems in graphic design - barbe_generative_diary","description":"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.","canonical_url":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#blogposting","name":"Grid systems in graphic design - barbe_generative_diary","headline":"Grid systems in graphic design","author":{"@id":"https:\/\/barbegenerativediary.com\/en\/author\/barbe-peco\/#author"},"publisher":{"@id":"https:\/\/barbegenerativediary.com\/en\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp","width":1024,"height":576,"caption":"Grid-Systems-Raster-Systeme"},"datePublished":"2023-06-19T16:37:08+09:00","dateModified":"2023-06-19T16:37:08+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#webpage"},"isPartOf":{"@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#webpage"},"articleSection":"Books, Gear and Tools"},{"@type":"BreadcrumbList","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en#listItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/barbegenerativediary.com\/en","nextItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/#listItem","name":"Gear and Tools"}},{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/#listItem","position":2,"name":"Gear and Tools","item":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/","nextItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/#listItem","name":"Books"},"previousItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en#listItem","name":"\u30db\u30fc\u30e0"}},{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/#listItem","position":3,"name":"Books","item":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/","nextItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#listItem","name":"Grid systems in graphic design"},"previousItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/#listItem","name":"Gear and Tools"}},{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#listItem","position":4,"name":"Grid systems in graphic design","previousItem":{"@type":"ListItem","@id":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/#listItem","name":"Books"}}]},{"@type":"Organization","@id":"https:\/\/barbegenerativediary.com\/en\/#organization","name":"barbe_generative_diary","description":"generative art & sound","url":"https:\/\/barbegenerativediary.com\/en\/","logo":{"@type":"ImageObject","url":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/05\/screenshot.jpg","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#organizationLogo","width":1200,"height":900,"caption":"barbe_generateive_diary-logo"},"image":{"@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#organizationLogo"},"sameAs":["https:\/\/twitter.com\/b_generative_d","https:\/\/www.instagram.com\/barbe_generative_diary"]},{"@type":"Person","@id":"https:\/\/barbegenerativediary.com\/en\/author\/barbe-peco\/#author","url":"https:\/\/barbegenerativediary.com\/en\/author\/barbe-peco\/","name":"barbe peco","image":{"@type":"ImageObject","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/213a0c67aba1bb615b635311878df42a0da5d76a357ba813fbec694be60b1f72?s=96&d=mm&r=g","width":96,"height":96,"caption":"barbe peco"}},{"@type":"WebPage","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#webpage","url":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/","name":"Grid systems in graphic design - barbe_generative_diary","description":"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.","inLanguage":"ja","isPartOf":{"@id":"https:\/\/barbegenerativediary.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#breadcrumblist"},"author":{"@id":"https:\/\/barbegenerativediary.com\/en\/author\/barbe-peco\/#author"},"creator":{"@id":"https:\/\/barbegenerativediary.com\/en\/author\/barbe-peco\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp","@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#mainImage","width":1024,"height":576,"caption":"Grid-Systems-Raster-Systeme"},"primaryImageOfPage":{"@id":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/#mainImage"},"datePublished":"2023-06-19T16:37:08+09:00","dateModified":"2023-06-19T16:37:08+09:00"},{"@type":"WebSite","@id":"https:\/\/barbegenerativediary.com\/en\/#website","url":"https:\/\/barbegenerativediary.com\/en\/","name":"barbe_generative_diary","description":"generative art & sound","inLanguage":"ja","publisher":{"@id":"https:\/\/barbegenerativediary.com\/en\/#organization"}}]},"og:locale":"ja_JP","og:site_name":"barbe_generative_diary - generative art &amp; sound","og:type":"article","og:title":"Grid systems in graphic design - barbe_generative_diary","og:description":"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.","og:url":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/","og:image":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp","og:image:secure_url":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp","og:image:width":1024,"og:image:height":576,"article:published_time":"2023-06-19T07:37:08+00:00","article:modified_time":"2023-06-19T07:37:08+00:00","twitter:card":"summary_large_image","twitter:site":"@b_generative_d","twitter:title":"Grid systems in graphic design - barbe_generative_diary","twitter:description":"Creating graphics in Processing, p5js, etc., requires not only code skills but also graphic knowledge. This book is a basic on grid systems by Josef M\u00fcller-Brockmannn, a renowned Swiss graphic designer and educator.","twitter:creator":"@b_generative_d","twitter:image":"https:\/\/barbegenerativediary.com\/en\/wp-content\/uploads\/2023\/06\/Grid-Systems-Raster-Systeme.webp"},"aioseo_meta_data":{"post_id":"242","title":null,"description":null,"keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":true,"ai":null,"created":"2023-06-19 07:38:20","updated":"2025-06-04 04:21:58","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/barbegenerativediary.com\/en\" title=\"\u30db\u30fc\u30e0\">\u30db\u30fc\u30e0<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/\" title=\"Gear and Tools\">Gear and Tools<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/\" title=\"Books\">Books<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tGrid systems in graphic design\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\u30db\u30fc\u30e0","link":"https:\/\/barbegenerativediary.com\/en"},{"label":"Gear and Tools","link":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/"},{"label":"Books","link":"https:\/\/barbegenerativediary.com\/en\/category\/gear-and-tools\/books\/"},{"label":"Grid systems in graphic design","link":"https:\/\/barbegenerativediary.com\/en\/gear-and-tools\/grid-systems-in-graphic-design\/"}],"_links":{"self":[{"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":6,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"predecessor-version":[{"id":380,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/posts\/242\/revisions\/380"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/media\/244"}],"wp:attachment":[{"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barbegenerativediary.com\/en\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}