Publishing Design / Task 3B

01.11.2022 - 15.11.2022 (Week 10 - Week 12)

Adeline Wong Chyn Nee / 0344017 / Mr.Vinod N 

Publishing Design

Task 3B

---

Lectures

Lectures from weeks 01 to 05 can be found here

---

INSTRUCTIONS

---

Task 3B / Brand Guideline

Week 10- Week 12

In this final task, we are to apply our previous work from our Brand Corporate Identity tasks and our knowledge as well as skills learned from the previous Publishing Design tasks.

In our brand guideline, we have to incorporate a balanced content of the branding, color, typography, visuals, and applications. We have to create a simple brand guideline that is a concise and bespoke guideline for smaller and younger companies or brands.

1. Brand Guideline Development (week 10)

A. Formatting & Margins

Starting this task, I attempted two different margins and applied them by incorporating some content page information. The first margin size allows space on the left for visuals and other graphic elements while the second one is more uniform and tidy.

Fig. 1.1.1 Margin and Testing

 

In the end, I fixated on the second one for a cleaner look, as my brand TO.FUSE has a minimalist and high-class branding direction, so I decided it would be more suitable.

B. Style Direction

I have decided to set on a minimalist approach with an element of classiness that resembles the logo's shapes and style. With that, I went to Pinterest, which is the board I've created for this task. 

Fig. 1.2.1 & 1.2.2 Pinterest Screenshot

The images in Fig. 1.2.3 to Fig 1.2.5 are a few of the inspirations I took a heavy like at and would like to incorporate elements in my brand guideline, and as for the color, I am going for a white space style instead of a black one (like in the images).

Fig. 1.2.3 Pinterest Inspirations #01

Fig. 1.2.4 Pinterest Inspirations #02

Fig. 1.2.5 Pinterest Inspirations #03

C. First Draft

From there, I tested the waters by creating the first draft. I quite like the oblique navigation bar idea and decided to further explore it.

Fig. 1.3.1 First Draft (first chapter)

I also added an oblique-framed image box to make sure of a consistent shape style for my brand TO.FUSE.

Fig. 1.3.2 First draft oblique elements

2. Weekly progression

Week 10

Fig. 2.1.1 Week 10 Progress

Changes made from the first draft: 

- Added home page
- Adjusted visual placement
- Added visuals (and filler images)

Week 11

Fig. 2.1.2 Week 11 Progress

Changes made from week 10: 

- Increased leading between content headings on the content page
- Added title page for each chapter
- Added a toggle button for the introduction page
- Changed the layout of 4 of 7 pages from the first chapter
- Added chapter 2 "Visual Guidelines"
- Started on chapter 3 "Application"

Week 12

Fig. 2.1.3 Week 12 Progress

Changes made from week 11: 

- Capitalized sub-text on the home page
- Added patterns on the content page and all chapter title pages
- Added the navigation bar on all pages
- Changed the layout of 4 of 7 pages from the first chapter

3. Element Development *(chronically arranged)

A. Navigation Bar Development:

i) Vertical Navigation Bar:

Rollover action: Increased point size and turns bold

Fig. 3.1.1 Vertical navigation bar #01

Rollover action: Capitalized, increased point size, and turns bold

Fig. 3.1.2 Vertical navigation bar #02

Rollover action: Capitalized, increased point size, and turns bold

Fig. 3.1.3 Vertical navigation bar #03

Rollover action: Highlighted

Fig. 3.1.4 Vertical navigation bar #04

ii) Oblique Navigation Bar:

Rollover action: Turns bold

Fig. 3.2.1 Oblique navigation bar #01

Rollover action: Turns bold, positioned under line thingy

Fig. 3.2.2 Oblique navigation bar #02

Rollover action: Turns bold

Fig. 3.2.3 Oblique navigation bar #03

Rollover action: Turns bold

Fig. 3.2.4 Oblique navigation bar #04

B. Content Page Heading & Chapter bars

Improvements: Made the typeface thin to match with branding

Fig. 3.3.1 Content Page Heading (before)

Fig. 3.3.2 Content Page Heading (after)

Improvements: Increased point size and leading

Fig. 3.4.1 Content Page bars (before)

Fig. 3.4.2 Content Page bars (after)

C. Introduction Body Text

Ms. Lilian suggested a bigger point size (right) for my body text while Mr. Vinod suggested a smaller one (left), I ended up choosing the bigger one as it has better readability from a user's pov.

Fig. 3.5.1 Two options for introduction body text

D. Vision & Mission page layout

Improvements: Moved visual elsewhere, made body text consistent (still interactive)

Fig. 3.6.1 Vision & Mission layout (before)

Fig. 3.6.2 Vision & Mission layout (after)

E. Target Market Interactive bar

Improvements: Moved visual elsewhere, made body text consistent (still interactive)

Fig. 3.7.1 Target Market interactive bar (before)

Fig. 3.7.2 Target Market interactive bar (after)

3. Extras *(not shown during feedback sessions)

Added elements: Patterns on the background of all chapter title pages

Fig. 4.1.1 Patterns applied on The Brand page

Fig. 4.1.2 Patterns applied on Visual Guideline page

Fig. 4.1.3 Patterns applied on Application page

Added elements: Ending pages which consist of ways of contact and an interactive back to home button

Contact us page:

Fig. 4.2.1 Contact us page

Back to home page:

Fig. 4.3.1 Back to home page (normal)

Fig. 4.3.2 Back to home page (rollover)

Incorrect use of logo: 

Fig. 4.4.1 Incorrect colour fill

