Publishing platforms Dark art: An introduction of football tactics Yu-Hao Huang MA Book Design 2019-20 Department of Typography & Graphic Communication University of Reading
Brief Project objective The intention of this project is to explore the blurry boundaries of hybrid publishing and to organise open source in both online and offline platforms. To experiment with publishing the publication in different approaches such as epub or physical book.
Project scope and deliverables 1. Blurb 2. ISSUU 3. Internet Archive 4. Youtube
Project task • To understand what is post-digital publishing and hybrid publishing models by considering relevant ongoing discourse and discussion. • Analysing different works of a practitioner to explore the innovative idea of publishing on a range of digital and hybrid channels. • To consider questions regarding the ethical and practical implications of the use of the source for publishing; such as the consideration of fixed or fluid content, proprietary or open-source licensing, and copyright or public domain. • Through the experimentation to a variety of formats and platforms to anticipate possibilities landscape or the finished items for the future.
Discovery
Research
Discovery In the beginning, I realised I do not understand most terms introduced in the session. The recommended reading list and session’s presentation gave me a quick direction to discover specific definitions; introducing the difference between digital publishing and hybrid publishing.
Archive interface
Description written by prisoners
Moreover, the individual presentations of each colleague and Are.na website also expand my horizons of how publication can be published in different approaches. For example, the project ‘Photo Requests from Solitary’ which offers the opportunity for people in solitary confinement to see photographs contributed by audiences. The public can contribute images according to elaborate descriptions written by prisoners. This project inspires me with the idea of artistic cooperation on the internet even without knowing each other. People can share each other’s creativity in different ways.
Photographs contributed by audiences
3
Discovery
Research
In the second session, we mainly focus on understanding digital publishing and hybrid publishing. Electronic books such as PDF and ebook offer new insight for us that books can be transformed in not fixed, dynamic, and participative forms. The example of ‘Atlas of Anatomy’ introduced in class displays a good view of how digital pub-
4
lishing can be beneficial when meeting certain content. For instance, the annotated callouts can be designed as a pop-over widget to save the space. A similar way also is seen in some interactive PDF, the hyperlink can bring readers to the specific website.
Discovery
Research
I like the quote said from Travess Smalley on the website Rhizome: ‘I think about the books as the place where I show the groundwork and the range of ideas and images I’m interested in’. Books also can be treated as an autobiographical form that allows everyone to organise their recorded images, photos, or even comments.
The work ‘Bookheart.gif’ collected 132 images includes open sources and license-need images (http://p-dpa.net/work/bookheart-gif/). This work shows how practitioners explore the innovative idea to present collected images in hybrid channels, in this case, animated gif. This reminds me several years ago, there is an animated video project released on Youtube channel called ‘AGE 12 TO MARRIED – I Took A Photo Every Day’ (https://www.youtube.com/ watch?v=65nfbW-27ps). The creator aims to document his life by taking the same straight face selfie every day from age 12 until he married in order to capture the physical changes in his face. Those ideas give me the research direction of using the picture as the main content.
5
Discovery
Initial idea
The initial idea is to focus on the topic related to sport and nutrition. As the 2020 Olympics is coming soon, I came out with the idea of designing an archive of the 2016 Olympic gold medalists that can unify their diet plan. To reflect the difference in the nutritional intake of various sports. The list shows the research objective: 1. Athletes’ photo 2. Sport introduction 3. Gif file to show which sport they play 4. Athletes’ diet plan 5. Diet plan introduction 6. Calculate calories 7. sleeping time 8. The comparison of athletes’ diet plan and the public average diet 9. classic diet in a different country The research starts with locating a body of content to work with and decide whether there are sufficient information. The list of 2016 Summer Olympics medal winners can be simply found on Wikipedia, and also the gold medalists’ photos can be found on Twitter, Facebook, and Flickr. However, one of the problems is that I cannot search for the information of some countries’ medalists owing to the language boundary. After the discussion with Lozana, I slightly change the topic to only focus on English countries to narrow down the range of research.
6
Discovery
Initial idea
Another problem I confronted is the ethical implications of the use of the source for publishing. When searching the section of athletes’ diet plans, I realised some gold medalists only will talk about their dietary habits on formal interviews or news. Using those fluid contents could involve the copyright issue. Hence, I decided to move forward on exploring another topic that can highly base on the public domain.
7
Discovery
Collect informaiton
In the first 3 weeks, I often forget that this project is based on digital culture and open resources. The new topic ‘football diving’ brings me to the new vision of locating images, text, and audio-visual. As the phenomenon of football diving may cause the general public to mock or comment, most of the related information can be found across social media channels such as Youtube and Twitter. Before categorising and organising content online, I put resources and address links in order to build the structure.
8
For the narrative structure of this topic, I referenced the Goal article's sub-title to structure different sections of this book. (https://www. goal.com/en/news/what-is-a-dive-in-footballplayers-who-do-it-techniques/1fpj7z7bvonrl1p7wrqklxoytg) The initial chapters' list: 1. Introduction (what is dive in football?) 2. Why do footballers feel the need to do so? 3. Which players are known for diving? 4. What technique goes into a dive? 5. What are the discipline for diving? 6. The impact after diving?
Discovery
Collect informaiton
In order to find the body text content, I tried to collect the public comment from Youtube and Quora. The former channel allows me to find the informal comment which shows the public reaction on the behaviour of diving. The later provides more professional answers. Except for the general public comment, I also would like to visualise the statistical evidence of the popularity difference between before and after the player dive. The Google trend allows me to generate the image which displays the line chart, map, and bar chart.
Although some of the football diving’s images go beyond the requirement of licenses, there are many youtube videos that record the players’ diving moment allow me to get enough screenshot pictures. Moreover, as the topic is based around sport, I consider the idea of moving image is more suitable for demonstrating the dynamic feeling such as gif file or mp4 file. Through discussing with Lozana, we agreed that put the gif file in a sports ebook may influence readers‘ browsing experience. The automatic animation is more impactful in this genre of book. I found the website GIPHY which not only can search many gif files, but I can also convert the youtube video into an animated GIF.
Google trend generator
Mp4 file scene
9
Discovery
Moodboard
After I collected sufficient information for building whole book content, I began doing some genre research by looking at the various style of football memes. Exploring an idea of how memes are created to carry symbolic meaning representing a particular phenomenon or theme, and trialed to bring the memes’ style in my topic.
10
I considered that ideas such as the bold typeface add with a black outline around a type, or cut and merge the relevant pictures is more suitable for applying on every page. The meme which displays the detail of the image also can be used in some cases.
Discovery
Moodboard
In order to explore the design of football’s graphics and colour in different, I researched diverse football-related publications including books, posters, ebooks, and stickers. This phase helps me have a better understanding of related styles and the use of colour in this area.
11
Transformation
Flat plan
Transformation Before starting to develop the work, the presentation, and group exercise in week 3 deepen my understanding of the difference between a reflowable and fixed layout. Through experimenting and cooperating with classmates, we explored different functions in order to achieve the given layout example. Due to I do not have experience in designing epub in InDesign, I decided to challenge and experiment with different interactional functions. For the choice of format, I chose to export EPUB in a fixed layout as my book’s content is based on image rather than complex text. It is important to keep the image or graphic at defined places on a particular page. For the size of EPUB, I followed recommend average sizes 148 x 197 mm which the physical size of the iPad screen.
148mm
197mm
12
Transformation
Flat plan
A content structure was developed continually as the design evolved. Through the consideration of material, I deleted some titles such as ‘What are the discipline for diving?’ or ‘The impact after diving?’, and reduce the length of the chapter title to make them more explicit for readers.
Front cover
Contents page
Interior pages
Image credits
Chapter opening Information spread Information spread Information spread Information spread Information spread 1. Football diving Football diving? Why players dive? 2. Diving techniques Types of diving Step-by-step 3. Famous divers 4. Memes & mockery 5. Stop diving
Chapter opening Information spread Information spread Information spread Information spread Information spread
13
Transformation
Layout development
At the beginning stage, I did not focus on developing the margin or grid, instead, I trialed to place the collected information in the middle margin to explore the potential configuration for different materials.
Margin: Top: 15mm Bottom: 15mm Outside: 20mm Inside: 20mm
14
Transformation
Layout development
Feedback from Lozana highlighted the point of making the image arrangement more playful and dynamic. Considering my subject matter, the genre of the whole book should be more energetic and vivid. She also mentioned that I can add the effect to the image. Images used in a digital-first book do not always need to maintain high quality.
On the other hand, if I put too much information copied from fluid content such as news or blog, this may violate others’ copyright. Quoting less than two sentences also can explain certain diving events instead of using all. In order to find the diving event description, news offers the complete story which I cannot find in the general public comment area. This time feedback not only makes me more open-minded on experimenting with the layout but rethinks the ethical issue for
15
Transformation
Image development
In order to find the appropriate effect applied in all images used in the book, I experimented with different means based on the previous meme research and digital culture. For example, the combination of image and gif file, cathode-ray tube televisions effect, and noise grain, and point focusing picture.
16
I decided to add a noise grain effect in all images because some pictures are captured by a screenshot. Applying this effect to the image in which low quality can complement the insufficient details. If I process the picture overly, it will only look more confusing.
Transformation
Image development
I sourced the images from the website Trollfootball, Twitter, and Youtube. In Trollfootball and Twitter, I can find some memes went viral on the internet. The football diving techniques categories were found by searching on Youtube with the keywords: ‘football diving techniques’.
Among all the videos I visited, ‘THE ART OF DIVING | HOW TO ALWAYS WIN FREE KICKS ft. JACK WHITEHALL’ filmed by F2Freestylers - Ultimate Soccer Skills Channel has the most comprehensive introduction and classification.
17
Transformation
Layout development
I’ve been organising the layout and considering how to structure the content in order to work on a variety of platforms and channels. Especially in chapter three ‘famous divers’, the amount of information may too much for the unit of spread. Therefore, I chose to separate them into two spread which is four pages. In this way, I don’t have to worry about deleting each of the information. The picture of Google trends can also be placed directly in the middle to make clear on a page.
18
Transformation
Layout development
In this step, I played with the interactive function in InDesign to create a more dynamic and interesting relationship between text and images. A hyperlink function offers me an opportunity to navigate readers to certain pages and websites. I thought when reading chapter 2, if audience can link to chapter 3 for checking the related football players’ information is more direct than browsing.
I also like the idea of presetting ‘appear’ function on chatting dialog because this can demonstrate the endless reviews from the audience. However, there are still some exaggerated functions which not suitable to use in this ebook such as dance and bounce.
19
Transformation
Typeface development
The initial use of a typeface in body text is Khula regular 18/28pt and Anton regular 40/46pt for the main heading. After the formative submission, Lozana suggested using typeface which looks more geometric in body text to fit better with the blocky titles. I started to experiment more about typesetting to find a balance between body text and heading.
After the comparison, I realised Roboto regular 18/26pt can fit the Anton regular more because of its higher x-height and denser-looking.
Roboto regular 18/26pt
Ubuntu regular 18/26pt
Carrois Gothic regular 18/26pt
Shanti regular 18/26pt
20
For the heading, I stick with Anton regular as its presentation more similar to the classic meme’s typeface.
Transformation
Margin development
For the chatting dialog page, it is not necessary to consider margin. By contrast, the page which includes some text fragments really needs to explore a better margin for aligning the text. I adjusted the margin by compressing inward because the original margin caused the left page to float upward and generate blank parts below.
Margin: Top: 15mm Bottom: 15mm Outside: 20mm Inside: 20mm
Margin: Top: 23mm Bottom: 25mm Outside: 21mm Inside: 19mm
21
Transformation
Format development
I started to determine the size of the POD book and trialed the photo book standard Portrait (200 × 250mm) at first. However, this print result is far bigger than I thought after the print out testing. I altered the size to trade book 130 × 200mm
22
because this is similar to my epub format. This leads to the process of rearranging each visual representation’s position much convenient than 200 × 250mm.
Transformation
Layout development
Owing to the change of margin in EPUB, I also altered the print margin slightly in order to fit the POD format.
Margin: Top: 17mm Bottom: 17mm Outside: 17mm Inside: 17mm
Margin: Top: 33mm Bottom: 30mm Outside: 16mm Inside: 19mm
23
Transformation
Visual development
To prevent the confusion of people’s icons, I experimented to colour the black square to correspond to the color of the section. Nevertheless, this may work in some chapters but not for chapter 3. There are around ten pages be designed as a chat dialog page. If the audience continually reads similar pages, it could be tedious because of the repetitive patterns.
24
Another idea I trialed is to make the people’s screenshot as chat avatar icons. The images were found by searching for public photos on Facebook with the keywords: ‘football audience’, ‘football spectators’, ‘people’, and ‘people photo’. To preserve privacy the photos were then blurred. By doing this, the color selection of the icon can be more diverse.
Transformation
Visual development
Although I want to use the ideas of bold typeface add with a black outline around a type as my title style, there are some situations hard to apply like this. For example, the light colour text with a pure white background. Adding the around 30% section’s colour or pure black colour could deal with the recognisability issues.
25
Transformation
Further development
The original intention is to make the image arrangement freer. However, after the feedback from Lozana, I realised that this causes the entire book more confusing if many pages in different positions.
26
Transformation
Further development
In the second time of transforming the epub information into the POD. I started to pay attention to their distinction. Firstly, all underlined links should be deleted because it does not work in print PDF or books, putting here will only confuse readers; these include the address hyperlink
and book navigating hyperlink. I also deleted the folio in epub because I considered that this book does not need readers to progress it page by page. They can access the content dependant on their preferences.
27
Transformation
Further development
Same with GIF file, in the POD book, there should only have one static picture located at the animated frame on each page. Thus, I tried to screenshot the moment which can demonstrate clearer about the diving techniques. For some techniques which need to demonstrate in the start and end, I separated video into segments’ image look like comic books or memes.
28
I utilised the Colour Contrast Analyser to find the appropriate colour, especially in the POD version. It can help me to identify suitable and high contrast colour between background and text within every section.
Transformation
Further development
After my final work has been exported into EPUB fixed layout, I noticed that some typefaces did not look the same with my design in the InDesign page, especially, the typeface around by the outline. The heading has unexpected tracking and a thicker outline. Plus, the website hyperlink has been shrunk and compressed to almost invisible.
• Heading style further adjustment: returned the original (-50) tracking to the (0) • Hyperlink style further adjustment: increase the type size from 20pt to 24pt
29
Transformation
Further development
Above show the before heading and hyperlink Below show the after amendment
30
Transformation
Book cover
To correspond with the genre of memes and to reflect the digital culture, I aim to collect different diving moment pictures and to integrate them into the noise effect background.
31
Making
Blurb platform
Making For my POD book, I published on the Blurb at a price of ÂŁ11.59 with the standard trade book (softcover). It is available for the public to order and preview the PDF file first. The final POD book did not deliver on time because Blurb company is having an issue with submitting the order to their print partner. The photo of the final piece will be submitted by mockup images.
32
Making
Blurb platform
33
Making
34
Book cover mockup
Making
Book cover mockup
35
Making
36
Inside pages mockup
Making
Inside pages mockup
37
Making
ISSUU platform
When published on ISSUU, I realised this platform can help me detected the link that originally embedded in certain pages. The function of interlink to another page is not working because the interactive PDF file I uploaded is the combination of five PDF files. However, ISSUU offers the opportunity for users to add the link or video by placing the rectangular shape on a specific area.
38
There are two issues I met for adding the link. Firstly, the rectangular shape can not over the middle line of the spread. This means the link should avoid the middle. Secondly, the dot-line rectangle cannot be rotated. When encountering this situation, I chose to capture the surrounding space.
Making
ISSUU platform
39
Making
Internet Archive platform
Internet Archive gives me a platform to upload large size file such as the EPUB and interactive PDF so that the general public can download and preview.
40
Making
Youtube platform
Uploading the ebook screen record on Youtube help me display to the public about the function of this ebook.
41