PUBLISHING DESIGN // TASK 03B
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Publishing Design Task 03B
INSTRUCTIONS:
TASK 03B: Brand Guideline
✧ This task interlinked with another module I'm taking this semester, Brand Corporate Identity. The task was to create a brand guideline for the brand I've created in BCI class.
✧ Size: 1366px x 768px
Grid System
✧ The first step to creating the brand guide was to determine a grid system that works best for the brand
Fig 2.1 Determining Grid System
 |
Fig 2.2 Selected grid system
|
Black & White Draft Layout Attempt
✧ i first came up with two layout options in black and white to determine how the project shall start
 |
| Fig 3.1 Draft B&W layout #1 |
 |
Fig 3.2 Draft B&W layout #2
|
|
Colour Layout Attempt #1
✧ Implementing all that has been created in BCI into this task was easy but also at the same time challenging as there is the navigation bar to think of
✧ Personally, I had a hard time with the navigation bar as well as the cover page
 |
| Fig 4.1 Chapter 1 colour attempt #1 |
 |
Fig 4.2 Chapter 1 colour attempt #1
|
Colour Layout Attempt #2 ✧ |
 |
Fig 5.1 Chapter 1 colour attempt #2
|
|
 |
Fig 5.2 Chapter 1 colour attempt #2
|
Navigation Exploration
✧ Sir suggested we utilised the class time to explore more on how we can make the navigation bar more interesting. Taking inspiration from one of the stickers from the brand, I made a round navigation as shown on Fig 6.1.
✧ Sir mentioned that in terms of placement, it might look awkward and since I've already formatted a formula of using the top bar as the navigation. Sir suggested I do a drop down from the top bar.
 |
| Fig 6.1 Navigation exploration in class
✧ After some exploration, I settled on Fig 6.2's design.
✧This navigation design suits the brand, HUA HUA, the most, as it utilises the floral graphic element that is implemented in the collaterals.
✧Through this, I was also able to showcase the different colours in the buttons, which made the bar more interactive. |
|
 |
Fig 6.2 Final Navigation bar
✧ I then went on the linking each page accordingly, but faced the issue in Fig 6.3
✧It was then that I realised I used the wrong button, instead of "Go to destination", the correct button to use was "Go to Page" by using the bookmark function, as shown in Fig 6.4.
 | | Fig 6.3 Export Issue |
|
 |
| Fig 6.4 Bookmarks |
 |
Fig 6.5 Button application
|
Final Layout Thumbnails
✧ Final Layout Thumbnails
 |
| Fig 7.1 Final layout spread #1 |
 |
Fig 7.2 Final layout spread #2
|
|
 |
Fig 7.3 Final layout spread #3
|
|
 |
Fig 7.4 Final layout spread #4
|
|
 |
Fig 7.5 Final layout spread #5
|
|
 |
Fig 7.6 Final layout spread #6
|
Fig 7.7 Final layout thumbnail PDF
Final Layout in Pages JPEG
|
 |
| Fig 8.1 Final layout Cover Page |
 |
| Fig 8.2 Table of Contents |
|
 |
| Fig 8.3 About Us |
 |
| Fig 8.4 About Us |
 |
| FIg 8.5 Page divider |
 |
| Fig 8.6 Our Story |
 |
| Fig 8.7 Positioning Statement |
 |
| Fig 8.8 Page divider |
 |
| Fig 8.9 Brand Purpose |
 |
| Fig 8.10 Brand Value |
 |
| Fig 8.11 Vision & Mission |
 |
| Fig 8.12 Target Audience |
 |
| Fig 8.13 Page Divider |
 |
| Fig 8.14 Unique Selling Point |
 |
| Fig 8.15 Visual Guidelines |
 |
| FIg 8.16 Logo Rationale |
 |
| Fig 8.17 Logo Variation |
 |
| Fig 8.18 Alternative Logo Variation |
 |
| Fig 8.19 Logo Clearspace |
 |
| Fig 8.20 Page Divider |
 |
| Fig 8.21 Logo Space Rationalisation |
 |
| Fig 8.22 Alternative Logo Space Rationalisation |
 |
| Fig 8.23 Logo Minimum Size |
 |
| Fig 8.24 Improper Usage |
 |
| Fig 8.25 Page Divider |
 |
| Fig 8.26 Typography |
 |
| Fig 8.27 Logo Colour |
 |
| Fig 8.28 Colour |
 |
| Fig 8.29 Photography |
 |
