PUBLISHING DESIGN // TASK 01 - EXERCISES

 PUBLISHING DESIGN // TASK 01

Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media 
Publishing Design Exercises

---

LECTURES

Lecture 1: Formats 

The Book

• Books, newspapers, magazines falls under the term "publishing"
• Factors such as book size and material used for cover influences and determine the format of a book.
• Format includes the type of binding, paper and size.

Historical Formats

1. Iran-Iraq: Mesopotamian Civilisation

• First writing system developed from counting technology
• Progresses from simple and complicated tokens to bullae that forms the early pictographic writing on clay tablets.

Fig 1.1 Clay Tablets

2. Indian-Pakistan-Afghanistan: Indus Valley Civilisation

• Earliest writing system that wrote about their government, religion & trade by writing cuneiform on soft clay tablets with sharp pointed tools
• The oldest surviving Palm leaf Manuscript originated from Nepal 800-900 CE

Fig 1.2 Soft Clay Tablets

Fig 1.3 Palm Leaf Manuscript from Nepal

3. Egypt: Ancient Egyptian Civilisation

• The scribes were the only people in ancient Egypt that could read and write Hieroglyphics. 
• It was written in a thick type of paper made from papyrus plant's pith (Cyperus papyrus).

Fig 1.4 Papyrus Paper

4. China: Han Chinese Civilisation

• During the early period, Chinese characters are written vertically in columns on a thin strip of bamboo for a single column. 
• Two lines of thread is liked to each bamboo strip to create a longer document. 
• During the modern period, Chinese characters has pictogram of bamboo strips threaded together. 
• Scroll format paper as the earliest known printed book, were then discovered from the end of the T'ang dynasty. 
• Printing from wood blocks, the Diamond Sutra is a laborious process until the introduction of the movable type invented by Korea. 
• Which is their own writing system that constitute to 26-27 characters like the English alphabets, by using brass to put them together to create a page.

Fig 1.5 (left) Bamboo Strip & Fig 1.6 (right) Scroll Format Paper

Fig 1.7 Movable Type

5. Europe (Turkey & beyond): European Civilisation

• Parchment is made from animal hide, which could not be made into scrolls like papyrus and bamboo as it is much thicker and heavier. 
• Flat method was used like the books we have today. 
• The folding format was introduced, first with sewing thread on wooden blocks to hold them together, then with parchment paper and later with paper. Where paper was sewn, bound and glued together.

Fig 1.8 Parchment Book

Fig 1.9 Papers sewn, glued & bound with hardcover

Lecture 2 - History of Print

Before diving in, sir explained what the terms mentioned means:

AD = After the Death of Christ

BC = Before Christ

CE = Common Era (0 year & after) - the year 2020 is considered CE

BCE = Before Common Era (0 year & before)

2nd-8th Century AD 

• China - Confucian scholars eager to own important texts lay sheets of paper on engraved slabs, rubbing charcoal or graphite to take away text in white letters on a black ground

Fig 2.1 rubbing charcoal or graphite to take away text in white letters on a black ground

Korea & Japan: AD 750-768 

• The world’s earliest known printed document in a sutra printed on a single sheet of paper in Korea (AD 750)

Fig 2.2 Dharani sutra exhibited at National Museum of Korea

• Followed by Japan’s bold experiment in mass circulation. In AD 768, in devoutly Buddhist Nara, the empress commissions a huge edition of a lucky charm or prayer. It was recorded that the project took 6 years to complete. The number of copies printed for distribution to pilgrims is a million, many of which have survived.
• The Hyakumanto Darani - One million pagodas & dharani prayers, is a famous large scale woodblock printing (the earliest recorded use of woodblock printing in Japan) 

Fig 2.3 The Hyakumanto Darani 

The First printed book: AD 868

• Earliest known printed book with text in Chinese and woodblock illustrations from the end of the T’ang Dynasty discovered in a cave at Dunhuang in 1899. 
• The scroll is 16 feet long & a foot high. Formed by sheets of paper glued together at their edges
• The world’s first printed illustration depicting an enthroned Buddha surrounded by holy attendants 

Fig 2.4 The world’s first printed illustration depicting an enthroned Buddha surrounded by holy attendants

