{"id":21,"date":"2019-01-14T12:02:35","date_gmt":"2019-01-14T02:02:35","guid":{"rendered":"https:\/\/rolling-stories.making-games.net\/Devblog\/?p=21"},"modified":"2019-01-14T12:02:35","modified_gmt":"2019-01-14T02:02:35","slug":"game-book-layout-research-notes","status":"publish","type":"post","link":"https:\/\/rolling-stories.making-games.net\/Devblog\/2019\/01\/14\/game-book-layout-research-notes\/","title":{"rendered":"Game book layout research notes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>How to discourage\nme from playing your game (Lagac\u00e9, 2016)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lagac\u00e9,\nS. (2016). How to discourage me from playing your game.&nbsp; Retrieved from <a href=\"https:\/\/mechanteanemone.wordpress.com\/2016\/06\/23\/how-to-discourage-me-from-playing-your-game-part-1\/\">https:\/\/mechanteanemone.wordpress.com\/2016\/06\/23\/how-to-discourage-me-from-playing-your-game-part-1\/<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>First Impressions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Need a \u2018pitch\u2019 early one, e.g., the\ncover or first few pages \u00e0 explain basically what the game is about &amp; the\ngeneral feel<\/li><li>Consider colour, font size and type,\nmargin size<\/li><li>Column layouts are incredibly\ndifficult to read on smaller tablets<\/li><li>There should be easy to identify\nsections and headings<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Readability<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>One of the greatest challenges with\ndesign of game books is that they are read in a multitude of contexts and ways.<\/li><li>Lagac\u00e9 identifies 4 ways game books\nare read:<ul><li>the <strong>leisurely<\/strong> reading done when the book is first received<\/li><\/ul><ul><li>the <strong>selective<\/strong> reading the play does to familiarize themselves with the\nsetting and make a character<\/li><\/ul><ul><li>the <strong>studious<\/strong> reading the gm does to to prep for the game<\/li><\/ul><ul><li>the <strong>frantic<\/strong> reading in the middle of a game session to locate a\nparticular piece of information or interpret a rule<\/li><\/ul><\/li><li>Help orient the reader using\nelements such as a table of contents, index, clear headings, summary pages,\ncall-outs, \u201csee page XX,\u201d schematics, flowcharts, text boxes<\/li><li>Consider small screen viewing \u2014&gt;\navoid column layouts, distressed fonts (a.k.a. ripped, grunge or rough), very\nsmall fonts, colour page backgrounds, and larger page formats<\/li><li>Ensure pdf allows page export and\ncopy and paste<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>While Playing<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Organisation of information for\nquick reference is <em>essential<\/em><\/li><li>Good visual contrast between\nheadings and main text, legible and well-identified inset boxes make it easier\nto navigate a game book quickly<\/li><li>Fully bookmark pdf files into\nsections<\/li><li>When writing a table of\ncontents\/index, use more general terms the reader is more likely to search for,\nrather than the terms specific to your game \u00e0 those new to game are mostly likely\nto be using the index\/contents and they will not know the specific terms<\/li><li>All play aids should be included in\nthe pdf\/book (e.g., in the appendix)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The Elements of\nTypographic Style (Bringhurst, 2016)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bringhurst, R. (2016). <em>The Elements\nof Typographic Style<\/em> (4th ed.). Vancouver, BC: Hartley &amp; Marks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Horizontal\nMotion (pg. 26-36)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Line lengths of 45-75 characters is\nconsidered satisfactory for single column layouts \u00e0 the 66-character line is considered\nthe ideal for legibility<\/li><li>For multiple column layouts, 40-50\ncharacters per line is more appropriate <\/li><li>Chose ragged or justified based on\nwhat best suits both the text and the page<ul><li>When using justified text, avoid\nhyphenated line-ends is possible, however, they are still preferable to sloppy\nspacing. If there are still too many spaces, ragged setting list likely better<\/li><\/ul><ul><li>Ragged text is suited to narrower\ncolumns as it lightens the pages and decreases stiffness and will decrease the\nserious typographic errors more common to narrow layouts<\/li><\/ul><ul><li>Unserifed or monospace fonts often\nlook better ragged (but not always)<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blocks &amp;\nParagraphs (pg. 29-42)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Opening paragraphs must always be\nset flush left. This indent is superfluous if there is a title or subhead.<\/li><li>In continuous text, ident paragraphs\nafter the first should be at<em> least <\/em>one\nen. One em or one lead are the most common measures. There are other strategies\nlike outdents and ornamentation however indents are the least intrusive to the\nreading experience.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Size (pg. 45)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Don\u2019t compose without a scale (the\n11,12,14,16,18,21,24,30\u2026 etc. scale is more common but others can be used)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Notes (pg. 68)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If page notes are subordinate\ndetails, set them in a smaller size than the main text<\/li><li>Setting notes in the margin\n(sidenotes) can be present when needed and are easier to read than footnotes or\nendnotes. They should be used if appropriate for the text.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tables and\nLists (pg. 70-72)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are six key principles to\ndesigning tables that are both good to read and to look at:<ul><li>All Latin alphabet text should be set horizontal<\/li><\/ul><ul><li>Condensing or shrinking the text is rarely the right solution to space\nissues<\/li><\/ul><ul><li>Avoid ornamentation, rules, boxes, dots, etc. when possible to maximise\ninformation<\/li><\/ul><ul><li>Guides and dividers (when they are necessary at all) should run in the\npredominant reading direction \u00e0 vertically in the case of lists, indices and some\nnumerical tables; horizontally otherwise<\/li><\/ul><ul><li>Rules at the edges of the table separating the first or final column\nfrom empty space almost always is functionless<\/li><\/ul><ul><li>The inside of the table must contain an adequate amount of white space<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The Textblock (pg.\n163)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>&nbsp;<\/strong><\/li><li>If the text is for continuous\nreading, ensure the column height is clearly taller than the width<\/li><li>However, remember that very long\nnarrow columns are often associated with quick, unthoughtful reading (e.g.,\nmagazines and newspapers). Consider the ratio.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Margins &amp;\nSatellites (pg. 165-166)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Folios (page numbers) can be placed\nanywhere that is pleasing and easy to find \u00e0 this is typically one of four\nplaces<ul><li>The outside header (appropriate for folios accompanied by running heads)<\/li><\/ul><ul><li>The footer, aligned with or slightly indented from the outside edge of\nthe text<\/li><\/ul><ul><li>The upper quarter of the outside margin, beyond the outside edge of the\ntext<\/li><\/ul><ul><li>Horizontally centred at the foot of the page<\/li><\/ul><\/li><li>The bottom outside corner is almost\nalways the most convenient for flipping pages, especially for larger page sizes\n(e.g., A4)<\/li><li>Running heads are usually pointless\nand should only be considered when necessary (usually for copyright purposes)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Page Grids and\nModular Scales (pg. 166-176)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Use a modular scale if you need one\nto subdivide the page<\/li><li>Modular scales serve the same\npurpose as grids but are more flexible. They are suited to complex and varied\ncontent.<\/li><li>Examples of modular scales are from\npg. 168 of Bringhurst<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Methods of\nJustification (pg.191-192)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Good justification is calculated\nparagraph by paragraph rather than line by line<\/li><li>The best settings will depend on the\ntext and font, but a good starting point is:<ul><li>\u00b13% intercharacter spacing<\/li><\/ul><ul><li>\u00b115% word spacing<\/li><\/ul><ul><li>Favour word spacing over\nintercharacter spacing<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Author: Nicola\nD\u2019Andrea (2018)<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Thinking with type\n(Lupton, 2010)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lupton, E. (2010). <em>Thinking with\nType<\/em> (2nd ed.). New York, NY: Princeton Architectural Press.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Sizes points 9 and 11 are more\ncommon for printed text, however, what is appropriate will change with the\nfont. Fonts with a larger x-height, such as Helvetica, can be elegant and\nreadable at 8pt but bland and clunky at 12pt.<\/li><li>When alternating lowercase and\nuppercase letters, adjust the leading by selectively shifting the baselines to\nmake the space look more even.<\/li><li>Never use pseudo small caps \u2013 if the\ntext will benefit from small caps, select a typeface that includes specially\ndesigned ones<\/li><li>Non-lining numerals integrate best\nwith blocks of text<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Typographic features of text and their contribution\nto the legibility of academic reading materials<\/strong><strong> (Lonsdale, 2016)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lonsdale, M. d. S. (2016). Typographic\nfeatures of text and their contribution to the legibility of <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">academic reading\nmaterials: An empirical study. <em>Visible Language, 50<\/em>(1), 79-111.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Found that typographic layout had a notable\nimpact on student performance in academic reading situations with or without\ntime pressure<\/li><li>Text layout impacted student ability to\ndo the following:<ul><li>Read\ninstructions and questions.<\/li><\/ul><ul><li>Scan\ntext to locate relevant information that answers specific questions.<\/li><\/ul><ul><li>Skim\ntext immediately before and after a key word to get an idea of whether that\nsection contains the right answer.<\/li><\/ul><ul><li>Refer\nback to the text to make sure the information is accurate.<\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Line length and interlinear space\n(leading) had most significant impact on performance<\/li><li>The layout associated with the greatest\nperformance included the following:<ul><li>Style\ncontrast between body and heading text<\/li><\/ul><ul><li>Type\nsize of 10.5 points<\/li><\/ul><ul><li>Interlinear\nspace (leading) of 14 points<\/li><\/ul><ul><li>Line\nlength of 70 characters<\/li><\/ul><ul><li>Text\nleft-aligned<\/li><\/ul><ul><li>Single\ncolumn<\/li><\/ul><ul><li>Wide\nmargins&nbsp;<\/li><\/ul><ul><li>Paragraphs\ndistinguished by one line space with no indent<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Designing Information :\nHuman Factors and Common Sense in Information Design<\/strong><strong> (Katz, 2012)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Katz, J. (2012). <em>Designing\nInformation : Human Factors and Common Sense in Information Design<\/em>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Somerset, NJ:\nJohn Wiley &amp; Sons.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chapter 4:\nStructure<\/strong><strong>,\nOrganisation, Type: Hierarchy and visual grammar (pg.113<\/strong><strong>\u00e0<\/strong><strong>)<\/strong><strong><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Flush left-flush right table of\ncontent organisations (usually requiring leader rules to be legible) are a\ntradition that often cause unnecessary confusion <strong>\u00e0<\/strong><strong> <\/strong>creates white\nspace that separates and groups information unnecessarily; consider other\nalignment solutions<\/li><li>When selecting typefaces, consider\nthe original intent of the designer \u00e0 e.g., do not use \u2018book\u2019 fonts like Garamond for large\nheadings as it was designed to be optimal at smaller sizes. This is an example\nof why it is often important to have a different typeface for headings and body\ntext. Not only does it create visual contrast that aids in identification, few\ntypefaces are versatile enough to serve both functions.<\/li><li>Legibility of the typeface is always\nmore important than elegance; either make the sacrifice or find a better\nsolution for the text<\/li><li>The correct font for the job is\ndetermined by a balance of legibility, context, connotation and appropriateness\n<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Introduction to\ninformation design <br>\n(Coates &amp; Ellison, 2014)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Coates, K., &amp; Ellison, A. (2014). <em>An\nintroduction to information design<\/em>. London, UK: Laurence King.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chapter 3:\nStructuring Information <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Information should be structured\nusing a combination of a grid and a visual hierarchy<\/li><li>Achieve visual hierarchy through a\ncombination of scale, weight, tone, graphical elements, space and placement of\nelements<\/li><li>[pg. 77-78 has clear examples of how\na combination of factors aids communication)<\/li><li>Provides a method for structuring\ninformation:<ul><li>Read through the information\/content\nand ensure you fully understand what it means, what is most important, etc.<\/li><\/ul><ul><li>First establish what logical order\nthings will information need to presented in (e.g., in RPG, in what order to\nthings need to be understood in order to play the game \u00e0 should everything be chronological,\nor does some \u2018end game\u2019 information need to be understood before reading early\ngame details?)<\/li><\/ul><ul><li>Establish what the audience needs to\nsee first, second, third, etc. This applies to the whole document but also to\neach individual page and segment.<\/li><\/ul><ul><li>Decide what visual hierarchy\nelements are appropriate to differentiate between this information <\/li><\/ul><\/li><li>When planning a grid, group relevant\npieces of information together so that the reader can navigate it clearly<\/li><li>Consider how captions fit into the\ncomposition <\/li><li>It can be useful to deconstruct\ndocuments that \u2018work\u2019 to understand why they work \u00e0 recreate the grid, list the\nhierarchy elements used and list all the levels of hierarchy <\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chapter 4:\nLegibility and Readability <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>When selecting body text, look for\nfonts with a large x-height, and open counters \u00e0 these are generally acknowledged to\nbe more legible <\/li><li>Colour coding can be an invaluable\ntool for aiding the reader in finding most important information, however,\nthere are some considerations. <ul><li>It is important to consider the\ncontrast between the colour and the background (higher contrast is more\nlegible) but also the contrast between different colours used in the\ncomposition. <\/li><\/ul><ul><li>Strong contrast in colour also makes\nthe document more legible for people with vision impairments. <\/li><\/ul><ul><li>More than three or four colours\nbecomes difficult to remember<\/li><\/ul><\/li><li>In our alphabet, the top halves of\nthe letters contain the most distinguishable parts. Furthermore, there is\nevidence to suggest that proficient readers identify words by the word shape\nrather than the individual letters, especially when reading body text (this\nallows us to skim!). Because this is how we understand words, vertical text in\nLatin alphabets (e.g., English) is very difficult to read and should be avoided\nunless absolutely necessary.<\/li><li>All-caps text is substantially less\nreadable than sentence case or lowercase text for the same reason. It should\ngenerally be avoided when possible. To draw attention to or emphasise text,\nconsider changing the typeface, colour or weight instead.<\/li><li>For body text, avoid texts that are\ntoo heavy and too light as both impact legibility. If you are unsure of what is\nappropriate, look for typeface with a specified medium-weight or book-weight. <\/li><li>Using too many different weights,\nfonts, and other elements can actually disrupt the hierarchy. It is easier for\nthe reader if there is a clear differentiation but too much differentiation\nbetween levels of hierarchy is cluttered and confusing<\/li><li>When establishing hierarchy a useful\nguideline (but not a rule!) is try and use at least 2 points of difference\nbetween the text. E.g., headings in large bold type, subheadings in smaller,\nitalic type. However, you should not use more points of difference than\nnecessary.<\/li><li>Paragraph shape also aids\nreadability. Avoid widows and orphans at all costs as they interfere with the\nflow. A ragged right (left justified) paragraph is usually most readable,\nhowever, consider manually adding soft returns to create a better reading\nrhythm &nbsp;<\/li><li>Graphic elements that can used to\naid in legibility, structure and readability include:<ul><li><strong>Rules<\/strong>.\nRules are lines the designate areas within the design, and can be used to\ndivide, frame and emphasise elements within the space.<\/li><\/ul><ul><li><strong>Dots. <\/strong>Dots\nand bullet points help create clear hierarchy and section information more\neffectively.<\/li><\/ul><ul><li><strong>Lines<\/strong>.\nLines signify connections and create directional pathways for the eye follow\n(with or without arrowheads). Dashed lines tend to imply movement.<\/li><\/ul><\/li><li>Using illustration:<ul><li>Effective use of illustration\nattracts attention, creates movement and provides contrast. It also suggests\npersonality, mood and tone.<\/li><\/ul><ul><li>Illustration can also be used to\ncreate focal points.<\/li><\/ul><ul><li>The rule of hierarchy still applies\nwhen using illustration, so it is important to consider how the illustration\nbalances with the textual hierarchy \u00e0 should the illustration be viewed first, second,\nthird, etc.<\/li><\/ul><ul><li>Drop-in illustrations can break up\ndense information or highlight key points in the text<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid systems in graphic\ndesign <br>\n(M\u00fcller-brockmann, 2016)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00fcller-Brockmann, J. (2016). <em>Grid\nsystems in graphic design: a visual communication manual for <\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>graphic\ndesigners, typographers and three dimensional designers<\/em>\n(10th ed.). Z\u00fcrich, Switzerland: Niggli.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Width of column\n(pg.31) <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>There are psychological impacts of\nline length on reading<\/li><li>Longer lines are wearying to the eye<\/li><li>Shorter lines disrupt the flow of\nreading by causing the eye to change lines too rapidly<\/li><li>In general, lines which are too long\nor too short reduce memorability<\/li><li>An average of 10 words per line is a\npractical goal for text of any length, however, it is easier to bend and break\nthis rule for shorter sections of text<\/li><li>If multiple type sizes are used\n(e.g., body and heading) in the same column, the column size\/line length should\nbe what is most appropriate for the bulk of the text (usually the body)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Leading (pg.36-37)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The readability of long blocks of\ntext can be enhanced by manually increasing the leading<\/li><li>It is also important with longer\ntexts that they divided into paragraphs and that the distinction between\nparagraphs is clear<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Margin\nproportions (pg.39-41)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>If the margins are too small, the\npage will feel overfull. This is also especially problematic if the work is\nbeing printed, as the reader will have a negative subconscious reaction to the\nfact that their fingers obscure the text or pictures<\/li><li>A type area that is placed too high\noptically will give the impression that the page is taking flight upwards.<\/li><li>Margins of the same size create\ndull, static designs<\/li><li>A bottom margin that is larger than\nthe top usually balances best<\/li><li>M\u00fcller-Brockmann suggests a ratio of\n1:2 top to bottom for a well-proportioned page, however, notes that this is a\n\u201cluxurious\u201d and expensive layout as it is not the most space effective<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Construction of\nthe grid (pg.57-75) <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Even if the text will only appear in\none column, it is useful to design with more in mind (e.g., subdivide into 2\ncolumns), in order to add more flexibility for different size images, diagrams,\npull boxes, etc.<\/li><li>This can also be used to create more\ndynamic layouts (esp. when using images) without sacrificing readability,\nscanning, etc.<\/li><li>Vertical subdivisions, each section\nseparated by a margin the height one or two lines of text, can also be useful\nfor image heavy texts<\/li><li>In general, a page with 8 grid\nfields (2 col, 4 row) allows illustrations of various sizes and shapes to be\naccommodated seamlessly [use diagram]. This is a useful starting point,\nhowever, the best grid design will also be dependant on the content<\/li><li>Adding more and more grid fields\nleads to more and more dynamic designs, however, these are not recommended for\na novice document setter, as they become increasingly complex<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Solid tint in\nthe grid system (pg.101-103) <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>When a solid tint (e.g., a coloured\ntext box) is used within the text book, keeping the both tint area and text\narea within the standard size of the grid means that the edges of the text will\ntouch the edges of the tint. This is an unsatisfactory result as it looks\ncluttered and doesn\u2019t give the text breathing room.<\/li><li>There are two solutions:<ul><li>The solid tint coincides with the\ngrid dimensions but the text block is indented from the edges of the colour\narea<\/li><\/ul><ul><li>The area of colour is extended\nbeyond the grid dimensions, but the text block remains aligned to the grid<\/li><\/ul><\/li><li>Which is appropriate will depend on\nthe typeface selection, style and layout, however, it should never be kept as\ndefault. [examples in book]<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Making and breaking the\ngrid (samara, 2017)<\/strong><strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Samara, T. (2017). <em>Making and Breaking the Grid<\/em> (Vol. 2).\nBeverley, MA: Rockport Publishers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>RESEARCH NOTES<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Making the grid\n(pg.10)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Benefits of using a grid system:<ul><li>A method of problem-solving on both\na visual and organisational level<\/li><\/ul><ul><li>Introduces a systemic order to a\nlayout \u00e0 aids with distinguishing different\ntypes of information but also easing the user navigation throughout that\ninformation<\/li><\/ul><ul><li>Creates visual cohesion among visual\nelements through consistent spatial proportions and positioning logic<\/li><\/ul><ul><li>Allows enormous amounts of\ninformation to be laid out rapidly and cohesively, thus especially appropriate\nfor longer documents (e.g., booklets) and documents with diverse content types<\/li><\/ul><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid Basics\nStructure (pg.20-41)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>[pages 22-23 has a good set of diagrams\nof the \u2018anatomy of a page\u2019, and clearly defines and illustrates terminology]<\/li><li>The modular grid is especially\nuseful for projects involving many different kinds of information. <\/li><li>It is a column grid with a large\nnumber of horizontal flowlines that subdivide each column into rows. This\ncreates cells called modules, which create a flexible set of guides for\nalignment of elements of different types and sizes. It can also aid in creating\ndynamic but cohesive pages<\/li><li>Smaller modules create more\nflexibility and precision but too many subdivisions become confusing or\nredundant<\/li><li>When using a grid, the edges of the\nelements may span multiple rows or columns but the edges wholly align with the\nedges of the module [ diagrams on page 34-35 ]<\/li><li>In a column grid, the images may be\nof any height but of set number of fixed widths. In a modular grid, the images\ncan be of a set number of fixed heights and widths.<\/li><li>However, using a grid <em>does not <\/em>mean that images can\u2019t overlap\nor cross from one column to another.<\/li><li>There are some special cases and\nexceptions to the alignment rules: [see diagram examples&nbsp; on page 37]<ul><li>Left or right aligned text creates a\nragged edge that won\u2019t fill out the columns entirely. The irregularity becomes\nmore obvious with larger text sizes, such as titles. In this case, it is okay\nto alter the line length somewhat to help optically correct the column<\/li><\/ul><ul><li>Textual inclusions, such as\ndrop-caps and callouts often sit nicer aligned with the margins\/not quite in\nthe grid. This is okay because their purpose is to disrupt the regular text\nstructure.<\/li><\/ul><ul><li>Centred text is better aligned to\nthe central axis of the page rather than the exact columns, using the column\nwidths as more of a guideline<\/li><\/ul><ul><li>Bullets should have to the left of\nthe column alignment, as should quotation marks and brackets if the fall at the\nstart of the line of text.<\/li><\/ul><ul><li>Columns of text spanning multiple\nrows that also include paragraph breaks generally shouldn\u2019t fall exactly on the\nrow guideline. This can create awkward separations. <\/li><\/ul><\/li><li>Instead of a modular grid, another\noption is a column grid that also includes flowlines to help subdivide the\nspace [ diagrams and examples page 38 ]<\/li><li>Flowlines can help anchor certain\ntypes of elements (e.g., titles) to set parts of the page, which can help the\nreader quickly identify search for them<\/li><li>Folios and runners often fall\noutside the margins, however, when setting them here they should still align to\na column edge, row edge or flowline \u00e0 this helps integrate them into the overall page\nlayout, which is visually pleasing but also helps achieve the balance between\nnoticeable and distracting. They can also be integrated directly in to the grid<\/li><li>When using lines, set them to the\ngrid\u2019s alignments not to the associated text elements length<\/li><li>When using coloured boxes or linear\nframes, either:<ul><li>Extend the box boundaries to the gutters<\/li><\/ul><ul><li>Slightly indent the text<\/li><\/ul><ul><li>Do a little of 1 &amp; 2<\/li><\/ul><\/li><li>Whichever option is chosen should be\nused consistently across the entire document<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Building a Grid\n(pg.42-)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&nbsp;<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to discourage me from playing your game (Lagac\u00e9, 2016) Lagac\u00e9, S. (2016). How to discourage me from playing your game.&nbsp; Retrieved from https:\/\/mechanteanemone.wordpress.com\/2016\/06\/23\/how-to-discourage-me-from-playing-your-game-part-1\/ RESEARCH NOTES First Impressions Need a \u2018pitch\u2019 early one, e.g., the cover or first few pages \u00e0 explain basically what the game is about &amp; the general feel Consider colour, font&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[8],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-gamebooks","tag-layout"],"_links":{"self":[{"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/posts\/21\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rolling-stories.making-games.net\/Devblog\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}