PROGRESSIONS
Task 4: Brand Guideline
This is a continuous project from Task 3. In this task, we were required to create a simple brand guideline.
Size: 1366px x 768px (single page)
Week 10
To have a better understanding of brand guidelines, I did some visual research before designing my brand guideline.
 |
| Fig 1.1 Reference 1, 25/10/22 |
 |
| Fig 1.2 Reference 2, 25/10/22 |
 |
| Fig 1.3 Reference 3, 25/10/22 |
 |
| Fig 1.4 Reference 4, 25/10/22 |
Grid & Type Specimen Sheet
Fig 2.1 Determining Grid System, 27/10/22
 |
Fig 2.2 Selected Grid System for Further Exploration, 27/10/22 |
Fig 2.3 Type Specimen Sheet, 27/10/22
 |
| Fig 2.4 Selected Typeface ( MADE Tommy Soft & Author), 27/10/22 |
Based on the three grid systems that I've determined, I selected the last grid system to explore more as we were required to create two grid systems (B&W) for chapter 1 of the guideline.
 |
Fig 2.5 Grid System #1, 1/11/22 |
 |
| Fig 2.6 Grid System #2, 1/11/22 |
Publishing Design Class & Feedback:
Both grids are fine and look consistent, but do be careful of the text hierarchy and text alignment. The navigational bar can be more creative, instead of just putting it at the top and bottom.
Week 11
This week, we were required to insert the visuals and apply the colour to the grid system (chapter 1) along with a unique navigational bar.
I propose two ideas for the navigational bar, one is at the top right corner and the other one is like a folder label concept.
Fig 3.1 Navigational Bar (Layout) #1, 8/11/22
Fig 3.2 Navigational Bar (Layout) #2, 8/11/22
BCI Class & Feedback:
I only presented the first layout to Ms.Lilian for some reason, I mentioned it to her, and she asked the second layout t me to experiment with it. For the first layout, Ms.Lilian said the variety of layout designs is good. Suggested adding more visuals in Chapter 1 since it is the only part where we have more opportunity to show the images. The layout design introduces all the brand colour and the rounded shape elements, which is good and consistent.
Publishing Design Class & Feedback:
Unlike what I showed Ms.Lilian, I showed the second layout to Mr.Vinod. For the second layout, Mr.Vinod asked me to be careful with my type setting as my body text was too tight and too close to each other. It is always good to start with this where I have the standard application and then I can look for areas where I can potentially break the design. The current attempt is very consistent but unimaginative at the same time. The navigational bar takes too much space and might be narrower a bit.
Week 12
This week, we were supposed to finish it as Mr.Vinod said, we may need more time to fix some errors in the interactive button. Hence, this week we will need to have a completed layout and workable interactive buttons.
Fig 4.1 Completed Layout #1, Interactive PDF, 15/11/22
Fig 4.2 Completed Layout #2, Interactive PDF, 15/11/22
BCI Class & Feedback:
Same as last week, I only presented the first layout to Ms.Lilian as it is my original attempt for this week. For the first layout, Ms.Lilian said everything looks good and I'm almost done. The only thing that needs to do amended is the colour of the navigational bar. Only use two colour in the navigational bar, if not it will confuse the readers. And lastly, I can add one contact information at the end of the guideline.
Publishing Design Class & Feedback:
After the BCI class, I do the amendment according to what Ms.Lilian suggested to me (besides the contact information at the end). So, I showed layout 2 to Mr.Vinod. He said everything is fine, clean, and consistent. The typeface can simplify to one typeface. The reason we use two typefaces is to introduce contrast, so two sans serif or two serif typeface is not recommended.
During the tutorial section on publishing class, while Mr.Vinod was giving my classmate feedback, I learned that I need to have a button to direct the reader to the content page. If not, the reader can only click the logo to go to the home page and then scroll to the content page. Hence, I added a button below the next page button.
 |
| Fig 4.3 Adding Content Page Button, 17/11/22 |
|
 |
| Fig 4.4 Progression, 17/11/22 |
|
According to Ms.Lilian, I just have to put the information that I've included on the envelope. I choose the design below as my final information page design due to the connection between the front cover.
 |
| Fig 4.5 Progression of information page, 17/11/22 |
After finishing everything in Adobe Indesign, I export it as an Interactive PDF that showcases my brand guideline to its best potential. Besides, I also tried to publish it online, but due to some reason, it doesn't work.
 |
| Fig 4.6 Error to publish online, 17/11/22 |
|
Fig 4.7 Final Completed Brand Guideline, 17/11/22
Navigation walk-through:
 |
| Fig 5.1 Navigational Bar Instruction, 17/11/22 |
 |
| Fig 5.2 Navigational Bar Rollover Effect -1, GIF, 17/11/22 |
 |
| Fig 5.3 Navigational Bar Rollover Effect - 2, GIF, 17/11/22 |
 |