Chinese publishing: 10th - 11th century

• Printing from wood blocks, as in the Diamond Sutra is a laborious process.
• The carving process of so many characters in reverse on wood blocks is an enormous investment of labour in the 10th and 11th century. The task is unavoidable until the introduction of movable type. This innovation seems to have been pioneered in China but achieved in Korea.  

Movable type: from the 11th century

• Movable type is a necessary step before printing can become an efficient medium for disseminating information.
• Movable type = Separate ready-made characters or letters which can be arranged in the correct order for a particular text and then reused
• This concept was experimented with in China but 2 considerations made the experiment unpractical:
• 1. The Chinese script has too many characters that type-castig & type-setting became complex
• 2. Chinese printers cast characters in clay and then fire them as pottery, a substance that is considered too fragile for the purpose

Type foundry in Korea: c.1380

• In the late 14th century (several decades before the earliest printing in Europe), koreans established a foundry to cast movable types in bronze
• Unlike in Chinese experiments with pottery, bronze is stronger for repeated printing, dismantling & resetting for a new text 
• At the time, koreans are using chinese script, and faced the problem of unwieldy number of characters
• In 1443 the koreans solved the problem by inventing their own national alphabet, known as han’gul. 

Fig 2.5 Koreans inventing their own national alphabet, known as han’gul. 

Saints & playing cards: AD c.1400

• In about 1400, more than 6 centuries after its invention in the east, the technique of printing from wood blocks was introduced in Europe
• As in the east, the main market were holdy images for sale to pilgrims
• Playing cads are another part of the western trade
• Later in the 15th century, technical advances were made in Germany that rapidly transformed printing from a cottage industry to a cornerstone of western civilization

Fig 2.6 (left) Chinese playing card found near Turfan, 15th century & Fig 2.7 (right) Queen of Wild Men, CA 1440 

Gutenberg & Western Printing: AD 1439 - 1457

• The name of Gutenberg first appeared in connection with printing in a law case in Strasbourg in 1439. 
• Gutenberg’s great achievement in the story of printing has several components:
• 1. His development of the printing press, capable of applying a raid but steady downward pressure
• 2. His skills with metal enabled him to master the complex stages in the manufacturing of individual pieces of type

- All the skilful technology precedes the basic work of printing, arranging individual letters, aligned & well spaced, in a form which will hold them firm & level to transfer the ink evenly to the paper

Fig 2.8 Gutenberg printing

• No date appears in the Gutenberg Bible (known technically as the 42-line Bible), which was printed simultaneously on 6 presses during the mid 1450s
• One copy was known to have been completed with its initial letters coloured red by hand by 24 August 1456
• Known as the mainz psalter, it is the first dated book from the same presses in 1457 that achieves outstanding colour printing in tis 2-colour initial letters

Fig 2.9 Gutenberg Bible with a gilded edge (the gold edges) 

The rest is history

• Many inventions to improve on printing press and its quality was invented or modified over the years
• The industrial revolution brought in precision engineering & the printing press was one that benefited tremendously
• The desktop revolution brought in desktop publishing 
• The internet revolution brought about instant publishing 

The World’s Largest Book

• Set in stone in the grounds of the Kuthodaw pagoda at the foot of Mandalay Hill in mandalay, Myanmar (Burma)
• Each stone tablet has its own roof & precious gem on top in a small cave like structure called Stupa.
• There are a total of 729 stupas & are arranged around a central golden pagoda

Fig 2.10 The World’s largest book

Conclusion

• Paper was invented in China 179-41 BCE.
• Transfer was initially done via rubbing from stone to paper, hence mass production was enabled
• Introduction of moveable type was introduced in the 1000 - 1100 CE
• Koreans established a foundry to cast movable type in bronze

Lecture 3 - Typography Redux

Typography is considered as the art of composing and organising text, but it also serves as a medium for expression and, most crucially, communication.

Characters in a typeface

• Small Capitals
• Numerals
• Fractions
• Ligatures
• Punctuations
• Mathematical signs
• Symbols
• Non-aligning figure.
•     Every font type family contains a wide variety of typefaces within it, albeit occasionally this was not necessary.
•     Hidden aspects: In Illustrator or InDesign > text/type > glyphs, to view a character map on the particular type of family.

