Brand Corporate Identity / Task 4: E-book

Week 10 - week 14

Riko Matsuyama 0351470 

Brand Corporate Identity / Task 4: E-book

Bachelor of Design in creative media

---

Instructions

 

---

Task 4: E-Book

Week 11

3 grid options (pdf)

I chose the first grid option.

At first, I tried 2 types of font. The first option is to use a wordmark logo, brand logo, and body text font. The second option is all body text font. Finally, I decided on the first one.

Fig1.1: typefaces option 1

Fig1.2: typefaces option 2

References

Fig1.3-5: references

These are my first layout of the contents page and Chapter 1. I received feedback in the week 11 class. Try to make navigation look like a scarf. Incorporate brand identities. Add interactivity as well (rollover).

Fig1.6: first layout of contents page

Fig1.7: first attempt (1st chapter)

Based on feedback, I came up with a few navigation ideas. About the navigation position, I thought the right side is better. And I thought a horizontal square was better than a vertical one. 

Fig1.8: Navi, ideas

I chose this shape. Then I realized it would look better if I added a vertical rectangle. It looks more like a scarf.

Fig1.9: layout of Navi

Fig1.10: add a rectangle

And I added the same shape & color rectangle at the bottom.

Fig1.11: final position of Navi (12/6/2023)

After deciding contents page, I create layouts until the first chapter.

Used images from: https://www.pexels.com/ja-jp/

Attempt 1:

Fig1.12: first attempt (12/6/2023)

Based on feedback from Mr. Vinod and Ms. Lilian, I changed my layout and added the logo application pages.

Attempt 2:

Fig1.13: second attempt (1/5)(16/6/2023)

Fig1.14: second attempt (2/5)(16/6/2023)

Fig1.15: second attempt (3/5)(16/6/2023)

Fig1.16: second attempt (4/5)(16/6/2023)

Fig1.17: second attempt (5/5)(16/6/2023)

Week 12

Before the BCI class, I did a navigation test. I changed the font color and added a zoom feature. In week 12, I received some feedback. The layout is fine. interactive missing, so need to add. Image or navigation.

Font color changes when the cursor is placed over the text.

Fig2.1: buttons and forms

Place the cursor over the content section title and the content will appear.

Fig2.2: buttons and forms

Place the cursor over the image to zoom in on the image.

Fig2.3: zoom image

1. Navigation, font color change

navigation preview 1

2. Contents page

navigation preview 2

3. Color scheme page, scarf elements

navigation preview 3

4. Collateral page, rollover

navigation preview 4

5. Zoom image, rollover

navigation preview 5

After the BCI class, I changed the layout of the e-book. Ms. Lilian mentioned there is a large white space and it does not look good, so I changed the range of color background.

Fig2.4: layout in week 11

Fig2.5: layout in week 12

Fig2.6: layout in week 11

Fig2.7: layout in week 12

Attempt 3:

Fig2.8: attempt 3 (1/5)(21/6/2023)

Fig2.9: attempt 3 (2/5)(21/6/2023)

Fig2.10: attempt 3 (3/5)(21/6/2023)

Fig2.11: attempt 3 (4/5)(21/6/2023)

Fig2.12: attempt 3 (5/5)(21/6/2023)

Week 13

Lillian gave her feedback. The layout is fine. Some buttons are not working and need to be fixed. No image is preferred for the back cover. It looks complicated with images.

Based on feedback, I fixed some buttons and decided back cover design. Test out interactive pdf, open with Adobe Acrobat. I tested by opening the interactive PDF in Adobe Acrobat. I did all events set to on-click, but the settings were often reset. It was hard to undo.

Fig3.1: test

Final Submission

Complete final thumbnails

Fig4.1: Complete final thumbnails (1/5)

Fig4.2: Complete final thumbnails (2/5)

Fig4.3: Complete final thumbnails (3/5)

Fig4.4: Complete final thumbnails (4/5)

Fig4.5: Complete final thumbnails (5/5)

Fig4.6: Complete final thumbnails (pdf)

Final interactive PDF

*After downloading, it is best to open it in Adobe Acrobat

The navigation section did not work when opened with Google Chrome. Probably it's because of the overlapping button functions.

　

Fig4.7-8: test (left: google chrome, right: acrobat)

Fig4.9: buttons

Fig4.10: Final interactive PDF

Final Brand Guideline (jpg)

Fig4.11-53: Final Brand Guideline (jpg)

---

Feedback

Week 11

(Mon.)

- Do not separate the brand logo (cover). 

-The corner of the curve is not suitable (rectangle). 

-Think of the user interface.

-Hyphenation of the heading is not necessary. 

-Too many different layouts within one chapter. Consistency. 

-Try to incorporate some of the arrows, etc (Navi). 

-Incorporate the scarf shape, arrows, and scarves appear to be disconnected. (Navi)

(Wed.)

Task3

- Improve vision&mission

- Vision more clear(atmosphere, taste... put under mission)

- Segment(target audience)

- Brand value(put keyword, take one keyword. rest of body copy can be exploration of keyword)

- Clear space, start from logo(4,2) so change it

- No sketch of the application

- Put references, credit

- Need to be more dairy

- More fluent

- Put a more creative idea

Task 4

- Navi is fine but can be longer

- Chapter 1 covers, more creativity (2 is simple, 3 is consistent)

- Target audience content hard to read

- Between chapters, try to add images that are put in Chapter 2, chapter 2 is no image, it's complicated

- Just put the image, no information, just enjoy a picture

- Add CMKY or something

- Add exploration (chapter 2)

Week 12

(Mon.)

- Interactive missing, add rollover

- Navi: use the bold font or something for each section 

- Image: zoom & small etc

(Wed.)

- Text-align

- Ass back cover

- Paper bag page: too much white space

- Do not use hyphens

- USP add a color box or something

- "Logo System" not "the visual"

- Add one more typeface page, testing

- Picture credit

- Apply scarf shape to all

Week 13

(Wed.)

- Adjust buttons to respond with CLICK.

- The back cover should be simple.

- Pressing the logo on the back cover should jump to the start page

- The layout is fine.

---

Reflections

Experience

All in all, this task was a very interesting experience. I created an interactive pdf for the first time and was amazed that no HTML or anything else was needed. It was a bit of a challenge to create buttons and forms because of the large number of pages. My artwork is always simple, I need to be more creative.

Observations

During class time, I saw my classmates' work. I could learn from it a lot. They incorporate their own brand identity into their brand guideline well. There are so many interesting and amazing brand guideline designs.

Findings

Since the task content was the same as the BCI class, we were able to do it with more time than in the past. Since this was my first time creating an interactive pdf, I looked for some videos on YouTube. There were a lot of very interesting ideas. Creating the guidelines was a task that required the successful application of past experience.

Interactive PDF videos I referred to:

Learn how to create index buttons for Interactive PDF in Adobe InDesign

Create interactive rollover buttons in Adobe InDesign