| Fig 8.30 Graphic Elements |
 |
| Fig 8.31 Collaterals |
 |
| Fig 8.32 Namecard |
 |
| Fig 8.33 Namecard |
 |
| Fig 8.34 Letterhead |
 |
| Fig 8.35 Letterhead |
 |
| Fig 8.36 Invoice |
 |
| Fig 8.37 Envelope |
 |
| Fig 8.38 Envelope |
 |
| Fig 8.39 Full Stationary |
 |
| Fig 8.40 Page Divider |
 |
| FIg 8.41 Loyalty Card |
 |
| Fig 8.42 Loyalty Card |
 |
| Fig 8.43 Stickers |
 |
| Fig 8.44 Stickers |
 |
| Fig 8.45 Tote Bag |
 |
| Fig 8.46 Wrapping Paper |
 |
| Fig 8.47 Page Divider |
 |
| Fig 8.48 UIUX |
 |
| Fig 8.49 Social Media |
 |
| Fig 8.50 Store Signage |
 |
| Fig 8.51 Store Exterior |
 |
| Fig 8.52 Store Interior |
 |
| Fig 8.53 Store Interior |
 |
| Fig 8.54 Back Cover |
Navigation walk through (in GIF):
✧ Front & Back Navigation Buttons
| Fig 9.1 Front & Back Navigation Buttons |
✧ HUA HUA logo as Home Page Button
| Fig 9.2 HUA HUA logo as Home Page Button |
✧ Table of Contents Navigation Button
Fig 9.3 Table of Contents Navigation Button
Fig 9.4 Navigation Bar Button
Final Submission
Fig 10.1 HuaHua Brand Guideline Final PDF
Fig 10.2 HuaHua Brand Guideline Demo
FEEDBACK
Week 10
General feedback
✧ More exploration is needed for the navigation panel, placing the navigation on the typical top header would make it look like a website and generic.
✧ Keep in mind that when designing for an interactive PDF, we would need to think of the font size, would it work across all softwares
Specific feedback
✧ might want to create hierarchy for the headlines
✧ Menu is predictable
✧ the quotation part would need to change its position
✧ Mind the different spacing to make it more consistent
(2nd attempt in class)
✧ the method is unsophisticated and is looking stand offish. The leaves does not really help to indicate which page the reader is at.
Week 11
General Feedback
✧ It was advised that we can duplicate the files before adding the linking part of the navigation codes
Specific Feedback
✧ be careful of the image colour correction
✧ the current layout that I’ve created did not leave much room for navigation display play, sir suggested making the top navigation bar have a drop down on each of the categories, kind of like a website’s drop down
Week 12
General Feedback
✧ can add navigation on the first page, like the front and back buttons
✧ do not use 2 san serif typefaces in a pairing in a document, not advisable
Specific Feedback
✧ navigation looks good
✧ could add colour rollover for the table of contents portion.
✧ the line below each section’s header can be removed
✧ type can be changed, do not use san serif for both body and header.
✧ suggest to use only Lato family, utilise the different font weights
Final Specific Feedback
✧ W13, T3: Complete. Competency: Mastering (3b tough desing to create navigational elements for; but you did a good job of finding the right elements)
Experience
We've never had a module that requires us to have a crossover task before, so it was refreshing. As the contents have already been generated, it was relatively okay to transfer all details into the brand guideline. I find that starting the task with grid exploration is a solid way to build any foundation of any project that one is working on.
Observations
Navigation bar might look easy, but not, and is often taken granted for. It is an essential part of an interactive PDF that involved a lot of thinking to structure a cohesive navigation to bring audiences to the parts they wish to view. A navigation bar needs to be interesting yet serve its purpose of directing audiences to the page they'd like to read.
Findings
Brand guideline serves as a medium, a tool to convey all that one needs to know about a certain brand. As the name suggest, it is a guideline that the audience can adhere to without straying away from the original intend of the brand.
FURTHER READING
Navigation design: Almost everything you need to know
https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
The article first talks about what navigation design is:
✧ Navigation design implement ways for users to navigate through a web or app (in this task's case, an Interactive PDF).
✧ It also plays a huge role in user interaction
✧ A good navigation design enhances user's understanding, provides credibility to the product
✧ A functional navigation design is one that promotes usability, it increases the user experience
✧ It was also mentioned in the article that without a well thought out navigation bar, users may have trouble navigating
✧ The importance of navigation design are something that reflects the brand and also at the same time providing access to information
Comments
Post a Comment