Fig 3.1 Example of characters in a typeface

• The x-height of the small caps is the same height as the x-height of the lowercase.

 

Fig 3.2 Example of characters in a typeface

• Capital Swashes are used to make the words more expressive & in a decorative manner. **Keep in mind that: they are not meant to be used in all capitals.

Legibility: Open & well proportioned

• Underline
• Should be lowered so that they do not touch the characters as this impedes readability.
• Small Caps
• Good for subheads or the first line of paragraphs.
• All Caps
• Used in short headlines or subheads. (Never be used for long sentences and emphasis.)
• Special-purpose Style
• Exist within the software for making footnotes, references, and mathematical formulas.

Fig 3.3 Examples of Special-purpose Style

• Text Scaling
• (Some programs) allow users to create a pseudo-condense or pseudo-extended font by horizontally or vertically squeezing or stretching a font.

Fig 3.4 Examples of Text Scaling

• Outline Shadow
• Text outline should be <1 (around 0.5, 0.7), >1 or it will become a problem. 
• Title outline around 1.2, 0.7 ~ 0.5.
• Shadows do not go too far away from the main text.

Legibility: Type size, line length & line spacing

• Line Length:
• A column of type is about 50 to 65 characters.
• Leading:
• It depends on the font used, line length, type size & book size.
• Overly long or short lines of the type also tire the reader & destroy a pleasant reading rhythm.

Legibility: Character & word space

• Kerning:
• Makes the text more pleasing to read.
• Tracking:
• To fix or avoid orphans or danglers.
• Italics:
• To create emphasis within the text rather than to function as text.

Legibility / Alignment

• Flush Left, Ragged Right:
• The most readable alignment
• Flush Right, Ragged Left:
• Not used for a large amount of text.
• Centered:
• Not used for a large amount of text.

                    *Keep in mind to smoother the ragging of both sides.

• Justified (left, center & right):
• Needs to apply necessary letter spacing, kerning, or force line break to avoid the river.
• Paragraph Spacing:
• The indentation should follow the type size.

 

Legibility / Paragraph Indent

• Widow:
• The paragraph-ending line falls at the beginning of the following page or column.
• Orphan:
• The text or line that is left alone.
• Hyphens:
• Usually used only to divide words or numbers, En-dash symbolises "to' & Em-dash is to connect two sentences.
• Line Break:
• Follow the leading; Paragraph Space: Follow the paragraph space value.
• Drop Caps:
• Used to start off new chapters & a special section of a report.

Fig 3.5 Example of double and single quotes, plus inch and foot marks.

