Publishing Design / Task 3B

on

05/12/24 - 19/12/24 / Week 7 - Week 13

Sheren Princessa Davon / 0362134

Publishing Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 3B: EBook

INSTRUCTIONS


Task 3B: E-Book

This final task is a collaboration with the Brand Corporate Identity module, where we are required to create an e-brand guideline for our brands that we created in the previous tasks of that module.

Below is an outline of my brand positioning:

Fig 1.0 Brand Positioning slides - PDF 

Initial layouts & inspiration
First, I looked up some inspirations of brand guidelines to get an idea of what I would like to design for my own brand. I ended up creating a Pinterest board for it, I thought this would be most efficient as I was deciding to use Pinterest as the main source for my images later on.


Fig 1.1 Visual References


I wanted a more minimalist, soft-toned brand guideline with lots of white space to reflect the softness and delicate nature of my brand. I then started creating some grid structures and creating some layouts of the table of contents to figure out which grid system and layouts I liked best.

Fig 1.2 Grid Exploration

Fig 1.3 Grid & Layout Exploration (without visible grids)

I started rethinking about the lines dividing the sections and whether it truly reflected my brand or not. I decided to brainstorm some more layouts, where I tried color blocking instead of using lines to separate each sections but I felt like it was a bit too much, especially since later I'd be incorporating images.

Fig 1.3 Layout Exploration (with colors)

I also started figuring out where and how I wanted to structure my navigation. My two main options were either at the top or on the left side. At the end, I ended up with a 5 column x 5 row grid with my navigation on the left side:

Fig 1.4 Margins and columns settings 

Fig 1.5 Layout overview

I kept the side margins smaller than the top and bottom ones to give a more landscape feel. I would also change the color from pink to green depending on each chapters. I started formatting all the necessary information and adding images, all that jazz. All the images I used can be found here (in the visuals section). 

I also started to work on my navigation buttons, adding the actions and linking the different pages.

Fig 1.6 First draft of brand guideline - PDF. Week 12

After receiving feedback from Ms. Lilian in BCI class, I did the changes, added some body text to chapter 2, finalized my layouts and fixed up some of my navigation as I realized that I had been using the "Go to Page" action instead of "Go to Destination" which was why some of my buttons weren't working. So I created bookmarks for all the pages and fixed all my buttons, which was honestly quite time consuming...

Fig 1.7 Making buttons & bookmarks on InDesign

Fig 1.9 Draft #2 Brand Guideline - PDF. Week 12

After showing Mr. Hijjaz my first draft of the brand guideline, I received some feedback from him to align my bottom title text and switch up some of the images due to hierarchy. I made the final changes and I was finished with my layout. 

Animations & Interactivity
A requirement we needed was an interactive navigation and table of contents. Here's my navigation panel which are all clickable, as well as the contents page and title pages.

Fig 1.10 Navigation

I wanted my brand guideline to be more interactive so I added some more interactive elements. I added a fade-in animation for the quotes so that it wouldn't be as boring. 

Fig 1.11 Text animation

I also added more interactive elements, specifically in the brand colors page. I added a rollover effect to the colors, so when the user hovers over the colors, the hex codes will appear.

Fig 1.12 Rollover effect

 
 Fig 1.13 Rollover effect in action

I also added a similar rollover effect to the Brand Typefaces:

Fig 1.14 Rollover effect


Fig 1.15 Rollover effect in action

FINAL SUBMISSION


Final Brand Guideline 

Fig 1.16 Final Brand Guideline - Interactive PDF. Week 13 (19/12/24)

(Document is best viewed downloaded and on Google Chrome)


Final Brand Guideline Thumbnails






Fig 1.17 Final Thumbnails - JPG Week 13 (19/12/24)

Fig 1.18 Final Thumbnails - PDF Week 13 (19/12/24)

Brand Guideline Pages

















































FEEDBACK

Week 12
I showed Mr. Hijjaz my first draft and he provided me with his comments.
  • For the navigation, put it on the title pages of each chapter so its not uncomfortable when browsing, cus it's a bit confusing on where to go next once you reach the title cards because there's no navigation buttons
  • Keep the title text on the bottom left fixed as well, right now it's like it's jumping
  • the images in the target audience seem like they are fighting for attention, make sure in each page there's a main image + complimentary ones to create the right hierarchy

REFLECTION

Experience
This task was quite enjoyable and less heavy compared to the others since I've already generated all the contents to be put inside. I was able to focus more on the layout and hierarchy of information instead of worrying about the content itself. It also helped that this was a combination of two modules together, it helped take the weight off and it was helpful to have two lecturers guide me on one task.

Observations
I thought it would be difficult to implement the interactive elements in my brand guideline, but it turned out to be quite straightforward and the outcome was quite satisfying. It made navigating my brand guideline much easier and adds some spice to it so it wasn't too boring. 

Findings
Through this task, I learned the importance of choosing a layout and grid system, along with how to maintain and properly utilize it. With my original idea, I wanted to create lines and separate my overall layout into "blocks", but then upon feedback and my own analysis, I realized it did not suit my brand. If I had continued with the grid-like layout, I wouldn't have a brand guideline that is more airy and flexible. I learned that dividing layouts doesn't always have to be through literal dividing lines, instead it can be through flow of images, background colors, or even text. 

Comments

Post a Comment