| Fig 5.4 Navigational Bar Rollover Effect - 3, GIF, 17/11/22 |
Table of Content Page: Sub-heading- Rollover: Bigger font size
- Click: Bigger font size + Colour change (orange)
Table of Content Page: Body Text
- Rollover: Colour change (orange)
- Click: Same as normal
 |
| Fig 5.5 Interactive Buttons Rollover Effect - Content Page, 17/11/22 |
Sub-heading Content Page: Body Text
- Rollover: Uppercase + Colour change (green)
- Click: Uppercase + Colour change (orange)
 |
Fig 5.6 Interactive Buttons Rollover Effect - Sub Content Page, 17/11/22
|
|
Final Submission: Task 3B
Week 13
Fig 5.1 Final Brand Guideline Thumbnail, PDF, 22/11/22
 |
Page 1. Home Page, JPEG, 22/11/22
|
 |
Page 2. Table of Contents, JPEG, 22/11/22 |
 |
Page 3. About Us, JPEG, 22/11/22 |
 |
| Page 4. Welcome to HBH, JPEG, 22/11/22 |
 |
| Page 5. Vision & Mission, JPEG, 22/11/22 |
 |
| Page 6. Picture / Unsplash, JPEG, 22/11/22 |
 |
| Page 7. Brand Purpose, JPEG, 22/11/22 |
 |
| Page 8. Brand Value, JPEG, 22/11/22 |
 |
| Page 9. Target Market, JPEG, 22/11/22 |
 |
| Page 10. Brand Positioning, JPEG, 22/11/22 |
 |
| Page 11. Unique Selling Point, JPEG, 22/11/22 |
 |
| Page 12. Visual Guideline, JPEG, 22/11/22 |
 |
| Page 13. Logo Rationale, JPEG, 22/11/22 |
 |
| Page 14. Logo Variations, JPEG, 22/11/22 |
 |
| Page 15. Logo Clearspace, JPEG, 22/11/22 |
 |
| Page 16. Logo Space Rationalisation, JPEG, 22/11/22 |
 |
| Page 17. Logo Minimum Size, JPEG, 22/11/22 |
 |
| Page 18. Logo Appearance, JPEG, 22/11/22 |
 |
| Page 19. Improper Usage, JPEG, 22/11/22 |
 |
| Page 20. Typography, JPEG, 22/11/22 |
 |
| Page 21. Logo Colour, JPEG, 22/11/22 |
 |
| Page 22. Brand Colour, JPEG, 22/11/22 |
 |
| Page 23. Graphic Elements, JPEG, 22/11/22 |
 |
| Page 24. Applications, JPEG, 22/11/22 |
 |
| Page 25. Picture / iStock, JPEG, 22/11/22 |
 |
| Page 26. Business Card, JPEG, 22/11/22 |
 |
| Page 27. Business Card Mockup, JPEG, 22/11/22 |
 |
| Page 28. Letterhead, JPEG, 22/11/22 |
 |
| Page 29. Continuous Sheet, JPEG, 22/11/22 |
 |
| Page 30. Letterhead and Continuous Sheet Mockup, JPEG, 22/11/22 |
 |
| Page 31. Invoice, JPEG, 22/11/22 |
 |
| Page 32. Invoice Mockup, JPEG, 22/11/22 |
 |
| Page 33. Envelope, JPEG, 22/11/22 |
 |
| Page 34. Envelope Mockup, JPEG, 22/11/22 |
 |
| Page 35. Paper Bag, JPEG, 22/11/22 |
 |
| Page 36. Tote Bag, JPEG, 22/11/22 |
 |
| Page 37. Supply Box, JPEG, 22/11/22 |
 |
| Page 38. Name Card, JPEG, 22/11/22 |
 |
| Page 39. Name Card Mockup, JPEG, 22/11/22 |
 |
| Page 40. Loyalty Card, JPEG, 22/11/22 |
 |
| Page 41. Room Card, JPEG, 22/11/22 |
 |
| Page 42. Website, JPEG, 22/11/22 |
 |
| Page 43. Landing Page Mockup, JPEG, 22/11/22 |
 |
| Page 44. Social Media Mockup, JPEG, 22/11/22 |
 |
| Page 45. Store Front, JPEG, 22/11/22 |
 |
| Page 46. Store Sign, JPEG, 22/11/22 |
 |
| Page 47. Counter, JPEG, 22/11/22 |
 |
| Page 48. Interior, JPEG, 22/11/22 |
 |
| Page 49. Interior, JPEG, 22/11/22 |
 |
| Page 50. Contact Page, JPEG, 22/11/22 |
 |