Sidebar: The leading must be the same as the main body text despite the text size is smaller.  Lecture 4 - The Grid Raster Systeme Using grid in an ordering system is expressing a certain mental attitude of a designer.  The designer's work should have clear intelligible, objective, functional and aesthetic quality of mathematical thinking.  The grid divides a 2D plane into smaller fields or 3D space into smaller compartments. The compartments' fields may be the same or in different sizes. Fig 4.1 Raster System Purpose of The Grid Use to solve visual problems in 2D (two-dimensions) or 3D (three dimensions).  The contents needs to be ordered in a systematic manner also in a consistent manner so when the pages are turned, the body text and the subtext points from the blurbs and pullquotes etc could be differentiated, better understood and reatined in the memory, which is a proved scientifically. Hence, with the grid system, it is much more easier to do so and achieve. Fig 4.2 Four columns. Body text uses 2 columns, and the subtext uses single column out of the 4. Fig 4.3 Example of Grid ​​Fig 4.4 Example of Grid Modular Modular in nature, but also allows flexibility.  There is however a limit when using in a book to maintain a certain amount of continuity or coherence in the outlook or navigation.  Healthy amount of variation is suggested, but too much variation will cause confusion and inconsistency for the reader.  Having too less variations may create predictability and reader may get bored. Readability & Legibility It is important to make it easy to read and understand to reader, and the grid helps to do so. I The experience of the reader when turning the pages and being pleasantly surprised at what they are confronted with creates more engagement, retention and understanding.  A well executed design allows the work on the pages to do the talking clearly, logically with elegance and beauty. Lecture 5 - Element Fundamental design elements that will largely use in book designs are:             1. Textual elements             2. Visual elements (graphical elements)             3. Colour Holding the 3 fundamentals are             1. Format             2. Grid Variation Try to create vacation within the layout but at the same time maintaining consistency across the book To reduce the stress level, use thumbnail sketches to plan out based on the grid system that you have constructed Then select one good typeface family that has a good range of typeface. Later on it is okay to want to introduce a second typeface. Note: if you have chosen a good type family, the chances are there is already a good heading within the type family Using a single typeface family shows consistency throughout the book The entails keeping certain areas fixed: Hang line Typeface Colour Image style While creating variation in combination of elements and variation within how it is arranged Try to create vacation within the layout but at the same time maintaining consistency across the book Variation with consistency: Text & Visual Element Example: the colour here is considered as a graphic form. If the colour was used in the whole page, it is considered as colour. A variation was created by positioning them in a symmetrical order (on the opposite end is the body text and the other is the block of colour) in a harmonious manner It is not bad to have text and text but when doing consecutive pages, it is good to insert variation in certain stages Large text with pull quote or subtext Example: Larger picture with a caption (it can be a subtext or a pul quote) Pull quote: extract a sentence within a larger body text & enlarge it because of its importance Pull quotes are sometimes enhanced with visual imagery in the background as this particular example Text & text Visual & text Depending on the number of pages within the book, the sequence or the different formulas that function in a modular nature within the grid system that you have established can create variation that is healthy Colour plays a role in book design, it can be a focus of attention or a subtle supportive neutral shape to create variation when there is a large amount of text The grid is used in a modular way where the elements are positioned logically and in a compositionally attractive manner It is not unusual to change grid system, it is in fact part of the process to accommodate the information and to produce a layout that fits the predisposed direction Pages in you book have to be divisible by 4 (as showcased in the exercised we have gone through) A perfect bound book would have several different signatures, it is generally 16 signatures. Because book pages are printed in large sheets and the sheets come in standard size, so if the book is about A4 size, there would be 8 pages on one side & another 8 on another side of the book. Then these pages are folded as a signature. The elements in your book will fall into place when you begin to see the varied formulas possible within the grid system created. This process helps designer to have a basic visual direction which visually depicts the intended mood or feel of the book. The majority of the book needs to be well balanced between text & visual. Visuals plays an important role in the design of the book. Create variation within the layout but at the same time maintaining consistency across the book but surprises the audience whenever they turn the page. It retains the person’s interest and engagement in the book

---

INSTRUCTIONS

---

TASK 01: Exercise- Mockup-making

#1 Text Formating 

✧ We were tasked to generate 3k words for our book, either by writing it ourselves or sourcing from existing e-books.  

Fig 1.1 Draft Content (06.09.2022)

#2 Mockup-making

✧ The following task is a follow-along exercise. Mr Vinod has demonstrated in the recorded video (Publishing Design — Mock Up: Book Size_Ex1), how we shall create a physical mockup. 

✧ Items we need for this exercise: 

- A4/ A3 paper

- Adhesive tape (Masking tape)

- Steel Ruler

- Cutter

- Pencil 

- Colour marker (1)

Fig 2.1 Mockup Progression

✧ The aim of this exercise was to create and determine the final sizing of our book. By following the video's discussion, we created 3 different sizes that is smaller than A4 and bigger than A5. 

✧ These were the following sizes I've outlined:

-  240 x 180mm

- 270 x 190mm

- 220 x 170mm

Fig 2.2 Creating different sizes progression

Fig 2.3 The 3 book sizes

Fig 2.4 Final Cut Out Booklet (Closed)

Fig 2.5 Final Cut Out Booklet (Opened)

Fig 2.6 Final Cut Out Booklet (Video)

#3 Signature folding systems

Fig 3.1 Signature folding system (Opened)

Fig 3.2 Signature folding system (Closed)

Fig 3.3 Signature folding system (Video)

#4 Classical Grid Structure - Van de Graff

Fig 4.1 Hand drawn Van de Graff

Fig 4.2 Digital Van de Graff (PDF)

#5 Determining Grids

✧ We are tasked to find an example magazine spread online to determine grids & margins within the layout.