Fig. 4.4.2 Incorrect stroke thickness

Fig. 4.4.3 Side-by-side placement

Fig. 4.4.4 Incorrect orientation

Progression Slides: 

E-Book Interactivities

A. Home button (logo)

B. Navigation Content

C. Navigation Bar

D. Previous & Next button

E. Vision & Mission (enlarge interaction)

F. Target Market (fill interaction)

G. Pattern (fill interaction)

H. Back to Home

---

FINAL SUBMISSION

Google Chrome link

Click here to view it in a Google Chrome browser

EHUB link

Click here to view it in a more interactive mode

---

FEEDBACK

Week 11:

General  Feedback:

With the file where we work with our navigation, we should think about the mechanics of that, then we put that aside. Then only do we introduce the connections for the buttons?

We are advised to approximate the text size so that the text size is legible, not too tight, and not too small or big.

Specific Feedback:

I should delete the line as it is an eyesore for now. The color in the center of the circle should be smaller, as it is like a distracting lightning rod. I was advised to solve the issue first by creating the light to regular first, export & see if works. Once rollover works, then add the links. And then export and see if that works, then only add the color if I want to. I was reminded to be careful of my sizing. 16pts is like ur 8pts, so needs to be bigger than that. Increase the 19 pts a little more. This is dealing w/ body text on screen, so there should be more letterspacing. Cannot be zero & cannot be minus. Minimum of 5 at least. The design is okay and feels menu-ish. I was advised to be careful of how many times small lil pictures are shown. I should also show some big ones so that they don't become predictable. Certain parts of pages have big words, (words that relate to taste) that would separate & create variation. The more layers of complexity in the Navi, the more it might be wrong. The first step would be to create the rollover, and check if it works. If it does, Phase 01 is done. Then introduce the link, export & see if it works. If it does, I’m all good to go. Just do the layouts first. Then activate the navigation system as my last step. Do the layout and the navigation system as the last step.

Week 12:

General Feedback:

We are reminded to not use two san serif typefaces in a document, and that all we need is a typeface that works well with our logo. We are advised to have non-repetitive variation. We are also advised to have unpredictable elements and interactive buttons, because if the user is not surprised by the elements then it won’t be a great brand guideline experience for the user.

Specific Feedback:

Mr. Vinod stated that my point size is too small on my content page. For my navigation bar, the rotation part should be taken out as it can be a bit complex. For one of my buttons, it has to be upon click not roll over. The brand link is weird, I have to fix it. For the target audience, better to not have it interactive. For my vision & mission, the images need to be enlarged. Lastly, I was advised to utilize primary and secondary colors to create a formula

---

REFLECTION

Experience

My overall experience with this joint task with BCI was really fun and experimental one! Although working with the navigation bar got a little tricky at times, as well as the functions of the buttons. I feel like I learned a lot as I did this task and it gradually got easier as I got to the end of it. It is my first time creating a brand guideline so it is safe to say that I learned quite a thing or two from this one that helped improve my knowledge and skills a lot.

Observations

Throughout this task, I have observed that There is a distinction between the tools and buttons used for EPUB and those used for interactive PDFs. Because the initial submission requirement was to submit in interactive PDF format, many InDesign buttons and functions were unavailable. However, once the submission requirement was relaxed and EPUB submission was permitted, I attempted to delve deeper into the EPUB buttons and, as a result, created many pages with interesting interactive buttons that I am pleased with.

Findings

In assignment 3B, I discovered a new function for developing a project, such as brand guidelines. During this work, I made extensive use of the new Illustrator to InDesign copy-pasting capability, particularly for the visuals that required groupings, such as the patterns and interactive bars. It saves so much time over just working on InDesign because illustrator and InDesign are both adobe (the difference is that illustrator is more graphic-based and InDesign is more text-focused).

---

FURTHER READING

Fig. 5.1.1 Interaction Design Best Practices by UXPin

In this online book by UXPin about interactive design, I focused on getting to know how to reduce friction in an interactive design for a smooth experience.

For task 3B where we created a Brand Guideline, I noticed that each and every placement and layout of our pages make up a good reading experience. Throughout my experience with the task, the connectivity, smoothness, and harmony of my graphic elements are the improvements that I focused on the most.

Fig. 5.1.2 UXPin on reducing friction for a smoother experience

They first explained the way to IDENTIFY friction, and from the explanations, this are the summary of how to do that:-

1- Cluttered or distracting visuals

2- Inconsistencies in the interface

3- Unnecessary decisions/actions

4- Confusing or never-before-seen functions

With some examples shown of bad interactive designs with friction, they then explain how to REDUCE friction.

1- Explore different mediums for balance

Content exists in multiple dimensions: text, images, graphics, and animations. The web is a visual world, so use images and graphics to take advantage of different cognitive processes. This creates a rhythm in the user’s mind, which of course lessens the cognitive load.

2- Embrace the magic of video

Continuing from the previous point, most people are naturally visual learners. But visuals alone aren’t enough, so make sure you create a clear relationship between text and graphics. Either embed the text in the graphic or take advantage of Hick’s Law and place related text and graphics close to each other.

3- Focus on the content

Strip down the content so you only include what helps users move forward toward their goals. This applies to everything ranging from the overall layout to graphics and typography.

4- Piece it out

Known as “chunking”, this practice prevents the user from feeling overwhelmed upon the first impression. As a result, users actually want to engage with the content, and retain it better.

5- Keep it consistent, but interesting

Design patterns are extremely helpful since they improve the familiarity of your design, but if your design will look cookie-cutter if you follow them too rigidly.