PUBLISHING DESIGN - FINAL PROJECT

21/05/19  - 24/06/19 (Week 8 - Week 13) 

Yeap Phay Min (0331073)

Publishing Design

Final Project  - Ebook

---

INSTRUCTIONS




Animations

21/05/19 (Week 8)

To start this project, we were told to start working on the animation for our visuals.

Initial attempts of animation:

Fig1.1: 1st Animation - Cake

Fig1.2: 1st Animation - Leo

Fig1.3: 1st Animation - Heart

Fig1.4: 1st Animation - Butterflies

Fig1.5: 1st Animation - Quote

Fig1.6: 1st Animation - Quote 

Fig1.7: 1st Animation - Sunflowers

Fig1.8: 1st Animation - Quote

Fig1.9: 1st Animation - Speech Bubble

Fig1.10: 1st Animation - Rainbow & Cloud

Fig1.11: 1st Animation - Sparkles

Fig1.12: 1st Animation - Music Illustration

Fig1.13: 1st Animation - Songs That I Love

Fig1.14: 1st Animation - Money Spent on Things That Makes Me Happy

Fig1.15: 1st Animation - Paw Prints

24/05/19 (Week 8)

After receiving more feedback on the animations, I tried them out again. 

Fig1.16: 2nd Attempt - Bubble of Comfort

Fig1.17: 2nd Attempt - Growing Sunflower

Fig1.18: 2nd Attempt - Unfolding Map

Fig1.19: 2nd Attempt - Paper Airplane

Fig1.20: 2nd Attempt - Quote

Fig1.21: 2nd Attempt - Quote

Fig1.22: 2nd Attempt - Cake

Fig1.23: 2nd Attempt - Leo

Fig1.24: 2nd Attempt - To-Do List

Fig1.25: 2nd Attempt - Raindrops

27/05/19 - 03/06/19 (Week 9 - Week 10)

After more feedback, I proceeded to work on the animations.

Updated Animations:

Fig1.26: 3rd Attempt - Growing Sunflowers

Fig1.27: 3rd Attempt - Songs

Fig1.28: 3rd Attempt - Rainbow & Cloud

Fig1.29: 3rd Attempt - Money Spent on Things That Make Me Happy

Fig1.30: 3rd Attempt - Raindrops

Fig1.31: 3rd Attempt - Quote

10/06/19 (Week 11)

Compilation of final animations used (in order): 

Fig1.32: Final - Sparkle

Fig1.33:  Final - Garlands

Fig1.34:  Final - Cake

Fig1.35:  Final - Leo

Fig1.36:  Final - Quote

Fig1.37:  Final - Rainbow

Fig1.38: Final - Quote

Fig1.39:  Final - Quote

Fig1.40:  Final - Growing Heart

Fig1.41:  Final - Money Spent On Things That Make Me Happy

Fig1.42:  Final - Growing Sunflowers

Fig1.43:  Final - Music Elements

Fig1.44:  Final - Songs That I Love

Fig1.45:  Final - Speech Bubble 

Fig1.46:  Final - Paw Prints

Fig1.47:  Final - Raindrops

Fig1.48:  Final - To-Do List

Fig1.49:  Final - Map

Fig1.50:  Final - Paper Airplane

Ebook- Desktop

27/05/19 (Week 9)

In class, we started to work on the ebook for desktop, from the start until the end of the first chapter. In the ebook, we have to treat the layout as if it's one since page and not look at it as 2 separate pages. This is where our animations goes to as well.

Here is my first attempt at the layout until the end of chapter 1 - static:

(Haven't done the front cover yet)

Fig 2.1: Layout Attempt 1

03/06/19 (Week 10)

This week was Raya Week, hence we worked online. I continued to work on the layout for the ebook. 

Layout Attempt 2 (Static): 

Fig 2.2: Layout Attempt 2 (Part 1)

Fig 2.3: Layout Attempt 2 (Part 2)

10/06/19 (Week 11)

In class, I added the buttons and rollovers to the pages.

Fig3.1: Adding button and rollover

Fig3.2: Adding button and rollover

Back home, I needed to further work on the layout of the ebook such as the cover, the adjustments to the text and also put in the updated animations

17/06/19 (Week 12)

With the feedback received, I continued to work on the layout to make it better and also more consistent, which was what my layout was lacking in as I had different line lengths throughout the pages.

Submission - Final Desktop Ebook

Desktop Version: 1366 x 768 px

PDF of Desktop Ebook Pages (Static): 

Thumbnails:

Fig 4.1: Final Desktop Layout (Part 1)

Fig 4.2: Final Desktop Layout (Part 2)

Online Desktop Ebook:

Ebook- Mobile

10/06/19 (Week 11)

After class, I decided to try out the layout of the ebook for the mobile version.

Layout Attempt 1:

Fig 5.1: Layout Attempt 1 (Part 1)

Fig 5.1: Layout Attempt 1 (Part 2)

17/06/19 (Week 12)

After receiving feedback on what I've previously done, I needed to make a lot of changes as the previous layout has a small point size and everything was quite cramped into one page. 

Submission - Final Mobile Ebook:

Mobile Version (iPhone 6): 1334 x 750 px

PDF of Mobile Ebook Pages (Static): 

Thumbnails:

Fig 6.1: Final Mobile Layout (Part 1)

Fig 6.2: Final Mobile Layout (Part 2)

Online Mobile Ebook:

---

FEEDBACK

21/05/19 (Week 8)
Specific feedback: For the animation of visuals, I can have some subtle animation and also try to do some using After Effects.

24/05/19 (Week 8)

Specific feedback [online]: The animations are all acceptable but basic. You should identify 3/4 of them from diff chapters and attempt a more complicated movement: parallax, to achieve depth and sophistication but also perspective and an element of surprise. Currently these are acceptable but you need a few that would jump out at you, if not all. 

27/05/19 (Week 9)
Specific feedback: (Animations) There are improvements made to the animation, with some that still needed more work on it. For the flowers, I should using masking, instead of stretching it. However the stretching for the opening of the map looked okay. (Ebook) The line length for one of the section is too long so I should reduce it. I can also start to work on the rollover and navigation links. Once I’m happy with the layout, I can proceed to work on the next chapters.

03/06/19 (Week 10)
General feedback: We need to ensure that our blog post for project 2 is updated and complete with the necessary content as the e-portfolio will be evaluated.
Specific feedback: No specific feedback received.

10/06/19 (Week 11)
General feedback: We should keep in mind about how the readers will experience our ebook by not having too many things going on that can be a distraction. 
Specific feedback: (Ebook) I currently haver a longer line length so the ragging to the text should be adjusted and the kerning should be kept at 5. The point size to the text is okay. For the front cover, I could experiment with having more of the paper airplane loops, some slow and some faster. After some adjusting, the type setting is now okay. The contents section should include rollovers too. For the references, the links can be activated. (Animations) Improvements are made to some animations using After Effects. The rain one could still be better. I could also think about animating the garlands.

17/06/19 (Week 12)
General feedback: We should be sensitive with the text and layout, making sure it’s at a decent point size and leading. We should also increase the pt size for the mobile ebook for it to be readable.
Specific feedback: [Ebook-Desktop] The placement of the publication is good, rollovers are fine as well. However for the content, the line length isn’t consistent with some being a little too wide. I need to make use of the grids and make sure it is all consistent. [Ebook-Mobile] 20pt is too small, 30pt would be more ideal along with a 40pt leading. The imprint text size can be smaller but the leading has to be bigger. 

24/06/19 (Week 13)
General feedback: [Blog] For the e-portfolio, we should view our senior’s blog as reference, making sure all the necessary post is uploaded.
Specific feedback: [Blog] For the layouts I should make it into thumbnails instead of uploading the jpeg of the spread alone. [Ebook-Desktop] The cover is good, and the animations are much better. The line length is also well-updated. For the references, I should activate the links in which I had forgotten to do that. For the contents page, the animation is taking up time in which some people may get impatient when wanting to go to a chapter but having to wait for the animation to load. [Ebook-Mobile] Layout looks okay, references list is not needed. 

---

REFLECTION

EXPERIENCE

21/05/19 (Week 8)
This week, I started to work on the animation for the visuals. At this beginning stage, I did feel a little lost at times as I didn't know how my visual should be animated. But I want to experiment with it more to hopefully make it better.

27/05/19 (Week 9)
In this week I continued to improve on my animations and even though some were better, there were still some that felt like it was lacking so I need to further work on it. Besides the animation, we also started to work on the ebook for desktop, until chapter 1 for one. In the beginning I was unsure of how to arrange the visuals and text onto the spread for web.

03/06/19 (Week 10)
For this week, I tried to redo some animations, this time using After Effects. through this I experienced some problems with my visuals being distorted or it not being exported without a transparent background, but I eventually found a way to export them correctly. I also continued to work on the ebook layout for desktop version.

10/06/19 (Week 11)
This week, I just needed to finish up some animations that needed some fixing. As for the ebook, it was mostly completed in terms of the layout so what was left was adding all the navigation buttons.

17/06/19 (Week 12)
In this week I continued to work on the ebook, fixing the layout. I also got to work on the mobile version which was a lot different than the print and desktop as the size is a lot smaller hence why the point size needs to be a lot bigger.

24/06/19 (Week 13)
After weeks of working on the animations, ebook for desktop and mobile, I got to learn a lot of new things especially how ebooks in InDesign works. Through this assignment, I had the experience of designing a book that is meant to be for screen which is different from the traditional print. With ebooks, we need to ensure the sizing of the text is suited to the size of the device chosen. It definitely trained me to be more sensitive to design as well.


OBSERVATION

21/05/19 (Week 8)
I observed that I mostly leaned towards subtle movements in my animation, and I feel that I should try out some that's not so subtle.

27/05/19 (Week 9)
From this week I observed that some of my animations did look better than the previous ones that I've done but I'm still not fully satisfied with all of them.

03/06/19 (Week 10)
I observed that the animations that were done with After Affects were much better compared to my previous ones. It was more time consuming but the outcome was a lot better so it was worth it.

10/06/19 (Week 11)
This week, I observed that the buttons and rollover stuff isn't actually that complicated to add, and it does make the overall design look more like a proper ebook.

17/06/19 (Week 12)
While working on the mobile version, I observed that it was really useful to export a page and send it over to my phone because that way I can see if the size of the words and layout is okay or not.

24/06/19 (Week 13)
With this assignment, I observed that there are so many possibilities to animate an ebook with InDesign as there are features such as animations and buttons which I observed to be interesting as these things wasn't possible back in the days. Makes me observe and realised how technology has developed. Back then, it was just printed books, and now we can have ebooks.


FINDINGS

21/05/19 (Week 8)
I found that it was a nice feeling to see the visuals being animated as this whole time we were working on it being static.

27/05/19 (Week 9)
Through working on the ebook, I found that the layout does look a lot better when it is being treated as a single page instead of "splitting" it in half.

03/06/19 (Week 10)
In this week, I found that even though some animations were time consuming, seeing the outcome of it is always worth it, and probably better than whipping something out really simple and fast.

10/06/19 (Week 11)
While working on the ebook, I found that it was really satisfying while testing out the navigation buttons as it actually worked so that was good. It was also satisfying to view it in the EPUB, seeing the animated visuals placed together with the body text.

17/06/19 (Week 12)
This week, I found that 30pt is definitely much better than what I have previously used which was 20pt. It made me realise the importance of making sure the mobile ebook is enjoyable for readers when they read it and they don't have to strain their eyes trying to read the small words.

24/06/19 (Week 13)
Throughout the weeks, I found myself facing with some struggles which definitely made me feel frustrated at times. However those difficulties I faced are what made me learn more things and what are the right things I should be doing when it comes to designing a book, especially ebooks.

---

FURTHER READINGS

21/05/19 (Week 8)

6 Keys for Book Page Layout: Don’t Ignore These Design Rules If You’re Self-Publishing

By: Meena Azzollini

https://www.tckpublishing.com/6-keys-for-book-page-layout/

Fig 7.1: Article Cover

Once you have made the decision to self-publish, it is essential to think about the design elements of a book. Taking time to understand the rules of a book layout and design can help with the layout and design of your book. 

In the contents of this article, it discusses on six rules for page layout and design.

1. Margins

-Margins of a book are the blank areas surrounding the body text. Using margins will help to create a visually appealing page. 

Fig 7.2: Margins 

2. Whitespace

A tight layout that looks congested isn't the most ideal way to go. A perfectly balanced page needs to have a good amount of white space to balance the text and visuals.

3. Line Width

The width of each text block (line width) needs to allow readers to keep track of the words being read because if the line is too long it gets hard to read. The ideal characters per line are 65, but it also depends on the writing, typeface and size of the book.

4. Typography

For a readable and pleasing to the eye reading experience, a suitable typefaces should be chosen. The selected typeface should also be consistent throughout the book, but also allowing differences for the titles and headings, pull quotes and sub-text.

5. Images

All visuals such as photographs, images and illustrations should make the book look great. The layout has to incorporate the visuals well to make the overall page look beautiful and well designed. 

6. Widows and Orphans

Widow is the single line of text that moves to the next page or column at the top. An orphan is the isolated line of a few words at the bottom of the page/paragraph. It is important to look out for this as it can make your page layout look shabby.

27/05/19 (Week 9)

Scribe Guide to Designing Your Book Layout

By: Tucker Max

https://scribewriting.com/interior-book-layout/

Fig 7.3: Article Cover

In this article, it states that a book layout is one of those things that most people don't notice about, unless it is visibly wrong.

There are a lot of factors that go into designing a book. This includes: size, colours, materials, typefaces, margins, spacings, design elements and also other mediums of visuals. The article also states that interior layout is hard and tiring work that requires lots of time to execute it. 

Fig 7.4: Example of good and bad design

As for ebooks, there are two standard ebook file formats which as EPUB and MOBI. EPUB is the universal standard used by most ebook retailers and also Apple iBook. This format are more customisable and have little more flexibility for design. MOBI format is for Amazon Kindle and is able to set their own standards. 

03/06/19 (Week 10)
The Importance of Layout In Graphic Designs 
By: Min
https://www.designbold.com/academy/en/the-importance-of-layout-in-graphic-designs/

Fig 7.5: Article Cover

The contents of this article I found discusses on the importance of a layout along with its role to graphic designers. When it comes to layout, it deals with arrangement of visual elements with the aim of achieving specific communication objectives. While designing, it is important for graphic designers to be dependent on the information required to present the layout properly. This includes rotating and resizing images. A tip for designing efficiently is to plan the layout in advance to not only save time but also to have a consistent look to the overall layout design. If a layout doesn't look suitable, the intended message will be unclear. The success of a graphic design can be said to be dependent on the arrangement of the elements in the right sequence and position, and the relationship with each other.

As for the advantages, it includes helping the layout of the page become harmonious with fonts, colours and backgrounds. It also helps make it easy for readers to receive information and grasp the essence of the article, focusing on the main content. With the advantages discussed in the article, it is said that layouts will help our websites become more well-organised and be able to engage with more customers.

Fig 7.6: Layout Example #1

Fig 7.7: Layout Example #2

10/06/19 (Week 11)
Publishing: Why You Should Care About Ebook vs Print Formatting 
By: Creative Guest 
https://www.thecreativepenn.com/2014/03/20/ebook-vs-print-formatting/

When it comes to a printed book, you are able to control is as much as you possibly can. This includes alignments of text for things such as headers and page numbers. All of this needs to be exact in order to give the best reading experience for the readers.

As for ebooks, there has to be a flow as we do not know what device the person is reading the ebook with. Different devices varies in the way it displays the text. Therefore if the book is not adjusted to that, the reading experience may not be the best. Ebooks make use of hypertext, the same language that web pages are using to format the content for the internet. In the article, it mentioned how the key for ebooks is about having a "flow". The pages should reformat themselves automatically to fit the screen therefore a book needs to do that too. This is also said to be a reason why page numbers are said to be kinda useless for an ereader, as the page might reflow to fit the screen/needs of the reader and hence the numbers of a certain chapter/page will not be constant.

Besides that, the article also states that the key to a successful ebook is to reduce the amount of additional formatting. Meaning there should be no funky typefaces, weird margins and also tables and other Texta that require a specific format. In order to make your reader interested, it is crucial to make the reading experience as easy for them as possible. A general ip is to just keep it all simple, and avoid problems that the readers would experience. For the graphics and visuals, it needs to be screen resolution, 72 dpi, and not 300 dpi which is for printed books. As for file formats, the most popular version is ".epub" file format.


17/06/19 (Week 12)
10 Essential Tips for Creating eBooks (EPUBs) in InDesign
By: Grace Fussell
https://www.shutterstock.com/blog/tips-creating-ebooks-epubs-indesign

Fig 7.8: Article Cover

"If you’re looking to launch your first self-published book, or simply want to know a bit more about the basics of creating EPUBs (short for electronic publication) in Adobe InDesign, this is a great quick-start guide." 

The contents of this article includes tips on ebooks which I found to be interesting to read up on since we are creating an ebook for this final project. 

- Adobe InDesign is always the book designers software of choice when it comes to print books. It also has great ability for EPUB design that allows to create both fixed-layout and reflowable ebooks.

- When creating a standard reflowable EPUB book, we need to ensure facing pages box is unchecked.

- Most text-heavy books are set in a reflowable EPUB format. this format includes "live text" whereby you are able to highlight, select and search, as well as changing the size of text. This forces the lines of text to expand and break to other lines to "reflow".  This format offers flexibility in terms of font size and improving navigation. 

- For a fixed layout EPUB, it has a "fixed" design and does not react responsively. Instead, it will appear as how it was intended by the designer. This format is more ideal when it comes to image-heavy ebooks and emagazines.

- Size is important. If its a reflowable EPUB, it is then designed to adapt to different screen size. However is it is a fixed layout, the particular dimensions needs to be set accordingly. 

- Exporting to EPUB Format. File > Export > EPUB. EPUB is said to be the best format for ebooks and since it doesn't need to be printed hence the production cost is low. Once it is done exporting, you can simply upload your book to online ebook stores.  

24/06/19 (Week 13)
Advantages of Ebook Publishing
https://gosparkpress.com/ebook-publishing/

Fig 7.9: Article Cover

The contents of this article discusses on the benefits of publishing an ebook, which I found to be an interesting read since this final project is about creating ebooks.

The first benefit mentioned in the article is convenience, as it can be easily accessible for anyone with a digital device. Practicality is another advantage. Digital publishing ha the ability to speed up the process as compared to a traditional print book that takes a long time for manufacturing. With ebooks, you can easily update and publish a newer edition without the worry about redistribution. Ebooks will also not take up space on your bookshelf which might already be overloaded with physical books. Because of this, it is also great for travelling as you can read the ebook on the go with your device, rather than bringing a physical book that it going to take up space and be heavy.

Besides that, ebooks are also adaptable and able to include links, videos and also audio to go along with the text. The readers are able to adjust the size and brightness of the screen for an enjoyable reading experience. Ebooks are also said to be more cost effective as it is definitely cheaper than print books which require printing and manufacturing. Ebooks are generally cheaper and there are even many out there that are free of charge. Lastly, sustainability is a benefit as it also saves the environment since ebooks are a paperless product after all. Going to a bookstore and/or having your books shipped out would also require gas usage and with ebooks there's no need for that.