✧ We are then required to create 3 layouts. In class progression, the attached below was stated by sir as an atrocious and bad example, however I am inserting it here as part of the progression.

Fig 5.1 Grid Progression (PDF)

✧ Redid Grids

Fig 5.2 Redid Grid (PDF)

#6 Form & Movement

Black & White

✧ We were tasked to create this exercise in InDesign after referring to Sir's tutorial video. The most important thing here is to create variation and remain unpredictable

Fig 6.1 Form & Movement Attempt 1

✧ After sir's feedback, I've redone the parts that needed changing.

Fig 6.2 Form & Movement Redo

Fig 6.3 Form & Movement Black & White PDF

Colour

Fig 6.4 Form & Movement 2 colours

Fig 6.5 Form & Movement 2 colours PDF

Colour + Image

✧ Image taken from Unplash

Fig 6.6 Form & Movement colour + image

Fig 6.7 Form & Movement colour + image PDF

Text

Fig 6.8 Form & Movement text

Fig 6.9 Form & Movement text PDF

---

FEEDBACK

Week 02

Lecturer's Feedback: 

✧ Remember to include references of images/ websites/ reading references that helped to inspire the story 

✧ After “ must insert a full stop 

✧ Starting titles are usually formatted as such that they are with capital letters, eg: “All The Things I Never Said” 

✧ Beware of the different types of copywriting information. There is a type call “(CC) Creative Content”, this is okay to share around so long as it is not commercial 

✧ Introduction needs to be longer than only one paragraph 

✧ There is no real need to include the word “Chapter 1”, it is okay to remove it 

Specific Feedback: 

✧ Formatting is okay 

✧ Key in references from everything I referenced 

✧ Highlight 16 phrases to illustrate, create pull notes and subtexts

Week 03

Lecturer's Feedback: 

✧ line length needs to be readable 

✧ 3 columns is impossible for our book sizes, font size will b 8pt, it will b the smallest point size (in terms of body text), subtext can go down to 7pt 

✧ 2 columns and 1 columns is way we all can stick with 

✧ draw guides outside of page so it will go over to two pages 

✧ Insert guides for when the text or image stops 

✧ Must select two spreads to insert the guides, layout > creates guides 

Specific Feedback: 

1. Gird

✧ text has to run top to bottom when the grid was determined ✧ subtext is too artistic, all subtext should remain the same sides 

✧ title needs to be bigger 

✧ first thing to check is line length 

✧ paragraph spacing is atrocious 

✧ text box needs to be in one box 

✧ line length should be the same for subtexts 

✧ pull quotes can be artistic 

Week 04

Lecturer's Feedback: 

Fig 6.2 Form & Movement Redo

Form & Movement: it needs to flow nicely with connection without appearing to be too obvious 

Specific Feedback: 

1. Form & Movement 

✧ There seem to be a misconnection between spreads 5 & 6 

✧ Last spread needs redoing so it connects back with spread 7 

---

REFLECTIONS

Experience 

The lectures showed us an insider look of how book publications are done. It was interesting to create physical book mockups to see how it will look like.

Observations

Book spreads are all made up of grid systems, this exercises further highlights the importance of that, and why it must be determined before starting task 1. 

Findings

Book spreads shan't be predictable, it must consist of a flow but it needs to have an element of surprise as well. 

---

FURTHER READING

Using Grids in Print Design 

https://www.pixartprinting.co.uk/blog/grids-in-print-design/

✧ Grids are there to assist in making a page look balanced and structured

✧ Grids are made up of the following parts:

            ✧ Columns: vertical divisions of space to help break up the page

            ✧ Gutters: the space between each columns

            ✧ Margins: the space between the edges of the pages and main content area

            ✧ Flowlines: the lilnes which helps to break page up horizontally

            ✧ Modules: the areas that are created between vertical column lines and horizontal flowliness

✧ Grids are useful when designing text-heavy documents where consistency is needed

✧ Baseline grid is set up to help line all texts on the page or spread up with one of the grid lines

✧ Creating a grid with hierarchy helps to ensure all elements on the page are placed consistently on every product page

✧ When creating a magazine layout, it is useful to first sketch out a thumbnail grid before creating the digital version

---