Publishing Design - Task 3B

on

05/12/2024- 02/01/2025 (Week 1-Week 14)
Lizzie Tanaka (0362065)
Publishing Design | BDCM | Taylor's University
Task 3B: Brand Guidelines Interactive PDF

LECTURE

All lectures are in Task 2 and Task 3

INSTRUCTIONS


Task 3B is a collaboration of Publishing Design and Brand Corporate Identity where we are tasked to make an interactive brand guideline. 

Process

For a more complete process of the content of the brand guideline, go to BCI's blog.

Before starting, I had searched for simple inspirations and references of brand guideline I liked in Pinterest: here and here 

Fig 1.1 References


When starting the brand guideline, I wanted it to be like my task 3 positioning PPT but better. I started by determining the grids and trying out a few layouts, especially on the first chapter. My first attempt uses 8x8 grids and I tried several layouts. 

Fig 1.2 First attempt draft

During group tutorials, Ms. Lilian said it was okay but maybe I can try to use 9x9 columns and to incorporate imageries to fill up chapter 1. I was also suggested to break up the layout by adding pictures, play around with the layout like making a few pages a full image page and more. From the feedback I obtained in the group tutorials, Ms. Lilian said the layout was good to go but needed some amendments on the visuals I chose. 


Fig 1.3 Week 11: few attempts on visuals
 

Fig 1.4 Week 11: Chapter 2-3

Since I was stuck, I decided to finish up the buttons first. I wanted my buttons to have a minimal hover effect of underline. I thought it was subtle but clear for the audience. I had a rough idea of how to do the buttons from Mr. Hijjaz's class so I got started first. 

Fig 1.5 Rollover effect


I did the hover by using the multi state feature in InDesign. I added a bookmark for every page then I start by setting up the desired hover effect in the 'rollover' section. From 'normal,' I set the action to 'go to next state.' And in the 'click,' I set the action to 'go to destination' and picked a bookmark. This process was quite simple and quick. On my first attempt and trial on the button, I only wanted to see if the buttons would work so I did it using "go to page" but following Ms. Lilian's tutorial, I changed it to bookmarks. 


Fig 1.6 Attempt on Week 11 to Week 12


On week 12, I just finalized all the contents based on the latest feedbacks and made sure all buttons worked. During Mr. Hijjaz's class, I asked for feedback. 

Week 12 - Publishing Design Feedback
On week 12, I showed my final guideline to Mr. Hijjaz in publishing design class and got a few feedbacks. I was advised to change the serif font to a sans serif font. The serif font is not recommended for screen and Mr. Hijjaz suggested I give another section in the typeface section for screen and print medias. 

For the font, there were a few trials. I had wanted a sans serif with a bit of character to it, something not too plain. Initially, I had gone with Neue Haas Grotesk but I thought it felt too boring. I ended up trying two more typefaces: Synonym and Excon. I liked Synonym more as I felt like it matched the fancy serif better than Excon. 

Fig 1.7 Font choices
(L to R: Neue Haas Grotesk, Synonym, Excon)

After I finalized all the typeface, I made another slide to differentiate print and screen typefaces. I was reluctant to change the font but I rethought that decision because I wanted my slide to be as functional and as readable as possible. I consulted Ms. Lilian through chat to ensure if this was allowed, to which she agreed. 

Fig 1.8 Screen typeface slide

Fig 1.9 Print typeface slide

He also noticed a problem with the buttons in chapter 2 and 3, where the left area of each text/button would not hover. Users would have to hover around the text instead. The problem ended up being solved with me re-doing the buttons from scratch. 


Fig 1.10 Hover issue (no rollover effect on the first word)

Fig 1.11 Hover issue solved (rollover effect is seen on all words)


Mr Hijjaz also suggested I make the entire cover page as a button so when users click it, they are immediately redirected to the table of contents page. Another issue I had was when I clicked on the USP button, it would glitch between the USP page and the brand profile cover page. It ended up being the fact that the USP button overlapped with the brand profile button area in the USP page. So it immediately clicked to the brand profile page. I adjusted the textbox and the problem was solved.

Finalizing the PDF, I made the logo on the back cover page to be navigable to redirect users back to the cover page. Mr. Hijjaz also noted to make sure the PDF's don't load too long because of the images so I also decided to compress the mockup images since they were so large in size (20mb+) and was making the pdf load slower. 

Final Submission

Fig 2.1 Final PDF (Interactive)
(This document is best viewed downloaded and on Google Chrome)

Fig 2.2 Thumbnail - Chapter 1

Fig 2.3 Thumbnail - Chapter 2

Fig 2.4 Thumbnail - Chapter 3



JPEGs









































Fig 2.5 Final JPEGs

Click below for the e-brand guideline:


FEEDBACKS

Week 10

  • Try to use 9x9 grid

  • Use of pictures is recommended for chapter 1. Use visuals thatyou want your brand to feel like. 

  • Add a logo in the cover page

  • Do complete the entire guideline by next week


WEEK 11

  • The layout in chapter 1 feels a bit boring. Maybe instead of using product images, try using people laughing or smiling, pick pictures that represent how your brand wants to be perceived and feel like.

  • Try adding a full page of just an image with a quote to break the repetitiveness. 

  • Try changing up a bit of layout as well (chapter 1)

  • Add a bit of body text to chapter 3 and a bit of the chapter 2

  • Good use of typography 


WEEK 12

  • Overall already good in terms of layout, however be more picky with the visuals

  • Visuals to fix: vision and mission (a bit too corporate), USP (feels more sporty)

  • Maybe the cropping in the vision and mission picture can be fixed. Try removing one picture and working with only 2 pictures instead

  • Finish up the rest of the table of contents button. So far, the buttons are good to go.

  • Add body copy to chapter 3

  • Good that some layouts have full bleed images to break up the repetitiveness.

  • (PD) Change font to sans serif, add a section in brand typeface to differentiate typeface for screen and print media

  • (PD) Fix the hover effects on the buttons on content page

  • (PD) Layout and color is good to go

REFLECTIONS:
Experience:
This entire task is truthfully easier than I had expected. Arranging the layout ended up being simpler than I had imagined and making it interactive turned out to be quite an easy process in InDesign. Throughout this process, I've definitely learnt a lot in using InDesign. I don't usually use InDesign so this process helped me in understanding how to effectively use InDesign. I've also learned a lot about layout in screen and in media as well.


Observations:
I observed that a successful layout definitely depends heavily on accessibility and how well it functions to audience. I learnt that creativity and exploration draws its limits when the design is no longer readable and legible for the audience. 


Findings:
I find that layout design is very important and that it's not as easy as it looks. It requires a lot of exploration, and a whole bunch of trials and errors to make it look equally good and aesthetically pleasing yet also functioning really well. Adjustments sometimes need to be made even if it strays a bit from the initial idea to achieve this. 

Comments

Post a Comment