| Fig 5.2 HBH Brand Guideline Mockup, JPEG, 22/11/22 |
Fig 5.3 Flip Book (for reading purposes), HTML, 22/11/22
Fig 5.4 HBH Brand Guideline, Interactive PDF, 22/11/22
*Please open with Google Chrome to view the guideline
Fig 5.5 HBH Brand Guideline Interactive PDF Demo, Video, 22/11/22
Publishing Design Feedback:
- Avoid putting the heading too close to the logo.
- One way to maintain people’s understanding of where they are is to put the main section name after the sub-heading with smaller font size.
- We can allow ourselves liberty since we don’t need to worry about how it’s gonna be printed.
- From the layout and consistency perspective, it works. The only problem is the text alignment, which is starting from a different height, and the hierarchy between the heading and sub-heading.
- Sometimes when we have a white border it feels like having a restriction, so having an image that touches the edges makes it feels like it is breaking the restriction. Everything is very graded right now, a way to improve is to have a radical element in the layout, which breaks the visual rigidity of the layout. It’s always good to establish this (what I’ve done here).
When the images are introducing a particular technical specification visual, it can’t be the radical elements. But if the visuals are meant to give a mood, they can.
Week 11
BCI Feedback:
- The variety of layout designs is good.
- Chapter 1 is the part we have more opportunity to throw in the images.
- Experiment with the abandon navigation bar idea.
- The layout design introduces all the brand colour and the rounded shape elements, which is good, and consistent.
Publishing Design Feedback:
- For the first attempt, I need to be careful with my type setting. The letters sit too close to each other. Screen reading is different from reading printed material. The minimum size for screen reading is 16pt.
- The visit & mission section needs to have a more exciting placement. Instead of just having a plain shape, I can add an image overlay on the background. The thing that I need to figure out is whether the navigation hovers over the image or the image stops where the navigation is.
- Can express the brand value in a more emotive or evocative way.
- It’s always good to initially start off like this where I have the standard application. And then I shud look for areas where I can potentially break the design. Break it, so that while it is still within the parameters it is different. Look for areas where I can actually express it slightly differently so I can take it off from a different tangent.
- The current attempt is very consistent but it’s very unimaginative. What I have is consistency, and what I need is creativity now. I need to bring the identity alive. Right now is something that is within a box and it’s staying within that box.
- There is a huge space there for the navigation bar.
Week 12
BCI Feedback:
- Introduce two colours in the navigation bar will do. One for the current page, one for the rest.
- Suggested adding the description to the typography pages.
- Need to add one more page with the contact information at the end.
Publishing Design Feedback:
- Add more leading for the content (buttons), it will be more easier for people to click using a phone or tablet.
- Maintain one interactivity.
- The layout is fairly clean, consistent, and graphical, feels like some tactile thing missing.
- There is no point to use two sans serifs in one design.
- The presentation of the application is clean, and bright as well.
This task mainly focuses on the layout and navigational bar, which I think should be more relaxed and manageable as most of the content we already generated in the previous assignment. But, to be honest, I feel more pressure in comparison with the rest assignment. I think there are several reasons that make me feel stressed. We have to come out with the layout of quite a big amount of pages, maintaining consistency and at the same time having creativity on making the next page unpredictable. I feel like this is the toughest part of this task. I always remember Mr.Vinod saying that the heading of a document should always be in the same place. So, to achieve this I tried really hard to have various layouts in my grand guideline. The other difficult part would be the navigational bar. We have to keep it simple, clear, functional, and at the same time unique and creative. I always think that a navigational bar should not distract the reader, so I don't want it to be too eye-catching than the content (?) So I tried to keep it quiet yet lively at the side. But in the end, I'm still satisfied with my navigational bar.
Observation
I learned that having different opinions and aesthetics is fine as everyone has different backgrounds and experiences. We should learn from the feedback given to our classmates and learn from the pros of their work. While having our own opinions and aesthetics, we should also learn from mainstream aesthetics as well.
Findings
I found that creating a logo is easy but building a brand is more than just a logo. The logo is always built by the background and identity. By having all those details we can only develop our brand. A strong brand should have a strong brand identity and position throughout everything.
Regardless of how smart your marketing department is, there may still be some misunderstandings about what brand guidelines are, what they can accomplish for you, and how important they are to establishing, preserving, and building a brand identity. The main problem is a semantic one. Depending on which "brand expert" you're speaking with, reading from, or listening to at the time, terms like "brand guidelines," "brand standards guide," "branding guidelines," "style guides," "brand books," and "brand identity guidelines" can either be treated synonymously or as completely separate resources. All of these terms essentially refer to the same concept. We must first comprehend what brand guidelines are and why they are important in order to build them.
The purpose of brand standards is to give your brand flexibility and consistency. Yes, designers frequently utilise them to check that the appropriate fonts, colour schemes, and logo variations are being used. Effective brand guidelines, nonetheless, ought to be far more than that. For wise businesses, brand identity standards are a tool that all employees can utilise to comprehend how to represent their company's brand.
The brand wheel is a five-part representation of those nuts and bolts. It includes attributes, benefits, core values, personality, and brand essence.
Comments
Post a Comment